feat(dropdown, dropdown-item, dropdown-group): add component tokens with fallbacks #8870
Conversation
packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/dropdown/dropdown.scss
Outdated
Show resolved
Hide resolved
| @@ -1,12 +1,16 @@ | |||
| export const CSS = { | |||
| actionIndicator: "action-indicator", | |||
There was a problem hiding this comment.
Are these changes relevant to dropdown? I don't think dropdown components use it.
There was a problem hiding this comment.
It was an old class that already existed here but it wasn't in use. I added it back to remove the need for an unnecessary mixin in the styles.
| iconContainer: "icon-container", | ||
| indicatorText: "indicator-text", | ||
| indicatorWithIcon: "indicator-with-icon", |
There was a problem hiding this comment.
Nitpick: -- should be used as a delimiter to state/modifiers. Also, one could be dropped if either with or without icon is treated as the default (e.g., indicator + indicator--icon).
There was a problem hiding this comment.
These are the old classes. Would you like me to add these as a refactor within this PR?
There was a problem hiding this comment.
Gotcha. We can do this separately then. Might be good to do a quick audit just to see how we're doing there. Very low priority though.
packages/calcite-components/src/components/dropdown/dropdown.scss
Outdated
Show resolved
Hide resolved
| // Selection Indicator Icon | ||
| calcite-icon.dropdown-item-icon { | ||
| --calcite-icon-color: var( | ||
| --calcite-dropdown-item-indicator-color, |
There was a problem hiding this comment.
Sidebar: I think I've been implementing this pattern a bit differently (the public prop is resolved first when assigning internal CSS props). Will review and update accordingly.
packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
Outdated
Show resolved
Hide resolved
…components into astump/7180-dropdown
Related Issue: #7180
Summary
Dropdown
--calcite-dropdown-background-color: specifies the background color of the component.
Dropdown Item
--calcite-dropdown-item-background-color: specifies the background color of the component.
--calcite-dropdown-item-icon-color: specifies the color of an icon in the component.
--calcite-dropdown-item-text-color: specifies the text color of the component.
Dropdown Group
--calcite-dropdown-group-border-color: specifies the border color of the component.
--calcite-dropdown-group-text-color: specifies the text color of the component.
Split Button
--calcite-split-button-dropdown-background-color: defines the background color of the component's dropdown.