Design menu button

[kwm14]

Implemented in MAAS

[kwm14]

Notes to mention

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

  

[kwm14]

Dropdown menu

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.

[kwm14]

Initial design

First exploration using existing Vanilla styles and MAAS implementation.

• Proposed Vanilla default to the left and applied to MAAS on the right
• @spencerbygraves ready for review 👍

001

[matthewpaulthomas]

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?

[kwm14]

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 👍

[kwm14]

Updated design

Taking feedback into consideration. Ready for re-review @matthewpaulthomas @spencerbygraves 👍

002

[spencerbygraves]

@kwm14 thanks, visual looks good.

[matthewpaulthomas]

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

[kwm14]

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 😃

[kwm14]

Updated icon position to the left 👍 @matthewpaulthomas

004

[kwm14]

Created an Epic to relook at our Icon library and categorize properly 😃

[matthewpaulthomas]

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.

[kwm14]

Thanks. Next steps to create an MD design spec for build 👍