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

Rename @uifabric/styling to @fluentui/style-utilities #15567

Merged
merged 8 commits into from
Oct 19, 2020

Conversation

ecraig12345
Copy link
Member

Pull request checklist

Description of changes

Rename @uifabric/styling to @fluentui/style-utilities.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 16, 2020

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

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

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 16, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 904 827 5000
BaseButtonCompat mount 1005 971 5000
Breadcrumb mount 160403 160404 5000
Checkbox mount 1661 1637 5000
CheckboxBase mount 1343 1345 5000
ChoiceGroup mount 5079 5057 5000
ComboBox mount 1002 1015 1000
CommandBar mount 22083 22107 1000
ContextualMenu mount 6407 6189 1000
DefaultButtonCompat mount 1188 1237 5000
DetailsRow mount 3778 3866 5000
DetailsRowFast mount 3792 3922 5000
DetailsRowNoStyles mount 3651 3542 5000
Dialog mount 1566 1626 1000
DocumentCardTitle mount 1809 1850 1000
Dropdown mount 3994 3999 5000
FocusTrapZone mount 1849 1851 5000
FocusZone mount 1793 1823 5000
IconButtonCompat mount 1842 1909 5000
Label mount 343 333 5000
Layer mount 1898 1956 5000
Link mount 500 485 5000
MenuButtonCompat mount 1610 1591 5000
MessageBar mount 2075 2084 5000
Nav mount 3395 3412 1000
OverflowSet mount 1104 1080 5000
Panel mount 1466 1557 1000
Persona mount 882 913 1000
Pivot mount 1443 1517 1000
PrimaryButtonCompat mount 1360 1346 5000
Rating mount 8179 7943 5000
SearchBox mount 1501 1406 5000
Shimmer mount 2684 2649 5000
Slider mount 2012 1993 5000
SpinButton mount 5536 5441 5000
Spinner mount 426 420 5000
SplitButtonCompat mount 3340 3344 5000
Stack mount 558 568 5000
StackWithIntrinsicChildren mount 2077 2022 5000
StackWithTextChildren mount 5364 5299 5000
SwatchColorPicker mount 10839 11034 5000
TagPicker mount 3029 2924 5000
TeachingBubble mount 12001 11978 5000
Text mount 451 434 5000
TextField mount 1461 1494 5000
ThemeProvider mount 1998 2053 5000
ThemeProvider virtual-rerender 688 661 5000
Toggle mount 818 812 5000
button mount 609 581 5000
buttonNative mount 108 124 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.53 0.94:1 2000 1002
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 638
🔧 Checkbox.Fluent 0.66 0.36 1.83:1 1000 657
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 869
🔧 Dropdown.Fluent 3.06 0.46 6.65:1 1000 3063
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 787
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 428
🔧 Slider.Fluent 1.67 0.51 3.27:1 1000 1668
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 435
🦄 Tooltip.Fluent 0.12 0.91 0.13:1 5000 600

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 179 163 1.1:1
DropdownManyItemsPerf.default 868 800 1.09:1
FormMinimalPerf.default 518 474 1.09:1
AnimationMinimalPerf.default 467 437 1.07:1
DividerMinimalPerf.default 470 440 1.07:1
LayoutMinimalPerf.default 479 449 1.07:1
ListWith60ListItems.default 1056 990 1.07:1
Text.Fluent 435 410 1.06:1
CardMinimalPerf.default 653 620 1.05:1
CarouselMinimalPerf.default 516 491 1.05:1
GridMinimalPerf.default 405 387 1.05:1
LabelMinimalPerf.default 510 487 1.05:1
TextAreaMinimalPerf.default 566 539 1.05:1
VideoMinimalPerf.default 702 670 1.05:1
ButtonMinimalPerf.default 205 198 1.04:1
ButtonUseCssPerf.default 919 880 1.04:1
ChatDuplicateMessagesPerf.default 478 458 1.04:1
ListMinimalPerf.default 572 550 1.04:1
AttachmentSlotsPerf.default 1248 1217 1.03:1
ButtonOverridesMissPerf.default 1838 1793 1.03:1
FlexMinimalPerf.default 359 348 1.03:1
SkeletonMinimalPerf.default 511 495 1.03:1
StatusMinimalPerf.default 813 787 1.03:1
IconMinimalPerf.default 768 745 1.03:1
TreeWith60ListItems.default 213 206 1.03:1
Dialog.Fluent 869 844 1.03:1
Tooltip.Fluent 600 582 1.03:1
BoxMinimalPerf.default 407 400 1.02:1
MenuMinimalPerf.default 1001 986 1.02:1
ProviderMergeThemesPerf.default 2150 2111 1.02:1
SegmentMinimalPerf.default 435 428 1.02:1
TableMinimalPerf.default 498 487 1.02:1
CustomToolbarPrototype.default 4065 3987 1.02:1
AccordionMinimalPerf.default 183 182 1.01:1
ButtonSlotsPerf.default 661 654 1.01:1
ButtonUseCssNestingPerf.default 1191 1180 1.01:1
ChatWithPopoverPerf.default 530 523 1.01:1
CheckboxMinimalPerf.default 3016 2993 1.01:1
ItemLayoutMinimalPerf.default 1450 1442 1.01:1
MenuButtonMinimalPerf.default 1776 1764 1.01:1
RefMinimalPerf.default 269 267 1.01:1
TreeMinimalPerf.default 975 970 1.01:1
Icon.Fluent 787 782 1.01:1
ChatMinimalPerf.default 688 687 1:1
ImageMinimalPerf.default 451 452 1:1
ListCommonPerf.default 735 738 1:1
LoaderMinimalPerf.default 783 785 1:1
PopupMinimalPerf.default 754 757 1:1
ReactionMinimalPerf.default 475 473 1:1
SliderMinimalPerf.default 1732 1737 1:1
SplitButtonMinimalPerf.default 4084 4092 1:1
TableManyItemsPerf.default 2380 2376 1:1
TextMinimalPerf.default 417 418 1:1
Avatar.Fluent 1002 1003 1:1
Button.Fluent 638 635 1:1
Dropdown.Fluent 3063 3060 1:1
Slider.Fluent 1668 1664 1:1
AttachmentMinimalPerf.default 188 190 0.99:1
EmbedMinimalPerf.default 2036 2053 0.99:1
InputMinimalPerf.default 1362 1372 0.99:1
TooltipMinimalPerf.default 879 885 0.99:1
AlertMinimalPerf.default 329 336 0.98:1
DialogMinimalPerf.default 861 875 0.98:1
HeaderMinimalPerf.default 402 411 0.98:1
HeaderSlotsPerf.default 867 882 0.98:1
AvatarMinimalPerf.default 504 517 0.97:1
ToolbarMinimalPerf.default 1042 1078 0.97:1
ProviderMinimalPerf.default 1060 1107 0.96:1
RadioGroupMinimalPerf.default 495 516 0.96:1
Checkbox.Fluent 657 687 0.96:1
ListNestedPerf.default 645 682 0.95:1
Image.Fluent 428 450 0.95:1
DropdownMinimalPerf.default 2979 3189 0.93:1

