feat(PPDSC-2115): accordion motion #264
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
- Add motion support to accordion header - Add backgroundColorChange default transition present - Update test snapshots - Add transitionPreset override support - Update overrides test snapshot - Add transitionPreset override to storybook scenario
- Add maxHeightChange transition preset - Conditionally set max-height on accordion panel (to scroll height or 0) - Set maxHeightChange as default transitionPreset for accordion - Add support for accordion transitionPreset overrides on panel - Update types, tests and stories
mstuartf
added
ready for review
mstuartf
requested review from
jps,
Xin00163,
pdimova,
baburay23,
mutebg,
Vanals,
evgenitsn and
Srinivasan-Ramasamy
as code owners
mstuartf
changed the title
|
You can preview these changes on: |
mstuartf
added
WIP
mstuartf
added
ready for review
mutebg
reviewed
Jul 8, 2022
src/accordion/accordion.tsx
Outdated
Comment on lines
21
to
43
| const MaxHeightTransitionPanel = ({ | ||
| expanded, | ||
| children, | ||
| overrides, | ||
| }: Pick<AccordionProps, 'expanded' | 'children' | 'overrides'>) => { | ||
| const ref = useRef<HTMLDivElement>(null); | ||
| useEffect(() => { | ||
| if (expanded) { | ||
| ref.current!.style.maxHeight = `${ref.current!.scrollHeight}px`; | ||
| } else { | ||
| ref.current!.style.maxHeight = '0px'; | ||
| } | ||
| }, [expanded]); | ||
| return ( | ||
| <StyledPanelTransitionContainer | ||
| ref={ref} | ||
| expanded={expanded} | ||
| overrides={overrides} | ||
| > | ||
| {children} | ||
| </StyledPanelTransitionContainer> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
This seems good solution but I don't think is very flexible and it will not allow people to use other transition presets
You might need to use CSSTransition to make it more flexible.
mutebg
previously approved these changes
Jul 12, 2022
mutebg
previously approved these changes
Jul 13, 2022
- Accordion tests failing because responsiveness managed by JS: 'In Ultrafast Grid, the DOM is taken from the local rendering and rerendered on multiple devices. This works for pages that are CSS-responsive. If JS comes into picture, we need to take multiple DOMs locally, for each width on which page DOM changes.' - Add layoutBreakpoints config to fix.
… setting" This reverts commit 297abb2.
|
Is this "Ready for review" ? I cannot see any ticket related to 2115 in the board or review column. If not can we remove the tag? |
It is flagged (in the To Do column). I'm still waiting to hear back from Applitools about the failing tests. |
I see. I think is a bit confusing in this way? |
- Unset max height for expanded accordions. It is calculated incorrectly in the Applitools test env, causing the tests to fail.
mutebg
approved these changes
Sep 7, 2022
baburay23
approved these changes
Sep 7, 2022
Xin00163
pushed a commit
that referenced
this pull request
Oct 17, 2022
* feat(PPDSC-2155): accordion header motion - Add motion support to accordion header - Add backgroundColorChange default transition present - Update test snapshots - Add transitionPreset override support - Update overrides test snapshot - Add transitionPreset override to storybook scenario * feat(PPDSC-2115): accordion panel transitions - Add maxHeightChange transition preset - Conditionally set max-height on accordion panel (to scroll height or 0) - Set maxHeightChange as default transitionPreset for accordion - Add support for accordion transitionPreset overrides on panel - Update types, tests and stories * feat(PPDSC-2115): update theme snapshots * feat(PPDSC-2115): fix a117 storybook issue * feat(PPDSC-2115): support other transition presets * feat(PPDSC-2115): update snapshots * feat(PPDSC-2115): update panel height on window resize * feat(PPDSC-2115): test for setting max height * feat(PPDSC-2115): add storybook config for failing tests - Accordion tests failing because responsiveness managed by JS: 'In Ultrafast Grid, the DOM is taken from the local rendering and rerendered on multiple devices. This works for pages that are CSS-responsive. If JS comes into picture, we need to take multiple DOMs locally, for each width on which page DOM changes.' - Add layoutBreakpoints config to fix. * feat(PPDSC-2115): layout breakpoints global setting * feat(PPDSC-2115): Revert "feat(PPDSC-2115): layout breakpoints global setting" This reverts commit 297abb2. * feat(PPDSC-2115): prevent animation on first render * feat(PPDSC-2115): prevent test failures - Unset max height for expanded accordions. It is calculated incorrectly in the Applitools test env, causing the tests to fail.
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.
PPDSC-2115
What
For the header:
backgroundColorChangeas default.For the panel:
slideTop(similar to Drawer component) but this does not work. The Drawer sits above existing content, but the Accordion panel needs to sit within the other elements on the page when expanded.scaleYbut this distorts the panel contents during the transition.maxHeight, which seems to be the consensus: https://www.w3schools.com/howto/howto_js_accordion.aspmaxHeightChangetransition preset.maxHeightChangeas default.expandedstate. This needs to be set manually in the component as it is specific to each case (i.e. not a generic value like 100%).I have done:
I have tested manually: