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

export design system interface #15313

Conversation

chrisdholt
Copy link
Member

Pull request checklist

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

Description of changes

Exports the DesignSystem interface to support better typing of Fluent Design System instances.

Focus areas to test

(optional)

@msft-github-bot msft-github-bot added the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Sep 30, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 30, 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 7fe1774:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 30, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 858 816 5000
BaseButton mount 954 948 5000
Breadcrumb mount 39321 39572 5000
ButtonNext mount 600 559 5000
Checkbox mount 1553 1580 5000
CheckboxBase mount 1353 1345 5000
ChoiceGroup mount 5038 5047 5000
ComboBox mount 937 921 1000
CommandBar mount 7422 7389 1000
ContextualMenu mount 12508 12634 1000
DefaultButton mount 1136 1149 5000
DetailsRow mount 3686 3677 5000
DetailsRowFast mount 3593 3700 5000
DetailsRowNoStyles mount 3508 3566 5000
Dialog mount 1507 1490 1000
DocumentCardTitle mount 1721 1731 1000
Dropdown mount 2642 2663 5000
FocusTrapZone mount 1705 1687 5000
FocusZone mount 1741 1785 5000
IconButton mount 1845 1795 5000
Label mount 338 330 5000
Layer mount 1948 1977 5000
Link mount 454 438 5000
MenuButton mount 1493 1477 5000
MessageBar mount 2021 2021 5000
Nav mount 3216 3247 1000
OverflowSet mount 1389 1390 5000
Panel mount 1438 1420 1000
Persona mount 827 823 1000
Pivot mount 1414 1400 1000
PrimaryButton mount 1294 1311 5000
Rating mount 7709 7795 5000
SearchBox mount 1319 1325 5000
Shimmer mount 2724 2628 5000
Slider mount 1516 1477 5000
SpinButton mount 5018 5066 5000
Spinner mount 424 407 5000
SplitButton mount 3240 3196 5000
Stack mount 532 527 5000
StackWithIntrinsicChildren mount 1860 1885 5000
StackWithTextChildren mount 4999 5056 5000
SwatchColorPicker mount 10488 10345 5000
TagPicker mount 2768 2801 5000
TeachingBubble mount 47787 47716 5000
Text mount 424 445 5000
TextField mount 1400 1402 5000
ThemeProvider mount 3041 3060 5000
ThemeProvider virtual-rerender 600 582 5000
Toggle mount 841 814 5000
button mount 119 121 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.48 0.96:1 2000 921
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 622
🔧 Checkbox.Fluent 0.64 0.37 1.73:1 1000 642
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 841
🔧 Dropdown.Fluent 2.87 0.5 5.74:1 1000 2866
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 766
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 445
🔧 Slider.Fluent 1.53 0.39 3.92:1 1000 1530
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 393
🦄 Tooltip.Fluent 0.12 14.75 0.01:1 5000 575

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 329 0 Infinity:1
AnimationMinimalPerf.default 432 0 Infinity:1
AttachmentSlotsPerf.default 1178 0 Infinity:1
AvatarMinimalPerf.default 514 0 Infinity:1
BoxMinimalPerf.default 405 0 Infinity:1
ButtonMinimalPerf.default 204 0 Infinity:1
ButtonOverridesMissPerf.default 1697 0 Infinity:1
ButtonSlotsPerf.default 636 0 Infinity:1
ButtonUseCssNestingPerf.default 1105 0 Infinity:1
CardMinimalPerf.default 606 0 Infinity:1
CarouselMinimalPerf.default 486 0 Infinity:1
ChatMinimalPerf.default 670 0 Infinity:1
ChatWithPopoverPerf.default 496 0 Infinity:1
CheckboxMinimalPerf.default 2924 0 Infinity:1
DialogMinimalPerf.default 829 0 Infinity:1
DropdownManyItemsPerf.default 799 0 Infinity:1
DropdownMinimalPerf.default 2910 0 Infinity:1
EmbedMinimalPerf.default 2025 0 Infinity:1
FlexMinimalPerf.default 322 0 Infinity:1
FormMinimalPerf.default 495 0 Infinity:1
HeaderMinimalPerf.default 430 0 Infinity:1
HeaderSlotsPerf.default 832 0 Infinity:1
ImageMinimalPerf.default 429 0 Infinity:1
InputMinimalPerf.default 1296 0 Infinity:1
ItemLayoutMinimalPerf.default 1387 0 Infinity:1
LabelMinimalPerf.default 472 0 Infinity:1
LayoutMinimalPerf.default 444 0 Infinity:1
ListCommonPerf.default 696 0 Infinity:1
ListMinimalPerf.default 528 0 Infinity:1
ListNestedPerf.default 617 0 Infinity:1
ListWith60ListItems.default 966 0 Infinity:1
LoaderMinimalPerf.default 751 0 Infinity:1
MenuMinimalPerf.default 896 0 Infinity:1
MenuButtonMinimalPerf.default 1642 0 Infinity:1
PopupMinimalPerf.default 720 0 Infinity:1
ProviderMergeThemesPerf.default 1992 0 Infinity:1
ProviderMinimalPerf.default 1036 0 Infinity:1
RadioGroupMinimalPerf.default 485 0 Infinity:1
RefMinimalPerf.default 238 0 Infinity:1
SegmentMinimalPerf.default 394 0 Infinity:1
SkeletonMinimalPerf.default 466 0 Infinity:1
SplitButtonMinimalPerf.default 4016 0 Infinity:1
StatusMinimalPerf.default 804 0 Infinity:1
IconMinimalPerf.default 748 0 Infinity:1
TableManyItemsPerf.default 2366 0 Infinity:1
TextMinimalPerf.default 391 0 Infinity:1
TextAreaMinimalPerf.default 544 0 Infinity:1
CustomToolbarPrototype.default 3790 0 Infinity:1
ToolbarMinimalPerf.default 1002 0 Infinity:1
TooltipMinimalPerf.default 820 0 Infinity:1
TreeMinimalPerf.default 944 0 Infinity:1
TreeWith60ListItems.default 215 0 Infinity:1
VideoMinimalPerf.default 700 0 Infinity:1
Avatar.Fluent 921 0 Infinity:1
Button.Fluent 622 0 Infinity:1
Checkbox.Fluent 642 0 Infinity:1
Dialog.Fluent 841 0 Infinity:1
Dropdown.Fluent 2866 0 Infinity:1
Icon.Fluent 766 0 Infinity:1
Image.Fluent 445 0 Infinity:1
Slider.Fluent 1530 0 Infinity:1
Text.Fluent 393 0 Infinity:1
Tooltip.Fluent 575 0 Infinity:1
SliderMinimalPerf.default 1531 1 1531:1
ButtonUseCssPerf.default 876 1 876:1
TableMinimalPerf.default 456 1 456:1
ChatDuplicateMessagesPerf.default 449 1 449:1
ReactionMinimalPerf.default 444 1 444:1
DividerMinimalPerf.default 415 1 415:1
GridMinimalPerf.default 388 1 388:1
AttachmentMinimalPerf.default 180 1 180:1
AccordionMinimalPerf.default 173 1 173:1
PortalMinimalPerf.default 166 1 166:1

