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

[web-components] fix missing focus styles for button and anchor due to whitespace issue #17515

Merged
merged 2 commits into from
Mar 22, 2021
Merged

[web-components] fix missing focus styles for button and anchor due to whitespace issue #17515

merged 2 commits into from
Mar 22, 2021

Conversation

chrisdholt
Copy link
Member

Pull request checklist

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

Description of changes

(give an overview)

Focus areas to test

(optional)

@chrisdholt chrisdholt self-assigned this Mar 22, 2021
@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 3dee604:

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

@size-auditor
Copy link

size-auditor bot commented Mar 22, 2021

Asset size changes

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

Baseline commit: 72f18e0c54d4a6de5251ff153518efa540d74dbf (build)

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1180 1246 5000
BaseButton mount 975 1106 5000
Breadcrumb mount 47336 47653 5000
ButtonNext mount 1376 1371 5000
Checkbox mount 1707 1709 5000
CheckboxBase mount 1454 1552 5000
ChoiceGroup mount 5433 5321 5000
ComboBox mount 1063 1257 1000
CommandBar mount 12663 11614 1000
ContextualMenu mount 6939 6803 1000
DefaultButton mount 1251 1287 5000
DetailsRow mount 3885 3943 5000
DetailsRowFast mount 4230 4191 5000
DetailsRowNoStyles mount 3983 3961 5000
Dialog mount 1869 1553 1000
DocumentCardTitle mount 2555 2533 1000
Dropdown mount 3954 3989 5000
FocusTrapZone mount 2052 2013 5000
FocusZone mount 1844 1878 5000
IconButton mount 1909 1989 5000
Label mount 361 356 5000
Layer mount 1980 1969 5000
Link mount 518 507 5000
MakeStyles mount 2047 1995 50000
MenuButton mount 1622 1599 5000
MessageBar mount 2176 2257 5000
Nav mount 3560 3492 1000
OverflowSet mount 1140 1156 5000
Panel mount 1647 1532 1000
Persona mount 884 869 1000
Pivot mount 1785 1512 1000
PrimaryButton mount 1483 1427 5000
Rating mount 8765 8875 5000
SearchBox mount 1459 1493 5000
Shimmer mount 3051 2874 5000
Slider mount 2234 2270 5000
SpinButton mount 5399 5942 5000
Spinner mount 427 436 5000
SplitButton mount 3445 3419 5000
Stack mount 534 547 5000
StackWithIntrinsicChildren mount 1639 1682 5000
StackWithTextChildren mount 5002 5073 5000
SwatchColorPicker mount 11330 11390 5000
Tabs mount 1632 1646 1000
TagPicker mount 3214 3158 5000
TeachingBubble mount 14598 13379 5000
Text mount 441 453 5000
TextField mount 1551 1480 5000
ThemeProvider mount 1248 1206 5000
ThemeProvider virtual-rerender 615 613 5000
ThemeProviderNext mount 17395 16816 5000
Toggle mount 899 904 5000
buttonNative mount 148 126 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.52 0.38:1 2000 390
🦄 Button.Fluent 0.15 0.23 0.65:1 5000 738
🔧 Checkbox.Fluent 0.7 0.39 1.79:1 1000 702
🎯 Dialog.Fluent 0.19 0.23 0.83:1 5000 960
🔧 Dropdown.Fluent 3.78 0.43 8.79:1 1000 3780
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 803
🦄 Image.Fluent 0.1 0.15 0.67:1 5000 479
🔧 Slider.Fluent 1.94 0.55 3.53:1 1000 1936
🔧 Text.Fluent 0.09 0.04 2.25:1 5000 435
🦄 Tooltip.Fluent 0.15 0.95 0.16:1 5000 754

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonOverridesMissPerf.default 2173 1830 1.19:1
LayoutMinimalPerf.default 568 491 1.16:1
Button.Fluent 738 648 1.14:1
AccordionMinimalPerf.default 208 186 1.12:1
AvatarMinimalPerf.default 284 257 1.11:1
AnimationMinimalPerf.default 514 469 1.1:1
ChatDuplicateMessagesPerf.default 407 371 1.1:1
PortalMinimalPerf.default 191 173 1.1:1
CustomToolbarPrototype.default 4403 4015 1.1:1
SegmentMinimalPerf.default 496 457 1.09:1
HeaderSlotsPerf.default 1004 934 1.07:1
LabelMinimalPerf.default 522 488 1.07:1
ChatMinimalPerf.default 726 685 1.06:1
GridMinimalPerf.default 445 420 1.06:1
ReactionMinimalPerf.default 551 520 1.06:1
AttachmentMinimalPerf.default 232 221 1.05:1
FlexMinimalPerf.default 361 344 1.05:1
TextMinimalPerf.default 434 414 1.05:1
TooltipMinimalPerf.default 1129 1073 1.05:1
TreeWith60ListItems.default 215 205 1.05:1
Dropdown.Fluent 3780 3615 1.05:1
IconMinimalPerf.default 809 778 1.04:1
ButtonUseCssNestingPerf.default 1192 1162 1.03:1
CardMinimalPerf.default 658 638 1.03:1
CheckboxMinimalPerf.default 3166 3062 1.03:1
HeaderMinimalPerf.default 467 455 1.03:1
ListMinimalPerf.default 640 623 1.03:1
MenuMinimalPerf.default 1066 1038 1.03:1
PopupMinimalPerf.default 781 758 1.03:1
RadioGroupMinimalPerf.default 567 551 1.03:1
Checkbox.Fluent 702 682 1.03:1
AlertMinimalPerf.default 409 401 1.02:1
MenuButtonMinimalPerf.default 1918 1877 1.02:1
ProviderMergeThemesPerf.default 1877 1844 1.02:1
BoxMinimalPerf.default 493 486 1.01:1
TableMinimalPerf.default 496 492 1.01:1
Image.Fluent 479 475 1.01:1
ChatWithPopoverPerf.default 430 430 1:1
DropdownManyItemsPerf.default 848 845 1:1
ImageMinimalPerf.default 502 501 1:1
StatusMinimalPerf.default 886 885 1:1
TextAreaMinimalPerf.default 611 609 1:1
ToolbarMinimalPerf.default 1157 1154 1:1
VideoMinimalPerf.default 780 778 1:1
Dialog.Fluent 960 958 1:1
Icon.Fluent 803 805 1:1
Slider.Fluent 1936 1931 1:1
Tooltip.Fluent 754 751 1:1
DividerMinimalPerf.default 448 452 0.99:1
DropdownMinimalPerf.default 3519 3560 0.99:1
ListNestedPerf.default 697 706 0.99:1
Avatar.Fluent 390 393 0.99:1
DatepickerMinimalPerf.default 58609 59585 0.98:1
DialogMinimalPerf.default 919 936 0.98:1
EmbedMinimalPerf.default 4618 4709 0.98:1
ItemLayoutMinimalPerf.default 1487 1516 0.98:1
RefMinimalPerf.default 277 284 0.98:1
SplitButtonMinimalPerf.default 4815 4921 0.98:1
TreeMinimalPerf.default 896 918 0.98:1
AttachmentSlotsPerf.default 1673 1724 0.97:1
ListCommonPerf.default 813 842 0.97:1
RosterPerf.default 1279 1313 0.97:1
ProviderMinimalPerf.default 1235 1270 0.97:1
SliderMinimalPerf.default 2011 2070 0.97:1
ButtonMinimalPerf.default 213 223 0.96:1
ButtonSlotsPerf.default 636 665 0.96:1
TableManyItemsPerf.default 2375 2492 0.95:1
ButtonUseCssPerf.default 929 985 0.94:1
Text.Fluent 435 466 0.93:1
LoaderMinimalPerf.default 831 902 0.92:1
SkeletonMinimalPerf.default 461 500 0.92:1
ListWith60ListItems.default 745 830 0.9:1
InputMinimalPerf.default 1433 1623 0.88:1
CarouselMinimalPerf.default 538 615 0.87:1
FormMinimalPerf.default 509 594 0.86:1

@chrisdholt chrisdholt merged commit 869c2e5 into microsoft:master Mar 22, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
@chrisdholt @joshualamusga1
[web-components] fix missing focus styles for button and anchor due t…
cbaa301 
…o whitespace issue (microsoft#17515)

* remove whitespace causing focus issue on button and anchor controls

* Change files
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@chrisdholt @miroslavstastny
[web-components] fix missing focus styles for button and anchor due t…
02abe25 
…o whitespace issue (microsoft#17515)

* remove whitespace causing focus issue on button and anchor controls

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

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@chrisdholt @fabricteam @msft-fluent-ui-bot @EisenbergEffect