Web components v3 tweaks #31298
Closed
Web components v3 tweaks #31298
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* 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 <=>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
fabricteam
reviewed
May 7, 2024
| @@ -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.
🕵 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 |
fabricteam
reviewed
May 7, 2024
| @@ -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.
🕵 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 |
fabricteam
reviewed
May 7, 2024
| @@ -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.
🕵 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 |
Hotell
force-pushed
the
web-components-v3-tweaks
branch
from
b831759
to
22a3cf0
Compare
Hotell
force-pushed
the
web-components-v3-tweaks
branch
from
22a3cf0
to
b031bb3
Compare
🕵 fluentuiv8 No visual regressions between this PR and main |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Previous Behavior
New Behavior
testing #31296
Related Issue(s)