@size-auditor
Copy link

size-auditor bot commented Oct 16, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-ActivityItem 66.367 kB 66.375 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Image 42.587 kB 42.595 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Panel 185.472 kB 185.48 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Overlay 37.63 kB 37.638 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ChoiceGroupOption 54.381 kB 54.389 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Nav 174.296 kB 174.304 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Modal 89.734 kB 89.742 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-MessageBar 173.739 kB 173.747 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-MarqueeSelection 67.255 kB 67.263 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Coachmark 85.429 kB 85.437 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Link 34.869 kB 34.877 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Layer 42.842 kB 42.85 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Label 35.271 kB 35.279 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Keytips 96.041 kB 96.049 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-KeytipLayer 93.043 kB 93.051 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Keytip 72.619 kB 72.627 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Icons 63.922 kB 63.93 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-DetailsList 208.283 kB 208.291 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Icon 47.571 kB 47.579 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-HoverCard 89.314 kB 89.322 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-GroupedList 117.728 kB 117.736 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Grid 166.321 kB 166.329 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ColorPicker 84.275 kB 84.283 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ComboBox 230.357 kB 230.365 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 224.461 kB 224.469 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Facepile 194.734 kB 194.742 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Fabric 39.065 kB 39.073 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-CommandBar 185.895 kB 185.903 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Dropdown 216.171 kB 216.179 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ContextualMenu 142.733 kB 142.741 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-DocumentCard 200.01 kB 200.018 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-DatePicker 195.714 kB 195.722 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Persona 104.155 kB 104.163 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-PersonaCoin 104.155 kB 104.163 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-PersonaPresence 53.805 kB 53.813 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Pickers 267.624 kB 267.632 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Announced 35.349 kB 35.357 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Tooltip 77.543 kB 77.551 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Toggle 41.841 kB 41.849 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 184.304 kB 184.312 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-TextField 73.392 kB 73.4 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Text 34.162 kB 34.17 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 189.768 kB 189.776 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-SwatchColorPicker 175.834 kB 175.842 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Styling 43.009 kB 43.017 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Sticky 30.728 kB 30.736 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Stack 38.503 kB 38.511 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Spinner 38.529 kB 38.537 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-SpinButton 179.039 kB 179.047 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Slider 50.707 kB 50.715 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 218.594 kB 218.602 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Shimmer 45.793 kB 45.801 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Rating 73.039 kB 73.047 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Pivot 174.182 kB 174.19 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ChoiceGroup 58.236 kB 58.244 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Checkbox 54.615 kB 54.623 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-PositioningContainer 66.599 kB 66.607 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ProgressIndicator 35.79 kB 35.798 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Check 48.868 kB 48.876 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-ScrollablePane 52.145 kB 52.153 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-SearchBox 172.767 kB 172.775 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Callout 76.583 kB 76.591 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 214.086 kB 214.094 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Calendar 137.829 kB 137.837 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Button 179.743 kB 179.751 kB ExceedsBaseline     8 bytes
office-ui-fabric-react fluentui-react-Dialog 195.912 kB 195.92 kB ExceedsBaseline     8 bytes

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

