Skip to content

feat: implement portal compat#22510

Merged
layershifter merged 26 commits into
microsoft:masterfrom
layershifter:feat/portal-compat
May 2, 2022
Merged

feat: implement portal compat#22510
layershifter merged 26 commits into
microsoft:masterfrom
layershifter:feat/portal-compat

Conversation

@layershifter

@layershifter layershifter commented Apr 14, 2022 •
edited
Loading

Copy link
Copy Markdown
Member

New Behavior

This PR adds implementation to @fluentui/react-portal-compat based on RFC #21774.

  • adds implementation & tests
  • clean ups dependencies

Proposed API

  • v0/v8 will depend on @fluentui/react-portal-compat package
  • following changes will be applied to register portal elements
+const registerPortalEl = usePortalCompat();
const element = createPortalElement();

+useIsomorphicLayoutEffect(() => {
+  return element(box);
+}, [element, registerPortalEl]);

Consumers that want compat in their apps:

<FluentProvider theme={theme}>
-  {props.children}
+  <PortalCompatProvider>{props.children}</PortalCompatProvider>
</FluentProvider>

Changes fully implemented for v0 & v8 in ##22541, demo in #22510.

👀 Check demo to see how it works.

Related Issue(s)

Follows #22466.

@fabricteam

fabricteam commented Apr 14, 2022 •
edited
Loading

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

🤖 This report was generated against 1defa2ccd7519da0ce385c6a28cd8b441b63b683

@codesandbox-ci

codesandbox-ci Bot commented Apr 14, 2022 •
edited
Loading

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 813a407:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

layershifter
layershifter commented Apr 14, 2022
View reviewed changes
Comment thread packages/react-portal-compat/.babelrc.json
layershifter
layershifter commented Apr 14, 2022
View reviewed changes
Comment thread packages/react-portal-compat/package.json Outdated
layershifter
layershifter commented Apr 14, 2022
View reviewed changes
Comment thread packages/react-portal-compat/package.json Outdated
@size-auditor

size-auditor Bot commented Apr 14, 2022 •
edited
Loading

Copy link
Copy Markdown

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 1defa2ccd7519da0ce385c6a28cd8b441b63b683 (build)

layershifter
layershifter commented Apr 14, 2022
View reviewed changes
Comment thread packages/react-portal-compat/tsconfig.json
@layershifter layershifter marked this pull request as ready for review April 14, 2022 14:39
@layershifter layershifter requested a review from a team as a code owner April 14, 2022 14:39
@layershifter layershifter requested a review from Hotell April 14, 2022 14:39
layershifter
layershifter commented Apr 14, 2022
View reviewed changes
Comment thread packages/react-portal-compat/package.json
ling1726
ling1726 approved these changes Apr 19, 2022
View reviewed changes

@ling1726 ling1726 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Not entirely sure how we will document this, do you mind adding a usage example to the README ?

@layershifter

layershifter commented Apr 19, 2022

Copy link
Copy Markdown
Member Author

Not entirely sure how we will document this, do you mind adding a usage example to the README ?

Done in 1711b12.

@layershifter layershifter requested a review from a team as a code owner April 19, 2022 09:47
@fabricteam

fabricteam commented Apr 19, 2022 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 938 909 5000
Button mount 539 570 5000
FluentProvider mount 1945 1909 5000
FluentProviderWithTheme mount 300 326 10
FluentProviderWithTheme virtual-rerender 232 241 10
FluentProviderWithTheme virtual-rerender-with-unmount 278 291 10
MakeStyles mount 1573 1582 50000

@layershifter layershifter mentioned this pull request Apr 19, 2022
Merged
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into f…
d290661 
…eat/portal-compat

� Conflicts:
�	packages/react-components/package.json
�	packages/react-components/src/index.ts
�	packages/react-portal-compat/package.json
@layershifter
fix versions
d89c998
Hotell
Hotell approved these changes Apr 25, 2022
View reviewed changes
Comment thread packages/react-portal-compat/.babelrc.json
Comment thread packages/react-portal-compat/jest.config.js
Comment thread packages/react-portal-compat/src/PortalCompatContext.ts Outdated
Comment thread packages/react-portal-compat/tsconfig.json
Comment thread packages/react-portal-compat/src/PortalCompatProvider.tsx Outdated
Comment thread packages/react-portal-compat/src/PortalCompatProvider.tsx Outdated
Comment thread packages/react-portal-compat/README.md
Comment thread packages/react-portal-compat/README.md Outdated
Comment thread packages/react-portal-compat/src/PortalCompatProvider.test.tsx
@layershifter layershifter mentioned this pull request Apr 25, 2022
Merged
@layershifter layershifter mentioned this pull request Apr 26, 2022
Merged
@github-actions github-actions Bot added the Type: RFC Request for Feedback label Apr 26, 2022
layershifter
layershifter commented Apr 26, 2022
View reviewed changes
Comment thread packages/react-portal-compat-context/package.json Outdated
layershifter
layershifter commented Apr 26, 2022
View reviewed changes
Comment thread packages/react-portal-compat-context/package.json
@github-actions github-actions Bot removed the Type: RFC Request for Feedback label Apr 26, 2022
@layershifter layershifter requested a review from Hotell April 26, 2022 15:04
Hotell
Hotell approved these changes Apr 27, 2022
View reviewed changes

@Hotell Hotell left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

pipeline is failing because api extractor - pls regenerate

@layershifter

layershifter commented May 2, 2022

Copy link
Copy Markdown
Member Author

FYI: I also updated (created) README for @fluentui/react-portal-compat-context package.

@layershifter layershifter enabled auto-merge (squash) May 2, 2022 09:18
@layershifter layershifter merged commit 280cf23 into microsoft:master May 2, 2022
@layershifter layershifter deleted the feat/portal-compat branch May 2, 2022 09:30
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
@layershifter @marwan38
feat: implement portal compat (microsoft#22510)
40fe37e 
* feat: implement portal compat

* use react-components as peerDependency

* add readme

* use "useThemeClassName" from react-components

* fix dependencies

* update API file

* fix versions

* cleanup dependencies on react-portal-compat-context

* move context to react-portal-compat-context

* address PR feedback

* cleanup versions

* change file

* fix path in comment

* apply suggestion for readme

* bump pkg to rc

* restore change

* add runtime warning

* make package public

* add changelog

* restore version change & beachball config

* fix version in dependencies

* update README files

* update API files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Hotell Hotell Hotell approved these changes
+1 more reviewer
@ling1726 ling1726 ling1726 approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@layershifter @fabricteam @Hotell @ling1726 @micahgodbolt