Updating SpinButton to handle onChange #15059

czearing · 2020-09-16T02:22:49Z

Pull request checklist

Fixes SpinButton: fix issues revealed by eslint-plugin-react-hooks #14480, fixes SpinButton: Add onChange handler #5326
Include a change request file using $ yarn change

Description of changes

Updating SpinButton to handle onChange.
Resolving issues revealed by eslint-plugin-react-hooks. SpinButton: fix issues revealed by eslint-plugin-react-hooks #14480
Updating SpinButton.stateful.example.tsx to show the usage of onChange.
Adding a forwardRef.

Focus areas to test

SpinButton

codesandbox-ci · 2020-09-16T02:37:40Z

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 a69c728:

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

msft-github-bot · 2020-09-16T02:58:12Z

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	863	858	5000
BaseButton	mount	948	955	5000
Breadcrumb	mount	40542	40309	5000
BreadcrumbNext	mount	152967	152866	5000
ButtonNext	mount	587	583	5000
Checkbox	mount	1615	1671	5000
CheckboxBase	mount	1351	1356	5000
CheckboxNext	mount	1535	1522	5000
ChoiceGroup	mount	5149	5180	5000
ChoiceGroupNext	mount	9512	9469	5000
ComboBox	mount	955	960	1000
CommandBar	mount	7490	7675	1000
ContextualMenu	mount	13384	12782	1000
DefaultButton	mount	1210	1145	5000
DetailsRow	mount	3786	3814	5000
DetailsRowFast	mount	3918	3842	5000
DetailsRowNoStyles	mount	3622	3624	5000
Dialog	mount	1532	1545	1000
DocumentCardTitle	mount	1831	1807	1000
Dropdown	mount	2656	2621	5000
FocusTrapZone	mount	1708	1734	5000
FocusTrapZoneNext	mount	1878	1843	5000
FocusZone	mount	1837	1851	5000
IconButton	mount	1849	1840	5000
Label	mount	338	344	5000
Layer	mount	1998	2025	5000
LayerNext	mount	1957	1948	5000
Link	mount	462	458	5000
LinkNext	mount	482	474	5000
MenuButton	mount	1563	1579	5000
MessageBar	mount	2067	2068	5000
MessageBarNext	mount	1974	1995	5000
Nav	mount	3373	3361	1000
OverflowSet	mount	1412	1454	5000
OverflowSetNext	mount	1081	1070	5000
Panel	mount	1444	1495	1000
Persona	mount	899	869	1000
Pivot	mount	1457	1561	1000
PivotNext	mount	1474	1479	1000
PrimaryButton	mount	1371	1364	5000
Rating	mount	8018	8233	5000
RatingNext	mount	7861	7981	5000
SearchBox	mount	1342	1360	5000
SearchBoxNext	mount	1396	1389	5000
Shimmer	mount	2674	2642	5000
ShimmerNext	mount	2669	2626	5000
Slider	mount	1531	1569	5000
SliderNext	mount	1921	1925	5000
SpinButton	mount	5293	5061	5000
SpinButtonNext	mount	5270	5368	5000
Spinner	mount	410	419	5000
SplitButton	mount	3201	3268	5000
Stack	mount	525	529	5000
StackWithIntrinsicChildren	mount	2036	2070	5000
StackWithTextChildren	mount	5261	5236	5000
SwatchColorPicker	mount	10578	10648	5000
SwatchColorPickerNext	mount	10553	10461	5000
TagPicker	mount	2818	2831	5000
TeachingBubble	mount	48183	48527	5000
TeachingBubbleNext	mount	11629	11534	5000
Text	mount	450	432	5000
TextField	mount	1389	1396	5000
ThemeProvider	mount	3091	3076	5000
ThemeProvider	virtual-rerender	598	598	5000
Toggle	mount	841	829	5000
ToggleNext	mount	810	835	5000
button	mount	110	121	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	940
🦄	Button.Fluent	0.13	0.21	0.62:1	5000	635
🔧	Checkbox.Fluent	0.67	0.36	1.86:1	1000	669
🎯	Dialog.Fluent	0.17	0.23	0.74:1	5000	838
🔧	Dropdown.Fluent	2.99	0.49	6.1:1	1000	2988
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	773
🎯	Image.Fluent	0.09	0.12	0.75:1	5000	433
🔧	Slider.Fluent	1.6	0.37	4.32:1	1000	1597
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	410
🦄	Tooltip.Fluent	0.12	14.96	0.01:1	5000	582

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	171	0	Infinity:1
AlertMinimalPerf.default	361	0	Infinity:1
AttachmentMinimalPerf.default	180	0	Infinity:1
AttachmentSlotsPerf.default	1201	0	Infinity:1
AvatarMinimalPerf.default	499	0	Infinity:1
BoxMinimalPerf.default	416	0	Infinity:1
ButtonMinimalPerf.default	201	0	Infinity:1
ButtonOverridesMissPerf.default	1841	0	Infinity:1
ButtonSlotsPerf.default	653	0	Infinity:1
ButtonUseCssPerf.default	872	0	Infinity:1
CardMinimalPerf.default	642	0	Infinity:1
CarouselMinimalPerf.default	494	0	Infinity:1
ChatDuplicateMessagesPerf.default	446	0	Infinity:1
DialogMinimalPerf.default	839	0	Infinity:1
DividerMinimalPerf.default	419	0	Infinity:1
DropdownManyItemsPerf.default	808	0	Infinity:1
DropdownMinimalPerf.default	2934	0	Infinity:1
EmbedMinimalPerf.default	2040	0	Infinity:1
FormMinimalPerf.default	479	0	Infinity:1
GridMinimalPerf.default	394	0	Infinity:1
HeaderMinimalPerf.default	417	0	Infinity:1
HeaderSlotsPerf.default	890	0	Infinity:1
ImageMinimalPerf.default	419	0	Infinity:1
InputMinimalPerf.default	1345	0	Infinity:1
ItemLayoutMinimalPerf.default	1382	0	Infinity:1
LabelMinimalPerf.default	483	0	Infinity:1
LayoutMinimalPerf.default	439	0	Infinity:1
ListCommonPerf.default	706	0	Infinity:1
ListMinimalPerf.default	537	0	Infinity:1
ListWith60ListItems.default	980	0	Infinity:1
LoaderMinimalPerf.default	795	0	Infinity:1
MenuMinimalPerf.default	943	0	Infinity:1
MenuButtonMinimalPerf.default	1712	0	Infinity:1
PopupMinimalPerf.default	731	0	Infinity:1
PortalMinimalPerf.default	156	0	Infinity:1
ProviderMergeThemesPerf.default	1983	0	Infinity:1
RadioGroupMinimalPerf.default	481	0	Infinity:1
RefMinimalPerf.default	245	0	Infinity:1
SegmentMinimalPerf.default	418	0	Infinity:1
SkeletonMinimalPerf.default	466	0	Infinity:1
SliderMinimalPerf.default	1612	0	Infinity:1
SplitButtonMinimalPerf.default	3960	0	Infinity:1
StatusMinimalPerf.default	795	0	Infinity:1
IconMinimalPerf.default	797	0	Infinity:1
TableManyItemsPerf.default	2331	0	Infinity:1
TableMinimalPerf.default	460	0	Infinity:1
TextAreaMinimalPerf.default	546	0	Infinity:1
CustomToolbarPrototype.default	3936	0	Infinity:1
TreeMinimalPerf.default	961	0	Infinity:1
TreeWith60ListItems.default	221	0	Infinity:1
Avatar.Fluent	940	0	Infinity:1
Button.Fluent	635	0	Infinity:1
Checkbox.Fluent	669	0	Infinity:1
Dialog.Fluent	838	0	Infinity:1
Dropdown.Fluent	2988	0	Infinity:1
Icon.Fluent	773	0	Infinity:1
Image.Fluent	433	0	Infinity:1
Slider.Fluent	1597	0	Infinity:1
Tooltip.Fluent	582	0	Infinity:1
CheckboxMinimalPerf.default	2947	1	2947:1
ButtonUseCssNestingPerf.default	1138	1	1138:1
ProviderMinimalPerf.default	1075	1	1075:1
ToolbarMinimalPerf.default	997	1	997:1
TooltipMinimalPerf.default	851	1	851:1
VideoMinimalPerf.default	680	1	680:1
ChatMinimalPerf.default	665	1	665:1
ListNestedPerf.default	616	1	616:1
ChatWithPopoverPerf.default	494	1	494:1
AnimationMinimalPerf.default	443	1	443:1
ReactionMinimalPerf.default	440	1	440:1
Text.Fluent	410	1	410:1
TextMinimalPerf.default	389	1	389:1
FlexMinimalPerf.default	337	1	337:1