Baseline commit: 42dd013887414826ea5ba71ba936d52a580938b9 (build)

packages/style-utilities/README.md Outdated Show resolved Hide resolved
Comment on lines -105 to +107
This tool helps you easily create all the shades and slots for a custom theme. The theme can be used by
Fabric React's styling package, see the{' '}
{/* eslint-disable-next-line @fluentui/max-len */}
This tool helps you easily create all the shades and slots for a custom theme. The theme can be used by the{' '}
<code>@fluentui/style-utilities</code> package; see the{' '}
Copy link
Contributor

Choose a reason for hiding this comment

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

(nit) maybe just reflow the line instead of disabling the line length warning?

Copy link
Member Author

Choose a reason for hiding this comment

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

Unfortunately this is one of the handful of cases where prettier and eslint conflict--prettier thinks the line is "prettiest"(??) this way despite being slightly over the max length, but eslint doesn't have that exception. There's not an easy way to change how prettier formats things, so usually in cases like this we disable the lint rule one-off.

@ecraig12345
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@ecraig12345 ecraig12345 reopened this Oct 19, 2020
@ecraig12345 ecraig12345 merged commit 5158b5e into microsoft:master Oct 19, 2020
@ecraig12345 ecraig12345 deleted the rename-styling branch October 19, 2020 06:09
@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants