fix(Drawer,Flyout): alignment #2910
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
jrood
changed the title
jrood
force-pushed
the
jrood.drawer-flyout-align
branch
from
238faf2
to
cfb0b4c
Compare
jrood
force-pushed
the
jrood.drawer-flyout-align
branch
5 times, most recently
from
ef92892
to
ce5a845
Compare
jrood
force-pushed
the
jrood.drawer-flyout-align
branch
from
ce5a845
to
b51b020
Compare
LinKCoding
reviewed
Aug 2, 2024
LinKCoding
reviewed
Aug 2, 2024
LinKCoding
reviewed
Aug 2, 2024
jrood
force-pushed
the
jrood.drawer-flyout-align
branch
from
b51b020
to
5ce4d33
Compare
📬Published Alpha Packages:@codecademy/[email protected] |
|
🚀 Styleguide deploy preview ready! |
dreamwasp
approved these changes
Aug 5, 2024
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.
Overview
This PR fixes a layout issue where flyout content had been rendering slightly shifted to the left in certain cases. This is a complex issue having to do with the fact that overflow="hidden" in the Drawer component causes reflow during the animation, specifically when it occurs within the fixed Flyout component.
The Drawer component currently animates the width of a parent wrapper, while holding content in a child wrapper. The main fix is to use
overflow="clip"(which does not cause reflow) rather thanoverflow="hidden"on the parent wrapper, and to moveoverflowYscrolling to the child wrapper.Example of how this fixes the unintended layout shift in mobile catalog menus:
Note, in
before, the issue is not a 2px right-margin, but rather that the entire content is shifted left so that it would be slightly cutoff if there was not already left margin.An additional fix included here is to ensure content is aligned opposite of the
openFromside. During an animation, content coming from the left should be aligned to the right (as it moves with the parent wrapper's moving right edge). Conversely, content from the right should be aligned to the left.(I apologize in advance for any dizziness invoked by the ternary expression:
'left' ? 'right' : 'left'.)A resize observer was added to popover to ensure that the tooltip for the close button does not get lost in the animation. This means that the tooltip will (correctly) show in some places where it doesn't currently in prod.
However there is a plan to remove this automatic focus soon.
Fix alignment of drawer and flyout.
PR Checklist
Related to designs:This PR includes unit tests for the code changeTesting Instructions
Places to test:
CodeandOutputbuttons in codebyteMy home menuon mobile + logged in dashboardLE flyouts
Ask the AI Learning AssistantGet UnstuckToolsSyllabusLE preview
Admin:
Add new couponflyout on coupons pageCatalog Menuon mobile catalog homeFilters(scroll down) on catalog homeArticle Categoriesmenu on mobile articlesTopicson mobile docsPR Links and Envs
Mono PR
Monolith PR