Fix escape key close in Modal
#2513
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
|
|
Size Change: -270 B (-0.02%) Total Size: 1.38 MB
ℹ️ View Unchanged
|
stephl3
force-pushed
the
steph/po-fix-provider
branch
from
8e9507e
to
92829c4
Compare
| ModalPopoverProviderProps, | ||
| } from './ModalPopoverContext.types'; | ||
|
|
||
| export const ModalPopoverContext = createContext<ModalPopoverContextType>({ |
There was a problem hiding this comment.
Would it make more sense for this to live in packages/modal?
There was a problem hiding this comment.
It originally lived in @leafygreen-ui/leafygreen-provider, but after reviewing the consuming packages, I think that is a better home!
There was a problem hiding this comment.
@TheSonOfThomp heads up that in moving this context to the @leafygreen-ui/modal package, I needed to update some dev dependency relationships with @leafygreen-ui/modal to prevent circular dependencies
I think that this is the right move for those as well since changing behavior in Code, Copyable, and Select should ensure they still work in a Modal. They now follow a similar pattern as DatePicker's InModal story. In fact, I only identified this issue because of that story
Let me know what you think of these changes!
There was a problem hiding this comment.
Ah shoot. I forgot about that. Forcing Popover to depend on modal isn't great. Let's sync on that
There was a problem hiding this comment.
synced offline; we'll move this back to @leafygreen-ui/leafygreen-provider to avoid making @leafygreen-ui/modal an indirect dependency of all packages dependent on @leafygreen-ui/popover
packages/leafygreen-provider/src/ModalPopoverContext/ModalPopoverContext.spec.tsx
Outdated
Show resolved
Hide resolved
packages/leafygreen-provider/src/ModalPopoverContext/ModalPopoverContext.spec.tsx
Outdated
Show resolved
Hide resolved
packages/leafygreen-provider/src/ModalPopoverContext/ModalPopoverContext.types.ts
Outdated
Show resolved
Hide resolved
stephl3
force-pushed
the
steph/po-fix-provider
branch
from
a8f43ab
to
bd0902a
Compare
Edit: here's the corresponding changeset https://github.com/mongodb/leafygreen-ui/pull/2517/files#diff-973927adc92828cf652f02746c195982b8cdfcdf5603010c8cbb0434e4afe791 Going to put up a PR for changesets today but here's what I have locally for LG provider: '@leafygreen-ui/leafygreen-provider': majorLG-4446: Consolidates popover-related contexts
Internal note: Migration guideOld<PortalContextProvider
popover={{
portalContainer: yourPortalContainer,
scrollContainer: yourScrollContainer,
}}
>New<PopoverProvider
portalContainer={yourPortalContainer}
scrollContainer={yourScrollContainer}
> |
stephl3
force-pushed
the
steph/po-fix-provider
branch
2 times, most recently
from
173e82a
to
1bad647
Compare
| */} | ||
| <PopoverProvider>{children}</PopoverProvider> | ||
| <ModalPopoverProvider>{children}</ModalPopoverProvider> |
There was a problem hiding this comment.
should this one be ModalPopoverProvider? I'm not sure. Maybe I'm misunderstanding this
There was a problem hiding this comment.
yes, I think this is preventing the isPopoverOpen from propagating up to the enclosing modal
- open modal;
isPopoverOpen=false - open date picker menu;
isPopoverOpen=true - open month selector;
isPopoverOpen=trueand a separateisPopoverOpen=true - close month selector;
isPopoverOpen=true - close date picker menu;
isPopoverOpen=true
There was a problem hiding this comment.
Got it, so this is here in case the date picker is rendered within a modal? And ensures the year/month Select is rendered correctly?
There was a problem hiding this comment.
this is here in case the date picker is rendered within a modal?
yes!
ensures the year/month Select is rendered correctly?
It will render correctly regardless. Without it, when a year/month select is closed, then isPopoverOpen is set to false. Then, if a user hits escape key, the modal instance would close even though the date picker menu is still open
stephl3
force-pushed
the
steph/po-fix-provider
branch
from
1bad647
to
b25cea8
Compare
Comment on lines
24
to
27
| /** | ||
| * Creates a Modal Popover context. | ||
| * Call `useModalPopoverContext` to access the popover state | ||
| */ |
There was a problem hiding this comment.
Can we add some documentation about what this does and why it's needed? It's not immediately clear if this is tracking the Modal popover itself, or popovers within the Modal
TheSonOfThomp
approved these changes
Oct 25, 2024
* Add MigrationContext for global props * Integrate forceUseTopLayer flag into Popover component
3 tasks
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
Fixes a bug introduced after merging PR #2456. Consolidating the
PopoverContextandPortalContextmade it so that when aPopoverProviderwas added to replace prop-drillingPopovercomponent props, theisPopoverOpenwas getting reset tofalsewhen opened within aModal. This PR fixes this by breaking out theisPopoverOpen/setIsPopoverOpenvalues into a separateModalPopoverProvider.Also, moves the
ModalPopoverContextfrom@leafygreen-ui/leafygreen-providerto@leafygreen-ui/modaland updates additional dev dependency relationships to prevent circular dependencies.🎟 Jira ticket: Name of ticket
✅ Checklist
For bug fixes, new features & breaking changes
yarn changesetand documented my changesFor new components
🧪 How to test changes
DatePicker/DatePicker/InModalstory