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

[web-components] add default hover to fluent card #15751

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 changed the title Users/chhol/add default hover to fluent card [web-components] add default hover to fluent card Oct 28, 2020
@chrisdholt chrisdholt assigned chrisdholt and unassigned tomi-msft Oct 28, 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 e50ca41:

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

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 815 835 5000
BaseButtonCompat mount 919 925 5000
Breadcrumb mount 40653 40796 5000
Checkbox mount 1521 1567 5000
CheckboxBase mount 1323 1326 5000
ChoiceGroup mount 4816 4846 5000
ComboBox mount 949 985 1000
CommandBar mount 9692 9697 1000
ContextualMenu mount 5903 5883 1000
DefaultButtonCompat mount 1150 1155 5000
DetailsRow mount 3668 3609 5000
DetailsRowFast mount 3632 3693 5000
DetailsRowNoStyles mount 3434 3469 5000
Dialog mount 1562 1490 1000
DocumentCardTitle mount 1748 1757 1000
Dropdown mount 3529 3428 5000
FocusTrapZone mount 1748 1743 5000
FocusZone mount 1779 1722 5000
IconButtonCompat mount 1782 1807 5000
Label mount 315 331 5000
Layer mount 1809 1842 5000
Link mount 489 466 5000
MenuButtonCompat mount 1521 1510 5000
MessageBar mount 1989 1997 5000
Nav mount 3226 3283 1000
OverflowSet mount 1009 1017 5000
Panel mount 1408 1414 1000
Persona mount 828 860 1000
Pivot mount 1388 1407 1000
PrimaryButtonCompat mount 1306 1295 5000
Rating mount 7680 7685 5000
SearchBox mount 1341 1358 5000
Shimmer mount 2644 2588 5000
Slider mount 1883 1907 5000
SpinButton mount 4997 4995 5000
Spinner mount 406 413 5000
SplitButtonCompat mount 3193 3185 5000
Stack mount 494 524 5000
StackWithIntrinsicChildren mount 1512 1521 5000
StackWithTextChildren mount 4741 4711 5000
SwatchColorPicker mount 10154 10165 5000
TagPicker mount 2829 2770 5000
TeachingBubble mount 11398 11400 5000
Text mount 452 434 5000
TextField mount 1404 1467 5000
ThemeProvider mount 1935 1937 5000
ThemeProvider virtual-rerender 645 629 5000
Toggle mount 789 805 5000
button mount 535 546 5000
buttonNative mount 114 102 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.48 0.52 0.92:1 2000 966
🦄 Button.Fluent 0.12 0.24 0.5:1 5000 621
🔧 Checkbox.Fluent 0.65 0.34 1.91:1 1000 648
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 824
🔧 Dropdown.Fluent 2.87 0.41 7:1 1000 2874
🔧 Icon.Fluent 0.15 0.07 2.14:1 5000 773
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 430
🔧 Slider.Fluent 1.59 0.45 3.53:1 1000 1587
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 403
🦄 Tooltip.Fluent 0.11 0.88 0.13:1 5000 568

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 233 211 1.1:1
ButtonMinimalPerf.default 200 183 1.09:1
TextAreaMinimalPerf.default 598 554 1.08:1
RefMinimalPerf.default 242 227 1.07:1
IconMinimalPerf.default 799 748 1.07:1
AnimationMinimalPerf.default 438 414 1.06:1
RadioGroupMinimalPerf.default 508 481 1.06:1
TextMinimalPerf.default 421 397 1.06:1
AttachmentMinimalPerf.default 175 166 1.05:1
CarouselMinimalPerf.default 491 468 1.05:1
GridMinimalPerf.default 393 373 1.05:1
ListWith60ListItems.default 1013 962 1.05:1
PortalMinimalPerf.default 165 157 1.05:1
ChatMinimalPerf.default 677 649 1.04:1
HeaderSlotsPerf.default 876 845 1.04:1
LabelMinimalPerf.default 473 456 1.04:1
LayoutMinimalPerf.default 462 444 1.04:1
SkeletonMinimalPerf.default 510 492 1.04:1
StatusMinimalPerf.default 831 801 1.04:1
ToolbarMinimalPerf.default 1068 1028 1.04:1
TreeMinimalPerf.default 987 953 1.04:1
Avatar.Fluent 966 933 1.04:1
Text.Fluent 403 387 1.04:1
AccordionMinimalPerf.default 165 160 1.03:1
DialogMinimalPerf.default 843 822 1.03:1
ItemLayoutMinimalPerf.default 1422 1374 1.03:1
PopupMinimalPerf.default 764 742 1.03:1
TableManyItemsPerf.default 2457 2379 1.03:1
TooltipMinimalPerf.default 862 833 1.03:1
Checkbox.Fluent 648 630 1.03:1
Icon.Fluent 773 750 1.03:1
Image.Fluent 430 416 1.03:1
Tooltip.Fluent 568 554 1.03:1
AvatarMinimalPerf.default 509 497 1.02:1
ButtonSlotsPerf.default 629 619 1.02:1
ButtonUseCssPerf.default 843 830 1.02:1
ChatDuplicateMessagesPerf.default 432 423 1.02:1
ChatWithPopoverPerf.default 491 482 1.02:1
DropdownMinimalPerf.default 2895 2847 1.02:1
HeaderMinimalPerf.default 418 410 1.02:1
ListMinimalPerf.default 538 530 1.02:1
MenuMinimalPerf.default 936 921 1.02:1
ReactionMinimalPerf.default 459 448 1.02:1
SliderMinimalPerf.default 1637 1608 1.02:1
SplitButtonMinimalPerf.default 3939 3862 1.02:1
Slider.Fluent 1587 1554 1.02:1
ButtonOverridesMissPerf.default 1723 1701 1.01:1
ButtonUseCssNestingPerf.default 1102 1087 1.01:1
CardMinimalPerf.default 615 607 1.01:1
CheckboxMinimalPerf.default 2878 2852 1.01:1
EmbedMinimalPerf.default 1998 1974 1.01:1
InputMinimalPerf.default 1348 1336 1.01:1
ListCommonPerf.default 710 700 1.01:1
ListNestedPerf.default 641 633 1.01:1
MenuButtonMinimalPerf.default 1733 1724 1.01:1
ProviderMergeThemesPerf.default 2066 2036 1.01:1
Button.Fluent 621 613 1.01:1
Dropdown.Fluent 2874 2837 1.01:1
DropdownManyItemsPerf.default 787 787 1:1
FlexMinimalPerf.default 325 325 1:1
FormMinimalPerf.default 473 474 1:1
LoaderMinimalPerf.default 757 759 1:1
SegmentMinimalPerf.default 409 407 1:1
CustomToolbarPrototype.default 3879 3892 1:1
Dialog.Fluent 824 826 1:1
AttachmentSlotsPerf.default 1152 1167 0.99:1
ImageMinimalPerf.default 426 430 0.99:1
ProviderMinimalPerf.default 1021 1035 0.99:1
AlertMinimalPerf.default 325 332 0.98:1
DividerMinimalPerf.default 409 416 0.98:1
VideoMinimalPerf.default 707 720 0.98:1
BoxMinimalPerf.default 408 425 0.96:1
TableMinimalPerf.default 461 478 0.96:1

@size-auditor
Copy link

size-auditor bot commented Oct 28, 2020

Asset size changes

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

Baseline commit: 1b963c69f47a8eb69e4b79319fcfe060a9d2749c (build)

@chrisdholt chrisdholt merged commit 962a5b7 into microsoft:master Oct 28, 2020
@chrisdholt chrisdholt deleted the users/chhol/add-default-hover-to-fluent-card branch October 28, 2020 23:15
@msft-github-bot
Copy link
Contributor

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

Handy links:

SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 23, 2020
* add hover and focus-within elevation change for card

* 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.

4 participants