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

refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API #29042

Merged

Conversation

marcosmoura
Copy link
Contributor

This is a simple refactor of the DrawerHeaderTitle to remove Dialog dependencies.

Why?

To make the component more lightweight and simpler to reason about.

Previous

We were relying on DialogTitle to make DrawerHeaderTitle.

Current

We now create all the slots with dependency free. This makes it easier to create the component state.

Note: The styles are still using the useDialogTitleStyles, as we want the same styling to be applied.

@marcosmoura marcosmoura requested a review from a team as a code owner August 31, 2023 17:32
@marcosmoura marcosmoura self-assigned this Aug 31, 2023
@marcosmoura marcosmoura added the Component: Drawer The Fluent v9 Drawer component label Aug 31, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 31, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 13 18 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 649 609 5000
Button mount 321 317 5000
Field mount 1119 1084 5000
FluentProvider mount 696 695 5000
FluentProviderWithTheme mount 83 80 10
FluentProviderWithTheme virtual-rerender 79 70 10
FluentProviderWithTheme virtual-rerender-with-unmount 81 76 10
InfoButton mount 13 18 5000 Possible regression
MakeStyles mount 854 870 50000
Persona mount 1731 1703 5000
SpinButton mount 1367 1340 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 31, 2023

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 181b7cb:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 31, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.517 kB
19.64 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
208.067 kB
59.345 kB
react-components
react-components: FluentProvider & webLightTheme
40.713 kB
13.509 kB
react-portal-compat
PortalCompatProvider
6.541 kB
2.227 kB
🤖 This report was generated against 03ff2af91de2dc1cd4bc4f3d60735d39396634a5

@size-auditor
Copy link

size-auditor bot commented Aug 31, 2023

Asset size changes

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

Baseline commit: 03ff2af91de2dc1cd4bc4f3d60735d39396634a5 (build)

@marcosmoura marcosmoura enabled auto-merge (squash) September 3, 2023 17:23
@marcosmoura marcosmoura merged commit 6363e77 into microsoft:master Sep 3, 2023
@marcosmoura marcosmoura deleted the fix/simplify-drawer-header-title branch September 3, 2023 17:55
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 3, 2023
* master:
  refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API (microsoft#29042)
  test(react-drawer): add render tests for drawer subcomponents (microsoft#29043)
  Grouped vertical bar chart - Component tests (microsoft#29031)
  docs: add Fluent UI Insights EP06 to README (microsoft#29051)
  chore: use swc-plugin-de-indent-template-literal for consoles (microsoft#29040)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 3, 2023
* master:
  refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API (microsoft#29042)
  test(react-drawer): add render tests for drawer subcomponents (microsoft#29043)
  Grouped vertical bar chart - Component tests (microsoft#29031)
  docs: add Fluent UI Insights EP06 to README (microsoft#29051)
  chore: use swc-plugin-de-indent-template-literal for consoles (microsoft#29040)
  chore: adds swc-plugin-de-indent-template-literal (microsoft#29037)
  feat(react-jsx-runtime): v9 packages to use importSource (microsoft#28959)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 3, 2023
* master: (32 commits)
  refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API (microsoft#29042)
  test(react-drawer): add render tests for drawer subcomponents (microsoft#29043)
  Grouped vertical bar chart - Component tests (microsoft#29031)
  docs: add Fluent UI Insights EP06 to README (microsoft#29051)
  chore: use swc-plugin-de-indent-template-literal for consoles (microsoft#29040)
  chore: adds swc-plugin-de-indent-template-literal (microsoft#29037)
  feat(react-jsx-runtime): v9 packages to use importSource (microsoft#28959)
  chore: update swc build dependencies (microsoft#28989)
  fix(react-tags-preview): add hover/pressed style for windows high contrast (microsoft#29035)
  chore(react-tags-preview): use InteractionTag for TagGroup's stories (microsoft#29024)
  chore(react-tags-preview): use makeResetStyles for base styles (microsoft#29022)
  chore: fix codesandbox export for preview component by making @fluentui/react-components required dependency (microsoft#29016)
  applying package updates
  feat(react-motion): create useReducedMotion and apply to useMotion to skip animations (microsoft#29014)
  ReAdd: Keytips: Align keytipData with visible instance for dupes (microsoft#28992)
  feat(react-drawer): add motion to Drawer (microsoft#28999)
  fix(react-utilities): avoid calling requestAnimationFrame when in SSR (microsoft#29015)
  fix(ssr-tests-v9): use correct path for ssr-tests-v9 stories (microsoft#29025)
  chore: updates devcontainer to use v16-bookworm image (microsoft#28997)
  feat(docsite): add Application Insights telemetry (microsoft#28709)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Drawer The Fluent v9 Drawer component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants