Accordion - add @isStatic, @type, and @size
#2156
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
didoo
reviewed
Jun 17, 2024
This comment was marked as resolved.
This comment was marked as resolved.
andgen404
reviewed
Jun 17, 2024
Yes, we'll have a separate PR for the documentation updates. |
alex-ju
force-pushed
the
alex-ju/accordion-features
branch
from
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
Also moved from `box-shadow` (used for an inset border) to `border`
alex-ju
force-pushed
the
alex-ju/accordion-features
branch
from
673839d
to
2304da4
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 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
@typeand@sizeat theAccordionlevel but in practice, they are forwarded at theAccordion::Itemlevel as that's where they are needed.We'll recommend
isStaticbe applied to theAccordion::Itemas, 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@containsInteractiveistrueis 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.