Skip to content

rfc: Global styles (normalize)#17561

Closed
miroslavstastny wants to merge 2 commits intomicrosoft:masterfrom
miroslavstastny:rfc/global-styles
Closed

rfc: Global styles (normalize)#17561
miroslavstastny wants to merge 2 commits intomicrosoft:masterfrom
miroslavstastny:rfc/global-styles

Conversation

@miroslavstastny
Copy link
Member

This RFC proposes how those global styles will be injected into DOM.

global-styles.md

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 24, 2021

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

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 24, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 908 926 5000
BaseButton mount 902 912 5000
Breadcrumb mount 43470 43131 5000
ButtonNext mount 541 533 5000
Checkbox mount 1483 1501 5000
CheckboxBase mount 1242 1265 5000
ChoiceGroup mount 4635 4673 5000
ComboBox mount 967 962 1000
CommandBar mount 10016 10006 1000
ContextualMenu mount 6184 6151 1000
DefaultButton mount 1122 1095 5000
DetailsRow mount 3523 3626 5000
DetailsRowFast mount 3524 3576 5000
DetailsRowNoStyles mount 3389 3361 5000
Dialog mount 1428 1472 1000
DocumentCardTitle mount 1825 1822 1000
Dropdown mount 3252 3232 5000
FocusTrapZone mount 1813 1774 5000
FocusZone mount 1786 1790 5000
IconButton mount 1709 1695 5000
Label mount 333 324 5000
Layer mount 1777 1749 5000
Link mount 462 465 5000
MakeStyles mount 1741 1739 50000
MenuButton mount 1433 1400 5000
MessageBar mount 1992 1996 5000
Nav mount 3247 3229 1000
OverflowSet mount 1028 1006 5000
Panel mount 1334 1408 1000
Persona mount 816 811 1000
Pivot mount 1396 1375 1000
PrimaryButton mount 1241 1255 5000
Rating mount 7384 7477 5000
SearchBox mount 1251 1284 5000
Shimmer mount 2511 2510 5000
Slider mount 1905 1933 5000
SpinButton mount 4916 4908 5000
Spinner mount 424 411 5000
SplitButton mount 3097 3079 5000
Stack mount 489 502 5000
StackWithIntrinsicChildren mount 1533 1533 5000
StackWithTextChildren mount 4445 4472 5000
SwatchColorPicker mount 10200 10123 5000
Tabs mount 1411 1377 1000
TagPicker mount 2827 2802 5000
TeachingBubble mount 11575 11434 5000
Text mount 413 403 5000
TextField mount 1327 1350 5000
ThemeProvider mount 1176 1178 5000
ThemeProvider virtual-rerender 596 589 5000
ThemeProviderNext mount 15987 15808 5000
Toggle mount 802 783 5000
buttonNative mount 111 113 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.47 0.36:1 2000 339
🦄 Button.Fluent 0.12 0.19 0.63:1 5000 585
🔧 Checkbox.Fluent 0.65 0.35 1.86:1 1000 654
🎯 Dialog.Fluent 0.16 0.21 0.76:1 5000 805
🔧 Dropdown.Fluent 3.15 0.4 7.87:1 1000 3153
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 678
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 397
🔧 Slider.Fluent 1.62 0.47 3.45:1 1000 1616
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 385
🦄 Tooltip.Fluent 0.14 0.88 0.16:1 5000 698

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 217 201 1.08:1
ImageMinimalPerf.default 403 372 1.08:1
ButtonMinimalPerf.default 197 186 1.06:1
ChatWithPopoverPerf.default 406 384 1.06:1
TreeWith60ListItems.default 194 184 1.05:1
VideoMinimalPerf.default 666 633 1.05:1
CarouselMinimalPerf.default 497 477 1.04:1
FormMinimalPerf.default 436 420 1.04:1
SkeletonMinimalPerf.default 384 371 1.04:1
ToolbarMinimalPerf.default 1022 981 1.04:1
ButtonUseCssPerf.default 854 833 1.03:1
FlexMinimalPerf.default 315 307 1.03:1
LoaderMinimalPerf.default 751 730 1.03:1
RefMinimalPerf.default 256 249 1.03:1
Text.Fluent 385 372 1.03:1
AttachmentMinimalPerf.default 176 172 1.02:1
ButtonSlotsPerf.default 609 598 1.02:1
ChatDuplicateMessagesPerf.default 305 299 1.02:1
DatepickerMinimalPerf.default 47176 46357 1.02:1
LabelMinimalPerf.default 440 432 1.02:1
LayoutMinimalPerf.default 429 419 1.02:1
ProviderMergeThemesPerf.default 1669 1638 1.02:1
ProviderMinimalPerf.default 1019 995 1.02:1
TableManyItemsPerf.default 2026 1990 1.02:1
Avatar.Fluent 339 331 1.02:1
Checkbox.Fluent 654 642 1.02:1
Icon.Fluent 678 667 1.02:1
Slider.Fluent 1616 1591 1.02:1
AttachmentSlotsPerf.default 1205 1190 1.01:1
CheckboxMinimalPerf.default 2871 2832 1.01:1
HeaderMinimalPerf.default 388 383 1.01:1
InputMinimalPerf.default 1319 1303 1.01:1
MenuButtonMinimalPerf.default 1588 1575 1.01:1
PortalMinimalPerf.default 169 168 1.01:1
RadioGroupMinimalPerf.default 463 457 1.01:1
TableMinimalPerf.default 427 421 1.01:1
CustomToolbarPrototype.default 3889 3847 1.01:1
Button.Fluent 585 578 1.01:1
Dialog.Fluent 805 799 1.01:1
AnimationMinimalPerf.default 424 423 1:1
BoxMinimalPerf.default 376 377 1:1
ButtonUseCssNestingPerf.default 1108 1111 1:1
ChatMinimalPerf.default 630 627 1:1
DialogMinimalPerf.default 804 806 1:1
DividerMinimalPerf.default 383 383 1:1
ItemLayoutMinimalPerf.default 1218 1220 1:1
ListWith60ListItems.default 631 629 1:1
MenuMinimalPerf.default 890 892 1:1
PopupMinimalPerf.default 710 712 1:1
SliderMinimalPerf.default 1609 1616 1:1
SplitButtonMinimalPerf.default 3792 3805 1:1
TreeMinimalPerf.default 786 789 1:1
Dropdown.Fluent 3153 3142 1:1
Image.Fluent 397 398 1:1
Tooltip.Fluent 698 700 1:1
AccordionMinimalPerf.default 164 166 0.99:1
CardMinimalPerf.default 557 562 0.99:1
DropdownMinimalPerf.default 3144 3163 0.99:1
EmbedMinimalPerf.default 4252 4296 0.99:1
GridMinimalPerf.default 355 358 0.99:1
ListMinimalPerf.default 518 525 0.99:1
RosterPerf.default 1138 1153 0.99:1
ReactionMinimalPerf.default 411 415 0.99:1
StatusMinimalPerf.default 733 739 0.99:1
TooltipMinimalPerf.default 977 982 0.99:1
AlertMinimalPerf.default 299 304 0.98:1
DropdownManyItemsPerf.default 729 743 0.98:1
HeaderSlotsPerf.default 771 786 0.98:1
ListCommonPerf.default 654 669 0.98:1
ListNestedPerf.default 566 579 0.98:1
SegmentMinimalPerf.default 354 363 0.98:1
TextMinimalPerf.default 366 374 0.98:1
TextAreaMinimalPerf.default 484 496 0.98:1
ButtonOverridesMissPerf.default 1714 1766 0.97:1
IconMinimalPerf.default 672 726 0.93:1

