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

Multi version docsite #15692

Merged
merged 13 commits into from
Nov 2, 2020
Merged

Conversation

ling1726
Copy link
Member

Pull request checklist

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

Description of changes

Adds multi version support to the current N* docsite

Focus areas to test

(optional)

@ling1726 ling1726 added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Oct 26, 2020
`/pr-deploy-site/${process.env.BUILD_SOURCEBRANCH}/react-northstar/`
: '/';

if (process.env.OFFICIALRELEASE) {
Copy link
Member Author

Choose a reason for hiding this comment

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

I might not need process.env.OFFICIALRELEASE but I need to find out how/where process.env.PR_DEPLOY is set

Copy link
Member Author

Choose a reason for hiding this comment

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

using this env variable would still give us an easy way to build docsites for single versions

@@ -0,0 +1,116 @@
<!DOCTYPE html>
Copy link
Member Author

Choose a reason for hiding this comment

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

Any cleaner naming for this file ?

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 26, 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 1267d8d:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

displayName: 'Publish docsite as pipeline artifact'
inputs:
PathtoPublish: 'packages/fluentui/docs/dist'
ArtifactName: 'docsite_v$(docsiteVersion)'
Copy link
Member

Choose a reason for hiding this comment

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

Is it required?

Copy link
Member Author

Choose a reason for hiding this comment

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

no, I think but it's handy to have the artifacts available... storage is cheap and we can backfill easily if we ever move storage or have to clean it for some reason

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Oct 26, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 835 833 5000
BaseButtonCompat mount 932 955 5000
Breadcrumb mount 40242 40570 5000
Checkbox mount 1588 1526 5000
CheckboxBase mount 1321 1365 5000
ChoiceGroup mount 4877 4795 5000
ComboBox mount 953 963 1000
CommandBar mount 9822 9851 1000
ContextualMenu mount 5825 5971 1000
DefaultButtonCompat mount 1158 1165 5000
DetailsRow mount 3650 3657 5000
DetailsRowFast mount 3601 3637 5000
DetailsRowNoStyles mount 3458 3433 5000
Dialog mount 1510 1499 1000
DocumentCardTitle mount 1750 1744 1000
Dropdown mount 3436 3410 5000
FocusTrapZone mount 1804 1750 5000
FocusZone mount 1755 1783 5000
IconButtonCompat mount 1758 1807 5000
Label mount 329 336 5000
Layer mount 1831 1791 5000
Link mount 453 472 5000
MenuButtonCompat mount 1530 1521 5000
MessageBar mount 1982 1963 5000
Nav mount 3306 3240 1000
OverflowSet mount 1009 1011 5000
Panel mount 1411 1411 1000
Persona mount 887 846 1000
Pivot mount 1380 1399 1000
PrimaryButtonCompat mount 1341 1303 5000
Rating mount 7772 7726 5000
SearchBox mount 1378 1373 5000
Shimmer mount 2613 2635 5000
Slider mount 1892 1898 5000
SpinButton mount 5007 5002 5000
Spinner mount 406 401 5000
SplitButtonCompat mount 3144 3219 5000
Stack mount 512 531 5000
StackWithIntrinsicChildren mount 1506 1514 5000
StackWithTextChildren mount 4758 4783 5000
SwatchColorPicker mount 10180 10157 5000
TagPicker mount 2767 2814 5000
TeachingBubble mount 11361 11484 5000
Text mount 457 457 5000
TextField mount 1404 1403 5000
ThemeProvider mount 1940 1930 5000
ThemeProvider virtual-rerender 640 627 5000
Toggle mount 776 801 5000
button mount 543 549 5000
buttonNative mount 109 104 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.5 0.94:1 2000 930
🦄 Button.Fluent 0.13 0.24 0.54:1 5000 626
🔧 Checkbox.Fluent 0.65 0.36 1.81:1 1000 653
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 815
🔧 Dropdown.Fluent 2.9 0.44 6.59:1 1000 2903
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 767
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 439
🔧 Slider.Fluent 1.56 0.46 3.39:1 1000 1555
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 389
🦄 Tooltip.Fluent 0.12 0.88 0.14:1 5000 580

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 207 185 1.12:1
BoxMinimalPerf.default 419 377 1.11:1
ChatDuplicateMessagesPerf.default 459 420 1.09:1
AttachmentMinimalPerf.default 179 168 1.07:1
TreeWith60ListItems.default 218 204 1.07:1
AccordionMinimalPerf.default 169 159 1.06:1
ListMinimalPerf.default 533 504 1.06:1
TooltipMinimalPerf.default 860 808 1.06:1
ImageMinimalPerf.default 447 424 1.05:1
SegmentMinimalPerf.default 411 391 1.05:1
AnimationMinimalPerf.default 436 418 1.04:1
FlexMinimalPerf.default 322 310 1.04:1
ListWith60ListItems.default 969 932 1.04:1
MenuMinimalPerf.default 946 910 1.04:1
SkeletonMinimalPerf.default 468 448 1.04:1
Tooltip.Fluent 580 557 1.04:1
AlertMinimalPerf.default 333 324 1.03:1
ButtonUseCssNestingPerf.default 1112 1076 1.03:1
PortalMinimalPerf.default 163 159 1.03:1
ProviderMinimalPerf.default 995 965 1.03:1
StatusMinimalPerf.default 791 771 1.03:1
IconMinimalPerf.default 732 712 1.03:1
TableManyItemsPerf.default 2386 2317 1.03:1
TextMinimalPerf.default 391 379 1.03:1
Icon.Fluent 767 747 1.03:1
AttachmentSlotsPerf.default 1195 1174 1.02:1
CardMinimalPerf.default 609 596 1.02:1
DropdownMinimalPerf.default 2898 2849 1.02:1
EmbedMinimalPerf.default 2002 1967 1.02:1
FormMinimalPerf.default 482 471 1.02:1
GridMinimalPerf.default 378 370 1.02:1
InputMinimalPerf.default 1325 1299 1.02:1
ItemLayoutMinimalPerf.default 1395 1371 1.02:1
ListCommonPerf.default 716 705 1.02:1
ProviderMergeThemesPerf.default 1982 1951 1.02:1
RadioGroupMinimalPerf.default 478 469 1.02:1
RefMinimalPerf.default 234 229 1.02:1
SliderMinimalPerf.default 1533 1509 1.02:1
SplitButtonMinimalPerf.default 3885 3820 1.02:1
Avatar.Fluent 930 915 1.02:1
Button.Fluent 626 614 1.02:1
Image.Fluent 439 429 1.02:1
Slider.Fluent 1555 1520 1.02:1
ButtonOverridesMissPerf.default 1707 1692 1.01:1
ButtonSlotsPerf.default 628 620 1.01:1
ChatWithPopoverPerf.default 482 478 1.01:1
CheckboxMinimalPerf.default 2912 2891 1.01:1
DialogMinimalPerf.default 834 822 1.01:1
DividerMinimalPerf.default 408 402 1.01:1
DropdownManyItemsPerf.default 783 779 1.01:1
HeaderMinimalPerf.default 405 400 1.01:1
HeaderSlotsPerf.default 860 850 1.01:1
LayoutMinimalPerf.default 439 436 1.01:1
MenuButtonMinimalPerf.default 1642 1628 1.01:1
PopupMinimalPerf.default 714 708 1.01:1
VideoMinimalPerf.default 667 659 1.01:1
Dropdown.Fluent 2903 2871 1.01:1
Text.Fluent 389 384 1.01:1
ButtonUseCssPerf.default 848 850 1:1
CarouselMinimalPerf.default 468 468 1:1
ReactionMinimalPerf.default 449 447 1:1
TableMinimalPerf.default 456 454 1:1
TextAreaMinimalPerf.default 539 541 1:1
CustomToolbarPrototype.default 3783 3772 1:1
TreeMinimalPerf.default 939 942 1:1
Checkbox.Fluent 653 651 1:1
AvatarMinimalPerf.default 498 503 0.99:1
ChatMinimalPerf.default 645 654 0.99:1
ListNestedPerf.default 602 609 0.99:1
Dialog.Fluent 815 823 0.99:1
LabelMinimalPerf.default 439 446 0.98:1
LoaderMinimalPerf.default 729 745 0.98:1
ToolbarMinimalPerf.default 980 999 0.98:1

@size-auditor
Copy link

size-auditor bot commented Oct 26, 2020

Asset size changes

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

Baseline commit: eb0f2c4b76a921fa9a8b069189ecdacff7029117 (build)

@@ -486,6 +487,7 @@ const Sidebar: React.FC<RouteComponentProps & SidebarProps> = props => {
>
Fluent <span style={gradientTextStyles}>UI</span>
</Text>
<VersionDropdown width={props.width} />
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<VersionDropdown width={props.width} />
{process.env.NODE_ENV === 'production' && <VersionDropdown width={props.width} />}

So we hide this during local builds?

Copy link
Member Author

Choose a reason for hiding this comment

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

This is should already be covered in the component itself, although you reminded me that I have no catch for the fetch.... is that enough for you or should we be more explicit to not render this locally at all ? It might be necessary to locally host a manifest to display this dropdown if you're working on it (like I have)

@ling1726 ling1726 merged commit f247986 into microsoft:master Nov 2, 2020
SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 23, 2020
* Dropdown and shell for multi version docsite

* Add deployment artifacts and config

* PR fixes

* revert yarn build

* Add existing semver version in repo to docs

* Fix basepath

* added changelog entry

* fix changelog entry

* fixed parentheses in changelog

* add dependency for versiondropdown

* Use compare-versions to validate semver
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants