feat(dropdown): add component tokens #11465
Conversation
packages/calcite-components/src/components/dropdown/dropdown.scss
Outdated
Show resolved
Hide resolved
| * | ||
| * @prop --calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered. | ||
| * @prop --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active. | ||
| * @prop --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. |
There was a problem hiding this comment.
Nitpick: It does seem like having a "base" for text-color but not icon-color here is a bit unexpected if there is a hover state for icon-color. These would be the icon-start/end right?
There could be a need to have those be distinct and independent from other overrides like the selection icon color, but we can add as requested!
There was a problem hiding this comment.
I agree but I think we should wait for our customers to tell us.
There was a problem hiding this comment.
While testing the CSS variables/tokens I'm also observing the same. This seems odd, and when I read the CSS variable I assumed it was related to the icon-start and icon-end props. We do this for other components, such as tab-title, maybe we need to also accommodate for dropdown-item for consistency.
| @@ -135,13 +136,13 @@ export class DropdownGroup extends LitElement { | |||
|
|
|||
| override render(): JsxNode { | |||
| const groupTitle = this.groupTitle ? ( | |||
| <span ariaHidden="true" class="dropdown-title"> | |||
| <span ariaHidden="true" class={CSS.title}> | |||
…mp/dropdown # Conflicts: # packages/calcite-components/src/components/dropdown/dropdown.e2e.ts # packages/calcite-components/src/custom-theme.stories.ts
alisonailea
added
the
pr ready for visual snapshots
alisonailea
added
pr ready for visual snapshots
| * @prop --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active. | ||
| * @prop --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. | ||
| * @prop --calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active. | ||
| * @prop --calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active. |
There was a problem hiding this comment.
@alisonailea It seems this also pertains to on hover, is that expected?
Related Issue: #7180
Summary
Add Component Tokens
Dropdown
--calcite-dropdown-background-color
Dropdown Group
--calcite-dropdown-group-border-color: Specifies the color of the dropdown's border.
--calcite-dropdown-group-title-text-color: Specifies the color of the dropdown's title.
Dropdown Item
--calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered.
--calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active.
--calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered.
--calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active.
--calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active.
--calcite-dropdown-item-text-color: Specifies the color of the dropdown item text.