Skip to content

[Accordion Item] update heading and description styling for system consistency #12306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
2 of 10 tasks
ashetland opened this issue Jun 6, 2025 · 1 comment
Open
2 of 10 tasks

[Accordion Item] update heading and description styling for system consistency #12306

ashetland opened this issue Jun 6, 2025 · 1 comment
Labels
0 - new New issues that need assignment. design Issues that need design consultation prior to, or during, development. enhancement Issues tied to a new feature or request. monday.com sync Monday.com sync needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. p - low Issue is non core or affecting less that 10% of people using the library ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.

Comments

@ashetland
Copy link
Contributor

ashetland commented Jun 6, 2025 •
edited
Loading

Check existing issues

Description

For system consistency and alignment with audit in #7623, update the styling and spacing of Accordion Item's heading and description.

Acceptance Criteria

  • Remove margin-top on description
  • Change heading and description line-heights to --calcite-font-line-height-relative-snug
  • Reduce font-size of description
    • small: --calcite-font-size--3
    • medium: --calcite-font-size--2
    • large: --calcite-font-size--1
  • Change heading style when collapsed
    • font-weight: --calcite-font-weight-normal
    • color: --calcite-color-text-1

🔗 Figma specs. Medium scale example below.

Image

Relevant Info

No response

Which Component

Accordion Item

Example Use Case

No response

Priority impact

impact - p3 - not time sensitive

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

monday.com sync: #9324362916
@ashetland ashetland added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jun 6, 2025
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Jun 6, 2025
@ashetland ashetland added design Issues that need design consultation prior to, or during, development. monday.com sync Monday.com sync p - low Issue is non core or affecting less that 10% of people using the library ready for dev Issues ready for development implementation. and removed Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Jun 6, 2025
@github-actions github-actions bot removed the needs triage Planning workflow - pending design/dev review. label Jun 6, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 6, 2025

cc @geospatialem, @brittneytewks

@github-actions github-actions bot added the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jun 6, 2025
@ashetland ashetland mentioned this issue Jun 6, 2025
Open
13 tasks
@ashetland ashetland added the visual changes Issues with visual changes that are added for consistency, but are not backwards compatible. label Jun 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0 - new New issues that need assignment. design Issues that need design consultation prior to, or during, development. enhancement Issues tied to a new feature or request. monday.com sync Monday.com sync needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. p - low Issue is non core or affecting less that 10% of people using the library ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ashetland