Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LG-4121: consolidate changesets for popover refactor #2517

Open
wants to merge 5 commits into
base: LG-4121-popover-refactor
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/chat-fixed-chat-window.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-chat/fixed-chat-window': patch
---

Fix storybook snapshot
10 changes: 10 additions & 0 deletions .changeset/chat-input-bar.md
Original file line number Diff line number Diff line change
@@ -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`
17 changes: 17 additions & 0 deletions .changeset/chip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
'@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

#### Migration guide

##### Old
```js
<Chip popoverZIndex={9999} />
```

##### New
```js
<Chip />
```
26 changes: 26 additions & 0 deletions .changeset/code.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
'@leafygreen-ui/code': major
---

[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Code` renders the copy button tooltip and language selector in the top layer using popover API. As a result, the following props are removed:
- `popoverZIndex`
- `portalClassName`
- `portalContainer`
- `scrollContainer`
- `usePortal`

#### Migration guide

Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.

##### Old
```js
<Code popoverZIndex={9999} usePortal={false} />
<Code portalClassName="portal-class" usePortal />
```

##### New
```js
<Code />
<Code />
```
23 changes: 23 additions & 0 deletions .changeset/combobox.md
Original file line number Diff line number Diff line change
@@ -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
<Combobox popoverZIndex={9999} usePortal={false} />
<Combobox portalClassName="portal-class" usePortal />
```

##### New
```js
<Combobox popoverZIndex={9999} renderMode="inline" />
<Combobox portalClassName="portal-class" renderMode="portal" />
```
21 changes: 21 additions & 0 deletions .changeset/copyable.md
Original file line number Diff line number Diff line change
@@ -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
<Copyable shouldTooltipUsePortal={false} />
<Copyable shouldTooltipUsePortal />
```

##### New
```js
<Copyable />
<Copyable />
```
30 changes: 30 additions & 0 deletions .changeset/date-picker.md
Original file line number Diff line number Diff line change
@@ -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
<DatePicker portalContainer={containerRef} scrollContainer={containerRef} />
<DatePicker portalClassName="portal-class" />
```

##### New
```js
<DatePicker />
<DatePicker />
```
26 changes: 26 additions & 0 deletions .changeset/guide-cue.md
Original file line number Diff line number Diff line change
@@ -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
<GuideCue popoverZIndex={9999} usePortal={false} />
<GuideCue portalContainer={containerRef} scrollContainer={containerRef} usePortal />
```

##### New
```js
<GuideCue />
<GuideCue />
```
File renamed without changes.
31 changes: 31 additions & 0 deletions .changeset/info-sprinkle.md
Original file line number Diff line number Diff line change
@@ -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
<InfoSprinkle popoverZIndex={9999} usePortal={false} />
<InfoSprinkle portalClassName="portal-class" usePortal />
```

##### New
```js
<InfoSprinkle />
<InfoSprinkle />
```
32 changes: 32 additions & 0 deletions .changeset/inline-definition.md
Original file line number Diff line number Diff line change
@@ -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
<InlineDefinition popoverZIndex={9999} usePortal={false} />
<InlineDefinition portalClassName="portal-class" usePortal />
```

##### New
```js
<InlineDefinition />
<InlineDefinition />
```
7 changes: 7 additions & 0 deletions .changeset/lg-provider.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@leafygreen-ui/leafygreen-provider': minor
---

[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`.
5 changes: 0 additions & 5 deletions .changeset/loud-ears-share.md

This file was deleted.

23 changes: 23 additions & 0 deletions .changeset/menu.md
Original file line number Diff line number Diff line change
@@ -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
<Menu popoverZIndex={9999} usePortal={false} />
<Menu portalClassName="portal-class" usePortal />
```

##### New
```js
<Menu popoverZIndex={9999} renderMode="inline" />
<Menu portalClassName="portal-class" renderMode="portal" />
```
30 changes: 30 additions & 0 deletions .changeset/number-input.md
Original file line number Diff line number Diff line change
@@ -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
<NumberInput popoverZIndex={9999} usePortal={false} />
<NumberInput portalClassName="portal-class" usePortal />
```

##### New
```js
<NumberInput />
<NumberInput />
```
5 changes: 5 additions & 0 deletions .changeset/pagination.md
Original file line number Diff line number Diff line change
@@ -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
10 changes: 3 additions & 7 deletions .changeset/pink-worms-tap.md
Original file line number Diff line number Diff line change
@@ -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"`
7 changes: 7 additions & 0 deletions .changeset/pipeline.md
Original file line number Diff line number Diff line change
@@ -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
69 changes: 69 additions & 0 deletions .changeset/popover.md
Original file line number Diff line number Diff line change
@@ -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)
Copy link
Collaborator

@shaneeza shaneeza Oct 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the top layer, the popover is still a child of the trigger and can inherit styles. Is that correct? If so, do we mention that anywhere?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will inherit styles of its parent, but it won't always be the trigger (e.g. if refEl prop is used). I'm not sure this warrants documenting in our docs since it's a browser behavior

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think It's at least worth mentioning that usePortal added the popover to the end of the DOM, but the top layer does not.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is this bullet:

  • 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

Where do you think additional context would best be added?

- 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
shaneeza marked this conversation as resolved.
Show resolved Hide resolved
- 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 `PopoverPropsProvider` from the `@leafygreen-ui/leafygreen-provider` package can be used to pass props to a deeply nested popover element. It will read `PopoverPropsContext` values if an explicit prop is not defined in the popover component instance. 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 to pick popover props based on given `renderMode` value
- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does the codemod also update the justify prop?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does not. I only found 3 usages of it. Do you think it should also be included?

- 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
<Popover popoverZIndex={9999} usePortal={false} />
<Popover portalClassName="portal-class" usePortal />
<Popover />
```

##### New
```js
<Popover popoverZIndex={9999} renderMode="inline" />
<Popover portalClassName="portal-class" renderMode="portal" />
<Popover renderMode="portal" />
```

##### 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 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 */}
<LeafyGreenProvider forceUseTopLayer={true}>
<Popover renderMode="inline" />
<Combobox renderMode="portal" />
<Select renderMode="inline" />
</LeafyGreenProvider>;
```
Loading
Loading