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

feat(web-components): update package name to align with @fluentui and update component namespace #14345

Conversation

chrisdholt
Copy link
Member

Pull request checklist

Description of changes

This PR updates the package name to align with the FluentUI namespace.

Copy link
Member

@ecraig12345 ecraig12345 left a comment

Choose a reason for hiding this comment

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

Nice!

@chrisdholt chrisdholt force-pushed the users/chhol/update-web-components-package-name branch from a55e3cf to a10c20e Compare August 4, 2020 20:39
@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 4, 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 be1882b:

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

@size-auditor
Copy link

size-auditor bot commented Aug 4, 2020

Asset size changes

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

Baseline commit: ff937a44d7f5816532ff9894daac0d247cb778f5 (build)

@chrisdholt chrisdholt force-pushed the users/chhol/update-web-components-package-name branch from a10c20e to a61c513 Compare August 4, 2020 22:41
@chrisdholt chrisdholt changed the title feat(web-components): update package name to align with @fluentui feat(web-components): update package name to align with @fluentui and update component namespace Aug 4, 2020
@chrisdholt chrisdholt force-pushed the users/chhol/update-web-components-package-name branch from a61c513 to 2358529 Compare August 4, 2020 23:06
Copy link
Contributor

@EisenbergEffect EisenbergEffect left a comment

Choose a reason for hiding this comment

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

Approving pending the one package version change recommendation.

"description": "A library of Fluent Web Components",
"sideEffects": false,
"version": "1.6.0",
"version": "0.0.1",
Copy link
Contributor

Choose a reason for hiding this comment

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

We should start this as 0.1.0 or we'll have some issues representing breaking vs. non-breaking changes.

Copy link
Member Author

Choose a reason for hiding this comment

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

@dzearing I'm making an assumption here on how beachball works, but perhaps you or @ecraig12345 can confirm for me so I can resolve this :).

I reset this to 0.0.1 and targeted my change request as a minor version change. I'm assuming that should update the package.json here to be 0.1.0 - is that correct?

Copy link
Member

Choose a reason for hiding this comment

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

yup!

@EisenbergEffect
Copy link
Contributor

Some follow-up notes for reviewers based on a conversation that @chrisdholt and I had.

We're changing the element names to align with fluent branding and also to prevent a potential breaking change to default names in the future. Once we implement the new provider design outlined here we'll be able to give control over the prefix to end users. So, if someone was using @microsoft/fast-components and wanted to switch to @fluentui/web-components they could configure a prefix and not have to change any of their HTML. We also believe we can enable this through a single script file build, which might look like this when used:

<script type="module" src="..." data-prefix="fast"></script>
<script type="module" src="..." data-prefix="fluent"></script>
<script type="module" src="..." data-prefix="material"></script>
<script type="module" src="..." data-prefix="ui"></script>
...

The single file script build would set up a default provider configuration, checking its own script tag to see if a prefix was configured for the provider.

Additionally, based on some conversations with Graph, we'll be looking into whether the new provider model could support lazily creating a provider if one is not defined. In this case, the prefix would default to fluent and would enable using the components without a wrapping <fluent-design-system-provider> element. This last idea is "theoretical" at present. We'll be investigating as we build out the new provider system.

"description": "A library of Fluent Web Components",
"sideEffects": false,
"version": "1.6.0",
"version": "0.0.1",
Copy link
Member

Choose a reason for hiding this comment

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

yup, the minor will update this to 0.1.0.

@chrisdholt chrisdholt force-pushed the users/chhol/update-web-components-package-name branch 2 times, most recently from a5d79b0 to c9a43d2 Compare August 5, 2020 02:32
@chrisdholt chrisdholt force-pushed the users/chhol/update-web-components-package-name branch 2 times, most recently from 3a09b62 to c9a43d2 Compare August 5, 2020 05:58
@dzearing
Copy link
Member

dzearing commented Aug 5, 2020

@layershifter @miroslavstastny @levithomason

Wanted to give you a heads up here. The build errors in this PR are all in react-northstar and seem to have confusing TypeScript typing problems in the design prop.

I believe something here is causing react-northstar to build with a newer typescript build, but I'm not sure. I know that if I clone a fresh enlistment and open VSCode (defaulting to TS 3.9.x) to Table.tsx, I am seeing the red squiggles on the PropTypes definition, and lowering the TypeScript version to 3.7.x makes it go away.

Still parsing why TypeScript version has changed here; we thought it was an incorrectly defined nohoist in the root package.json, but updating that seems to not have affected this.

