Skip to content

RFC: Extended Design Tokens for Fluent UI React#32058

Merged
EdDaWord merged 2 commits intomicrosoft:masterfrom
EdDaWord:edwardwang/extended-design-tokens-rfc
Sep 10, 2024
Merged

RFC: Extended Design Tokens for Fluent UI React#32058
EdDaWord merged 2 commits intomicrosoft:masterfrom
EdDaWord:edwardwang/extended-design-tokens-rfc

Conversation

@EdDaWord
Copy link
Contributor

@EdDaWord EdDaWord commented Jul 19, 2024 •
edited
Loading

Description

This RFC outlines implementation details for an expansion of Fluent UI React's token system to enable better cross-platform support and more intuitive and predictable customization. It is effectively adding a new component token layer to complete the original tokens proposal, which today only includes global and alias.

It is also part of a broader effort to align and unify tokens across various implementations of Microsoft's design system. This expanded token system will also serve as a mechanism to achieve visual alignment between products and libraries implementing Fluent 2.

Related

Prototype PRs:

Testing for Bundle Size of FUIR:

Testing for Performance in product:

  • [Please ask for link to data]
    image

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2024 •
edited
Loading

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2024 •
edited
Loading

📊 Bundle size report

✅ No changes found

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 36 42 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 76 82 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 634 637 5000
Button mount 293 302 5000
Field mount 1120 1183 5000
FluentProvider mount 717 719 5000
FluentProviderWithTheme mount 84 90 10
FluentProviderWithTheme virtual-rerender 36 42 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 76 82 10 Possible regression
MakeStyles mount 858 875 50000
Persona mount 1783 1753 5000
SpinButton mount 1387 1432 5000
SwatchPicker mount 1652 1681 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatWithPopoverPerf.default 214 191 1.12:1
ImageMinimalPerf.default 246 219 1.12:1
ListWith60ListItems.default 387 357 1.08:1
ChatMinimalPerf.default 457 427 1.07:1
ButtonMinimalPerf.default 92 87 1.06:1
FormMinimalPerf.default 235 221 1.06:1
LabelMinimalPerf.default 231 218 1.06:1
LayoutMinimalPerf.default 213 201 1.06:1
ListCommonPerf.default 403 380 1.06:1
CarouselMinimalPerf.default 269 255 1.05:1
ProviderMinimalPerf.default 210 200 1.05:1
StatusMinimalPerf.default 415 396 1.05:1
TreeWith60ListItems.default 92 88 1.05:1
VideoMinimalPerf.default 455 432 1.05:1
InputMinimalPerf.default 561 538 1.04:1
ListNestedPerf.default 333 319 1.04:1
LoaderMinimalPerf.default 192 184 1.04:1
PortalMinimalPerf.default 87 84 1.04:1
SegmentMinimalPerf.default 200 192 1.04:1
SkeletonMinimalPerf.default 203 196 1.04:1
TextMinimalPerf.default 202 194 1.04:1
DatepickerMinimalPerf.default 3572 3480 1.03:1
HeaderSlotsPerf.default 472 460 1.03:1
TooltipMinimalPerf.default 1298 1258 1.03:1
AccordionMinimalPerf.default 88 86 1.02:1
AvatarMinimalPerf.default 110 108 1.02:1
BoxMinimalPerf.default 203 199 1.02:1
CheckboxMinimalPerf.default 1158 1131 1.02:1
DropdownMinimalPerf.default 1439 1415 1.02:1
CustomToolbarPrototype.default 1494 1460 1.02:1
AttachmentMinimalPerf.default 87 86 1.01:1
ButtonSlotsPerf.default 316 313 1.01:1
DropdownManyItemsPerf.default 388 383 1.01:1
EmbedMinimalPerf.default 1883 1864 1.01:1
FlexMinimalPerf.default 157 156 1.01:1
PopupMinimalPerf.default 357 354 1.01:1
ReactionMinimalPerf.default 214 212 1.01:1
ToolbarMinimalPerf.default 539 536 1.01:1
TreeMinimalPerf.default 493 489 1.01:1
AnimationMinimalPerf.default 303 304 1:1
CardMinimalPerf.default 315 316 1:1
DialogMinimalPerf.default 456 457 1:1
ProviderMergeThemesPerf.default 640 638 1:1
RefMinimalPerf.default 111 111 1:1
SliderMinimalPerf.default 760 763 1:1
SplitButtonMinimalPerf.default 2238 2234 1:1
IconMinimalPerf.default 399 399 1:1
TableManyItemsPerf.default 1116 1117 1:1
GridMinimalPerf.default 191 193 0.99:1
MenuButtonMinimalPerf.default 944 954 0.99:1
TextAreaMinimalPerf.default 284 287 0.99:1
ButtonOverridesMissPerf.default 655 669 0.98:1
HeaderMinimalPerf.default 202 207 0.98:1
ItemLayoutMinimalPerf.default 707 725 0.98:1
ListMinimalPerf.default 306 311 0.98:1
MenuMinimalPerf.default 498 506 0.98:1
RosterPerf.default 1602 1638 0.98:1
RadioGroupMinimalPerf.default 254 260 0.98:1
AlertMinimalPerf.default 159 164 0.97:1
ChatDuplicateMessagesPerf.default 156 162 0.96:1
TableMinimalPerf.default 228 237 0.96:1
DividerMinimalPerf.default 204 214 0.95:1
AttachmentSlotsPerf.default 617 662 0.93:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2024 •
edited
Loading

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 19, 2024 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 623 644 5000
Breadcrumb mount 1684 1677 1000
Checkbox mount 1707 1716 5000
CheckboxBase mount 1472 1489 5000
ChoiceGroup mount 3007 3028 5000
ComboBox mount 692 677 1000
CommandBar mount 6635 6585 1000
ContextualMenu mount 11883 12126 1000
DefaultButton mount 817 804 5000
DetailsRow mount 2183 2245 5000
DetailsRowFast mount 2222 2233 5000
DetailsRowNoStyles mount 2034 2059 5000
Dialog mount 2681 2761 1000
DocumentCardTitle mount 238 221 1000
Dropdown mount 1997 1979 5000
FocusTrapZone mount 1149 1126 5000
FocusZone mount 1094 1093 5000
GroupedList mount 42282 42414 2
GroupedList virtual-rerender 20503 20328 2
GroupedList virtual-rerender-with-unmount 53554 51899 2
GroupedListV2 mount 223 237 2
GroupedListV2 virtual-rerender 222 219 2
GroupedListV2 virtual-rerender-with-unmount 235 230 2
IconButton mount 1135 1102 5000
Label mount 338 336 5000
Layer mount 2766 2746 5000
Link mount 392 390 5000
MenuButton mount 996 994 5000
MessageBar mount 21260 21248 5000
Nav mount 2020 2014 1000
OverflowSet mount 800 780 5000
Panel mount 1847 1820 1000
Persona mount 740 747 1000
Pivot mount 901 937 1000
PrimaryButton mount 931 959 5000
Rating mount 4720 4667 5000
SearchBox mount 926 915 5000
Shimmer mount 1904 1888 5000
Slider mount 1377 1335 5000
SpinButton mount 2964 2979 5000
Spinner mount 404 400 5000
SplitButton mount 1867 1893 5000
Stack mount 419 431 5000
StackWithIntrinsicChildren mount 899 885 5000
StackWithTextChildren mount 2741 2762 5000
SwatchColorPicker mount 6394 6394 5000
TagPicker mount 1436 1459 5000
Text mount 382 395 5000
TextField mount 930 947 5000
ThemeProvider mount 859 843 5000
ThemeProvider virtual-rerender 590 593 5000
ThemeProvider virtual-rerender-with-unmount 1307 1290 5000
Toggle mount 624 625 5000
buttonNative mount 197 194 5000

