Dropdown destructive option styles
Description
Update destructive option styles in dropdowns
States to match tertiary destructive buttons
Follows on from gitlab-org/gitlab-services/design.gitlab.com#1676 (closed)
Figma file
Checklist
Make sure the following are completed before closing the issue:
-
Assign the correct component label to this issue. -
Create an MR with the additions or updates needed. -
Be sure to get your MR reviewed by a FE/UX Foundations designer. -
When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one. -
When applicable, create an MR in Pajamas to update the component status. -
When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. -
When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. -
When introducing a major or breaking change, communicate the changes within the Engineering Week in Review. -
🎉 Congrats, you made it! You can now close this issue.
Implementation plan (proposal)
-
GlDisclosureDropdown
'sitems
prop should accept aisDestructive
flag, e.g.:
<gl-disclosure-dropdown
:items="[
{
text: 'Delete',
isDestructive: true,
},
]"
/>
-
GlDisclosureDropdownItem
accepts aisDestructive
prop which controls agl-new-dropdown-item-destructive
class being added to the item's root element. Keep in mind that consumers can useGlDisclosureDropdownItem
directly, so the ability to render a destructive option should be as simple as possible, either by exposing a prop, or a dedicated component. The latter is likely over the top though. -
Write relevant CSS to apply the destructive looks to the gl-new-dropdown-item-destructive
class. -
As part of the integration MR, consider migrating custom-built destructive items to the built-in variation. Custom solutions usually leverage the gl-text-red-500
utility. Occurrences should be findable by running the following:
rg "gl-text-red-500" $(rg --files-with-matches "<gl-disclosure-dropdown-item" {./ee/,./}app/assets/javascripts)
Edited by Paul Gascou-Vaillancourt