@fluentui/react-northstar:   Type '{ activeIndex: PropTypes.Requireable<AnimationIterationCountProperty>; iconOnly: PropTypes.Requireable<boolean>; thumbnails: PropTypes.Requireable<...>; ... 13 more ...; accessibility: PropTypes.Requireable<...>; }' is not assignable to type 'WeakValidationMap<CarouselNavigationProps>'.
@fluentui/react-northstar:     Types of property 'design' are incompatible.
@fluentui/react-northstar:       Type 'Requireable<InferProps<{ position: Requireable<string>; display: Requireable<string>; top: Requireable<string>; right: Requireable<string>; bottom: Requireable<...>; ... 16 more ...; maxHeight: Requireable<...>; }>>' is not assignable to type 'Validator<ComponentDesignProp>'.
@fluentui/react-northstar: src/components/Carousel/CarouselItem.tsx(129,1): error TS2322: Type '{ active: PropTypes.Requireable<boolean>; navigation: PropTypes.Requireable<boolean>; itemPositionText: PropTypes.Requireable<string>; styles: PropTypes.Requireable<...>; ... 7 more ...; accessibility: PropTypes.Requireable<...>; }' is not assignable to type 'WeakValidationMap<CarouselItemProps> & { as: Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>; }'.
@fluentui/react-northstar:   Type '{ active: PropTypes.Requireable<boolean>; navigation: PropTypes.Requireable<boolean>; itemPositionText: PropTypes.Requireable<string>; styles: PropTypes.Requireable<...>; ... 7 more ...; accessibility: PropTypes.Requireable<...>; }' is not assignable to type 'WeakValidationMap<CarouselItemProps>'.
@fluentui/react-northstar:     Types of property 'design' are incompatible.

@chrisdholt chrisdholt force-pushed the users/chhol/update-web-components-package-name branch from c9a43d2 to d49aa4c Compare August 5, 2020 22:29
@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 5, 2020

Perf Analysis