@EdDaWord EdDaWord changed the title Edwardwang/extended design tokens rfc RFC: Extended Design Tokens for Fluent UI React Jul 19, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 23, 2024 •
edited
Loading

🕵 fluentuiv8 No visual regressions between this PR and main

spmonahan
spmonahan reviewed Jul 30, 2024
View reviewed changes
@EdDaWord EdDaWord marked this pull request as ready for review July 31, 2024 16:22
@EdDaWord EdDaWord requested review from a team as code owners July 31, 2024 16:22
@tudorpopams tudorpopams requested a review from mainframev August 1, 2024 12:04
@layershifter layershifter added the Type: RFC Request for Feedback label Aug 5, 2024
layershifter
layershifter reviewed Aug 7, 2024
View reviewed changes
@EdDaWord EdDaWord force-pushed the edwardwang/extended-design-tokens-rfc branch from ba64266 to cd332ef Compare August 15, 2024 18:23
@github-actions github-actions bot removed the Type: RFC Request for Feedback label Aug 15, 2024
@EdDaWord EdDaWord added the Type: RFC Request for Feedback label Sep 4, 2024
@EdDaWord EdDaWord force-pushed the edwardwang/extended-design-tokens-rfc branch from cd332ef to 063fe30 Compare September 5, 2024 18:19
@github-actions github-actions bot removed the Type: RFC Request for Feedback label Sep 5, 2024
@EdDaWord EdDaWord added the Type: RFC Request for Feedback label Sep 5, 2024
@EdDaWord
RFC: Extended Design Tokens for Fluent UI React
0da0226 
Added file by accident

