You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
So I think the approach here will have to be - when isFlush:
There should be no padding on the accordion item(s) so that the title text and chevron sit flush with the left and right edge of the border
The focus/active/hover/etc. states should extend beyond the width of the accordion container
One way we can approach the focus/etc. states would be to use a pseudo element on the pseudo-class and give it something like
.cds--accordion__heading:focus::after {
content: "";
display: block;
position: absolute;
inline-size: calc(100%+$spacing-05+$spacing-05);
block-size: calc(); // this height will need calculated somehow based on 1rem (the default font size) + interior top/bottom padding or margin within the iteminset-inline-start: $spacing-05;
... additionalfocusringstylingorwhateverelse
}
.cds--accordion__heading:hover::after {
// ... hover styles
}
// ... etc states
This should ensure the overall accordion width is the same when isFlush and !isFlush, while allowing the states to visibly extend beyond the outside edges of the component.
Package
@carbon/react
Browser
Safari
Package version
1.51.1
React version
No response
Description
According to the design guidance, the Accordion titles are flush with the dividing lines when using the
isFlush
variant.In the storybook, this not the case currently:
Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-accordion--playground&args=isFlush:!true
Steps to reproduce
Enable
isFlush
in the storybook's controls.Suggested Severity
Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.
Application/PAL
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: