Skip to content

react-accordion - disabled state styling#17745

Merged
layershifter merged 5 commits intomicrosoft:masterfrom
bsunderhus:feature/accordion-disabled-state-styling
Apr 9, 2021
Merged

react-accordion - disabled state styling#17745
layershifter merged 5 commits intomicrosoft:masterfrom
bsunderhus:feature/accordion-disabled-state-styling

Conversation

@bsunderhus
Copy link
Copy Markdown
Contributor

@bsunderhus bsunderhus commented Apr 8, 2021 •
edited
Loading

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

  • Adds styling provided by designs to disabled state
  • Removes Errouneous implementation of the keyboard navigation

Updates #16926

@bsunderhus bsunderhus requested a review from layershifter April 8, 2021 16:14
@bsunderhus bsunderhus self-assigned this Apr 8, 2021
@size-auditor
Copy link
Copy Markdown

size-auditor bot commented Apr 8, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 70b8ea52bb4d994145b820e04907f80624baf92e (build)

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Apr 8, 2021 •
edited
Loading

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

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

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Apr 8, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 909 904 5000
BaseButton mount 897 884 5000
Breadcrumb mount 43343 43495 5000
ButtonNext mount 565 582 5000
Checkbox mount 1527 1499 5000
CheckboxBase mount 1286 1262 5000
ChoiceGroup mount 4707 4676 5000
ComboBox mount 987 977 1000
CommandBar mount 10028 10072 1000
ContextualMenu mount 6237 6167 1000
DefaultButton mount 1123 1100 5000
DetailsRow mount 3606 3626 5000
DetailsRowFast mount 3697 3603 5000
DetailsRowNoStyles mount 3478 3470 5000
Dialog mount 1456 1428 1000
DocumentCardTitle mount 1826 1827 1000
Dropdown mount 3182 3185 5000
FocusTrapZone mount 1765 1796 5000
FocusZone mount 1812 1792 5000
IconButton mount 1708 1721 5000
Label mount 340 344 5000
Layer mount 1786 1762 5000
Link mount 467 451 5000
MakeStyles mount 1846 1809 50000
MenuButton mount 1484 1466 5000
MessageBar mount 2008 2051 5000
Nav mount 3204 3220 1000
OverflowSet mount 1014 1029 5000
Panel mount 1412 1408 1000
Persona mount 820 797 1000
Pivot mount 1399 1401 1000
PrimaryButton mount 1258 1296 5000
Rating mount 7485 7458 5000
SearchBox mount 1293 1299 5000
Shimmer mount 2557 2540 5000
Slider mount 1965 1970 5000
SpinButton mount 4953 4945 5000
Spinner mount 420 426 5000
SplitButton mount 3130 3170 5000
Stack mount 499 498 5000
StackWithIntrinsicChildren mount 1546 1548 5000
StackWithTextChildren mount 4460 4442 5000
SwatchColorPicker mount 10158 10097 5000
Tabs mount 1399 1396 1000
TagPicker mount 2806 2834 5000
TeachingBubble mount 11769 11759 5000
Text mount 421 418 5000
TextField mount 1360 1354 5000
ThemeProvider mount 1196 1174 5000
ThemeProvider virtual-rerender 596 600 5000
ThemeProviderNext mount 15849 15963 5000
Toggle mount 785 787 5000
buttonNative mount 118 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.48 0.35:1 2000 340
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 547
🔧 Checkbox.Fluent 0.63 0.35 1.8:1 1000 627
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 747
🔧 Dropdown.Fluent 3.11 0.4 7.78:1 1000 3110
🔧 Icon.Fluent 0.13 0.06 2.17:1 5000 626
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 381
🔧 Slider.Fluent 1.59 0.46 3.46:1 1000 1586
🔧 Text.Fluent 0.07 0.04 1.75:1 5000 357
🦄 Tooltip.Fluent 0.14 0.88 0.16:1 5000 707

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatDuplicateMessagesPerf.default 309 281 1.1:1
ListWith60ListItems.default 697 632 1.1:1
TreeWith60ListItems.default 198 182 1.09:1
AvatarMinimalPerf.default 212 200 1.06:1
FormMinimalPerf.default 423 398 1.06:1
RadioGroupMinimalPerf.default 468 443 1.06:1
AttachmentMinimalPerf.default 171 163 1.05:1
TextAreaMinimalPerf.default 496 473 1.05:1
CarouselMinimalPerf.default 476 457 1.04:1
LayoutMinimalPerf.default 380 366 1.04:1
SkeletonMinimalPerf.default 381 368 1.04:1
AttachmentSlotsPerf.default 1160 1130 1.03:1
DropdownManyItemsPerf.default 695 673 1.03:1
FlexMinimalPerf.default 303 295 1.03:1
LabelMinimalPerf.default 397 385 1.03:1
ListNestedPerf.default 576 559 1.03:1
ReactionMinimalPerf.default 388 378 1.03:1
BoxMinimalPerf.default 358 351 1.02:1
ButtonSlotsPerf.default 570 559 1.02:1
ButtonUseCssPerf.default 813 796 1.02:1
ChatWithPopoverPerf.default 386 379 1.02:1
DividerMinimalPerf.default 369 360 1.02:1
HeaderMinimalPerf.default 370 363 1.02:1
ImageMinimalPerf.default 379 373 1.02:1
ListMinimalPerf.default 520 511 1.02:1
MenuMinimalPerf.default 897 879 1.02:1
IconMinimalPerf.default 630 615 1.02:1
Button.Fluent 547 536 1.02:1
Icon.Fluent 626 615 1.02:1
Text.Fluent 357 351 1.02:1
ButtonMinimalPerf.default 185 183 1.01:1
ChatMinimalPerf.default 621 614 1.01:1
DialogMinimalPerf.default 747 737 1.01:1
DropdownMinimalPerf.default 3118 3102 1.01:1
MenuButtonMinimalPerf.default 1572 1561 1.01:1
PopupMinimalPerf.default 730 722 1.01:1
PortalMinimalPerf.default 174 173 1.01:1
ProviderMinimalPerf.default 1017 1003 1.01:1
SegmentMinimalPerf.default 363 358 1.01:1
TableMinimalPerf.default 422 416 1.01:1
CustomToolbarPrototype.default 3815 3760 1.01:1
TooltipMinimalPerf.default 979 968 1.01:1
Avatar.Fluent 340 335 1.01:1
Checkbox.Fluent 627 621 1.01:1
Dropdown.Fluent 3110 3080 1.01:1
Image.Fluent 381 377 1.01:1
Tooltip.Fluent 707 697 1.01:1
AnimationMinimalPerf.default 419 418 1:1
ButtonOverridesMissPerf.default 1700 1702 1:1
CardMinimalPerf.default 558 559 1:1
EmbedMinimalPerf.default 4148 4166 1:1
HeaderSlotsPerf.default 773 776 1:1
ListCommonPerf.default 634 632 1:1
RefMinimalPerf.default 255 255 1:1
SplitButtonMinimalPerf.default 3704 3691 1:1
StatusMinimalPerf.default 687 690 1:1
TableManyItemsPerf.default 1893 1895 1:1
TextMinimalPerf.default 361 361 1:1
Dialog.Fluent 747 745 1:1
Slider.Fluent 1586 1584 1:1
ButtonUseCssNestingPerf.default 1055 1069 0.99:1
DatepickerMinimalPerf.default 44916 45527 0.99:1
InputMinimalPerf.default 1275 1282 0.99:1
ItemLayoutMinimalPerf.default 1258 1269 0.99:1
CheckboxMinimalPerf.default 2723 2778 0.98:1
GridMinimalPerf.default 343 349 0.98:1
ProviderMergeThemesPerf.default 1657 1684 0.98:1
TreeMinimalPerf.default 774 792 0.98:1
VideoMinimalPerf.default 618 631 0.98:1
SliderMinimalPerf.default 1553 1604 0.97:1
LoaderMinimalPerf.default 701 732 0.96:1
ToolbarMinimalPerf.default 937 975 0.96:1
RosterPerf.default 1124 1179 0.95:1
AlertMinimalPerf.default 273 290 0.94:1
AccordionMinimalPerf.default 151 162 0.93:1

@bsunderhus bsunderhus closed this Apr 8, 2021
@bsunderhus bsunderhus reopened this Apr 8, 2021
layershifter
layershifter reviewed Apr 9, 2021
View reviewed changes
Comment thread packages/react-accordion/src/components/Accordion/useAccordion.ts
@layershifter layershifter merged commit 39a6f1c into microsoft:master Apr 9, 2021
@bsunderhus bsunderhus deleted the feature/accordion-disabled-state-styling branch April 9, 2021 09:27
@msft-fluent-ui-bot
Copy link
Copy Markdown
Collaborator

msft-fluent-ui-bot commented Apr 10, 2021

🎉@fluentui/react-accordion@v9.0.0-alpha.13 has been released which incorporates this pull request.:tada:

Handy links:

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@bsunderhus @miroslavstastny
react-accordion - disabled state styling (microsoft#17745)
6e82698 
* Adds styling to disabled state in react-accordion

* Change files

* Updates API

* Updates snapshot on removal of tabster
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@layershifter layershifter layershifter approved these changes

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

@Hotell Hotell Awaiting requested review from Hotell

Assignees

@bsunderhus bsunderhus

Labels

Component: Accordion

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@bsunderhus @fabricteam @msft-fluent-ui-bot @layershifter