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.

Sign up for GitHub

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

Jump to bottom

feat(web-components): improve ergonomics of the fluent design system #19056

Merged
merged 5 commits into from
Jul 24, 2021
Merged

feat(web-components): improve ergonomics of the fluent design system #19056

merged 5 commits into from
Jul 24, 2021

Conversation

EisenbergEffect
Copy link
Contributor

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Based on community feedback and some potential error cases, I've added a provideFluentDesignSystem function as the default way of getting a design system instance. Additionally, I've made allComponents into a registry itself so that it can be passed directly to the design system. Here's what the code would now be:

provideFluentDesignSystem().register(allComponent);

This is the Fluent mirror of FAST PR microsoft/fast#4973

Focus areas to test

Existing tests passing. New APIs are consumed in the process of running the storybook, and so are validated there.

@EisenbergEffect EisenbergEffect mentioned this pull request Jul 21, 2021
Merged
5 tasks
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 21, 2021 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against 9e2d5d87aa15e9f62184d7ff879c51ec4c3ddf62

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 21, 2021 •
edited
Loading

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 017f04d:

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link

size-auditor bot commented Jul 21, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 2a77dde4527ed5d9f8ab5220c3653c9c9f1c1543 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 21, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
Panel mount 2047 1323 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 782 804 5000
BaseButton mount 874 887 5000
Breadcrumb mount 2578 2562 1000
ButtonNext mount 426 408 5000
Checkbox mount 1495 1463 5000
CheckboxBase mount 1254 1253 5000
ChoiceGroup mount 4567 4589 5000
ComboBox mount 943 919 1000
CommandBar mount 9858 9909 1000
ContextualMenu mount 6184 6157 1000
DefaultButton mount 1105 1093 5000
DetailsRow mount 3593 3617 5000
DetailsRowFast mount 3656 3589 5000
DetailsRowNoStyles mount 3433 3473 5000
Dialog mount 2061 2137 1000
DocumentCardTitle mount 141 131 1000
Dropdown mount 3203 3217 5000
FluentProviderNext mount 7242 7265 5000
FocusTrapZone mount 1699 1740 5000
FocusZone mount 1818 1725 5000
IconButton mount 1692 1688 5000
Label mount 350 328 5000
Layer mount 1719 1734 5000
Link mount 435 462 5000
MakeStyles mount 1765 1760 50000
MenuButton mount 1460 1398 5000
MessageBar mount 1977 1989 5000
Nav mount 3189 3182 1000
OverflowSet mount 1009 1025 5000
Panel mount 2047 1323 1000 Possible regression
Persona mount 816 804 1000
Pivot mount 1374 1386 1000
PrimaryButton mount 1284 1275 5000
Rating mount 7578 7643 5000
SearchBox mount 1328 1284 5000
Shimmer mount 2496 2527 5000
Slider mount 1950 1925 5000
SpinButton mount 4887 5009 5000
Spinner mount 421 411 5000
SplitButton mount 3118 3105 5000
Stack mount 492 480 5000
StackWithIntrinsicChildren mount 1502 1528 5000
StackWithTextChildren mount 4464 4482 5000
SwatchColorPicker mount 10037 10077 5000
Tabs mount 1394 1378 1000
TagPicker mount 2407 2437 5000
TeachingBubble mount 54617 54503 5000
Text mount 419 414 5000
TextField mount 1350 1355 5000
ThemeProvider mount 1185 1183 5000
ThemeProvider virtual-rerender 606 610 5000
Toggle mount 778 806 5000
buttonNative mount 111 121 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AnimationMinimalPerf.default 408 378 1.08:1
ButtonSlotsPerf.default 564 520 1.08:1
PortalMinimalPerf.default 174 162 1.07:1
AvatarMinimalPerf.default 189 179 1.06:1
DividerMinimalPerf.default 364 343 1.06:1
TableMinimalPerf.default 395 372 1.06:1
ImageMinimalPerf.default 373 358 1.04:1
SliderMinimalPerf.default 1605 1537 1.04:1
StatusMinimalPerf.default 657 634 1.04:1
IconMinimalPerf.default 619 593 1.04:1
ChatDuplicateMessagesPerf.default 282 274 1.03:1
ChatMinimalPerf.default 635 617 1.03:1
DialogMinimalPerf.default 762 742 1.03:1
FlexMinimalPerf.default 285 278 1.03:1
InputMinimalPerf.default 1241 1209 1.03:1
ListWith60ListItems.default 641 623 1.03:1
RadioGroupMinimalPerf.default 430 419 1.03:1
ToolbarMinimalPerf.default 917 890 1.03:1
AccordionMinimalPerf.default 148 145 1.02:1
AttachmentSlotsPerf.default 1046 1029 1.02:1
BoxMinimalPerf.default 328 321 1.02:1
ListCommonPerf.default 621 609 1.02:1
ProviderMinimalPerf.default 990 967 1.02:1
AttachmentMinimalPerf.default 148 147 1.01:1
CheckboxMinimalPerf.default 2691 2674 1.01:1
DropdownManyItemsPerf.default 659 651 1.01:1
DropdownMinimalPerf.default 3101 3079 1.01:1
FormMinimalPerf.default 390 386 1.01:1
GridMinimalPerf.default 326 323 1.01:1
HeaderMinimalPerf.default 345 343 1.01:1
ItemLayoutMinimalPerf.default 1174 1162 1.01:1
LabelMinimalPerf.default 374 370 1.01:1
ListMinimalPerf.default 503 500 1.01:1
LoaderMinimalPerf.default 680 670 1.01:1
PopupMinimalPerf.default 574 567 1.01:1
SplitButtonMinimalPerf.default 3715 3667 1.01:1
TreeMinimalPerf.default 770 765 1.01:1
CarouselMinimalPerf.default 450 452 1:1
EmbedMinimalPerf.default 4082 4077 1:1
ListNestedPerf.default 538 538 1:1
MenuMinimalPerf.default 797 797 1:1
RefMinimalPerf.default 234 233 1:1
SegmentMinimalPerf.default 331 332 1:1
TableManyItemsPerf.default 1810 1806 1:1
CardMinimalPerf.default 526 533 0.99:1
DatepickerMinimalPerf.default 5255 5334 0.99:1
LayoutMinimalPerf.default 350 355 0.99:1
MenuButtonMinimalPerf.default 1567 1575 0.99:1
ProviderMergeThemesPerf.default 1618 1634 0.99:1
SkeletonMinimalPerf.default 343 347 0.99:1
TextMinimalPerf.default 333 335 0.99:1
TextAreaMinimalPerf.default 471 474 0.99:1
CustomToolbarPrototype.default 3745 3789 0.99:1
TooltipMinimalPerf.default 989 997 0.99:1
VideoMinimalPerf.default 594 600 0.99:1
ButtonOverridesMissPerf.default 1642 1670 0.98:1
RosterPerf.default 1106 1124 0.98:1
ChatWithPopoverPerf.default 350 361 0.97:1
HeaderSlotsPerf.default 729 754 0.97:1
ReactionMinimalPerf.default 356 367 0.97:1
TreeWith60ListItems.default 170 176 0.97:1
AlertMinimalPerf.default 255 266 0.96:1
ButtonMinimalPerf.default 155 162 0.96:1

