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
Web components v3 tweaks #31298
Web components v3 tweaks #31298
Conversation
* Enable build pipeline for web-components-v3 branch * Add comments
* Delete existing Web Components implementation * Reset storybook * Change file * Add empty test to pass CI * Comment out WCs in stress-test
* ci: setup wc v3 daily releases * chore: UNDO - remove web-components from stress-test deps * ci: add change files check so we dont accidentaly release something beside wc-3 * chore: remove changefiles from master that could trigger unwanted releases * generate changefiles
* bump FAST dependencies * Add theme tokens (from react-theme) * Add theme switcher to storybook * deduplicate packages * fix yarn.lock * Replace @fluentui/react-theme with @fluentui/tokens * change file * address PR comments
* chore: setup typescript 4.7 for web-components package * chore: generate change-file * fixup! chore: setup typescript 4.7 for web-components package * fixup! fixup! chore: setup typescript 4.7 for web-components package
* add text as a new component * update main.js to .cjs format for esm due to require syntax * update style rules to align with FUI react v9, export text options, update stories to leverage object.keys of options * export text, update node resolution to 16 and fix object.keys for size to object.values * prettier style files, may need to revert if it does not play nice with selectors * update display for host to ensure we can layout the element properly margin, etc... * update latest FAST packages * leverage ValuesOf type helper
* add badge as a new component * add counter badge as a new component * fix broken import and add export paths * use badge template for counter badge to render count * update badge svg styles and fix import syntax * fixup imports for stories * update partial with default styles * js extension missing from partial imports * update api report
* Adds web component version of ProgressBar * Generates change * Renames progressbar to progress-bar * Changes alphabetical ordering of imports * Enumerates null value; Adds ? to boolean in Story * Adds typedocs to progress-bar class * Fixes class to attribute typo in CSS * Removes duped CSS * Adds export of progress-bar to package.json * Removes null in validation state object * Removes local CSS variables; Removes defaults on thickness and rounded corners * Removes unused CSS * Removes unused options, pause and min, that don't exist in Fluent * Addresses remaining feedback on PR: Renames rect to square; Cleans up Storybook
…6498) * chore: run manually bump to fix failed CI release * generate changefile
* feat: export theme * change file
* ci: fix github pushes auth for release * chore(web-components): run manually bump to fix failed CI release * generate changefile
* chore(web-components): turn of storybook telemetry * ci: setup web-components docsite CI/CD * generate change-file
* Update azure-static-web-apps-deploy.yml * Update and rename azure-static-web-apps-deploy.yml to azure-storage-web-components.yml * Update azure-storage-web-components.yml * Create azure-static-web-apps-deploy.yml
* Adds basic implementation of Spinner component * Adds inverted Story to Spinner * Cleans up some typos * Generates API report * Adds change file * Removes kebab-case for key in Spinner in favor of camelCase; Adds spinner export to package.json; Properly comments spinner options with type docs * Address feedback in PR * Minor typo cleanup * Rebuilds
* update fast element and foundation versions and update reference to extend badge options * no options export yet for badge :(
…up/DX (#26843) * chore(web-components): implement ts path aliases setup with valid ts compilation * chore(web-components): refactor test setup and test/sb utils approach * fix(web-components): tweak npmignore to not ship non relevant assets * chore: re-generate api-report * generate change file * fixup! chore(web-components): refactor test setup and test/sb utils approach
…26854) * fix(web-components): dont ship non production assets to npm registry * generate change file
* Manual bump of web components version to match NPM 3.0.0-alpha.4
Co-authored-by: Christopher Holt <=>
…or components (#31069) Co-authored-by: Christopher Holt <=>
@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build | |||
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 fluentui-web-components-v3 Open the Visual Regressions report to inspect the affected screenshots
Badge 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Badge.Appearance - Dark Mode.normal.chromium.png | 15 | Changed |
Slider 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Slider.Slider Steps.normal.chromium.png | 1 | Changed |
Slider.Slider Steps Vertical.normal.chromium.png | 1 | Changed |
Text 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Text.Block.normal.chromium.png | 995 | Changed |
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 669 | 657 | 5000 | |
Button | mount | 310 | 303 | 5000 | |
Field | mount | 1200 | 1148 | 5000 | |
FluentProvider | mount | 722 | 718 | 5000 | |
FluentProviderWithTheme | mount | 91 | 94 | 10 | |
FluentProviderWithTheme | virtual-rerender | 38 | 33 | 10 | |
FluentProviderWithTheme | virtual-rerender-with-unmount | 78 | 84 | 10 | |
MakeStyles | mount | 915 | 879 | 50000 | |
Persona | mount | 1794 | 1758 | 5000 | |
SpinButton | mount | 1431 | 1420 | 5000 | |
SwatchPicker | mount | 1490 | 1536 | 5000 |
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. |
Perf Analysis (
|
Scenario | Current PR Ticks | Baseline Ticks | Ratio |
---|---|---|---|
AccordionMinimalPerf.default | 92 | 81 | 1.14:1 |
ButtonMinimalPerf.default | 90 | 80 | 1.13:1 |
ChatDuplicateMessagesPerf.default | 156 | 144 | 1.08:1 |
TextMinimalPerf.default | 196 | 182 | 1.08:1 |
AttachmentMinimalPerf.default | 78 | 73 | 1.07:1 |
AvatarMinimalPerf.default | 111 | 104 | 1.07:1 |
ProviderMinimalPerf.default | 212 | 199 | 1.07:1 |
TreeWith60ListItems.default | 90 | 84 | 1.07:1 |
ButtonSlotsPerf.default | 317 | 298 | 1.06:1 |
ListNestedPerf.default | 342 | 323 | 1.06:1 |
RadioGroupMinimalPerf.default | 267 | 253 | 1.06:1 |
VideoMinimalPerf.default | 452 | 425 | 1.06:1 |
ChatWithPopoverPerf.default | 198 | 189 | 1.05:1 |
ListMinimalPerf.default | 312 | 297 | 1.05:1 |
PortalMinimalPerf.default | 87 | 83 | 1.05:1 |
IconMinimalPerf.default | 393 | 376 | 1.05:1 |
AttachmentSlotsPerf.default | 632 | 606 | 1.04:1 |
BoxMinimalPerf.default | 195 | 187 | 1.04:1 |
ButtonOverridesMissPerf.default | 649 | 625 | 1.04:1 |
CheckboxMinimalPerf.default | 1145 | 1106 | 1.04:1 |
LoaderMinimalPerf.default | 186 | 178 | 1.04:1 |
MenuMinimalPerf.default | 527 | 506 | 1.04:1 |
DropdownManyItemsPerf.default | 396 | 386 | 1.03:1 |
FormMinimalPerf.default | 230 | 224 | 1.03:1 |
LabelMinimalPerf.default | 219 | 213 | 1.03:1 |
ReactionMinimalPerf.default | 213 | 206 | 1.03:1 |
SplitButtonMinimalPerf.default | 2277 | 2221 | 1.03:1 |
StatusMinimalPerf.default | 394 | 381 | 1.03:1 |
ChatMinimalPerf.default | 427 | 419 | 1.02:1 |
DialogMinimalPerf.default | 442 | 432 | 1.02:1 |
DividerMinimalPerf.default | 209 | 205 | 1.02:1 |
FlexMinimalPerf.default | 159 | 156 | 1.02:1 |
InputMinimalPerf.default | 548 | 535 | 1.02:1 |
ItemLayoutMinimalPerf.default | 713 | 696 | 1.02:1 |
RosterPerf.default | 1560 | 1536 | 1.02:1 |
ProviderMergeThemesPerf.default | 653 | 643 | 1.02:1 |
CustomToolbarPrototype.default | 1475 | 1452 | 1.02:1 |
AnimationMinimalPerf.default | 295 | 291 | 1.01:1 |
CarouselMinimalPerf.default | 265 | 262 | 1.01:1 |
HeaderMinimalPerf.default | 216 | 213 | 1.01:1 |
ListWith60ListItems.default | 365 | 361 | 1.01:1 |
PopupMinimalPerf.default | 351 | 347 | 1.01:1 |
SkeletonMinimalPerf.default | 194 | 192 | 1.01:1 |
SliderMinimalPerf.default | 740 | 732 | 1.01:1 |
TextAreaMinimalPerf.default | 294 | 291 | 1.01:1 |
CardMinimalPerf.default | 305 | 305 | 1:1 |
DropdownMinimalPerf.default | 1419 | 1420 | 1:1 |
ImageMinimalPerf.default | 222 | 222 | 1:1 |
MenuButtonMinimalPerf.default | 952 | 953 | 1:1 |
DatepickerMinimalPerf.default | 3517 | 3557 | 0.99:1 |
GridMinimalPerf.default | 188 | 190 | 0.99:1 |
HeaderSlotsPerf.default | 448 | 451 | 0.99:1 |
TableManyItemsPerf.default | 1124 | 1130 | 0.99:1 |
TreeMinimalPerf.default | 486 | 489 | 0.99:1 |
EmbedMinimalPerf.default | 1860 | 1898 | 0.98:1 |
LayoutMinimalPerf.default | 189 | 193 | 0.98:1 |
ListCommonPerf.default | 371 | 377 | 0.98:1 |
SegmentMinimalPerf.default | 195 | 198 | 0.98:1 |
TableMinimalPerf.default | 234 | 239 | 0.98:1 |
ToolbarMinimalPerf.default | 532 | 550 | 0.97:1 |
RefMinimalPerf.default | 109 | 114 | 0.96:1 |
AlertMinimalPerf.default | 148 | 158 | 0.94:1 |
TooltipMinimalPerf.default | 1225 | 1329 | 0.92:1 |
@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build | |||
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 FluentUIV0 Open the Visual Regressions report to inspect the affected screenshots
Checkbox 4 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Checkbox.Checkbox Example Disabled.chromium.png | 3 | Changed |
Checkbox.Checkbox Example Checked.chromium.png | 11 | Changed |
Checkbox.Checkbox Example.Checks checkbox.chromium.png | 14 | Changed |
Checkbox.Checkbox Example.Focuses checkbox.chromium.png | 14 | Changed |
Popup 1 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Popup.Popup Example Auto Size.chromium.png | 11 | Changed |
Tree 12 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Tree.Tree Multiselect Example Teams High Contrast.chromium.png | 6 | Changed |
Tree.Tree Multiselect Example Teams Dark.chromium.png | 3 | Changed |
Tree.Tree Multiselect Example Teams Dark.default selected states.chromium.png | 23 | Changed |
Tree.Tree Multiselect Example Teams.default selected states.chromium.png | 32 | Changed |
Tree.Tree Multiselect Example Teams High Contrast.first expanded, not custom checkbox visible.chromium.png | 11 | Changed |
Tree.Tree Multiselect Example Teams.chromium.png | 5 | Changed |
Tree.Tree Multiselect Example.first expanded, not custom checkbox visible.chromium.png | 10 | Changed |
Tree.Tree Multiselect Example.chromium.png | 5 | Changed |
Tree.Tree Multiselect Example.default selected states.chromium.png | 32 | Changed |
Tree.Tree Multiselect Example Teams.first expanded, not custom checkbox visible.chromium.png | 10 | Changed |
Tree.Tree Multiselect Example Teams High Contrast.default selected states.chromium.png | 40 | Changed |
Tree.Tree Multiselect Example Teams Dark.first expanded, not custom checkbox visible.chromium.png | 7 | Changed |
📊 Bundle size report✅ No changes found |
@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build | |||
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots
Positioning (no decorator) 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Positioning (no decorator).scroll jumps (with context usage).chromium.png | 1 | Changed |
Positioning (no decorator).scroll jumps (with context usage).positions without scroll jump.chromium.png | 1 | Changed |
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
BaseButton | mount | 642 | 650 | 5000 | |
Breadcrumb | mount | 1677 | 1696 | 1000 | |
Checkbox | mount | 1720 | 1732 | 5000 | |
CheckboxBase | mount | 1502 | 1489 | 5000 | |
ChoiceGroup | mount | 3003 | 3043 | 5000 | |
ComboBox | mount | 689 | 685 | 1000 | |
CommandBar | mount | 6489 | 6479 | 1000 | |
ContextualMenu | mount | 12716 | 12977 | 1000 | |
DefaultButton | mount | 806 | 816 | 5000 | |
DetailsRow | mount | 2229 | 2218 | 5000 | |
DetailsRowFast | mount | 2250 | 2209 | 5000 | |
DetailsRowNoStyles | mount | 2044 | 2058 | 5000 | |
Dialog | mount | 2862 | 2672 | 1000 | |
DocumentCardTitle | mount | 225 | 220 | 1000 | |
Dropdown | mount | 2054 | 2074 | 5000 | |
FocusTrapZone | mount | 1120 | 1131 | 5000 | |
FocusZone | mount | 1106 | 1068 | 5000 | |
GroupedList | mount | 42647 | 42683 | 2 | |
GroupedList | virtual-rerender | 20451 | 20540 | 2 | |
GroupedList | virtual-rerender-with-unmount | 51376 | 51361 | 2 | |
GroupedListV2 | mount | 217 | 248 | 2 | |
GroupedListV2 | virtual-rerender | 207 | 215 | 2 | |
GroupedListV2 | virtual-rerender-with-unmount | 235 | 224 | 2 | |
IconButton | mount | 1138 | 1151 | 5000 | |
Label | mount | 348 | 350 | 5000 | |
Layer | mount | 2742 | 2791 | 5000 | |
Link | mount | 393 | 398 | 5000 | |
MenuButton | mount | 1005 | 987 | 5000 | |
MessageBar | mount | 21410 | 21485 | 5000 | |
Nav | mount | 2044 | 2049 | 1000 | |
OverflowSet | mount | 792 | 783 | 5000 | |
Panel | mount | 1871 | 1797 | 1000 | |
Persona | mount | 754 | 746 | 1000 | |
Pivot | mount | 918 | 896 | 1000 | |
PrimaryButton | mount | 961 | 959 | 5000 | |
Rating | mount | 4766 | 4731 | 5000 | |
SearchBox | mount | 936 | 938 | 5000 | |
Shimmer | mount | 1937 | 1867 | 5000 | |
Slider | mount | 1321 | 1385 | 5000 | |
SpinButton | mount | 3044 | 3045 | 5000 | |
Spinner | mount | 397 | 385 | 5000 | |
SplitButton | mount | 1917 | 1926 | 5000 | |
Stack | mount | 420 | 421 | 5000 | |
StackWithIntrinsicChildren | mount | 880 | 879 | 5000 | |
StackWithTextChildren | mount | 2657 | 2704 | 5000 | |
SwatchColorPicker | mount | 6448 | 6525 | 5000 | |
TagPicker | mount | 1502 | 1446 | 5000 | |
Text | mount | 372 | 386 | 5000 | |
TextField | mount | 959 | 967 | 5000 | |
ThemeProvider | mount | 821 | 834 | 5000 | |
ThemeProvider | virtual-rerender | 577 | 591 | 5000 | |
ThemeProvider | virtual-rerender-with-unmount | 1297 | 1298 | 5000 | |
Toggle | mount | 610 | 616 | 5000 | |
buttonNative | mount | 195 | 193 | 5000 |
b831759
to
22a3cf0
Compare
22a3cf0
to
b031bb3
Compare
🕵 fluentuiv8 No visual regressions between this PR and main |
Previous Behavior
New Behavior
testing #31296
Related Issue(s)