[core] feat: Overlay2 component #6656

adidahiya · 2024-01-16T23:22:38Z

Fixes #3979

Checklist

Includes tests
Update documentation

Changes proposed in this pull request:

Create new Overlay2 component which has the following improvements compared to Overlay:
- it is a function component (see Refactor simple class components into functions #6289)
- it utilizes <CSSTransition nodeRef> correctly to avoid any code path which uses ReactDOM.findDOMNode() (this was not done properly in [v4] fix: remove usage of findDOMNode #4623)
Deprecate Overlay
Add Overlay2 example with <StrictMode> enabled
Add unit test suite for Overlay2 (mostly ported from overlayTests.tsx, with some modifications to adjust for the new constraints on children - see migration guide)
Migrate straightforward overlay-based components to use Overlay2
- Dialog
- Drawer
- Omnibar
Migrate complex overlay-based components to use Overlay2
- OverlayToaster
- Popover
Create Toast2 component (forwards DOM ref to rendered DOM node), deprecate Toast
Add documentation for Overlay2, update OverlayToaster documentation

TODO (likely in a future PR):

use react-focus-lock to replace a bunch of bespoke focus management code TODO: Use react-focus-lock in overlay component #6676
refactor module-level global overlayStack state into a new context/provider pattern [core] feat: OverlaysProvider #6674
try useImperativeHandle() hook to set the OverlayInstance ref [core] feat(Overlay2): useImperativeHandle #6675

Reviewers should focus on:

No regressions in overlay-based components

Screenshot

Overlay2 in docs-app:

OverlayToaster using Overlay2 and Toast2 in docs-app:

Toast2 in demo-app:

Child ref docs:

adidahiya · 2024-01-16T23:32:59Z

fix compilation, add docs, strict mode compat

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adidahiya · 2024-01-17T00:19:36Z

fix Overlay2 iso test

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adidahiya · 2024-01-17T03:31:29Z

migrate overlay components to use Overlay2

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

packages/core/src/hooks/useRequestAnimationFrame.ts

adidahiya · 2024-01-17T23:29:59Z

fix (almost) all tests

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adidahiya · 2024-01-22T16:16:59Z

Merge remote-tracking branch 'origin/develop' into ad/overlay2

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adidahiya · 2024-01-22T20:42:28Z

update Overlay2 docs

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adidahiya

need to deprecate <Toast> and update OverlayToaster docs to mention <Toast2>

packages/core/src/common/utils/jsUtils.ts

packages/core/src/components/dialog/dialog.tsx

packages/core/src/components/overlay/overlay.md

packages/core/src/components/overlay2/overlay2.md

adidahiya · 2024-01-22T22:40:02Z

fix docs TODO, improve errors

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adidahiya · 2024-01-23T15:18:26Z

fix lint

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adidahiya · 2024-01-23T15:27:15Z

packages/core/src/components/overlay2/overlay2.tsx

+const getLastOpened = () => openStack[openStack.length - 1];
+
+/**
+ * HACKHACK: ugly global state manipulation should move to a proper React context


consider fixing this in this PR and biting the bullet with the necessary <OverlayProvider> break

edit: this PR is already quite large, I could add the context/provider in a follow-up before cutting the next release

adidahiya · 2024-01-23T15:27:33Z

packages/core/src/components/overlay2/overlay2.tsx

+    );
+
+    React.useEffect(() => {
+        setRef(ref, instance);


consider useImperativeHandle to do this instead

adidahiya added 2 commits January 16, 2024 16:40

[core] feat: Overlay2 component

dadd057

fix compilation, add docs, strict mode compat

de2a6e0

adidahiya added 2 commits January 16, 2024 19:00

fix Overlay2 test suite

1374782

fix Overlay2 iso test

4fac32b

adidahiya added 2 commits January 16, 2024 21:59

various fixes

5ce6e80

migrate overlay components to use Overlay2

e9b948b

adidahiya added 4 commits January 17, 2024 11:32

Overlay2 - minor cleanup

6115de1

Fix OverlayToaster, create Toast2, deprecate Overlay

344834e

fix Popover with Overlay2

761458f

fix (almost) all tests

6887589

adidahiya commented Jan 17, 2024

View reviewed changes

packages/core/src/hooks/useRequestAnimationFrame.ts Outdated Show resolved Hide resolved

Merge remote-tracking branch 'origin/develop' into ad/overlay2

3789ec6

adidahiya added 6 commits January 22, 2024 13:44

fix overlayWillClose & scrolling behavior

126659b

fix OverlayToaster tests

392928f

fix ColumnHeaderCell table tests

3309865

fix remaining table tests

916eaa7

Fix isomorphic tests

39226e8

update Overlay2 docs

334b3b5

adidahiya commented Jan 22, 2024

View reviewed changes

adidahiya added 5 commits January 22, 2024 15:54

skip coverage

27f5092

Address self-review

40ba727

update OverlayToaster docs, deprecate Toast2

0fb80c6

handle Toast deprecation

0f2f1d2

improve layout for inline overlay docs examples

9c524bc

fix docs TODO, improve errors

f5b3d6f

adidahiya marked this pull request as ready for review January 22, 2024 22:29

fix lint

3540059

adidahiya mentioned this pull request Jan 22, 2024

React 18 StrictMode Compatibility Plan/State #6572

Closed

adidahiya commented Jan 23, 2024

View reviewed changes

adidahiya merged commit 9dfba77 into develop Jan 24, 2024
11 of 12 checks passed

adidahiya deleted the ad/overlay2 branch January 24, 2024 13:27

gluxon mentioned this pull request May 3, 2024

[core] fix: toasters closing immediately on hover if timeout is set to 0 #6783

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] feat: Overlay2 component #6656

[core] feat: Overlay2 component #6656

adidahiya commented Jan 16, 2024 •

edited

Loading

adidahiya commented Jan 16, 2024

adidahiya commented Jan 17, 2024

adidahiya commented Jan 17, 2024

adidahiya commented Jan 17, 2024

adidahiya commented Jan 22, 2024

adidahiya commented Jan 22, 2024

adidahiya left a comment

adidahiya commented Jan 22, 2024

adidahiya commented Jan 23, 2024

adidahiya Jan 23, 2024 •

edited

Loading

adidahiya Jan 23, 2024

[core] feat: Overlay2 component #6656

[core] feat: Overlay2 component #6656

Conversation

adidahiya commented Jan 16, 2024 • edited Loading

Fixes #3979

Checklist

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

adidahiya commented Jan 16, 2024

fix compilation, add docs, strict mode compat

adidahiya commented Jan 17, 2024

fix Overlay2 iso test

adidahiya commented Jan 17, 2024

migrate overlay components to use Overlay2

adidahiya commented Jan 17, 2024

fix (almost) all tests

adidahiya commented Jan 22, 2024

Merge remote-tracking branch 'origin/develop' into ad/overlay2

adidahiya commented Jan 22, 2024

update Overlay2 docs

adidahiya left a comment

Choose a reason for hiding this comment

adidahiya commented Jan 22, 2024

fix docs TODO, improve errors

adidahiya commented Jan 23, 2024

fix lint

adidahiya Jan 23, 2024 • edited Loading

Choose a reason for hiding this comment

adidahiya Jan 23, 2024

Choose a reason for hiding this comment

adidahiya commented Jan 16, 2024 •

edited

Loading

adidahiya Jan 23, 2024 •

edited

Loading