chrisdholt
chrisdholt reviewed Jul 22, 2021
View reviewed changes
packages/web-components/src/custom-elements.ts Outdated
@@ -36,6 +36,7 @@ import { fluentTextField } from './text-field/index';
import { fluentTooltip } from './tooltip/index';
import { fluentTreeView } from './tree-view/index';
import { fluentTreeItem } from './tree-item/index';
import { Container } from '@microsoft/fast-foundation';
Copy link
Member

Choose a reason for hiding this comment

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

@EisenbergEffect looks like the lint portion of the PR build is throwing on the import order here. This likely needs to move to the top (line 3)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

On it.

@EisenbergEffect
Copy link
Contributor Author

@chrisdholt Any idea why it's failing on no change file?

@chrisdholt chrisdholt assigned chrisdholt and unassigned ling1726 Jul 22, 2021
@EisenbergEffect
Copy link
Contributor Author

@ecraig12345 Any ideas why this is failing on the change file even though it has one?

@ecraig12345
Copy link
Member

It's failing on "check for changed files" because the API file needs to be updated.

@EisenbergEffect
Copy link
Contributor Author

Thanks @ecraig12345 !

@EisenbergEffect EisenbergEffect merged commit ba2a810 into microsoft:master Jul 24, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021
@EisenbergEffect @PeterDraex
feat(web-components): improve ergonomics of the fluent design system (m…
e5adfa3 
…icrosoft#19056)

* feat(web-components): improve ergonomics of the fluent design system

* Change files

* fix(web-components): address lint issue

* chore(web-components): update api-report

Co-authored-by: EisenbergEffect <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdholt chrisdholt chrisdholt approved these changes

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@EisenbergEffect @fabricteam @ecraig12345 @msft-fluent-ui-bot @chrisdholt @ling1726