feat(list, list-item, list-item-group): add component tokens #10669
Conversation
# Conflicts: # packages/calcite-components/src/components/list-item/list-item.e2e.ts # packages/calcite-components/src/custom-theme.stories.ts
I think list-item does need stateful tokens. Hovering the whole host shouldn't change the background color. That wouldn't work for nested items. |
| * | ||
| * These properties can be overridden using the component's tag as selector. | ||
| * | ||
| * @prop --calcite-list-background-color: Specifies the component's background color. |
There was a problem hiding this comment.
I’d expect to support “—calcite-list-item-background-color” as well.
Consider this use case which is representative of how most of our users want to theme: https://community.esri.com/t5/calcite-design-system-questions/change-listitem-background-color-in-code/m-p/1557125#M767
There was a problem hiding this comment.
We are limiting tokens when shared between grouped components. This is documented in the wiki.
There was a problem hiding this comment.
How is this different than Accordion Item / Accordion - where we have -item-background-color? #10181
There was a problem hiding this comment.
Yeah I was wondering this as well. There are some inconsistencies here
There was a problem hiding this comment.
@alisonailea can you comment on the above? Currently, it seems like parent/child tokens are inconsistent.
There was a problem hiding this comment.
The “item tokens” path seems the easiest to follow both as a maintainer (IMO) and as someone who uses these theming options frequently day to day.
Using the Community post as just one example, it also seems to align with expectations from external folks - theming the element you want to adjust with component-specific nomenclature / rules.
There was a problem hiding this comment.
Need direction on this one. @alisonailea
| * These properties can be overridden using the component's tag as selector. | ||
| * | ||
| * @prop --calcite-list-background-color-hover: Specifies the component's background color when hovered. | ||
| * @prop --calcite-list-background-color-press: Specifies the component's background color when pressed. |
There was a problem hiding this comment.
Similar to above, does this need to be “list-item” - what hover would we actually be theming here on the parent?
There was a problem hiding this comment.
we are limiting tokens when shared between grouped components. This is documented in the wiki.
There was a problem hiding this comment.
Yeah it is a bit weird to be targeting the parent hovering when its really the items being hovered.
# Conflicts: # packages/calcite-components/.stylelintrc.cjs # packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts # packages/calcite-components/src/components/list-item/list-item.e2e.ts # packages/calcite-components/src/components/list/list.e2e.ts
# Conflicts: # packages/calcite-components/src/custom-theme.stories.ts
|
@alisonailea @macandcheese can you review again? |
Related Issue: #7180
Summary
adds new component tokens, e2e tests, demo page examples, and chromatic theme tests.
New CSS variables
List
--calcite-list-background-color: Specifies the component's background color.
ListItem
--calcite-list-background-color-hover: Specifies the component's background color when hovered.
--calcite-list-background-color-press: Specifies the component's background color when pressed.
--calcite-list-background-color: Specifies the component's background color.
--calcite-list-border-color: Specifies the component's border color.
--calcite-list-content-color: Specifies the content color.
--calcite-list-description-color: Specifies the description color.
--calcite-list-icon-color: Specifies the component's icon color.
--calcite-list-label-color: Specifies the label color.
--calcite-list-selection-border-color: Specifies the component's selection border color.
ListItemGroup
--calcite-list-background-color: Specifies the component's background color.
--calcite-list-color: Specifies the component's color.