feat: accordion: enable custom summary layout using full width #799
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:
Enables custom full width
Accordion
AccordionSummary
layouts, and adds more discreet custom props. Prior to this change, implementation of certain layouts was difficult because the header could not be easily made to fill the remaining space of theAccordion
without using custom class names and css paths.fullWidth
prop toAccordionSummary
, setting the header and its containerflex
to1
when enabledlistStyle
toList
component to support inline customizingAccordion
amin-width
so it doesn't clip its content when reflow in small screensgap
to the summary stylesonIconButtonClick
callbackiconButtonProps
to theButton
Custom
storyaccordionReflow.mp4
JIRA TASK (Eightfold Employees Only):
ENG-80058
CHANGE TYPE:
TEST COVERAGE:
TEST PLAN:
Pull the PR branch and run
yarn
andyarn storybook
. Verify theAccordion
stories behave as expected.