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

fix (web components): add padding for focus overlap of state in accordion item #16350

Merged
merged 3 commits into from
Jan 4, 2021
Merged

fix (web components): add padding for focus overlap of state in accordion item #16350

merged 3 commits into from
Jan 4, 2021

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Jan 4, 2021 •
edited

Pull request checklist

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

Description of changes

Add padding for focus overlap in Accordion Item

@size-auditor
Copy link

size-auditor bot commented Jan 4, 2021 •
edited

Asset size changes

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

Baseline commit: 6d4e38765cd0fd80feb2c8487ba7a60e37653ef6 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 4, 2021 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 847 873 5000
BaseButtonCompat mount 943 964 5000
Breadcrumb mount 41265 41484 5000
Checkbox mount 1516 1605 5000
CheckboxBase mount 1291 1264 5000
ChoiceGroup mount 4823 4811 5000
ComboBox mount 952 1009 1000
CommandBar mount 9914 9972 1000
ContextualMenu mount 5948 5947 1000
DefaultButtonCompat mount 1151 1142 5000
DetailsRow mount 3692 3718 5000
DetailsRowFast mount 3746 3717 5000
DetailsRowNoStyles mount 3466 3480 5000
Dialog mount 1501 1517 1000
DocumentCardTitle mount 1751 1758 1000
Dropdown mount 3335 3398 5000
FocusTrapZone mount 1853 1812 5000
FocusZone mount 1838 1808 5000
IconButtonCompat mount 1820 1824 5000
Label mount 349 322 5000
Layer mount 1787 1812 5000
Link mount 476 462 5000
MakeStyles mount 1938 1976 50000
MenuButtonCompat mount 1503 1501 5000
MessageBar mount 1970 1988 5000
Nav mount 3337 3288 1000
OverflowSet mount 1015 1067 5000
Panel mount 1435 1418 1000
Persona mount 860 845 1000
Pivot mount 1401 1409 1000
PrimaryButtonCompat mount 1277 1301 5000
Rating mount 7815 7823 5000
SearchBox mount 1352 1390 5000
Shimmer mount 2653 2616 5000
Slider mount 1897 1938 5000
SpinButton mount 4988 5128 5000
Spinner mount 420 405 5000
SplitButtonCompat mount 3162 3226 5000
Stack mount 523 507 5000
StackWithIntrinsicChildren mount 1612 1621 5000
StackWithTextChildren mount 4758 4759 5000
SwatchColorPicker mount 10370 10395 5000
Tabs mount 1414 1416 1000
TagPicker mount 2891 2770 5000
TeachingBubble mount 11583 11548 5000
Text mount 441 428 5000
TextField mount 1411 1395 5000
ThemeProvider mount 2099 2062 5000
ThemeProvider virtual-rerender 633 678 5000
Toggle mount 805 787 5000
button mount 733 704 5000
buttonNative mount 107 120 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.46 0.51 0.9:1 2000 917
🦄 Button.Fluent 0.13 0.2 0.65:1 5000 636
🔧 Checkbox.Fluent 0.65 0.37 1.76:1 1000 646
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 840
🔧 Dropdown.Fluent 3 0.41 7.32:1 1000 2999
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 793
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 458
🔧 Slider.Fluent 1.63 0.43 3.79:1 1000 1633
🔧 Text.Fluent 0.08 0.04 2:1 5000 393
🦄 Tooltip.Fluent 0.12 0.88 0.14:1 5000 616

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FormMinimalPerf.default 507 461 1.1:1
DividerMinimalPerf.default 438 405 1.08:1
DropdownManyItemsPerf.default 847 787 1.08:1
TreeWith60ListItems.default 231 214 1.08:1
ButtonMinimalPerf.default 198 185 1.07:1
RefMinimalPerf.default 242 227 1.07:1
ButtonUseCssNestingPerf.default 1181 1112 1.06:1
ListCommonPerf.default 732 689 1.06:1
ListNestedPerf.default 646 609 1.06:1
RadioGroupMinimalPerf.default 493 464 1.06:1
AttachmentMinimalPerf.default 179 171 1.05:1
BoxMinimalPerf.default 417 398 1.05:1
HeaderSlotsPerf.default 888 848 1.05:1
ListWith60ListItems.default 990 943 1.05:1
TableMinimalPerf.default 465 442 1.05:1
Icon.Fluent 793 752 1.05:1
Image.Fluent 458 437 1.05:1
HeaderMinimalPerf.default 413 397 1.04:1
MenuMinimalPerf.default 947 908 1.04:1
ReactionMinimalPerf.default 448 430 1.04:1
StatusMinimalPerf.default 805 776 1.04:1
Button.Fluent 636 612 1.04:1
Dialog.Fluent 840 811 1.04:1
Text.Fluent 393 377 1.04:1
Tooltip.Fluent 616 594 1.04:1
CardMinimalPerf.default 631 613 1.03:1
ChatDuplicateMessagesPerf.default 433 421 1.03:1
FlexMinimalPerf.default 340 329 1.03:1
GridMinimalPerf.default 406 393 1.03:1
TooltipMinimalPerf.default 859 831 1.03:1
AlertMinimalPerf.default 330 325 1.02:1
AvatarMinimalPerf.default 504 495 1.02:1
DropdownMinimalPerf.default 3080 3029 1.02:1
InputMinimalPerf.default 1372 1341 1.02:1
ItemLayoutMinimalPerf.default 1389 1361 1.02:1
PortalMinimalPerf.default 172 169 1.02:1
ProviderMergeThemesPerf.default 2083 2042 1.02:1
ProviderMinimalPerf.default 1069 1051 1.02:1
ToolbarMinimalPerf.default 999 980 1.02:1
TreeMinimalPerf.default 861 842 1.02:1
Slider.Fluent 1633 1600 1.02:1
ButtonSlotsPerf.default 645 638 1.01:1
EmbedMinimalPerf.default 4268 4208 1.01:1
LabelMinimalPerf.default 456 452 1.01:1
LayoutMinimalPerf.default 438 432 1.01:1
ListMinimalPerf.default 540 533 1.01:1
PopupMinimalPerf.default 720 713 1.01:1
IconMinimalPerf.default 736 728 1.01:1
AccordionMinimalPerf.default 170 170 1:1
AnimationMinimalPerf.default 435 434 1:1
AttachmentSlotsPerf.default 1185 1190 1:1
ButtonUseCssPerf.default 880 880 1:1
CarouselMinimalPerf.default 474 475 1:1
ChatWithPopoverPerf.default 484 485 1:1
DatepickerMinimalPerf.default 48626 48858 1:1
MenuButtonMinimalPerf.default 1647 1640 1:1
SegmentMinimalPerf.default 399 399 1:1
SplitButtonMinimalPerf.default 3924 3931 1:1
TableManyItemsPerf.default 2307 2311 1:1
TextMinimalPerf.default 402 401 1:1
CustomToolbarPrototype.default 3929 3926 1:1
Dropdown.Fluent 2999 2993 1:1
ButtonOverridesMissPerf.default 1732 1750 0.99:1
CheckboxMinimalPerf.default 2891 2924 0.99:1
SliderMinimalPerf.default 1583 1602 0.99:1
TextAreaMinimalPerf.default 540 548 0.99:1
VideoMinimalPerf.default 702 708 0.99:1
DialogMinimalPerf.default 869 886 0.98:1
LoaderMinimalPerf.default 758 772 0.98:1
SkeletonMinimalPerf.default 392 400 0.98:1
Avatar.Fluent 917 939 0.98:1
ChatMinimalPerf.default 662 691 0.96:1
ImageMinimalPerf.default 433 450 0.96:1
Checkbox.Fluent 646 682 0.95:1

@SethDonohue SethDonohue changed the title fix (web components): add margin for focus overlap of state in accordion item fix (web components): add padding for focus overlap of state in accordion item Jan 4, 2021
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 4, 2021 •
edited

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

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

@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-margin-focus-overlap-accordion-item branch from 09c45be to ea0ddde Compare January 4, 2021 20:01
@chrisdholt chrisdholt assigned chrisdholt and unassigned layershifter Jan 4, 2021
@SethDonohue
Update change/@fluentui-web-components-2021-01-04-10-54-05-users-v-se…
f573a94 
…dono-fix-margin-focus-overlap-accordion-item.json
@chrisdholt chrisdholt merged commit 6b777ec into microsoft:master Jan 4, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

@SethDonohue SethDonohue deleted the users/v-sedono/fix-margin-focus-overlap-accordion-item branch January 5, 2021 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdholt chrisdholt chrisdholt approved these changes

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@SethDonohue @fabricteam @msft-fluent-ui-bot @chrisdholt @layershifter