Closed Bug 969484 Opened 9 years ago Closed 9 years ago

[VDR][Settings] Apply Buttons and Input areas [BB]


(Firefox OS Graveyard :: Gaia::Settings, defect)

Not set


(b2g-v2.0 fixed)

1.4 S6 (25apr)
Tracking Status
b2g-v2.0 --- fixed


(Reporter: pivanov, Assigned: pivanov)



(Whiteboard: ux-tracking, visual design, visual-tracking, bokken )


(3 files)

No description provided.
Depends on: 967843
Summary: [VDR][Settings] → [VDR][Settings] Apply Buttons and Input areas [BB]
Attached file patch for Gaia/master
Attachment #8373151 - Flags: review?(arnau)
Please do not merge this, as this feature could be for 1.5, waiting for Jaime confirmation
In wifi > Advanced settings looks like "manage networks" buttons has disappeared in this PR.
Could you please check that?
Hey Arnau,

Thanks for this one :) I fixed the problem
Flags: needinfo?(arnau)
But let's wait for 1.5 :(
Flags: needinfo?(arnau)
Attachment #8373151 - Flags: review?(fabien)
Attachment #8373151 - Flags: review?(fabien) → review?(ehung)
Attachment #8373151 - Flags: review?(ehung) → review?(arthur.chen)
Comment on attachment 8373151 [details] [review]
patch for Gaia/master

Based on my understanding, the refreshed UX spec defines two types of buttons in settings app: action button and list button. Currently two types of elements (<button> and <a class="menu-item">) in settings app both behave as a list button. IMHO we should replace all <button> with <a class="menu-item"> before the visual refresh. Does it make sense to you?
Attachment #8373151 - Flags: review?(arthur.chen)
Flags: needinfo?(pivanov)
Most buttons in Setting are list buttons.
The way they get the styles only depends if they are inside a ul li tags (lit buttons).
That applies both button and a[role="button"], so I don't think we need to change tag names.
But it would be good after landing this patch, going through all screens with the interaction/visual design team and fine-tune all buttons, in case any of the was using the wrong type.
Flags: needinfo?(pivanov)
I was just thinking if they look the same and behave the same, the html code should also be the same. Or did I miss the differences among these types of items?
List buttons are meant to choose between a large option.
Default or "special" buttons (rounded ones) are those to trigger a main action.
A good example to see the difference is in modals:
Attached image comparison
Arnau, it seems that we are referring to different list buttons. :p

The attachment shows the result after applying the patch. The list buttons now look like ordinary list items (list buttons in the incoming UX spec).

Harley, Przemek, could you explain more about this? Thanks.
Flags: needinfo?(pabratowski)
Flags: needinfo?(hhsu)
Ooops sorry, had not seen the image.
Please refer to this image:
to see all available buttons we have after the refresh.

The one you are asking for has already been approved by Przemek.
This is our default list button to show something will be opened in another screen.
And has no border :)
Yes this is now the intended look for a list item that takes you to a new page.
Flags: needinfo?(pabratowski)
Hi Arnau,
I think what Arthur means is that the main page in Settings should also be list button, and to do so, we may need to change the current type of button for main Settings page. I had an offline discussion with Przemek, he also agrees that main page for Settings should use list button.
Flags: needinfo?(hhsu)
I've seen several places in Settings where we should be using the arrow buttons (let's call it that way, because list buttons are the squared ones).
Does make sense if we land this patch only to use the new styles and create a follow up to fix incorrect types?
Hi Arnau, I am fine with landing the patch and using another bug to change the incorrect types. I'd just like to ensure that the HTML structure for arrow buttons remains the same as the following:

  <a href="#panelId"></a>

This is more straightforward for expressing the behavior of navigating to other panels.
You could use both buttons and anchors (using role="button") with class="icon icon-view" inside a list:
        <button class="icon icon-view">
          Side navigation
        <a role="button" class="icon icon-view">
          Side navigation
Attachment #8373151 - Flags: review?(arthur.chen)
Comment on attachment 8373151 [details] [review]
patch for Gaia/master

Please check the comments in github, thanks.
Attachment #8373151 - Flags: review?(arthur.chen)
Attachment #8373151 - Flags: review?(arnau) → review?(arthur.chen)
Comment on attachment 8373151 [details] [review]
patch for Gaia/master

r=me, thanks!
Attachment #8373151 - Flags: review?(arthur.chen) → review+
Thanks :) 

Landed on master:
Closed: 9 years ago
Resolution: --- → FIXED
Target Milestone: --- → 1.4 S6 (25apr)
You need to log in before you can comment on or make changes to this bug.