New Menu Component - Design Guideline​

[hwangdev97]

Description

The "menu" component needs to have the following:

the figma link

Items

1.Base list items:

It should support the option to show or hide the following attributes:

• Drag indicator on the left
• Left icon
• Text information
• Right icon
• Secondary arrow on the right

It should be able to display different states:

• Default
• Hover
• Selected: Requires two styles, one associated with the right icon.
• Disabled

Size information:

2. Title list item

The title column defaults to uppercase text.

The title column has:

• Left icon (usually for returning)
• Text (default is uppercase)
• Action button: the action button has a hover state.

Size info:

3. Divider

0.5px, default is dividerColor.

4. delete list item

Typically, the delete button should be at the bottom of the list, separated by a divider above it. The hover state for the delete button is red.

Size info:

5. Search Item

The style of the search item is relatively independent. Typically, the search item appears at the top of the list, separated by a divider:

Size info

6. Input Item

It's basically consistent with the search item. Typically, the input item appears at the top of the list, separated by a divider.

And input item need support tooltips，only when hover:

Size info:

Layout

the layout of menu:

and the submenu:

the mini width of menu is 180px

== Check the the figma link ==