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

add skeleton as a new web component #15397

Merged
merged 5 commits into from
Oct 7, 2020
Merged

add skeleton as a new web component #15397

merged 5 commits into from
Oct 7, 2020

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

Adds Skeleton as a new component

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 Oct 7, 2020
@chrisdholt chrisdholt assigned chrisdholt and unassigned tomi-msft Oct 7, 2020
@chrisdholt chrisdholt changed the title add skeleton as a new component add skeleton as a new web component Oct 7, 2020
@chrisdholt chrisdholt force-pushed the users/chhol/add-skeleton-as-new-component branch from 7b90220 to 4dd9040 Compare October 7, 2020 05:03
janechu
janechu approved these changes Oct 7, 2020
View reviewed changes
packages/web-components/src/index.ts Outdated Show resolved Hide resolved
@chrisdholt @janechu
Update packages/web-components/src/index.ts
8554b74 
Co-authored-by: Jane Chu <7559015+janechu@users.noreply.github.com>
@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 7, 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 8554b74:

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

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 907 937 5000
BaseButton mount 1008 1026 5000
Breadcrumb mount 45710 43684 5000
ButtonNext mount 603 625 5000
Checkbox mount 1789 1761 5000
CheckboxBase mount 1502 1476 5000
ChoiceGroup mount 5536 5556 5000
ComboBox mount 1024 1019 1000
CommandBar mount 8149 8129 1000
ContextualMenu mount 14016 13905 1000
DefaultButton mount 1258 1261 5000
DetailsRow mount 4032 3994 5000
DetailsRowFast mount 3991 4045 5000
DetailsRowNoStyles mount 3853 3879 5000
Dialog mount 1693 1668 1000
DocumentCardTitle mount 1940 1911 1000
Dropdown mount 2827 2876 5000
FocusTrapZone mount 1798 1820 5000
FocusZone mount 1920 1910 5000
IconButton mount 1943 1966 5000
Label mount 370 378 5000
Layer mount 2181 2172 5000
Link mount 489 525 5000
MenuButton mount 1652 1662 5000
MessageBar mount 2225 2220 5000
Nav mount 3628 3578 1000
OverflowSet mount 1522 1584 5000
Panel mount 1593 1564 1000
Persona mount 911 923 1000
Pivot mount 1536 1616 1000
PrimaryButton mount 1432 1412 5000
Rating mount 8568 8564 5000
SearchBox mount 1439 1455 5000
Shimmer mount 2876 2888 5000
Slider mount 1670 1681 5000
SpinButton mount 5439 5541 5000
Spinner mount 455 449 5000
SplitButton mount 3495 3495 5000
Stack mount 593 591 5000
StackWithIntrinsicChildren mount 2157 2127 5000
StackWithTextChildren mount 5731 5697 5000
SwatchColorPicker mount 11421 11284 5000
TagPicker mount 2990 3005 5000
TeachingBubble mount 53559 52900 5000
Text mount 513 492 5000
TextField mount 1591 1596 5000
ThemeProvider mount 1783 1775 5000
ThemeProvider virtual-rerender 670 669 5000
Toggle mount 916 895 5000
button mount 114 125 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 1001
🦄 Button.Fluent 0.14 0.23 0.61:1 5000 678
🔧 Checkbox.Fluent 0.71 0.39 1.82:1 1000 711
🎯 Dialog.Fluent 0.18 0.25 0.72:1 5000 917
🔧 Dropdown.Fluent 3.11 0.52 5.98:1 1000 3111
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 803
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 461
🔧 Slider.Fluent 1.71 0.38 4.5:1 1000 1705
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 427
🦄 Tooltip.Fluent 0.13 16.75 0.01:1 5000 638

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 185 0 Infinity:1
AnimationMinimalPerf.default 491 0 Infinity:1
AttachmentMinimalPerf.default 196 0 Infinity:1
AttachmentSlotsPerf.default 1327 0 Infinity:1
AvatarMinimalPerf.default 562 0 Infinity:1
BoxMinimalPerf.default 441 0 Infinity:1
ButtonMinimalPerf.default 211 0 Infinity:1
ButtonOverridesMissPerf.default 1894 0 Infinity:1
ButtonSlotsPerf.default 680 0 Infinity:1
ButtonUseCssPerf.default 944 0 Infinity:1
ButtonUseCssNestingPerf.default 1239 0 Infinity:1
CardMinimalPerf.default 668 0 Infinity:1
CarouselMinimalPerf.default 522 0 Infinity:1
ChatDuplicateMessagesPerf.default 489 0 Infinity:1
ChatMinimalPerf.default 725 0 Infinity:1
ChatWithPopoverPerf.default 522 0 Infinity:1
CheckboxMinimalPerf.default 3146 0 Infinity:1
DialogMinimalPerf.default 917 0 Infinity:1
DividerMinimalPerf.default 439 0 Infinity:1
DropdownManyItemsPerf.default 852 0 Infinity:1
DropdownMinimalPerf.default 3153 0 Infinity:1
EmbedMinimalPerf.default 2175 0 Infinity:1
FlexMinimalPerf.default 364 0 Infinity:1
FormMinimalPerf.default 509 0 Infinity:1
GridMinimalPerf.default 410 0 Infinity:1
HeaderMinimalPerf.default 480 0 Infinity:1
ImageMinimalPerf.default 470 0 Infinity:1
InputMinimalPerf.default 1470 0 Infinity:1
LabelMinimalPerf.default 521 0 Infinity:1
LayoutMinimalPerf.default 475 0 Infinity:1
ListCommonPerf.default 767 0 Infinity:1
ListNestedPerf.default 676 0 Infinity:1
ListWith60ListItems.default 1048 0 Infinity:1
LoaderMinimalPerf.default 811 0 Infinity:1
MenuMinimalPerf.default 1035 0 Infinity:1
MenuButtonMinimalPerf.default 1819 0 Infinity:1
PopupMinimalPerf.default 783 0 Infinity:1
PortalMinimalPerf.default 186 0 Infinity:1
ProviderMergeThemesPerf.default 2212 0 Infinity:1
ProviderMinimalPerf.default 1098 0 Infinity:1
RadioGroupMinimalPerf.default 544 0 Infinity:1
SkeletonMinimalPerf.default 525 0 Infinity:1
SliderMinimalPerf.default 1702 0 Infinity:1
SplitButtonMinimalPerf.default 4350 0 Infinity:1
StatusMinimalPerf.default 835 0 Infinity:1
IconMinimalPerf.default 781 0 Infinity:1
TableManyItemsPerf.default 2553 0 Infinity:1
TableMinimalPerf.default 490 0 Infinity:1
TextMinimalPerf.default 409 0 Infinity:1
TextAreaMinimalPerf.default 631 0 Infinity:1
CustomToolbarPrototype.default 4214 0 Infinity:1
ToolbarMinimalPerf.default 1079 0 Infinity:1
TreeMinimalPerf.default 1016 0 Infinity:1
TreeWith60ListItems.default 231 0 Infinity:1
VideoMinimalPerf.default 749 0 Infinity:1
Avatar.Fluent 1001 0 Infinity:1
Button.Fluent 678 0 Infinity:1
Checkbox.Fluent 711 0 Infinity:1
Dialog.Fluent 917 0 Infinity:1
Dropdown.Fluent 3111 0 Infinity:1
Icon.Fluent 803 0 Infinity:1
Slider.Fluent 1705 0 Infinity:1
Tooltip.Fluent 638 0 Infinity:1
ItemLayoutMinimalPerf.default 1505 1 1505:1
HeaderSlotsPerf.default 928 1 928:1
TooltipMinimalPerf.default 913 1 913:1
ListMinimalPerf.default 575 1 575:1
ReactionMinimalPerf.default 494 1 494:1
Image.Fluent 461 1 461:1
SegmentMinimalPerf.default 437 1 437:1
Text.Fluent 427 1 427:1
AlertMinimalPerf.default 359 1 359:1
RefMinimalPerf.default 277 1 277:1

@size-auditor
Copy link

size-auditor bot commented Oct 7, 2020

Asset size changes

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

Baseline commit: dbe4a43f3900f3a12cacc39391eb8f7743aac2e5 (build)

@chrisdholt chrisdholt merged commit 406bb8c into microsoft:7.0 Oct 7, 2020
@chrisdholt chrisdholt deleted the users/chhol/add-skeleton-as-new-component branch October 7, 2020 06:14
@msft-github-bot
Copy link
Contributor

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

Handy links:

@khmakoto khmakoto mentioned this pull request Oct 9, 2020
Closed
40 tasks
@joschect joschect mentioned this pull request Oct 22, 2020
Merged
2 tasks
@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
Reviewers

@janechu janechu janechu approved these changes

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@chrisdholt @msft-github-bot @janechu @xugao @tomi-msft