LG-4121: popover refactor #2520
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
🦋 Changeset detectedLatest commit: 82b7417 The changes in this PR will be included in the next version bump. This PR includes changesets to release 70 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: +7.65 kB (+0.55%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
stephl3
force-pushed
the
LG-4121-popover-refactor
branch
from
7fa15ab
to
e02fa10
Compare
bruugey
reviewed
Nov 18, 2024
packages/popover/README.md
Outdated
| setOpen(newOpen); | ||
| }; | ||
|
|
||
| <button className={containerStyle} onClick={handleClick}> |
There was a problem hiding this comment.
Can we add an example using refEl as well - LG-3651 :)
bruugey
reviewed
Nov 18, 2024
There was a problem hiding this comment.
Are we removing onEnter/onExit callbacks. If so, can we close LG-3786?
There was a problem hiding this comment.
We aren't able to remove them entirely until we deprecate react-transition-group, but I think we should move towards this and avoid introducing it in additional components unless explicitly requested. I've closed LG-3786 for now. Ideally, we should leverage @floating-ui/react for transitions
7 tasks
* OverlayContext, useOverlayContext, and OverlayProvider * useOverlay to register, remove, and track isTopMostOverlay * Export overlay context related components and hooks and include provider in LG provider * README and changeset * Fix type and lint * Update registerOverlay logic and use more explicit generic type names
* PopoverContext supports additional props and marks isPopoverOpen and setIsPopoverOpen deprecated * Replace PortalContext with newly extended PopoverContext * Changesets * Add todo in select spec and update todos with jira tix
…ClassName prop (#2457) * Refactor popover styles * Remove redundant contentClassName prop * Clean up Popover positioning logic * Changesets * Reorg code * useIsomorphicLayoutEffect instead of useMemo * Update changesets * Revert changes
* Add @floating-ui/react dependency * Clean up Popover stories * Replace position utils and usePopoverPositioning with useFloating * Remove replaced positioning hook and utils * Fix adjustOnMutation and stories * Changeset * Add useMergeRefs hook * Address feedback
* Update Popover default spacing from 10 to 4 * Changeset * Update README and stories
…2474) * Remove justify fit from @leafygreen-ui/popover * Remove justify fit usage in packages using Popover * Changeset
* Fix usePortal={false} transition and className order
* Replace usePortal with renderMode and add top layer render mode in Popover
* Replace usePortal with renderMode and add top layer render mode in LG Provider
* Refactor types in Popover-consuming packages
* README
* Address feedback
* Replace usePortal with renderMode and refactor Popover-consuming components * Fix tooltip hover delays * Initial feedback * Additional feedback * Fix transition * Fix stories
* Add addJSXAttributes code mod util * Update consolidateJSXAttributes util to handle edge case * Add removeJSXAttributes code mod util * Fix comment utils * Export utils from utils/transformations * Add popover-v12 codemod * Changeset * Fix build type * Clean up comments * Update docs * Add commentOverride * Update transform.config.js
* Fix Copyable tooltip spec * Update test
* Make LG Provider changes minor * Remove unused imports
… component aliases (#2533) * Clean up codemods package configs * Add --packages arg to codemod command * Add LGPackages enum * Add packages to MigrateOptions * Support --packages in popover-v12 codemod * README and changesets * Ignore *.input.* and *.output.* files from dependency validation * Check if adding necessary and handle justify prop val replacement * Feedback
* Update @lg-chat/input-bar props * Changesets * Update example and fix storybook type * Update changesets * Update context info in changesets * Update changesets regarding justify fit * Remove unnecessary changeset * Fix GuideCue changeset * Feedback
* Drop usePortal usage in modal story and spec * Update @floating-ui/react dependency * Address Safari regressions and refactor Popover
stephl3
force-pushed
the
LG-4121-popover-refactor
branch
from
6e3a9a6
to
24578ce
Compare
stephl3
requested review from
TheSonOfThomp and
bruugey
and removed request for
a team
|
@stephl3 This is an integration branch of previously reviewed PRs, right? (I don't have to re-review all 6k lines? 😅 ) |
yes it is! 🤣 and no you definitely don't need to re-review all the lines |
TheSonOfThomp
approved these changes
Nov 27, 2024
Comment on lines
+2
to
+5
| '@lg-chat/input-bar': major | ||
| --- | ||
|
|
||
| [LG-4121](https://jira.mongodb.org/browse/LG-4121): `InputBar` renders results menu in top layer using popover API. As a result, the following props are deprecated and removed: |
There was a problem hiding this comment.
This one is codemod-able, right? Maybe we should mention the codemod in the changeset?
There was a problem hiding this comment.
It's excluded from the codemod because users haven't used the props in the wild
Comment on lines
+2
to
+5
| '@leafygreen-ui/chip': major | ||
| --- | ||
|
|
||
| [LG-4121](https://jira.mongodb.org/browse/LG-4121): Removes `popoverZIndex` prop because the `InlineDefinition` component instance will now render in the top layer |
There was a problem hiding this comment.
nit: Could avoid a major change by just deprecating the prop, and having it not do anything. Not a huge deal though since we have so many other major changes
|
|
||
| [LG-4446](https://jira.mongodb.org/browse/LG-4446): Adds `PopoverPropsContext` to pass props to a deeply nested popover element | ||
|
|
||
| Additionally exposes a `forceUseTopLayer` prop in the `LeafyGreenProvider` which can be used to test interactions with all LG popover elements forcibly set to `renderMode="top-layer"`. This can help pressure test for any regressions to more confidently and safely migrate. However, this should only be used when all LG dependencies are relying on v12+ of `@leafygreen-ui/popover`. |
There was a problem hiding this comment.
What does this do if someone has old popover dependencies?
Should we name this prop something ugly like _internal_forcePopoverTopLayer?
There was a problem hiding this comment.
It won't do anything in those cases, but its purpose is nullified in that case since it's intended to test if using all top layer popovers is viable
@TheSonOfThomp I think the current naming is fine with me, but do you feel strongly about renaming to include that prefix pattern?
There was a problem hiding this comment.
Nah don't feel too strongly on that, just wanted to check
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.
✍️ Proposed changes
🎟 Jira ticket: LG-4121
✅ Checklist
For bug fixes, new features & breaking changes
yarn changesetand documented my changes🧪 How to test changes