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: apply badge styles to control rather than host element #14539

Merged
merged 2 commits into from
Aug 14, 2020
Merged

fix: apply badge styles to control rather than host element #14539

merged 2 commits into from
Aug 14, 2020

Conversation

chrisdholt
Copy link
Member

Pull request checklist

Description of changes

The styling of badges with an appearance attribute was being applied to the host element rather than the control. This was leading to incorrect/broken appearances (no corner radius, padding).

Focus areas to test

(optional)

@chrisdholt chrisdholt self-assigned this Aug 14, 2020
@chrisdholt chrisdholt changed the title Users/chhol/fix badge styling fix: apply badge styles to control rather than host element Aug 14, 2020
@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 e9778e2:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration
fluent-examples Issue #14397

@size-auditor
Copy link

size-auditor bot commented Aug 14, 2020

Asset size changes

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

Baseline commit: 5c64f924a4d4a87089b127ff065db3818f31c3fb (build)

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 889 912 5000
ButtonNext mount 610 591 5000
Checkbox mount 1600 1632 5000
CheckboxBase mount 1291 1318 5000
CheckboxNext mount 1714 1691 5000
ChoiceGroup mount 5045 5081 5000
ComboBox mount 951 964 1000
CommandBar mount 7792 7882 1000
ContextualMenu mount 14427 14411 1000
DefaultButton mount 1160 1133 5000
DetailsRow mount 3578 3644 5000
DetailsRowFast mount 3662 3667 5000
DetailsRowNoStyles mount 3505 3530 5000
Dialog mount 1535 1597 1000
DocumentCardTitle mount 1883 1876 1000
Dropdown mount 2655 2707 5000
FocusZone mount 1895 1901 5000
IconButton mount 1818 1831 5000
Label mount 379 347 5000
Link mount 469 454 5000
LinkNext mount 492 509 5000
MenuButton mount 1524 1493 5000
Nav mount 3348 3367 1000
Panel mount 1508 1498 1000
Persona mount 874 848 1000
Pivot mount 1472 1478 1000
PivotNext mount 1438 1446 1000
PrimaryButton mount 1311 1292 5000
SearchBox mount 1313 1350 5000
SearchBoxNext mount 1343 1380 5000
Slider mount 1531 1530 5000
SliderNext mount 1996 2015 5000
SpinButton mount 5205 5257 5000
SpinButtonNext mount 5196 5283 5000
Spinner mount 413 446 5000
SplitButton mount 3225 3253 5000
Stack mount 535 534 5000
StackWithIntrinsicChildren mount 1998 2030 5000
StackWithTextChildren mount 5066 5102 5000
TagPicker mount 2806 2743 5000
Text mount 439 424 5000
TextField mount 1399 1444 5000
ThemeProvider mount 2961 3044 5000
ThemeProvider virtual-rerender 475 475 5000
Toggle mount 861 867 5000
ToggleNext mount 860 866 5000
button mount 112 118 5000

