Skip to content

feat(react-tags-preview): add useCustomStyleHook_unstable to all components#29237

Merged
YuanboXue-Amber merged 3 commits intomicrosoft:masterfrom
YuanboXue-Amber:yuanboxue/tag-3
Sep 22, 2023
Merged

feat(react-tags-preview): add useCustomStyleHook_unstable to all components#29237
YuanboXue-Amber merged 3 commits intomicrosoft:masterfrom
YuanboXue-Amber:yuanboxue/tag-3

Conversation

@YuanboXue-Amber
Copy link
Contributor

@YuanboXue-Amber YuanboXue-Amber commented Sep 21, 2023

fix #29223.
Add useCustomStyleHook_unstable to all components: InteractionTag/InteractionTagPrimary/InteractionTagSecondary, Tag, TagGroup

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 21, 2023

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-tags-preview
InteractionTag
14.038 kB
5.658 kB
14.23 kB
5.722 kB
192 B
64 B
react-tags-preview
Tag
29.806 kB
9.597 kB
29.985 kB
9.667 kB
179 B
70 B
react-tags-preview
TagGroup
72.687 kB
21.648 kB
72.871 kB
21.705 kB
184 B
57 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
91.583 kB
27.954 kB
react-alert
Alert
83.657 kB
22.895 kB
react-avatar
Avatar
49.035 kB
15.434 kB
react-avatar
AvatarGroup
18.782 kB
7.48 kB
react-avatar
AvatarGroupItem
63.687 kB
19.786 kB
react-badge
Badge
25.987 kB
8.384 kB
react-badge
CounterBadge
26.888 kB
8.687 kB
react-badge
PresenceBadge
24.046 kB
8.762 kB
react-button
Button
39.667 kB
10.794 kB
react-button
CompoundButton
47.023 kB
12.295 kB
react-button
MenuButton
44.094 kB
12.056 kB
react-button
SplitButton
52.12 kB
13.632 kB
react-button
ToggleButton
56.756 kB
12.702 kB
react-card
Card - All
91.443 kB
26.437 kB
react-card
Card
86.232 kB
24.895 kB
react-card
CardFooter
12.14 kB
5.061 kB
react-card
CardHeader
14.431 kB
5.832 kB
react-card
CardPreview
13.097 kB
5.434 kB
react-checkbox
Checkbox
35.808 kB
11.802 kB
react-combobox
Combobox (including child components)
90.577 kB
29.554 kB
react-combobox
Dropdown (including child components)
88.932 kB
29.201 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.572 kB
19.658 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
208.392 kB
59.385 kB
react-components
react-components: FluentProvider & webLightTheme
40.966 kB
13.569 kB
react-datepicker-compat
DatePicker Compat
211.639 kB
58.838 kB
react-dialog
Dialog (including children components)
90.125 kB
27.485 kB
react-divider
Divider
19.902 kB
7.415 kB
react-field
Field
21.234 kB
8.128 kB
react-image
Image
14.818 kB
5.902 kB
react-infobutton
InfoButton
129.801 kB
40.756 kB
react-infobutton
InfoLabel
133.534 kB
41.945 kB
react-input
Input
26.143 kB
8.844 kB
react-label
Label
13.225 kB
5.438 kB
react-link
Link
16.095 kB
6.53 kB
react-menu
Menu (including children components)
139.823 kB
43.055 kB
react-menu
Menu (including selectable components)
142.559 kB
43.576 kB
react-persona
Persona
55.926 kB
17.314 kB
react-popover
Popover
118.895 kB
37.406 kB
react-portal
Portal
12.362 kB
4.543 kB
react-portal-compat
PortalCompatProvider
6.541 kB
2.227 kB
react-positioning
usePositioning
25.245 kB
9.141 kB
react-progress
ProgressBar
16.598 kB
6.608 kB
react-provider
FluentProvider
21.511 kB
7.994 kB
react-radio
Radio
29.517 kB
9.732 kB
react-radio
RadioGroup
14.543 kB
5.985 kB
react-select
Select
27.518 kB
9.804 kB
react-slider
Slider
37.043 kB
12.203 kB
react-spinbutton
SpinButton
35.724 kB
11.399 kB
react-spinner
Spinner
22.481 kB
8.146 kB
react-switch
Switch
32.079 kB
10.39 kB
react-table
DataGrid
156.732 kB
43.665 kB
react-table
Table (Primitives only)
42.668 kB
13.304 kB
react-table
Table as DataGrid
129.489 kB
34.797 kB
react-table
Table (Selection only)
74.765 kB
20.107 kB
react-table
Table (Sort only)
73.396 kB
19.701 kB
react-text
Text - Default
15.832 kB
6.254 kB
react-text
Text - Wrappers
19.01 kB
6.578 kB
react-textarea
Textarea
30.203 kB
10.199 kB
react-toast
Toast (including Toaster)
91.789 kB
27.423 kB
react-tooltip
Tooltip
51.348 kB
18.113 kB
🤖 This report was generated against 979322ae432426868be11b010d88b9c1b37c0c0d

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 21, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 625 614 5000
Button mount 312 306 5000
Field mount 1070 1112 5000
FluentProvider mount 692 683 5000
FluentProviderWithTheme mount 75 78 10
FluentProviderWithTheme virtual-rerender 67 68 10
FluentProviderWithTheme virtual-rerender-with-unmount 76 75 10
InfoButton mount 13 11 5000
MakeStyles mount 860 862 50000
Persona mount 1738 1659 5000
SpinButton mount 1392 1384 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 21, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@codesandbox-ci
Copy link

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 dfe8908:

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

@size-auditor
Copy link

size-auditor bot commented Sep 21, 2023

Asset size changes

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

Baseline commit: 979322ae432426868be11b010d88b9c1b37c0c0d (build)

@YuanboXue-Amber YuanboXue-Amber marked this pull request as ready for review September 21, 2023 22:06
@YuanboXue-Amber YuanboXue-Amber requested review from a team as code owners September 21, 2023 22:06
@YuanboXue-Amber YuanboXue-Amber merged commit 45ab251 into microsoft:master Sep 22, 2023
@YuanboXue-Amber YuanboXue-Amber deleted the yuanboxue/tag-3 branch September 22, 2023 09:01
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 25, 2023
…s-classnames

* master:
  chore: Updating @fluentui/react-icons to version 2.0.216 (microsoft#29151)
  Replace cxe-coastal with cxe-red in codeowners (microsoft#29248)
  feat(react-drawer): add support to override Dialog as slot (microsoft#29217)
  fix(react-tags-preview): update `handleTagDismiss` type (microsoft#29240)
  create TimePicker component (microsoft#29252)
  Create react-timepicker-compat-preview package (microsoft#29216)
  feat(react-tags-preview): add useCustomStyleHook_unstable to all components (microsoft#29237)
  Enable reflow for all cartesian chart examples (microsoft#29229)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Component: Tag v9 Tag component

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Tag components should use useCustomStyleHook_unstable

3 participants