@size-auditor
Copy link

size-auditor bot commented Sep 30, 2020

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: ad56ce6

Possible causes

  • The baseline build ad56ce6 is broken
  • The Size Auditor run for the baseline build ad56ce6 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@@ -571,3 +571,5 @@ export class FluentDesignSystemProvider extends DesignSystemProvider
})
public neutralOutlineFocusDelta: number;
}

export { DesignSystem };
Copy link
Contributor

Choose a reason for hiding this comment

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

On line 47 you'll see this element actually omits a few properties from the DesignSystem interface. You should probably create an interface that is that omission, implement the new interface into the FluentDesignSystemProvider and export the new interface.

Copy link
Contributor

@nicholasrice nicholasrice left a comment

Choose a reason for hiding this comment

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

Approved but left a comment

@chrisdholt chrisdholt changed the title Users/chhol/export design system interface export design system interface Sep 30, 2020
@chrisdholt chrisdholt force-pushed the users/chhol/export-design-system-interface branch from 14157ab to dd668ef Compare September 30, 2020 19:08
@chrisdholt chrisdholt merged commit d5b0802 into microsoft:7.0 Oct 1, 2020
@chrisdholt chrisdholt deleted the users/chhol/export-design-system-interface branch October 1, 2020 19:28
@msft-github-bot
Copy link
Contributor

🎉@fluentui/web-components@v0.5.0 has been released which incorporates this pull request.:tada:

Handy links:

@xugao xugao removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Oct 22, 2020
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.

6 participants