Perf Analysis (Fluent)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 119 47 2.53:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.49 0.92:1 2000 905
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 546
🔧 Checkbox.Fluent 0.68 0.34 2:1 1000 677
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 784
🔧 Dropdown.Fluent 3.06 0.49 6.24:1 1000 3059
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 696
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 366
🔧 Slider.Fluent 1.65 0.37 4.46:1 1000 1649
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 351
🦄 Tooltip.Fluent 0.11 18.73 0.01:1 5000 539

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonUseCssNestingPerf.default 62 44 1.41:1
ButtonUseCssPerf.default 60 46 1.3:1
PortalMinimalPerf.default 144 125 1.15:1
TreeWith60ListItems.default 242 212 1.14:1
ButtonMinimalPerf.default 196 173 1.13:1
AttachmentMinimalPerf.default 173 154 1.12:1
BoxMinimalPerf.default 370 337 1.1:1
Text.Fluent 351 320 1.1:1
LayoutMinimalPerf.default 398 373 1.07:1
RadioGroupMinimalPerf.default 422 396 1.07:1
FormMinimalPerf.default 412 390 1.06:1
TextMinimalPerf.default 349 328 1.06:1
Image.Fluent 366 345 1.06:1
AvatarMinimalPerf.default 487 464 1.05:1
DividerMinimalPerf.default 369 350 1.05:1
LabelMinimalPerf.default 413 392 1.05:1
ListNestedPerf.default 929 885 1.05:1
ReactionMinimalPerf.default 391 372 1.05:1
SkeletonMinimalPerf.default 408 387 1.05:1
StatusMinimalPerf.default 673 640 1.05:1
IconMinimalPerf.default 675 641 1.05:1
Button.Fluent 546 521 1.05:1
CheckboxMinimalPerf.default 3034 2926 1.04:1
ListMinimalPerf.default 482 465 1.04:1
MenuMinimalPerf.default 886 856 1.04:1
ProviderMinimalPerf.default 981 946 1.04:1
ChatMinimalPerf.default 618 602 1.03:1
GridMinimalPerf.default 329 320 1.03:1
HeaderMinimalPerf.default 354 345 1.03:1
TooltipMinimalPerf.default 823 798 1.03:1
TreeMinimalPerf.default 879 856 1.03:1
Checkbox.Fluent 677 655 1.03:1
AccordionMinimalPerf.default 156 153 1.02:1
AttachmentSlotsPerf.default 1182 1164 1.02:1
CardMinimalPerf.default 553 543 1.02:1
ChatDuplicateMessagesPerf.default 436 429 1.02:1
ChatWithPopoverPerf.default 496 486 1.02:1
FlexMinimalPerf.default 287 280 1.02:1
HeaderSlotsPerf.default 793 774 1.02:1
ImageMinimalPerf.default 373 365 1.02:1
ItemLayoutMinimalPerf.default 1304 1274 1.02:1
LoaderMinimalPerf.default 761 748 1.02:1
ProviderMergeThemesPerf.default 1996 1949 1.02:1
SegmentMinimalPerf.default 336 328 1.02:1
ToolbarMinimalPerf.default 963 941 1.02:1
Avatar.Fluent 905 885 1.02:1
Dialog.Fluent 784 768 1.02:1
Dropdown.Fluent 3059 3006 1.02:1
Tooltip.Fluent 539 530 1.02:1
AlertMinimalPerf.default 302 299 1.01:1
AnimationMinimalPerf.default 396 391 1.01:1
ButtonSlotsPerf.default 625 618 1.01:1
CarouselMinimalPerf.default 478 472 1.01:1
DialogMinimalPerf.default 800 789 1.01:1
TableManyItemsPerf.default 2243 2210 1.01:1
CustomToolbarPrototype.default 3905 3853 1.01:1
ListCommonPerf.default 973 975 1:1
MenuButtonMinimalPerf.default 1537 1533 1:1
PopupMinimalPerf.default 682 679 1:1
RefMinimalPerf.default 225 226 1:1
SplitButtonMinimalPerf.default 3834 3841 1:1
TextAreaMinimalPerf.default 457 459 1:1
DropdownManyItemsPerf.default 769 780 0.99:1
DropdownMinimalPerf.default 3022 3043 0.99:1
EmbedMinimalPerf.default 1929 1944 0.99:1
InputMinimalPerf.default 1338 1347 0.99:1
ListWith60ListItems.default 1108 1124 0.99:1
Icon.Fluent 696 703 0.99:1
Slider.Fluent 1649 1661 0.99:1
SliderMinimalPerf.default 1646 1673 0.98:1
TableMinimalPerf.default 397 404 0.98:1
VideoMinimalPerf.default 601 628 0.96:1

@chrisdholt chrisdholt merged commit 5cceb3c into microsoft:master Aug 14, 2020
@chrisdholt chrisdholt deleted the users/chhol/fix-badge-styling branch August 14, 2020 22:32
@msft-github-bot
Copy link
Contributor

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

Handy links:

@msft-github-bot msft-github-bot mentioned this pull request Aug 18, 2020
Closed
levithomason pushed a commit to levithomason/fluentui that referenced this pull request Aug 24, 2020
@chrisdholt @levithomason
fix: apply badge styles to control rather than host element (microsof…
733eb14 
…t#14539)

* fix: apply badge appearance styling to control not host element

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

@chrisdholt chrisdholt

Labels
Component: Badge web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[web components] Badge styling for neutral and accent appearances is applied to host and not control
2 participants
@chrisdholt @msft-github-bot