size-auditor · 2020-09-16T03:12:50Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-next-SpinButton	185.876 kB	184.825 kB	-1.051 kB

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 369c7a1f7f9a4b6a8379eece7b4812e5e0675ebb (build)

packages/react-next/src/components/SpinButton/examples/SpinButton.Stateful.Example.tsx

…ix/addressing-spinbutton-eslint-errors

…ix/addressing-spinbutton-eslint-errors # Conflicts: # packages/react-next/etc/react-next.api.md # packages/react-next/src/components/SpinButton/SpinButton.base.tsx

…ix/addressing-spinbutton-eslint-errors

…/examples

ecraig12345

Let's wait on this until the worst of the code moves are over.

msft-github-bot · 2020-10-05T21:00:05Z

This pull request has been automatically marked as stale because it was marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 5 days of this comment. Thank you for your contributions to Fluent UI!

czearing added 6 commits September 15, 2020 16:10

Cleaning up spinButton.base.tsx

df796bb

Updating spinButton

7fd43bd

Updating SpinButton to handle onChange.

4ab76a7

Change files

9eca699

Updating snapshots and adding note about onChange to RELEASE_NOTES.md

85a0868

Removing commented out code.

503f8c5

czearing requested a review from khmakoto as a code owner September 16, 2020 02:22

