calcite-design-system
calcite-design-system copied to clipboard
Esri
Expose CSS variable to style accordion item header in active state
Description
When an accordion item is selected within an accordion, provide a css variable to configure the color of just the accordion item header to more obviously indicate that it is selected.
There appears to be --calcite-accordion-item-background but that seems to color the entire accordion background (header and contents).
Acceptance Criteria
Relevant Info
No response
Which Component
calcite-accordion-item
Example Use Case
No response
Thoughts @asangma ?
Before adding something like this I’d like to try making the active accordion item more obvious by default than providing this variable, we run into issues here as some accordion appearance types has no x-padding on the header.
This also came up in a Community post on 9/21/2022 to modify the header color.
As mentioned in the description above the background can be changed. Additionally, a customized border and icon color (if present) can be accessed, but not the header or description text color.
A Codepen example for context: https://codepen.io/geospatialem/pen/dyezJQN
While not related to accordion-item, a similar question was asked on Community on 2/22/2023 related to block headings.
Perhaps a pattern we could consider across components with heading attributes?
Still not sure we need to allow for this level of customization. The accordion example at least has a correlation to open state.
The community post is invalidly nesting blocks and asking to make some headings bold. I don’t think that is a pattern we should document or recommend.
Will revisit once tokens have been implemented to determine next feasible steps.
Agree with the above that the requested level of customization may not be advisable — Accordion Items can't be selected, only expanded or collapsed. It may be worth looking at some padding tweaks to make the expanded state more clear. See Carbon's Accordion as an example.
Agree - tokens would allow this level of customization as well depending on granularity of token exposed per component.