feat(accordion): add align prop to component and skeleton to change heading alignment #4754
Conversation
ghost
requested review from
jendowns
changed the title
| @@ -23,6 +23,22 @@ | |||
| width: 100%; | |||
| } | |||
|
|
|||
| .#{$prefix}--accordion--start { | |||
| .#{$prefix}--accordion__heading { | |||
There was a problem hiding this comment.
Could you un-nest selectors here?
There was a problem hiding this comment.
Thanks @joshblack! Just pushed an update that unnests these selectors 👍
|
Deploy preview for carbon-components-react ready! Built with commit bf7fd67 https://deploy-preview-4754--carbon-components-react.netlify.com |
|
Deploy preview for the-carbon-components ready! Built with commit bf7fd67 https://deploy-preview-4754--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit bf7fd67 |
|
@carbon-design-system/design was curious if this was functionality we wanted to add in 👀 |
|
I think if it's an easy to add and switch between the two then its ok with design. We'll need to maybe think of some guidance on how the two should be used and if there's a usage difference or if its just an aesthetic chose a product can make and then consistently use. |
|
Thank you @aagonzales! As an example, we have a component in the IBM Security portoflio called a
I'm sure @cameroncalder has more examples / justifications he can share in Slack though! There are probably other patterns out there as well, aside from the component above. |
Closes #4584
Proposal to add an
alignprop to theAccordionandAccordionSkeleton.By default,
align="end", which is the current Carbon default.If
align="start", then the heading text + arrow order is reversed, with the arrow being at the "start" of the heading row.Changelog
New
alignprop with class name and stylesChanged
alignprop knobsTesting / Reviewing
In the
carbon-components-reactdeployment for this PR, open the knobs & use thealignknob to change alignment of theAccordionandAccordionSkeletonheadings.