msft-github-bot added Fluent UI v8 PR: API Modified labels Sep 16, 2020

ecraig12345 self-requested a review September 16, 2020 18:56

msft-github-bot added Component: SpinButton Priority 2: Normal labels Sep 16, 2020

dzearing reviewed Sep 17, 2020

View reviewed changes

packages/react-next/src/components/SpinButton/examples/SpinButton.Stateful.Example.tsx Outdated Show resolved Hide resolved

czearing added 2 commits September 17, 2020 10:44

Adding a unit test for controlled scenarios.

253d63b

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

d54fcf1

…ix/addressing-spinbutton-eslint-errors

ecraig12345 self-assigned this Sep 24, 2020

ecraig12345 removed the Priority 2: Normal label Sep 24, 2020

czearing and others added 8 commits September 24, 2020 16:39

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

6a27243

…ix/addressing-spinbutton-eslint-errors # Conflicts: # packages/react-next/etc/react-next.api.md # packages/react-next/src/components/SpinButton/SpinButton.base.tsx

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

f7bfa79

…ix/addressing-spinbutton-eslint-errors

Updating example snapshots

857cb5c

Change files

b725f09

Merge branch 'master' of https://github.com/microsoft/fluentui into f…

6a18d4b

…ix/addressing-spinbutton-eslint-errors

Updating Nav, GroupedList, and DetailsList snapshots within @fluentui…

d6b67e4

…/examples

Merge branch 'master' into fix/addressing-spinbutton-eslint-errors

71f7f3c

fix bad merge

a69c728

ecraig12345 requested changes Sep 28, 2020

View reviewed changes

msft-github-bot added the Needs: Author Feedback label Sep 28, 2020

msft-github-bot added the Status: No Recent Activity label Oct 5, 2020

czearing closed this Oct 8, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updating SpinButton to handle onChange #15059

Updating SpinButton to handle onChange #15059

czearing commented Sep 16, 2020 •

edited by ecraig12345

Loading

codesandbox-ci bot commented Sep 16, 2020 •

edited

Loading

msft-github-bot commented Sep 16, 2020 •

edited

Loading

size-auditor bot commented Sep 16, 2020 •

edited

Loading

ecraig12345 left a comment

msft-github-bot commented Oct 5, 2020

Updating SpinButton to handle onChange #15059

Updating SpinButton to handle onChange #15059

Conversation

czearing commented Sep 16, 2020 • edited by ecraig12345 Loading

Pull request checklist

Description of changes

Focus areas to test

codesandbox-ci bot commented Sep 16, 2020 • edited Loading

msft-github-bot commented Sep 16, 2020 • edited Loading

Perf Analysis

Perf Analysis (Fluent)

size-auditor bot commented Sep 16, 2020 • edited Loading

Asset size changes

ecraig12345 left a comment

Choose a reason for hiding this comment

msft-github-bot commented Oct 5, 2020

czearing commented Sep 16, 2020 •

edited by ecraig12345

Loading

codesandbox-ci bot commented Sep 16, 2020 •

edited

Loading

msft-github-bot commented Sep 16, 2020 •

edited

Loading

size-auditor bot commented Sep 16, 2020 •

edited

Loading