-
Notifications
You must be signed in to change notification settings - Fork 42
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.
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
Accordion
- add @isStatic
, @type
, and @size
#2156
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git βοΈ
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Had a first pass and left a few comments.
This comment was marked as resolved.
This comment was marked as resolved.
Yes, we'll have a separate PR for the documentation updates. |
bdeb60a
to
60821a2
Compare
Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
Were only being used in a single instance
e637cb5
to
a78c9f9
Compare
Rebased after #2181. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Visually Lgtm π
π Summary
Accordion
- add the following arguments:@isStatic
:false
(default) ortrue
@type
:card
(default) orflush
@size
:large
,medium
(default), orsmall
π οΈ Detailed description
We'll recommend users apply
@type
and@size
at theAccordion
level but in practice, they are forwarded at theAccordion::Item
level as that's where they are needed.We'll recommend
isStatic
be applied to theAccordion::Item
as, based on the audit, it is always required for only some of the items in an accordion.With so many variations I restructured the showcase quite a few times, trying to catch as many combinations as possible, but if you have advice for improvements please let me know.
Accessibility considerations
The target size for the accordion button (
hds-accordion-item__button
) when@containsInteractive
istrue
is less than 24px (for medium and large), but we provide enough padding around the button following the WCAG guidance. However, the automated accessibility testing fails on these items (despite passing axe DevTools 4.9.1 in Chrome). I want to get @MelSumner's feedback before attempting to add an exception for these instances.π External links
Jira ticket: HDS-3302
Figma file
π Component checklist
π¬ Please consider using conventional comments when reviewing this PR.