From 286a1563070693d1a2e3df30d557aa97371edd80 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 23 Oct 2024 16:23:17 -0700 Subject: [PATCH 1/5] Update @lg-chat/input-bar props --- chat/input-bar/src/InputBar/InputBar.types.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/chat/input-bar/src/InputBar/InputBar.types.ts b/chat/input-bar/src/InputBar/InputBar.types.ts index aaaa097d42..6f03fc6f5e 100644 --- a/chat/input-bar/src/InputBar/InputBar.types.ts +++ b/chat/input-bar/src/InputBar/InputBar.types.ts @@ -46,9 +46,18 @@ export type InputBarProps = HTMLElementProps<'form'> & dropdownFooterSlot?: ReactElement; /** - * Props passed to the Popover that renders the suggested promps. - */ - dropdownProps?: Omit; + * Props passed to the Popover that renders the suggested prompts. + */ + dropdownProps?: Omit< + PopoverRenderModeProps, + | 'dismissMode' + | 'onToggle' + | 'portalClassName' + | 'portalContainer' + | 'portalRef' + | 'renderMode' + | 'scrollContainer' + >; }; export type { TextareaAutosizeProps }; From 41c035facbe3b3f609241133ebebafcab739c5e4 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 23 Oct 2024 16:39:28 -0700 Subject: [PATCH 2/5] Changesets --- .changeset/chat-fixed-chat-window.md | 5 ++ .changeset/chat-input-bar.md | 10 +++ .changeset/chip.md | 17 +++++ .changeset/combobox.md | 23 +++++++ .changeset/copyable.md | 21 ++++++ .changeset/date-picker.md | 30 ++++++++ .changeset/guide-cue.md | 26 +++++++ .../{angry-mirrors-play.md => hooks.md} | 0 .changeset/info-sprinkle.md | 31 +++++++++ .changeset/inline-definition.md | 32 +++++++++ .changeset/lg-provider.md | 35 ++++++++++ .changeset/loud-ears-share.md | 5 -- .changeset/menu.md | 23 +++++++ .changeset/modal.md | 5 ++ .changeset/number-input.md | 30 ++++++++ .changeset/pagination.md | 5 ++ .changeset/pink-worms-tap.md | 10 +-- .changeset/pipeline.md | 7 ++ .changeset/popover.md | 69 +++++++++++++++++++ .changeset/popular-steaks-grab.md | 1 - .changeset/search-input.md | 26 +++++++ .changeset/select.md | 23 +++++++ .changeset/side-nav.md | 5 ++ .changeset/smooth-experts-admire.md | 29 -------- .changeset/split-button.md | 23 +++++++ .changeset/stepper.md | 7 ++ .changeset/tall-chefs-fail.md | 5 -- .changeset/tame-islands-count.md | 5 -- .changeset/tooltip.md | 23 +++++++ .changeset/two-pants-poke.md | 5 -- 30 files changed, 479 insertions(+), 57 deletions(-) create mode 100644 .changeset/chat-fixed-chat-window.md create mode 100644 .changeset/chat-input-bar.md create mode 100644 .changeset/chip.md create mode 100644 .changeset/combobox.md create mode 100644 .changeset/copyable.md create mode 100644 .changeset/date-picker.md create mode 100644 .changeset/guide-cue.md rename .changeset/{angry-mirrors-play.md => hooks.md} (100%) create mode 100644 .changeset/info-sprinkle.md create mode 100644 .changeset/inline-definition.md create mode 100644 .changeset/lg-provider.md delete mode 100644 .changeset/loud-ears-share.md create mode 100644 .changeset/menu.md create mode 100644 .changeset/modal.md create mode 100644 .changeset/number-input.md create mode 100644 .changeset/pagination.md create mode 100644 .changeset/pipeline.md create mode 100644 .changeset/popover.md create mode 100644 .changeset/search-input.md create mode 100644 .changeset/select.md create mode 100644 .changeset/side-nav.md delete mode 100644 .changeset/smooth-experts-admire.md create mode 100644 .changeset/split-button.md create mode 100644 .changeset/stepper.md delete mode 100644 .changeset/tall-chefs-fail.md delete mode 100644 .changeset/tame-islands-count.md create mode 100644 .changeset/tooltip.md delete mode 100644 .changeset/two-pants-poke.md diff --git a/.changeset/chat-fixed-chat-window.md b/.changeset/chat-fixed-chat-window.md new file mode 100644 index 0000000000..0b120c5cba --- /dev/null +++ b/.changeset/chat-fixed-chat-window.md @@ -0,0 +1,5 @@ +--- +'@lg-chat/fixed-chat-window': patch +--- + +Fix storybook snapshot diff --git a/.changeset/chat-input-bar.md b/.changeset/chat-input-bar.md new file mode 100644 index 0000000000..3c6a027a5a --- /dev/null +++ b/.changeset/chat-input-bar.md @@ -0,0 +1,10 @@ +--- +'@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: +- `portalClassName` +- `portalContainer` +- `portalRef` +- `scrollContainer` +- `usePortal` diff --git a/.changeset/chip.md b/.changeset/chip.md new file mode 100644 index 0000000000..d18e2aab3f --- /dev/null +++ b/.changeset/chip.md @@ -0,0 +1,17 @@ +--- +'@leafygreen-ui/chip': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): Removes `popoverZIndex` prop + +#### Migration guide + +##### Old +```js + +``` + +##### New +```js + +``` diff --git a/.changeset/combobox.md b/.changeset/combobox.md new file mode 100644 index 0000000000..8a9a79d45f --- /dev/null +++ b/.changeset/combobox.md @@ -0,0 +1,23 @@ +--- +'@leafygreen-ui/combobox': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): Replaces `usePortal` prop with `renderMode` prop. `renderMode="inline"` and `renderMode="portal"` are deprecated, and all popover elements should migrate to using the top layer. The old default was `usePortal = true`, and the new default is `renderMode = 'top-layer'`. + +See [@leafygreen-ui/popover package 12.0.0 changelog](https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/CHANGELOG.md#1200) for more info. + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/copyable.md b/.changeset/copyable.md new file mode 100644 index 0000000000..542d0c8a41 --- /dev/null +++ b/.changeset/copyable.md @@ -0,0 +1,21 @@ +--- +'@leafygreen-ui/copyable': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Copyable` renders tooltip in the top layer using popover API. As a result, the `shouldTooltipUsePortal` prop is removed + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/date-picker.md b/.changeset/date-picker.md new file mode 100644 index 0000000000..67a596bcab --- /dev/null +++ b/.changeset/date-picker.md @@ -0,0 +1,30 @@ +--- +'@leafygreen-ui/date-picker': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `DatePicker` renders menu, month selector, and year selector in top layer using popover API. As a result, the following props are deprecated and removed: +- `popoverZIndex` +- `portalClassName` +- `portalContainer` +- `portalRef` +- `scrollContainer` + +Additional changes include: +- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"` +- Removes unused `contentClassName` prop + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/guide-cue.md b/.changeset/guide-cue.md new file mode 100644 index 0000000000..e2663dd679 --- /dev/null +++ b/.changeset/guide-cue.md @@ -0,0 +1,26 @@ +--- +'@leafygreen-ui/guide-cue': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `GuideCue` renders beacon and tooltip using popover API. As a result, the following props are removed: +- `popoverZIndex` +- `portalClassName` +- `portalContainer` +- `portalRef` +- `scrollContainer` + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/angry-mirrors-play.md b/.changeset/hooks.md similarity index 100% rename from .changeset/angry-mirrors-play.md rename to .changeset/hooks.md diff --git a/.changeset/info-sprinkle.md b/.changeset/info-sprinkle.md new file mode 100644 index 0000000000..a92a6ce9d4 --- /dev/null +++ b/.changeset/info-sprinkle.md @@ -0,0 +1,31 @@ +--- +'@leafygreen-ui/info-sprinkle': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `InfoSprinkle` renders tooltip in the top layer using popover API. As a result, the following props are removed: +- `popoverZIndex` +- `portalClassName` +- `portalContainer` +- `portalRef` +- `scrollContainer` +- `usePortal` + +Additional changes include: +- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"` +- Opens tooltip immediately on hover instead of default 500ms delay + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/inline-definition.md b/.changeset/inline-definition.md new file mode 100644 index 0000000000..df57fd05bb --- /dev/null +++ b/.changeset/inline-definition.md @@ -0,0 +1,32 @@ +--- +'@leafygreen-ui/inline-definition': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `InlineDefinition` renders tooltip in the top layer using popover API. As a result, the following props are removed: +- `popoverZIndex` +- `portalClassName` +- `portalContainer` +- `portalRef` +- `scrollContainer` +- `usePortal` + +Additional changes include: +- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"` +- Opens tooltip immediately on hover instead of default 500ms delay +- Reorganizes file structure + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/lg-provider.md b/.changeset/lg-provider.md new file mode 100644 index 0000000000..8908f2c535 --- /dev/null +++ b/.changeset/lg-provider.md @@ -0,0 +1,35 @@ +--- +'@leafygreen-ui/leafygreen-provider': major +--- + +[LG-4446](https://jira.mongodb.org/browse/LG-4446): Consolidates popover-related contexts + +| Old | New | +| - | - | +| `PortalContext` | `PopoverContext` | +| `PortalContextProvider` | `PopoverProvider` | +| `usePopoverPortalContainer` (internal) | `usePopoverContext` (internal) | + +Additional changes include: +- Adds `forceUseTopLayer` prop to forcibly set all LG popover elements to `renderMode="top-layer"` +- [Internal] `PopoverContext` values for `isPopoverOpen` and `setIsPopoverOpen` have been migrated to the `ModalPopoverContext` in the `@leafygreen-ui/modal` package + +#### Migration guide + +##### Old +```js + +``` + +##### New +```js + +``` diff --git a/.changeset/loud-ears-share.md b/.changeset/loud-ears-share.md deleted file mode 100644 index 10fdfc30b0..0000000000 --- a/.changeset/loud-ears-share.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@leafygreen-ui/popover': major ---- - -[LG-4447](https://jira.mongodb.org/browse/LG-4447) Remove unused `contentClassName` prop and abstract popover positioning logic into custom hooks diff --git a/.changeset/menu.md b/.changeset/menu.md new file mode 100644 index 0000000000..120883ea87 --- /dev/null +++ b/.changeset/menu.md @@ -0,0 +1,23 @@ +--- +'@leafygreen-ui/menu': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): Replaces `usePortal` prop with `renderMode` prop. `renderMode="inline"` and `renderMode="portal"` are deprecated, and all popover elements should migrate to using the top layer. The old default was `usePortal = true`, and the new default is `renderMode = 'top-layer'`. + +See [@leafygreen-ui/popover package 12.0.0 changelog](https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/CHANGELOG.md#1200) for more info. + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/modal.md b/.changeset/modal.md new file mode 100644 index 0000000000..985a9fbaa0 --- /dev/null +++ b/.changeset/modal.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/modal': minor +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): Adds and exports `ModalPopoverContext` with values for `isPopoverOpen` and `setIsPopoverOpen` that were previously part of the `PopoverContext` in `@leafygreen-ui/leafygreen-provider` diff --git a/.changeset/number-input.md b/.changeset/number-input.md new file mode 100644 index 0000000000..d7341019f3 --- /dev/null +++ b/.changeset/number-input.md @@ -0,0 +1,30 @@ +--- +'@leafygreen-ui/number-input': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `NumberInput` renders unit selector and tooltip in the top layer using popover API. As a result, the following props are removed: +- `popoverZIndex` +- `portalClassName` +- `portalContainer` +- `portalRef` +- `scrollContainer` +- `usePortal` + +Additional changes include: +- Opens tooltip immediately on hover instead of default 500ms delay + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + +``` + +##### New +```js + + +``` diff --git a/.changeset/pagination.md b/.changeset/pagination.md new file mode 100644 index 0000000000..3fd591786a --- /dev/null +++ b/.changeset/pagination.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/pagination': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Pagination` renders page selectors in the top layer using popover API diff --git a/.changeset/pink-worms-tap.md b/.changeset/pink-worms-tap.md index a8467e05c7..4343dac0c5 100644 --- a/.changeset/pink-worms-tap.md +++ b/.changeset/pink-worms-tap.md @@ -1,12 +1,8 @@ --- -'@leafygreen-ui/popover': major -'@leafygreen-ui/inline-definition': major -'@leafygreen-ui/info-sprinkle': major -'@leafygreen-ui/date-picker': major -'@leafygreen-ui/copyable': major -'@leafygreen-ui/tooltip': major '@leafygreen-ui/code': major +'@leafygreen-ui/copyable': major '@leafygreen-ui/menu': major +'@leafygreen-ui/tooltip': major --- -[LG-4516](https://jira.mongodb.org/browse/LG-4516): Deprecates justify="fit"; use justify="middle" instead +[LG-4516](https://jira.mongodb.org/browse/LG-4516): Deprecates and removes `justify="fit"`. Instead, use `justify="middle"` diff --git a/.changeset/pipeline.md b/.changeset/pipeline.md new file mode 100644 index 0000000000..dced02c2da --- /dev/null +++ b/.changeset/pipeline.md @@ -0,0 +1,7 @@ +--- +'@leafygreen-ui/pipeline': major +--- + +[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Pipeline` renders tooltip in the top layer using popover API + +Additionally, the tooltip opens immediately on hover instead of default 500ms delay diff --git a/.changeset/popover.md b/.changeset/popover.md new file mode 100644 index 0000000000..358cf6b870 --- /dev/null +++ b/.changeset/popover.md @@ -0,0 +1,69 @@ +--- +'@leafygreen-ui/popover': major +--- + +[LG-4445](https://jira.mongodb.org/browse/LG-4445): Replaces `usePortal` prop with `renderMode` prop with values of `'inline'`, `'portal'`, and `'top-layer'`. `renderMode="inline"` and `renderMode="portal"` are deprecated, and all popover elements should migrate to using the top layer. The old default was `usePortal = true`, and the new default is `renderMode = 'top-layer'`. + - When `renderMode="top-layer"` or `renderMode` is `undefined`, the popover element will render in the top layer using the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) + - Adds `dismissMode` prop to control dismissal behavior of the popover element. [Read more about the popover attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover) + - Adds `onToggle` prop to run a callback function when the visibility of a popover element rendered in the top layer is toggled + - When `renderMode="inline"`, the popover element will render inline in the DOM where it's written + - When `renderMode="portal"`, the popover element will portal into a new div appended to the body. Alternatively, it can be portaled into a provided `portalContainer` element + +[LG-4446](https://jira.mongodb.org/browse/LG-4446): The `PopoverProvider` from the `@leafygreen-ui/leafygreen-provider` package can be used to pass props to a deeply nested popover element. It will read `PopoverContext` values if an explicit prop is not defined. This applies for the following props: + - `dismissMode` + - `onEnter` + - `onEntering` + - `onEntered` + - `onExit` + - `onExiting` + - `onExited` + - `onToggle` + - `popoverZIndex` + - `portalClassName` + - `portalContainer` + - `portalRef` + - `renderMode` + - `scrollContainer` + - `spacing` + +Additional changes include: +- Adds and exports `getPopoverRenderModeProps` util +- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"` +- Removes unused `contentClassName` prop +- Updates default value of `spacing` prop from 10px to 4px +- Replaces internal position utils with `@floating-ui/react` + +#### Migration guide + +Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance. + +##### Old +```js + + + +``` + +##### New +```js + + + +``` + +##### Globally render popover elements in top layer +After running the codemod and addressing manual updates, the new `forceUseTopLayer` prop in the `LeafyGreenProvider` can be used in a consumer app 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. + +```js +import Combobox from '@leafygreen-ui/combobox'; +import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider'; +import Popover from '@leafygreen-ui/popover'; +import Select from '@leafygreen-ui/select'; + +{/* all LG popover elements will render in top layer */} + + + + + +