feat(select): add component tokens #11178
Conversation
github-actions
bot
added
the
enhancement
…ciado88/7180-add-select-design-tokens
|
@alisonailea I'm having some issues testing some of the tokens, they're commented out in |
…ciado88/7180-add-select-design-tokens
| * @prop --calcite-select-text-weight: Specifies the font weight of `calcite-option`s in the component. | ||
| * @prop --calcite-select-spacing-inline: Specifies the inline padding of `calcite-option`s in the component. | ||
| * @prop --calcite-select-text-color: Specifies the text color of `calcite-option`s in the component. | ||
| * @prop --calcite-select-size: Specifies the component's width. |
There was a problem hiding this comment.
I don't think we need this one, as the user can specify this on the element itself.
| * @prop --calcite-select-spacing-inline: Specifies the inline padding of `calcite-option`s in the component. | ||
| * @prop --calcite-select-text-color: Specifies the text color of `calcite-option`s in the component. | ||
| * @prop --calcite-select-size: Specifies the component's width. | ||
| * @prop --calcite-select-block-size: Specifies the component's height. |
There was a problem hiding this comment.
I don't think we need this one, as the user can specify this on the element itself.
| * @prop --calcite-select-text-color: The text color of the component. | ||
| * @prop --calcite-select-font-size: Specifies the font size of `calcite-option`s in the component. | ||
| * @prop --calcite-select-text-weight: Specifies the font weight of `calcite-option`s in the component. | ||
| * @prop --calcite-select-spacing-inline: Specifies the inline padding of `calcite-option`s in the component. |
There was a problem hiding this comment.
This one shouldn't be exposed.
…ciado88/7180-add-select-design-tokens
…ciado88/7180-add-select-design-tokens
aPreciado88
added
the
pr ready for visual snapshots
|
@ashetland @SkyeSeitz Can you please take a look at the new screenshots? |
There was a problem hiding this comment.
Couple q -
@ashetland @SkyeSeitz - do we need to expose these text-weight / font-size properties here?
@alisonailea - there is just one focusable / hover-able container here - does this need the "--select-icon-color-hover" - or should a user use calcite-select:hover { etc... }
I know we needed to make a font weight change on the Select used in Date Picker, but I think these could stay internal for now |
aPreciado88
removed
the
pr ready for visual snapshots
aPreciado88
added
the
pr ready for visual snapshots
|
@ashetland Can you please take a look at the latest snapshots? |
aPreciado88
removed
the
pr ready for visual snapshots
aPreciado88
added
the
pr ready for visual snapshots
aPreciado88
added
pr ready for visual snapshots
aPreciado88
added
pr ready for visual snapshots
…ciado88/7180-add-select-design-tokens
github-actions
bot
added this to the 2025-01-30 - 3.0.0 Jan Breaking Change Release milestone
Related Issue: #7180
Summary
Add
selectcomponent tokens.--calcite-select-font-size: Specifies the font size ofcalcite-options in the component.--calcite-select-text-weight: Specifies the font weight ofcalcite-options in the component.--calcite-select-text-color: Specifies the text color ofcalcite-options in the component.--calcite-select-border-color: Specifies the component's border color.--calcite-select-icon-color: Specifies the component's icon color.--calcite-select-icon-color-hover: Specifies the component's icon color when hovered or active.