@size-auditor
Copy link

size-auditor bot commented Mar 24, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-Pill 96.158 kB 94.479 kB BelowBaseline     -1.679 kB

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 816ce1e01693083e6e651f4b2f3912acc5dd6832 (build)


## Open Issues

- Where will the `CSSBaseline` component take the `window` from? If from context, then it must be inside a `Provider` tree.
Copy link
Member

Choose a reason for hiding this comment

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

I would say that CSSBaseline should be rendered inside a Provider always: it's required by makeStaticStyles() to render into proper document.

@bsunderhus bsunderhus mentioned this pull request Mar 25, 2021
1 task
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
@miroslavstastny miroslavstastny mentioned this pull request Mar 30, 2021
22 tasks
@paulgildea paulgildea added the Type: RFC Request for Feedback label Mar 31, 2021
@miroslavstastny miroslavstastny marked this pull request as draft April 20, 2021 13:23
@miroslavstastny
Copy link
Member Author

On hold, discussing with partners.

@msft-fluent-ui-bot
Copy link
Collaborator

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.

@msft-fluent-ui-bot msft-fluent-ui-bot added the Resolution: Soft Close Soft closing inactive issues over a certain period label Sep 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Resolution: Soft Close Soft closing inactive issues over a certain period Type: RFC Request for Feedback

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants