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

Condense SpinButton examples and improve names and styling #16040

Merged
merged 1 commit into from
Nov 25, 2020
Merged

Condense SpinButton examples and improve names and styling #16040

merged 1 commit into from
Nov 25, 2020

Conversation

ecraig12345
Copy link
Member

@ecraig12345 ecraig12345 commented Nov 22, 2020 •
edited
Loading

Improve on some issues with SpinButton examples which I noticed when reviewing another SpinButton PR:

  • Combine some of the closely related examples, and simplify the names used in the files and the doc page (and fix the casing).
  • Make the input fields narrower, to more closely match the designs people are likely to use in practice.
  • Improve the logic of the "stateful" example and rename the example to "suffix" to better reflect what it's actually demonstrating.

@codesandbox-ci
Copy link

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

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

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 827 813 5000
BaseButtonCompat mount 937 931 5000
Breadcrumb mount 40825 40634 5000
Checkbox mount 1569 1582 5000
CheckboxBase mount 1350 1304 5000
ChoiceGroup mount 4870 4905 5000
ComboBox mount 983 963 1000
CommandBar mount 9856 9835 1000
ContextualMenu mount 5938 5907 1000
DefaultButtonCompat mount 1158 1170 5000
DetailsRow mount 3715 3696 5000
DetailsRowFast mount 3673 3662 5000
DetailsRowNoStyles mount 3527 3562 5000
Dialog mount 1468 1494 1000
DocumentCardTitle mount 1720 1772 1000
Dropdown mount 3401 3378 5000
FocusTrapZone mount 1743 1750 5000
FocusZone mount 1830 1807 5000
IconButtonCompat mount 1842 1829 5000
Label mount 342 335 5000
Layer mount 1807 1775 5000
Link mount 472 476 5000
MenuButtonCompat mount 1496 1541 5000
MessageBar mount 1919 1950 5000
Nav mount 3317 3325 1000
OverflowSet mount 1035 1073 5000
Panel mount 1423 1437 1000
Persona mount 851 853 1000
Pivot mount 1417 1427 1000
PrimaryButtonCompat mount 1326 1309 5000
Rating mount 7692 7807 5000
SearchBox mount 1372 1405 5000
Shimmer mount 2708 2810 5000
Slider mount 1965 2016 5000
SpinButton mount 5025 5170 5000
Spinner mount 416 398 5000
SplitButtonCompat mount 3196 3262 5000
Stack mount 530 513 5000
StackWithIntrinsicChildren mount 1570 1549 5000
StackWithTextChildren mount 4613 4664 5000
SwatchColorPicker mount 10148 10347 5000
Tabs mount 1403 1450 1000
TagPicker mount 2823 2861 5000
TeachingBubble mount 11312 11372 5000
Text mount 442 421 5000
TextField mount 1409 1415 5000
ThemeProvider mount 2092 2082 5000
ThemeProvider virtual-rerender 653 632 5000
Toggle mount 793 837 5000
button mount 677 671 5000
buttonNative mount 108 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.52 0.9:1 2000 936
🦄 Button.Fluent 0.12 0.24 0.5:1 5000 620
🔧 Checkbox.Fluent 0.68 0.34 2:1 1000 679
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 826
🔧 Dropdown.Fluent 2.87 0.42 6.83:1 1000 2865
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 791
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 447
🔧 Slider.Fluent 1.56 0.44 3.55:1 1000 1564
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 398
🦄 Tooltip.Fluent 0.12 0.89 0.13:1 5000 580

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 180 161 1.12:1
FlexMinimalPerf.default 351 325 1.08:1
SkeletonMinimalPerf.default 483 448 1.08:1
AnimationMinimalPerf.default 435 406 1.07:1
DropdownManyItemsPerf.default 818 775 1.06:1
ListCommonPerf.default 711 668 1.06:1
PortalMinimalPerf.default 167 157 1.06:1
RefMinimalPerf.default 242 229 1.06:1
TreeWith60ListItems.default 215 203 1.06:1
AttachmentMinimalPerf.default 182 173 1.05:1
CarouselMinimalPerf.default 490 467 1.05:1
ReactionMinimalPerf.default 451 431 1.05:1
SegmentMinimalPerf.default 408 388 1.05:1
VideoMinimalPerf.default 696 665 1.05:1
Checkbox.Fluent 679 644 1.05:1
ButtonOverridesMissPerf.default 1739 1675 1.04:1
FormMinimalPerf.default 474 457 1.04:1
HeaderMinimalPerf.default 433 417 1.04:1
StatusMinimalPerf.default 813 778 1.04:1
BoxMinimalPerf.default 406 396 1.03:1
GridMinimalPerf.default 403 390 1.03:1
LayoutMinimalPerf.default 451 439 1.03:1
RadioGroupMinimalPerf.default 484 469 1.03:1
SliderMinimalPerf.default 1557 1518 1.03:1
TextMinimalPerf.default 396 386 1.03:1
Tooltip.Fluent 580 565 1.03:1
AvatarMinimalPerf.default 518 507 1.02:1
ButtonSlotsPerf.default 634 620 1.02:1
DividerMinimalPerf.default 414 407 1.02:1
HeaderSlotsPerf.default 878 860 1.02:1
LabelMinimalPerf.default 466 456 1.02:1
ListNestedPerf.default 629 615 1.02:1
LoaderMinimalPerf.default 763 745 1.02:1
MenuMinimalPerf.default 935 919 1.02:1
PopupMinimalPerf.default 710 699 1.02:1
TableManyItemsPerf.default 2399 2351 1.02:1
Button.Fluent 620 608 1.02:1
Dialog.Fluent 826 813 1.02:1
Slider.Fluent 1564 1531 1.02:1
AttachmentSlotsPerf.default 1200 1187 1.01:1
ButtonMinimalPerf.default 194 192 1.01:1
ButtonUseCssPerf.default 845 834 1.01:1
CheckboxMinimalPerf.default 2915 2898 1.01:1
DatepickerMinimalPerf.default 47959 47545 1.01:1
DialogMinimalPerf.default 831 821 1.01:1
DropdownMinimalPerf.default 2860 2842 1.01:1
ItemLayoutMinimalPerf.default 1382 1364 1.01:1
ListMinimalPerf.default 530 527 1.01:1
MenuButtonMinimalPerf.default 1655 1639 1.01:1
ProviderMergeThemesPerf.default 1991 1975 1.01:1
SplitButtonMinimalPerf.default 3891 3866 1.01:1
ToolbarMinimalPerf.default 1027 1021 1.01:1
Image.Fluent 447 442 1.01:1
Text.Fluent 398 393 1.01:1
ButtonUseCssNestingPerf.default 1113 1108 1:1
ChatMinimalPerf.default 657 659 1:1
InputMinimalPerf.default 1302 1305 1:1
ProviderMinimalPerf.default 980 984 1:1
CustomToolbarPrototype.default 3802 3796 1:1
Avatar.Fluent 936 933 1:1
Dropdown.Fluent 2865 2878 1:1
Icon.Fluent 791 794 1:1
CardMinimalPerf.default 597 604 0.99:1
ChatDuplicateMessagesPerf.default 418 424 0.99:1
ChatWithPopoverPerf.default 467 473 0.99:1
EmbedMinimalPerf.default 4138 4160 0.99:1
ImageMinimalPerf.default 422 426 0.99:1
ListWith60ListItems.default 945 955 0.99:1
IconMinimalPerf.default 720 728 0.99:1
TableMinimalPerf.default 462 465 0.99:1
TooltipMinimalPerf.default 833 851 0.98:1
TextAreaMinimalPerf.default 549 568 0.97:1
TreeMinimalPerf.default 928 970 0.96:1
AlertMinimalPerf.default 314 330 0.95:1

@size-auditor
Copy link

size-auditor bot commented Nov 22, 2020

Asset size changes

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

Baseline commit: 8f026356eb3228e0a156aa7a54aa35f06f55b7f2 (build)

@ecraig12345 ecraig12345 mentioned this pull request Nov 22, 2020
Merged
2 tasks
@ecraig12345 ecraig12345 merged commit 21a1f0c into microsoft:master Nov 25, 2020
@ecraig12345 ecraig12345 deleted the spinbutton-examples branch November 25, 2020 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dzearing dzearing dzearing approved these changes

Assignees

@behowell behowell

Labels
Area: Website Component: SpinButton
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@ecraig12345 @msft-github-bot @dzearing @behowell