Add Borderless variant to Accordion
#2446
Conversation
| @@ -82,6 +82,9 @@ export const components = ({ | |||
| borderRadius: 0, | |||
| boxShadow: "none", | |||
|
|
|||
| '&[data-ods-type="accordion"][data-ods-variant="borderless"]': { | |||
There was a problem hiding this comment.
Probably don't need the extra selector here
| '&[data-ods-type="accordion"][data-ods-variant="borderless"]': { | |
| '&[data-ods-variant="borderless"]': { |
There was a problem hiding this comment.
Good call, initially I thought having type="accordion and variant="borderless" would be helpful for targeting but since we don't have global CSS there shouldn't be confusion, plus it's one less attribute to pass.
| @@ -81,6 +88,8 @@ const Accordion = ({ | |||
| return ( | |||
| <MuiAccordion | |||
| data-se={testId} | |||
| data-ods-type="accordion" | |||
| data-ods-variant={variant} | |||
| defaultExpanded={isDefaultExpanded} | |||
| disabled={isDisabled} | |||
| disableGutters | |||
There was a problem hiding this comment.
@benlister-okta In the borderless version, do we want the gutters? So, if we have 2 of these next to each other, they give each other space?
There was a problem hiding this comment.
That seemingly only applies when they are open though... wonder if we want to add some margin if these are next to each other. Any thoughts?
There was a problem hiding this comment.
In Figma we have them without a gutter and I think it could work in code the same way. It may depend on the context but since the content is passed in via ReactNode, the consumer could also control this technically.
| @@ -82,6 +82,14 @@ export const components = ({ | |||
| borderRadius: 0, | |||
| boxShadow: "none", | |||
|
|
|||
| "&.MuiPaper-root.MuiAccordion-root[data-ods-variant='borderless']": { | |||
There was a problem hiding this comment.
Does this not work with just &[data-ods-variant='borderless']? Feels like it should
There was a problem hiding this comment.
It seems to need the specificity for some reason. Previously I had the 2 data attributes and that worked, but for some reason, it gets overridden without the parent class attached 🤷🏼♂️
benlister-okta
force-pushed
the
bl_accordionfix
branch
from
bbc17cc to
158c29e
Compare
DES-6886
Summary
borderlessvariant to accordion to match FigmastringnotReactNode)Testing & Screenshots