chore: migrate @fluentui/react-tabster #20756

layershifter · 2021-11-24T13:27:13Z

Pull request checklist

Addresses an existing issue: related to migration: migrate converged packages to TS Solution style config #20597
Include a change request file using $ yarn change

Description of changes

Ran generator
Restored --passWithNoTests

codesandbox-ci · 2021-11-24T13:43:54Z

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 5fb25da:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2021-11-24T14:08:57Z

📊 Bundle size report

_{🤖 This report was generated against 99adff5a9aab9086e8bc4737040654ab23f0febe}

size-auditor · 2021-11-24T14:18:51Z

Asset size changes

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

Baseline commit: 99adff5a9aab9086e8bc4737040654ab23f0febe (build)

fabricteam · 2021-11-24T15:34:08Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1040	976	5000
BaseButton	mount	1040	1072	5000
Breadcrumb	mount	2760	2820	1000
ButtonNext	mount	643	659	5000
Checkbox	mount	1690	1683	5000
CheckboxBase	mount	1433	1433	5000
ChoiceGroup	mount	5030	4966	5000
ComboBox	mount	1089	1109	1000
CommandBar	mount	10513	10523	1000
ContextualMenu	mount	8604	8700	1000
DefaultButton	mount	1263	1302	5000
DetailsRow	mount	3893	3973	5000
DetailsRowFast	mount	3991	3952	5000
DetailsRowNoStyles	mount	3847	3837	5000
Dialog	mount	2690	2717	1000
DocumentCardTitle	mount	261	277	1000
Dropdown	mount	3386	3346	5000
FluentProviderNext	mount	4377	4346	5000
FluentProviderWithTheme	mount	366	362	10
FluentProviderWithTheme	virtual-rerender	221	221	10
FluentProviderWithTheme	virtual-rerender-with-unmount	372	389	10
FocusTrapZone	mount	1964	2030	5000
FocusZone	mount	2031	2021	5000
IconButton	mount	1928	1939	5000
Label	mount	495	478	5000
Layer	mount	3134	3179	5000
Link	mount	604	594	5000
MakeStyles	mount	2000	1963	50000
MenuButton	mount	1618	1644	5000
MessageBar	mount	2130	2157	5000
Nav	mount	3385	3445	1000
OverflowSet	mount	1267	1240	5000
Panel	mount	2639	2573	1000
Persona	mount	983	981	1000
Pivot	mount	1583	1606	1000
PrimaryButton	mount	1414	1443	5000
Rating	mount	7816	7859	5000
SearchBox	mount	1476	1455	5000
Shimmer	mount	2706	2615	5000
Slider	mount	2149	2128	5000
SpinButton	mount	5217	5231	5000
Spinner	mount	604	569	5000
SplitButton	mount	3394	3338	5000
Stack	mount	641	658	5000
StackWithIntrinsicChildren	mount	1820	1885	5000
StackWithTextChildren	mount	4875	4848	5000
SwatchColorPicker	mount	10870	10724	5000
TagPicker	mount	2827	2802	5000
TeachingBubble	mount	13334	13436	5000
Text	mount	563	566	5000
TextField	mount	1529	1512	5000
ThemeProvider	mount	1342	1342	5000
ThemeProvider	virtual-rerender	718	734	5000
ThemeProvider	virtual-rerender-with-unmount	2088	2052	5000
Toggle	mount	960	924	5000
buttonNative	mount	230	256	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ImageMinimalPerf.default	390	352	1.11:1
ListWith60ListItems.default	689	622	1.11:1
LoaderMinimalPerf.default	742	674	1.1:1
AvatarMinimalPerf.default	210	196	1.07:1
BoxMinimalPerf.default	368	344	1.07:1
ReactionMinimalPerf.default	405	380	1.07:1
TextMinimalPerf.default	365	341	1.07:1
ListCommonPerf.default	668	632	1.06:1
SkeletonMinimalPerf.default	376	356	1.06:1
AttachmentMinimalPerf.default	162	154	1.05:1
ButtonSlotsPerf.default	579	550	1.05:1
DialogMinimalPerf.default	791	752	1.05:1
TreeWith60ListItems.default	192	182	1.05:1
ChatDuplicateMessagesPerf.default	320	307	1.04:1
FormMinimalPerf.default	426	409	1.04:1
ItemLayoutMinimalPerf.default	1230	1187	1.04:1
ListMinimalPerf.default	544	523	1.04:1
SliderMinimalPerf.default	1748	1688	1.04:1
TooltipMinimalPerf.default	1071	1028	1.04:1
FlexMinimalPerf.default	311	301	1.03:1
MenuMinimalPerf.default	905	878	1.03:1
PopupMinimalPerf.default	640	622	1.03:1
PortalMinimalPerf.default	191	186	1.03:1
SegmentMinimalPerf.default	373	361	1.03:1
ChatMinimalPerf.default	687	675	1.02:1
DatepickerMinimalPerf.default	5677	5566	1.02:1
DropdownMinimalPerf.default	3096	3044	1.02:1
EmbedMinimalPerf.default	4167	4094	1.02:1
GridMinimalPerf.default	351	344	1.02:1
HeaderMinimalPerf.default	371	363	1.02:1
LayoutMinimalPerf.default	368	361	1.02:1
MenuButtonMinimalPerf.default	1682	1657	1.02:1
RadioGroupMinimalPerf.default	458	451	1.02:1
HeaderSlotsPerf.default	764	755	1.01:1
LabelMinimalPerf.default	391	386	1.01:1
SplitButtonMinimalPerf.default	4306	4279	1.01:1
IconMinimalPerf.default	619	610	1.01:1
TableManyItemsPerf.default	1922	1902	1.01:1
CustomToolbarPrototype.default	4202	4149	1.01:1
CardMinimalPerf.default	577	577	1:1
CarouselMinimalPerf.default	494	493	1:1
CheckboxMinimalPerf.default	2705	2699	1:1
DividerMinimalPerf.default	375	376	1:1
AttachmentSlotsPerf.default	1100	1106	0.99:1
ChatWithPopoverPerf.default	384	386	0.99:1
ListNestedPerf.default	559	563	0.99:1
RefMinimalPerf.default	245	247	0.99:1
ToolbarMinimalPerf.default	951	962	0.99:1
TreeMinimalPerf.default	815	825	0.99:1
VideoMinimalPerf.default	630	637	0.99:1
ProviderMinimalPerf.default	1114	1139	0.98:1
ButtonOverridesMissPerf.default	1685	1739	0.97:1
DropdownManyItemsPerf.default	686	705	0.97:1
InputMinimalPerf.default	1310	1345	0.97:1
ProviderMergeThemesPerf.default	1745	1793	0.97:1
AnimationMinimalPerf.default	405	421	0.96:1
StatusMinimalPerf.default	679	708	0.96:1
TableMinimalPerf.default	409	425	0.96:1
TextAreaMinimalPerf.default	505	528	0.96:1
ButtonMinimalPerf.default	167	179	0.93:1
AccordionMinimalPerf.default	154	167	0.92:1
AlertMinimalPerf.default	271	293	0.92:1
RosterPerf.default	1171	1269	0.92:1

