Skip to content

fix(accordion): align styling with Figma + fill Storybook/test gaps#223

Merged
codingwolf-at merged 5 commits into
mainfrom
fix/components-design
Jul 9, 2026
Merged

fix(accordion): align styling with Figma + fill Storybook/test gaps#223
codingwolf-at merged 5 commits into
mainfrom
fix/components-design

Conversation

@codingwolf-at

@codingwolf-at codingwolf-at commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Summary

Bring the Accordion in line with its Figma spec and close missing Storybook/test coverage.

Styling fixes (Figma parity)

  • Leading trigger icon: 16×16 → 14×14
  • Panel content font size: 14px → 13px
  • Added the missing top padding on panel content
  • Fixed disabled dimming: trigger now dims on Base UI's data-disabled/aria-disabled (item-level disable never sets native disabled, so :disabled alone never matched)

Stories & tests

  • Disabled — showcase + behavior test (data-disabled/aria-disabled, click is a no-op, sibling still toggles)
  • Controlledvalue/onValueChange story with external Expand/Collapse-all controls + test
  • RTL — story + CSS canary asserting the caret's RTL-mirrored rotation
  • Long-text — wrapping story + canary (multi-line row, no horizontal overflow)
  • Multiple — verified already covered by MultipleItemsInteraction

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • Feature (non-breaking change which adds functionality)
  • Improvement (change that would cause existing functionality to not work as expected)
  • Code refactoring
  • Performance improvements
  • Documentation update

Screenshots and Media (if applicable)

NA

Test Scenarios

  • vp check clean
  • vp test green (793 tests)

References

NA

@github-actions

github-actions Bot commented Jul 8, 2026

Copy link
Copy Markdown

📚 Storybook preview: https://pr-223-propel-storybook.vamsi-906.workers.dev

- Added `Disabled` story to demonstrate the behavior of disabled accordion items, ensuring proper interaction and accessibility.
- Introduced `Controlled` story to showcase how external state management can control the accordion's open panels, including "Expand all" and "Collapse all" buttons.
- Updated existing stories to improve clarity and functionality, ensuring consistent user experience across different accordion states.
- Enhanced documentation and comments for better understanding of the accordion's behavior in various scenarios.
@codingwolf-at codingwolf-at changed the title Accordion Fixes [WIP] fix(accordion): align styling with Figma + fill Storybook/test gaps Jul 8, 2026
…endering

- Changed accordion panel variant class from "text-13 text-secondary" to "text-13 font-regular text-secondary" to enhance text appearance and maintain consistency across accordion components.
- Eliminated the `AccordionTriggerIcon` component to simplify the structure of the `AccordionTrigger`.
- Updated the `AccordionTrigger` to directly render the icon, enhancing flexibility and reducing unnecessary complexity.
- Adjusted related stories and variants to reflect the removal of the icon component, ensuring consistent behavior across the accordion elements.
@codingwolf-at codingwolf-at merged commit 5f56f18 into main Jul 9, 2026
2 checks passed
@codingwolf-at codingwolf-at deleted the fix/components-design branch July 9, 2026 08:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants