[CL-473] Adjust popup page max width and scroll containers #14853
+141
−37
Conversation
This file contains hidden or 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
|
Great job, no security vulnerabilities found in this Pull Request |
Codecov ReportAttention: Patch coverage is
✅ All tests successful. No failed tests found.
Additional details and impacted files@@ Coverage Diff @@
## main #14853 +/- ##
==========================================
- Coverage 36.41% 36.41% -0.01%
==========================================
Files 3212 3212
Lines 93265 93275 +10
Branches 16833 16835 +2
==========================================
Hits 33967 33967
- Misses 56831 56841 +10
Partials 2467 2467 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
danielleflinn
approved these changes
May 21, 2025
willmartian
requested changes
May 22, 2025
Comment on lines
+175
to
+191
| ## With Virtual Scroll | ||
|
|
||
| If you are using a virtual scrolling container inside of the popup page (aka replacing the default | ||
| popup page scrolling container with a virtual scroll container), you'll want to configure the | ||
| component in the following ways: | ||
|
|
||
| - Use the `disablePadding` input on the `popup-page` | ||
| - Add padding and scrollbar to the virtual scrolling element to match the default behavior of the | ||
| popup page scroll container, which ensures that the scrollbar is at the far right edge of the | ||
| popup | ||
| - Add max width to the child of the virtual scroll element, matching the max width breakpoints used | ||
| in the `popup-page` | ||
|
|
||
| See the code in the example below. | ||
|
|
||
| <Canvas of={stories.WithVirtualScrollChild} /> | ||
|
|
There was a problem hiding this comment.
Generally, this seems like a non-intentional limitation of the current design of the component. Thoughts?
Comment on lines
-1
to
-2
| // FIXME: Update this file to be type safe and remove this and next line | ||
| // @ts-strict-ignore |
Comment on lines
+530
to
+544
|
|
||
| if (!compact) { | ||
| // eslint-disable-next-line | ||
| console.error(`#${containerId} [data-testid=popup-layout-scroll-region] not found`); | ||
| return; | ||
| } | ||
|
|
||
| const label = canvasEl.querySelector(`#${containerId} .example-label`); | ||
|
|
||
| if (!label) { | ||
| // eslint-disable-next-line | ||
| console.error(`#${containerId} .example-label not found`); | ||
| return; | ||
| } | ||
|
|
There was a problem hiding this comment.
What is the goal of this change?
| > | ||
| <div | ||
| class="tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-w-full" | ||
| [ngClass]="{ 'tw-p-3 bit-compact:tw-p-2': !disablePadding }" | ||
| class="has-[[cdkvirtualscrollingelement]]:tw-max-w-full tw-max-w-screen-sm tw-mx-auto tw-flex-1 tw-flex tw-flex-col tw-w-full" |
There was a problem hiding this comment.
- This seems fragile. Is Tailwind
hasjust direct descendants? - It seems odd that we are asking consumers to manually configure the component base on its supplied descendants in one place
disablePadding, but then automatically checking descendants in another.
There was a problem hiding this comment.
Why does Vault need their own cdkVirtualScrollingElement?
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.
🎟️ Tracking
CL-473
📔 Objective
The popup page had strange jumping behavior at its max width breakpoint, and the scrollbar was appearing at that content max width instead of on the righthand side of the window. This PR fixes these issues by:
popup-pagenonscrollable region to set the max widthpopup-pagescrollable container to have the padding appear on the container that has the scrollbar, and setting the max width on the child of that container depending on whether or not a virtual scroll child is present (we want it full width if there's a virtual scroll child so that the virtual scroll child can set its own padding and max width, since it has its own scrollbar that needs to stick to the right side of the page)popup-page's scrollable container implementation📸 Screenshots
Before:
Screen.Recording.2025-05-20.at.9.38.16.AM.mov
After:
Screen.Recording.2025-05-20.at.9.35.06.AM.mov
⏰ Reminders before review
🦮 Reviewer guidelines
:+1:) or similar for great changes:memo:) or ℹ️ (:information_source:) for notes or general info:question:) for questions:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion:art:) for suggestions / improvements:x:) or:warning:) for more significant problems or concerns needing attention:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt:pick:) for minor or nitpick changes