Format the markdown correctly

Format the markdown correctly

Format the markdown correctly

Forgot to capitalize title

Small change

Fix small mistakes

Add prototypes, plugin, and pruning code links

Fix small mistakes

Address Sean's points

Forgot to address one of Sean's points
@EdDaWord
Address PR feedback
2be3b76
@EdDaWord EdDaWord force-pushed the edwardwang/extended-design-tokens-rfc branch from 063fe30 to 2be3b76 Compare September 5, 2024 21:26
@github-actions github-actions bot removed the Type: RFC Request for Feedback label Sep 5, 2024
@EdDaWord EdDaWord merged commit ef85da4 into microsoft:master Sep 10, 2024
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 12, 2024
@marcosmoura
Merge branch 'master' into feat/tokens/add-zindexes
861193e 
* master: (77 commits)
  fix(react-drawer): update scroll state when children changes (microsoft#32818)
  feat(react-storybook-addon): improve addon to more readable names (microsoft#32815)
  chore: cleanup react-carousel-preview (microsoft#32475)
  feat(storybook): add rtl/ltr toggle storybook addon (microsoft#32814)
  Carousel: Storybook updates and fixing exports/focus (microsoft#32457)
  release: applying package updates - react v8
  release: applying package updates - web-components
  Update d3 dependency versions to 3.x.x and 4.x.x (microsoft#32463)
  RFC: Extended Design Tokens for Fluent UI React (microsoft#32058)
  update doc to reflect setTheme function change (microsoft#32490)
  fix (react-dialog): Use consistent rounding for clientHeight and innerHeight (microsoft#32480)
  fix(public-doscite-v9): global styles should not be applied to story elements (microsoft#32472)
  feat(workspace-plugin): implement verify-packaging executor (microsoft#32403)
  release: applying package updates - react-components
  Add strokeDasharray property when optimizeLargeData is true (microsoft#32494)
  fix(TreeItemLayout): Actions should not unmount between successive mouse events (microsoft#32477)
  release: applying package updates - react v8
  bugfix(react-tree): recover from tabIndex=-1 when TreeItem is removed (microsoft#32442)
  Fix onResolveSuggestions not being called after component is remounted in react 18 strict mode (microsoft#28227)
  fix(codeowners): update most packages owned by cxe-red with cxe-prg (microsoft#32445)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@davatron5000 davatron5000 davatron5000 left review comments

@Hotell Hotell Hotell left review comments

@brandonthomas brandonthomas brandonthomas left review comments

@fabricteam fabricteam fabricteam left review comments

@layershifter layershifter layershifter left review comments

@mainframev mainframev mainframev approved these changes

@spmonahan spmonahan spmonahan approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

8 participants

@EdDaWord @fabricteam @davatron5000 @Hotell @brandonthomas @mainframev @layershifter @spmonahan