Closed kwm14 closed 5 years ago
Recent updates regarding icons in the framework.
New addition p-button has-icon
which features the icon on the left.
We made a conscious a decision to move icons to the left that are used in other components p-accordion
When designing we must reuse and keep existing styling from other components, so we're re-creating something new if not needed.
We now include the ability to add p-contextual-menu
to buttons as well as links.
Sub-navigation was a new addition which also features a toggle menu to open and close, which inherits consistent style except for hover which is coupled with navigation.
First exploration using existing Vanilla styles and MAAS implementation.
We made a conscious a decision to move icons to the left that are used in other components
- New addition p-button has-icon which features the icon on the left.
Thatâs good. However, a menubuttonâs triangle/chevron symbol is not an âiconâ in this sense. Consider that a menubutton might reasonably have an icon as well as the triangle/chevron symbol:
[ â Add ⟠] [ Modify ⟠]
In every toolkit that I know of, any menubutton symbol is on the right, regardless of whether it also has an icon.
We now include the ability to add
p-contextual-menu
to buttons as well as links.
âContextual menuâ is another name for a context menu â that is, the kind of menu usually opened by right-clicking, which contains items relating to the object you clicked on. Itâs a (small) barrier to understanding Vanilla that it uses the term âcontextual menuâ to mean something different. Ideally this would be deprecated over time, rather than expanding to more controls. Fortunately, the term âmenubuttonâ is already commonly used for a button that opens a menu when clicked. Perhaps it can be used for the class name here instead?
Thanks for your feedback @matthewpaulthomas đ
Thatâs good. However, a menubuttonâs triangle/chevron symbol is not an âiconâ in this sense. Consider that a menubutton might reasonably have an icon as well as the triangle/chevron symbol:
It's an icon in Vanilla which is why referenced it, but like you say it doesn't and may not always be that icon/chevron. I will update the design and move the icon to the right đ
Fortunately, the term âmenubuttonâ is already commonly used for a button that opens a menu when clicked. Perhaps it can be used for the class name here instead?
Happy to update the name of the newly proposed component from dropdown-button
to your suggestion menubutton
, as it's commonly used đ
Taking feedback into consideration. Ready for re-review @matthewpaulthomas @spencerbygraves đ
@kwm14 thanks, visual looks good.
It's an icon in Vanilla
Well, now the chevrons are in their usual place đ ⊠But now the + icon has gone to the wrong side. đ You were correct to put the icon on the left.
To solve this I think we need to make a distinction between an icon, a custom thing that represents the meaning of an individual control, and a behaviour symbol that conveys how you interact with this type of control. (You might be able to think of a better name than âbehaviour symbolâ!)
These four images are currently treated by Vanilla as âiconsâ, but are really behaviour symbols. You can tell this because itâs common for a control that has one of these symbols to also have an icon:
p-icon--expand
and p-icon--collapse
p-icon--drag
p-icon--contextual-menu
But now the + icon has gone to the wrong side. đ You were correct to put the icon on the left.
Ah yes, good spot. Will update đ
To solve this I think we need to make a distinction between an icon, a custom thing that represents the meaning of an individual control, and a behaviour symbol that conveys how you interact with this type of control. (You might be able to think of a better name than âbehaviour symbolâ!)
Interesting, you make a valid point đ to help us and users of the framework we could pull out âbehaviour symbolsâ into a new section under icons. Similarly to how Salesforce do for their icon library. That way we know which icons are to be used for controls/behaviour/actions icons for particular components in the framework đ
I'll create an issue to update our icon list and we can work together on the page đ
Updated icon position to the left đ @matthewpaulthomas
Created an Epic to relook at our Icon library and categorize properly đ
Itâs unusual for a menubuttonâs triangle/chevron to flip when the menu is open, but I guess thatâs a matter of taste. Good work otherwise.
Thanks. Next steps to create an MD design spec for build đ
Implemented in MAAS