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

chore(react-theme): Migrate to new DX #18655

Merged
merged 10 commits into from
Jul 1, 2021
Merged

chore(react-theme): Migrate to new DX #18655

merged 10 commits into from
Jul 1, 2021

Conversation

miroslavstastny
Copy link
Member

@miroslavstastny miroslavstastny commented Jun 22, 2021 •
edited
Loading

Pull request checklist

Description of changes

  • react-theme migrated using yarn nx workspace-generator migrate-converged-pkg --name='@fluentui/react-theme'
  • added configuration for api-extractor, updates theme exports to make the extractor happy

@miroslavstastny miroslavstastny requested a review from a team as a code owner June 22, 2021 10:29
@size-auditor
Copy link

size-auditor bot commented Jun 22, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 35595426665827aee8852de4b2587f689bc0d759 (build)

miroslavstastny
miroslavstastny commented Jun 22, 2021
View reviewed changes
packages/react-theme/src/themes/teams/darkTheme.ts

export const teamsDarkTheme = createTeamsDarkTheme(brandTeams);
export const teamsDarkTheme: Theme = createTeamsDarkTheme(brandTeams);
Copy link
Member Author

Choose a reason for hiding this comment

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

Desperate fix for api-extractor.

Without explicitly typing the variable, typescript generates the following .d.ts:

export declare const webLightTheme: import("../..").Theme;

which api-extractor fails on:

image

Copy link
Contributor

@Hotell Hotell Jun 22, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

interesting !

what's the normal source import of that Theme ?

import { createHighContrastTheme } from '../../utils/createHighContrastTheme';

we have node ../../scripts/typescript/normalize-import which normalizes this TS anomaly (fixed in TS 4.3 )

@miroslavstastny
Copy link
Member Author

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

