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.

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

removes duplicate styles for expand-collapse-glyph on tree item causing specificity and ordering issues #18828

Conversation

chrisdholt
Copy link
Member

@chrisdholt chrisdholt commented Jul 3, 2021

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Duplicative styles were causing specificity and ordering issues likely creating differences in how styles were being added to the browser in Safari and Firefox. This resulted in the tree item glyph being incorrectly rotated. This was likely the issue causing #18370.

Closes #18370

image

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 3, 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 85da483:

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

@size-auditor
Copy link

size-auditor bot commented Jul 3, 2021

Asset size changes

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

Baseline commit: dcb00a9f5624534f88ff4999fd4462bb2f839673 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 824 813 5000
BaseButton mount 899 880 5000
Breadcrumb mount 2631 2667 1000
ButtonNext mount 509 522 5000
Checkbox mount 1497 1530 5000
CheckboxBase mount 1302 1271 5000
ChoiceGroup mount 4785 4719 5000
ComboBox mount 956 957 1000
CommandBar mount 10201 10291 1000
ContextualMenu mount 6316 6246 1000
DefaultButton mount 1136 1122 5000
DetailsRow mount 3730 3667 5000
DetailsRowFast mount 3636 3741 5000
DetailsRowNoStyles mount 3538 3471 5000
Dialog mount 2177 2127 1000
DocumentCardTitle mount 141 133 1000
Dropdown mount 3259 3257 5000
FluentProviderNext mount 7316 7343 5000
FocusTrapZone mount 1862 1868 5000
FocusZone mount 1855 1876 5000
IconButton mount 1740 1747 5000
Label mount 340 332 5000
Layer mount 1751 1749 5000
Link mount 478 445 5000
MakeStyles mount 1810 1842 50000
MenuButton mount 1456 1452 5000
MessageBar mount 2051 2035 5000
Nav mount 3258 3197 1000
OverflowSet mount 1035 1046 5000
Panel mount 2153 2061 1000
Persona mount 842 837 1000
Pivot mount 1453 1436 1000
PrimaryButton mount 1270 1309 5000
Rating mount 7671 7511 5000
SearchBox mount 1329 1307 5000
Shimmer mount 2527 2521 5000
Slider mount 1968 1990 5000
SpinButton mount 4924 5017 5000
Spinner mount 424 425 5000
SplitButton mount 3113 3103 5000
Stack mount 488 511 5000
StackWithIntrinsicChildren mount 1623 1577 5000
StackWithTextChildren mount 4511 4585 5000
SwatchColorPicker mount 11203 10261 5000
Tabs mount 1410 1380 1000
TagPicker mount 2411 2429 5000
TeachingBubble mount 12031 11754 5000
Text mount 399 414 5000
TextField mount 1364 1329 5000
ThemeProvider mount 1213 1164 5000
ThemeProvider virtual-rerender 609 607 5000
Toggle mount 778 807 5000
buttonNative mount 117 125 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TextMinimalPerf.default 374 331 1.13:1
TreeWith60ListItems.default 184 163 1.13:1
AccordionMinimalPerf.default 158 146 1.08:1
AttachmentMinimalPerf.default 161 149 1.08:1
RefMinimalPerf.default 251 233 1.08:1
RadioGroupMinimalPerf.default 461 432 1.07:1
TooltipMinimalPerf.default 1037 979 1.06:1
BoxMinimalPerf.default 361 343 1.05:1
ListNestedPerf.default 574 548 1.05:1
CardMinimalPerf.default 592 571 1.04:1
ChatDuplicateMessagesPerf.default 305 294 1.04:1
ChatMinimalPerf.default 677 653 1.04:1
ListCommonPerf.default 643 618 1.04:1
LoaderMinimalPerf.default 714 687 1.04:1
SegmentMinimalPerf.default 354 342 1.04:1
HeaderMinimalPerf.default 363 351 1.03:1
HeaderSlotsPerf.default 770 746 1.03:1
InputMinimalPerf.default 1332 1287 1.03:1
ListWith60ListItems.default 654 638 1.03:1
PortalMinimalPerf.default 184 178 1.03:1
CheckboxMinimalPerf.default 2766 2715 1.02:1
EmbedMinimalPerf.default 4150 4082 1.02:1
FlexMinimalPerf.default 287 280 1.02:1
LabelMinimalPerf.default 396 388 1.02:1
PopupMinimalPerf.default 581 571 1.02:1
IconMinimalPerf.default 621 608 1.02:1
TextAreaMinimalPerf.default 507 496 1.02:1
AttachmentSlotsPerf.default 1088 1074 1.01:1
CarouselMinimalPerf.default 487 484 1.01:1
DialogMinimalPerf.default 752 747 1.01:1
GridMinimalPerf.default 346 343 1.01:1
LayoutMinimalPerf.default 371 366 1.01:1
RosterPerf.default 1174 1167 1.01:1
SplitButtonMinimalPerf.default 3712 3691 1.01:1
TableMinimalPerf.default 411 408 1.01:1
ToolbarMinimalPerf.default 931 919 1.01:1
AnimationMinimalPerf.default 392 393 1:1
ButtonOverridesMissPerf.default 1726 1729 1:1
DropdownMinimalPerf.default 3080 3094 1:1
MenuButtonMinimalPerf.default 1556 1557 1:1
ProviderMinimalPerf.default 1026 1028 1:1
CustomToolbarPrototype.default 3890 3872 1:1
AlertMinimalPerf.default 268 272 0.99:1
ItemLayoutMinimalPerf.default 1233 1240 0.99:1
ListMinimalPerf.default 505 510 0.99:1
MenuMinimalPerf.default 827 839 0.99:1
ReactionMinimalPerf.default 380 383 0.99:1
SliderMinimalPerf.default 1571 1582 0.99:1
TreeMinimalPerf.default 783 792 0.99:1
ButtonSlotsPerf.default 563 576 0.98:1
ChatWithPopoverPerf.default 355 363 0.98:1
DropdownManyItemsPerf.default 684 696 0.98:1
StatusMinimalPerf.default 673 684 0.98:1
TableManyItemsPerf.default 1899 1939 0.98:1
ProviderMergeThemesPerf.default 1695 1739 0.97:1
SkeletonMinimalPerf.default 339 350 0.97:1
AvatarMinimalPerf.default 191 202 0.95:1
ButtonMinimalPerf.default 163 172 0.95:1
DatepickerMinimalPerf.default 5346 5615 0.95:1
DividerMinimalPerf.default 352 376 0.94:1
FormMinimalPerf.default 384 409 0.94:1
ImageMinimalPerf.default 363 387 0.94:1
VideoMinimalPerf.default 589 659 0.89:1

@chrisdholt chrisdholt merged commit a712d19 into microsoft:master Jul 6, 2021
@chrisdholt chrisdholt deleted the users/chhol/fix-expand-collapse-glyph-rotation-duplication branch July 6, 2021 17:57
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v1.0.1 has been released which incorporates this pull request.:tada:

Handy links:

PeterDraex pushed a commit to PeterDraex/fluentui that referenced this pull request Aug 6, 2021
…ng specificity and ordering issues (microsoft#18828)

* removes duplicate styles for expand-collapse-glyph on tree item causing specificity/ordering issues

* Change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Web components] Tree view item icon is rotated 45 degrees counter-clockwise more than it should be
5 participants