Status
The status of the component
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Documentation link
A connected documentation page in Supernova
Code Sandbox
undefined
Anatomy
Default
- Label: This is where the selected/system defined text label is located. If the inline dropdown fills 100% of the available space within a given table cell, then the overflow text is condensed into a truncation state.
- Gap: There is a gap of 12px between the label and chevron dropdown icon.
Hover
- Chevron Color - While the bg of the dropdown is transperant on hover (aligning to the row hover accent of the table) the chevron icon changes color to reflect this interaction
Active
- Selected Accent: When the inline dropdown is selected the background is changed to the selected color to signify the change in visual appearance.
- Transformed Chevron: When selected the chevron, specifically the “custom-chevron-up”, is used. The color of this icon is changed also.
- Status glyph shown: When possible, the visual status icon/glyph should appear within the dropdown menu in order for users to quickly glance and review status related options, even in instances when the status icon is not shown in the dropdown label itself.
- Menu options: The maximum number of options that can be shown within the dropdown menu is three. This is due to there being only four total status icons and to avoid overly lengthly status menus. This limitation is not due to the maximum number of available icons, but an intentional limitation to avoid duplicate use statuses.
Usage
Table Only Placement
The inline dropdown has been designed specifically for our table component and as such we recommend avoiding it’s use in non-table elements.
Do
Use the inline dropdown within tables, specifically making use of the “inline dropdown” property in the In-Table Cell. Simply switch out the table cell to the In-Table Cell to nest the inline dropdown in your table UI experiences.
Don't
Don’t use the inline dropdown outside of table experiences. The component is composed in a way that may interfere/clash with other components due to it’s spacing/padding make up.
Caution
Rather than our inline dropdown, consider making use of the standard dropdown to facilitate this intended functionality.
Sparing Use
The inline dropdown is designed to grab the attention of the user when placed in a table. This creates noise and when overused could distract users from important pieces of information and overwhelm the given interface.
Do
Limit the number of inline dropdown associated table columns to one. This allows for increased ease of use and scan-ability of status shown in this column.
Don't
Apply labelling for each semantic status consistently.
Clear Distinction of Statuses
Within the inline dropdown component we make use of semantic statuses (positive, neutral/warning, negative and information). Statuses and their labels should align to this and be clear.
Do
Apply labelling for each semantic status consistently.
Don't
Avoid using different status labels against the same semantic status glyph. Additionally, prevent using long status labels for readability and avoid the application of truncation to your status label.
Dropdown Truncation
Within the inline dropdown component we make use of truncation in the dropdown menu to prevent overly obscuring the other content in a table.
Do
Reframe from overly obscuring the table that holds the inline dropdown. Where possible to make use of appropriate truncation.
Don't
Don’t apply dropdown menus to obscure table content unduly.
Content
Semantic Status Usage
Below is guidance on that most applicable use of an interaction to to an associated semantic status. This is not comprehensive overview of all the use cases but might as a guide.
|
Key |
Interaction |
|---|---|
|
Positive |
Active, Ready, In-use, Available, Connected, Enabled |
|
Neutral/Warning |
In-progress, Work-in-progress, Incomplete, Processing, On-hold |
|
Negative |
Deleted, Error, Failed, Blocked, Invalid. Terminated |
|
Information |
Alert, System-update. Notice, Status, Notification, Advisory |
Related Components