Hotell
Hotell reviewed Jun 22, 2021
View reviewed changes
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 22, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 771 776 5000
BaseButton mount 857 876 5000
Breadcrumb mount 2609 2610 1000
ButtonNext mount 515 512 5000
Checkbox mount 1496 1489 5000
CheckboxBase mount 1241 1249 5000
ChoiceGroup mount 4610 4603 5000
ComboBox mount 953 1007 1000
CommandBar mount 10084 9984 1000
ContextualMenu mount 6169 6214 1000
DefaultButton mount 1105 1081 5000
DetailsRow mount 3653 3689 5000
DetailsRowFast mount 3605 3625 5000
DetailsRowNoStyles mount 3418 3493 5000
Dialog mount 2065 2103 1000
DocumentCardTitle mount 134 126 1000
Dropdown mount 3236 3193 5000
FluentProviderNext mount 7186 7159 5000
FocusTrapZone mount 1793 1791 5000
FocusZone mount 1778 1758 5000
IconButton mount 1680 1710 5000
Label mount 319 324 5000
Layer mount 1742 1745 5000
Link mount 436 451 5000
MakeStyles mount 1826 1831 50000
MenuButton mount 1431 1391 5000
MessageBar mount 1964 1970 5000
Nav mount 3175 3149 1000
OverflowSet mount 1024 1016 5000
Panel mount 2048 2101 1000
Persona mount 800 803 1000
Pivot mount 1406 1347 1000
PrimaryButton mount 1265 1239 5000
Rating mount 7509 7436 5000
SearchBox mount 1296 1295 5000
Shimmer mount 2475 2449 5000
Slider mount 1955 1900 5000
SpinButton mount 4840 4921 5000
Spinner mount 431 419 5000
SplitButton mount 3108 3124 5000
Stack mount 485 482 5000
StackWithIntrinsicChildren mount 1461 1468 5000
StackWithTextChildren mount 4331 4365 5000
SwatchColorPicker mount 9825 9999 5000
Tabs mount 1381 1375 1000
TagPicker mount 2494 2335 5000
TeachingBubble mount 11717 11783 5000
Text mount 409 409 5000
TextField mount 1381 1330 5000
ThemeProvider mount 1165 1161 5000
ThemeProvider virtual-rerender 587 579 5000
Toggle mount 785 797 5000
buttonNative mount 105 108 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 172 157 1.1:1
AvatarMinimalPerf.default 198 189 1.05:1
SkeletonMinimalPerf.default 357 339 1.05:1
AccordionMinimalPerf.default 152 146 1.04:1
BoxMinimalPerf.default 341 328 1.04:1
LabelMinimalPerf.default 381 367 1.04:1
TableMinimalPerf.default 394 379 1.04:1
AttachmentSlotsPerf.default 1058 1026 1.03:1
ListNestedPerf.default 551 535 1.03:1
RadioGroupMinimalPerf.default 445 432 1.03:1
AnimationMinimalPerf.default 404 395 1.02:1
CarouselMinimalPerf.default 461 454 1.02:1
CheckboxMinimalPerf.default 2720 2659 1.02:1
DialogMinimalPerf.default 751 734 1.02:1
DropdownMinimalPerf.default 3069 2999 1.02:1
LayoutMinimalPerf.default 363 356 1.02:1
LoaderMinimalPerf.default 685 672 1.02:1
SegmentMinimalPerf.default 339 332 1.02:1
TextMinimalPerf.default 343 335 1.02:1
DividerMinimalPerf.default 343 338 1.01:1
DropdownManyItemsPerf.default 666 661 1.01:1
GridMinimalPerf.default 326 324 1.01:1
InputMinimalPerf.default 1235 1220 1.01:1
ListCommonPerf.default 603 597 1.01:1
PopupMinimalPerf.default 561 556 1.01:1
PortalMinimalPerf.default 176 175 1.01:1
IconMinimalPerf.default 581 577 1.01:1
TableManyItemsPerf.default 1865 1846 1.01:1
TooltipMinimalPerf.default 969 957 1.01:1
TreeMinimalPerf.default 778 771 1.01:1
VideoMinimalPerf.default 604 598 1.01:1
AlertMinimalPerf.default 268 268 1:1
ButtonOverridesMissPerf.default 1636 1639 1:1
ChatMinimalPerf.default 645 643 1:1
EmbedMinimalPerf.default 4007 3992 1:1
ItemLayoutMinimalPerf.default 1191 1196 1:1
ListMinimalPerf.default 493 493 1:1
ProviderMergeThemesPerf.default 1650 1651 1:1
ProviderMinimalPerf.default 944 940 1:1
RefMinimalPerf.default 231 230 1:1
CustomToolbarPrototype.default 3698 3691 1:1
ToolbarMinimalPerf.default 905 903 1:1
AttachmentMinimalPerf.default 149 151 0.99:1
DatepickerMinimalPerf.default 5258 5292 0.99:1
FormMinimalPerf.default 386 391 0.99:1
HeaderMinimalPerf.default 348 352 0.99:1
HeaderSlotsPerf.default 726 730 0.99:1
ImageMinimalPerf.default 376 378 0.99:1
MenuMinimalPerf.default 825 836 0.99:1
MenuButtonMinimalPerf.default 1537 1553 0.99:1
SplitButtonMinimalPerf.default 3649 3669 0.99:1
StatusMinimalPerf.default 663 671 0.99:1
ButtonSlotsPerf.default 524 536 0.98:1
CardMinimalPerf.default 525 538 0.98:1
ChatWithPopoverPerf.default 334 341 0.98:1
ListWith60ListItems.default 600 614 0.98:1
RosterPerf.default 1105 1123 0.98:1
ReactionMinimalPerf.default 366 374 0.98:1
ButtonMinimalPerf.default 155 160 0.97:1
TextAreaMinimalPerf.default 465 480 0.97:1
ChatDuplicateMessagesPerf.default 285 296 0.96:1
FlexMinimalPerf.default 275 285 0.96:1
SliderMinimalPerf.default 1500 1557 0.96:1

@layershifter layershifter mentioned this pull request Jun 28, 2021
Closed
32 tasks
@layershifter
Merge branch 'master' of https://github.com/microsoft/fluentui into c…
7986b92 
…hore/react-theme-dx

� Conflicts:
�	jest.config.js
�	nx.json
�	workspace.json
@layershifter
Copy link
Member

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 1, 2021

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 39e2158:

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

@layershifter layershifter merged commit 7222c05 into microsoft:master Jul 1, 2021
@layershifter layershifter deleted the chore/react-theme-dx branch July 1, 2021 13:08
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Hotell Hotell Hotell approved these changes

Assignees

@miroslavstastny miroslavstastny

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@miroslavstastny @fabricteam @layershifter @msft-fluent-ui-bot @Hotell