ling1726 · 2021-11-24T15:38:38Z

packages/react-tabster/e2e/useKeyborg.e2e.ts

@@ -5,7 +5,7 @@ describe('Keyborg', () => {
    cy.visitStorybook();
  });

-  beforeEach(() => cy.loadStory('tabster', 'Keyborg'));
+  beforeEach(() => cy.loadStory('Components/tabster', 'Keyborg'));


Turns out the migration enabled tests that were previously not enabled.... thx @Hotell 💪💪

aaaaaaand I also remembered why it was disabled.... this time round I created an isse to show why it's not possible to enable e2e tests on CI for this package: #20772

Disabled the tests again in 5fb25da

* chore: migrate @fluentui/react-tabster * Change files * restore --passWithNoTests * fix keyborg test name * disable e2e tests for react-tabster Co-authored-by: Lingfan Gao <[email protected]>

layershifter added 2 commits November 24, 2021 14:25

chore: migrate @fluentui/react-tabster

feaae4b

Change files

9a9122b

layershifter requested a review from a team as a code owner November 24, 2021 13:27

msft-fluent-ui-bot added the Component: Pivot label Nov 24, 2021

msft-fluent-ui-bot assigned khmakoto Nov 24, 2021

layershifter mentioned this pull request Nov 24, 2021

migration: migrate converged packages to TS Solution style config #20597

Closed

39 tasks

layershifter requested a review from a team November 24, 2021 13:58

ling1726 approved these changes Nov 24, 2021

View reviewed changes

restore --passWithNoTests

58e1514

layershifter removed the Component: Pivot label Nov 24, 2021

fix keyborg test name

7b4e4dd

ling1726 reviewed Nov 24, 2021

View reviewed changes

disable e2e tests for react-tabster

5fb25da

ling1726 mentioned this pull request Nov 25, 2021

Can't run Storybook or e2e tests on CI with packages that aren't direct dependencies of react-components #20772

Closed

layershifter merged commit 71ff898 into master Nov 25, 2021

layershifter deleted the chore/migrate-rtab branch November 25, 2021 08:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: migrate @fluentui/react-tabster #20756

chore: migrate @fluentui/react-tabster #20756

layershifter commented Nov 24, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 24, 2021 •

edited

Loading

fabricteam commented Nov 24, 2021 •

edited

Loading

size-auditor bot commented Nov 24, 2021 •

edited

Loading

fabricteam commented Nov 24, 2021 •

edited

Loading

ling1726 Nov 24, 2021

ling1726 Nov 25, 2021

ling1726 Nov 25, 2021

chore: migrate @fluentui/react-tabster #20756

chore: migrate @fluentui/react-tabster #20756

Conversation

layershifter commented Nov 24, 2021 • edited Loading

Pull request checklist

Description of changes

codesandbox-ci bot commented Nov 24, 2021 • edited Loading

fabricteam commented Nov 24, 2021 • edited Loading

📊 Bundle size report

size-auditor bot commented Nov 24, 2021 • edited Loading

Asset size changes

fabricteam commented Nov 24, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

ling1726 Nov 24, 2021

Choose a reason for hiding this comment

ling1726 Nov 25, 2021

Choose a reason for hiding this comment

ling1726 Nov 25, 2021

Choose a reason for hiding this comment

layershifter commented Nov 24, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 24, 2021 •

edited

Loading

fabricteam commented Nov 24, 2021 •

edited

Loading

size-auditor bot commented Nov 24, 2021 •

edited

Loading

fabricteam commented Nov 24, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)