Scenario Render type Master Ticks PR Ticks Iterations Status
Stack mount 465 464 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 769 821 5000
ButtonNext mount 531 530 5000
Checkbox mount 1404 1402 5000
CheckboxBase mount 1200 1206 5000
CheckboxNext mount 1473 1427 5000
ChoiceGroup mount 4553 4609 5000
ComboBox mount 834 875 1000
CommandBar mount 6534 6864 1000
ContextualMenu mount 11053 10847 1000
DefaultButton mount 1017 999 5000
DetailsRow mount 3195 3191 5000
DetailsRowFast mount 3158 3181 5000
DetailsRowNoStyles mount 3006 3062 5000
Dialog mount 1328 1341 1000
DocumentCardTitle mount 1576 1593 1000
Dropdown mount 2316 2272 5000
FocusZone mount 1528 1591 5000
IconButton mount 1595 1670 5000
Label mount 306 300 5000
Link mount 413 403 5000
LinkNext mount 421 433 5000
MenuButton mount 1295 1318 5000
Nav mount 2898 2913 1000
Panel mount 1303 1253 1000
Persona mount 725 746 1000
Pivot mount 1233 1255 1000
PivotNext mount 1205 1257 1000
PrimaryButton mount 1149 1138 5000
SearchBox mount 1189 1170 5000
SearchBoxNext mount 1238 1218 5000
Slider mount 1340 1360 5000
SliderNext mount 1832 1754 5000
SpinButton mount 4507 4488 5000
SpinButtonNext mount 4530 4742 5000
Spinner mount 398 410 5000
SplitButton mount 2793 2722 5000
Stack mount 465 464 5000 Possible regression
StackWithIntrinsicChildren mount 1795 1831 5000
StackWithTextChildren mount 4611 4600 5000
TagPicker mount 2619 2439 5000
Text mount 424 435 5000
TextField mount 1423 1357 5000
ThemeProvider mount 2911 2718 5000
ThemeProvider virtual-rerender 530 493 5000
Toggle mount 863 886 5000
ToggleNext mount 879 906 5000
button mount 115 119 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.39 0.42 0.93:1 2000 785
🦄 Button.Fluent 0.1 0.17 0.59:1 5000 511
🔧 Checkbox.Fluent 0.54 0.3 1.8:1 1000 540
🎯 Dialog.Fluent 0.14 0.19 0.74:1 5000 687
🔧 Dropdown.Fluent 2.56 0.46 5.57:1 1000 2562
🔧 Icon.Fluent 0.13 0.05 2.6:1 5000 640
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 332
🔧 Slider.Fluent 1.34 0.32 4.19:1 1000 1338
🔧 Text.Fluent 0.06 0.02 3:1 5000 314
🦄 Tooltip.Fluent 0.09 13.11 0.01:1 5000 457

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 393 347 1.13:1
AttachmentMinimalPerf.default 149 135 1.1:1
ButtonMinimalPerf.default 174 158 1.1:1
PortalMinimalPerf.default 112 102 1.1:1
ImageMinimalPerf.default 345 317 1.09:1
AvatarMinimalPerf.default 443 414 1.07:1
ListCommonPerf.default 879 825 1.07:1
CarouselMinimalPerf.default 423 399 1.06:1
DropdownManyItemsPerf.default 695 655 1.06:1
EmbedMinimalPerf.default 1794 1700 1.06:1
DropdownMinimalPerf.default 2657 2539 1.05:1
LayoutMinimalPerf.default 364 347 1.05:1
ListMinimalPerf.default 436 415 1.05:1
ProviderMinimalPerf.default 782 743 1.05:1
SliderMinimalPerf.default 1387 1322 1.05:1
BoxMinimalPerf.default 366 353 1.04:1
DividerMinimalPerf.default 339 325 1.04:1
ListNestedPerf.default 803 775 1.04:1
Text.Fluent 314 302 1.04:1
StatusMinimalPerf.default 610 590 1.03:1
ToolbarMinimalPerf.default 868 846 1.03:1
AnimationMinimalPerf.default 339 331 1.02:1
ChatWithPopoverPerf.default 411 402 1.02:1
CheckboxMinimalPerf.default 2555 2517 1.02:1
LabelMinimalPerf.default 372 363 1.02:1
TreeWith60ListItems.default 182 179 1.02:1
Button.Fluent 511 502 1.02:1
HierarchicalTreeMinimalPerf.default 402 398 1.01:1
InputMinimalPerf.default 1159 1146 1.01:1
PopupMinimalPerf.default 582 578 1.01:1
TextAreaMinimalPerf.default 459 453 1.01:1
VideoMinimalPerf.default 572 564 1.01:1
Image.Fluent 332 329 1.01:1
AccordionMinimalPerf.default 141 141 1:1
FlexMinimalPerf.default 264 264 1:1
MenuButtonMinimalPerf.default 1382 1385 1:1
CustomToolbarPrototype.default 3304 3301 1:1
Checkbox.Fluent 540 542 1:1
Dropdown.Fluent 2562 2568 1:1
ButtonSlotsPerf.default 532 539 0.99:1
CardMinimalPerf.default 505 510 0.99:1
DialogMinimalPerf.default 684 691 0.99:1
LoaderMinimalPerf.default 644 652 0.99:1
ProviderMergeThemesPerf.default 1604 1625 0.99:1
RadioGroupMinimalPerf.default 358 362 0.99:1
Avatar.Fluent 785 792 0.99:1
Slider.Fluent 1338 1346 0.99:1
AlertMinimalPerf.default 254 259 0.98:1
FormMinimalPerf.default 359 366 0.98:1
HeaderSlotsPerf.default 711 729 0.98:1
MenuMinimalPerf.default 772 786 0.98:1
TableManyItemsPerf.default 2024 2056 0.98:1
TableMinimalPerf.default 354 363 0.98:1
TooltipMinimalPerf.default 666 680 0.98:1
ChatMinimalPerf.default 548 567 0.97:1
SplitButtonMinimalPerf.default 3426 3538 0.97:1
TextMinimalPerf.default 295 303 0.97:1
Icon.Fluent 640 663 0.97:1
Tooltip.Fluent 457 469 0.97:1
AttachmentSlotsPerf.default 1010 1049 0.96:1
GridMinimalPerf.default 300 314 0.96:1
ItemLayoutMinimalPerf.default 1130 1178 0.96:1
Dialog.Fluent 687 713 0.96:1
HeaderMinimalPerf.default 319 337 0.95:1
IconMinimalPerf.default 566 596 0.95:1
ListWith60ListItems.default 947 1005 0.94:1
TreeMinimalPerf.default 756 802 0.94:1
ReactionMinimalPerf.default 336 361 0.93:1
RefMinimalPerf.default 164 178 0.92:1
SegmentMinimalPerf.default 307 338 0.91:1

@chrisdholt chrisdholt merged commit 1a3c2f8 into microsoft:master Aug 5, 2020
@chrisdholt chrisdholt deleted the users/chhol/update-web-components-package-name branch August 5, 2020 23:42
@msft-github-bot
Copy link
Contributor

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

Handy links:

tmaster628 pushed a commit to tmaster628/fluentui that referenced this pull request Aug 12, 2020
… update component namespace (microsoft#14345)

* feat: update web components package namespace and opt-in to change and publish process

* update the names for controls to fluent

* update version as this package is net new

* Change files

* add api report
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.

Proposal: Update web-components package to use the @fluentui/ namespace
7 participants