feat(combobox, combobox-item-group): add component tokens #11623
Conversation
github-actions
bot
added
the
enhancement
anveshmekala
changed the title
anveshmekala
added
the
pr ready for visual snapshots
| @@ -243,7 +252,10 @@ calcite-chip { | |||
| } | |||
|
|
|||
| .chip--active { | |||
There was a problem hiding this comment.
Q: @ashetland chip currently do not support this pattern of changing background-color when active, is this intentional?
There was a problem hiding this comment.
Yes this is intentional. However, this behavior was recently add for selectable chips in PR #11538. Since the chips in Combobox are not themselves selectable, I don't think we should add --calcite-combobox-chip-background-color-active.
There was a problem hiding this comment.
discovered that chip--active class NO effect on the chip backgroundColor. Setting backgroundColor of the chip at :host level wont work with chip offering a token to customize it.
This was working till 2.12.0 version and with chip tokenization 10179, backgroundColor no longer changes. After discussing with @ashetland , removing this class so that we preserve the backgroundColor of chip in combobox.
cc @ashetland , @macandcheese
| * @prop --calcite-combobox-icon-color: Specifies the component's icon color. | ||
| * @prop --calcite-combobox-icon-color-hover: Specifies the component's icon color when hovered. | ||
| * @prop --calcite-combobox-placeholder-icon-color: Specifies the component's placeholder icon color. | ||
| * @prop --calcite-combobox-listbox-background-color: Specifies the background color of the component's listbox. |
There was a problem hiding this comment.
Looking for naming suggestions.
anveshmekala
added
pr ready for visual snapshots
Related Issue: #7180
Summary
Adds following tokens in
comboboxcomponent :--calcite-combobox-input-height: Specifies the height of the component's input.--calcite-combobox-background-color: Specifies the component's background color.--calcite-combobox-text-color: Specifies the component's text color.--calcite-combobox-border-color: Specifies the component's border color.--calcite-combobox-icon-color: Specifies the component's icon color.--calcite-combobox-icon-color-hover: Specifies the component's icon color when hovered.--calcite-combobox-placeholder-icon-color: Specifies the component's placeholder icon color.--calcite-combobox-listbox-background-color: Specifies the background color of the component's listbox.Adds following tokens in
combobox-item-groupcomponent:--calcite-combobox-item-group-text-color: Specifies the text color of the component.--calcite-combobox-item-group-border-color: Specifies the border color of the component.