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

feat: add appearance behaviors for inputs and form controls #17565

Conversation

khamudom
Copy link
Contributor

@khamudom khamudom commented Mar 25, 2021

Pull request checklist

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

Description of changes

Created a separate CSS object that targets the appearance="filled" attribute and applied it to appearanceBehaviors.

The components updated are:
Combobox
Select
Number field
Text area
Text field

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 25, 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 d1a4faf:

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

@size-auditor
Copy link

size-auditor bot commented Mar 25, 2021

Asset size changes

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

Baseline commit: ce4d441da2c63284a2c1c519a59875c22cd3552f (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 25, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 949 964 5000
BaseButton mount 933 943 5000
Breadcrumb mount 41419 41530 5000
ButtonNext mount 542 552 5000
Checkbox mount 1608 1600 5000
CheckboxBase mount 1340 1365 5000
ChoiceGroup mount 4978 4901 5000
ComboBox mount 964 1051 1000
CommandBar mount 10050 9944 1000
ContextualMenu mount 6116 6143 1000
DefaultButton mount 1165 1160 5000
DetailsRow mount 3730 3623 5000
DetailsRowFast mount 3816 3723 5000
DetailsRowNoStyles mount 3594 3483 5000
Dialog mount 1468 1461 1000
DocumentCardTitle mount 1771 1778 1000
Dropdown mount 3362 3379 5000
FocusTrapZone mount 1782 1775 5000
FocusZone mount 1808 1785 5000
IconButton mount 1774 1783 5000
Label mount 348 344 5000
Layer mount 1841 1763 5000
Link mount 480 458 5000
MakeStyles mount 1728 1660 50000
MenuButton mount 1509 1488 5000
MessageBar mount 1999 2008 5000
Nav mount 3341 3378 1000
OverflowSet mount 1009 1041 5000
Panel mount 1424 1429 1000
Persona mount 831 842 1000
Pivot mount 1411 1398 1000
PrimaryButton mount 1316 1330 5000
Rating mount 8045 7917 5000
SearchBox mount 1432 1374 5000
Shimmer mount 2585 2730 5000
Slider mount 2020 2011 5000
SpinButton mount 4981 5053 5000
Spinner mount 417 411 5000
SplitButton mount 3228 3183 5000
Stack mount 506 527 5000
StackWithIntrinsicChildren mount 1602 1632 5000
StackWithTextChildren mount 4764 4836 5000
SwatchColorPicker mount 10531 10388 5000
Tabs mount 1399 1505 1000
TagPicker mount 2851 2861 5000
TeachingBubble mount 11576 11591 5000
Text mount 428 422 5000
TextField mount 1429 1451 5000
ThemeProvider mount 1150 1149 5000
ThemeProvider virtual-rerender 597 595 5000
ThemeProviderNext mount 15152 15379 5000
Toggle mount 828 787 5000
buttonNative mount 116 106 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.49 0.39:1 2000 389
🦄 Button.Fluent 0.13 0.2 0.65:1 5000 629
🔧 Checkbox.Fluent 0.64 0.36 1.78:1 1000 641
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 847
🔧 Dropdown.Fluent 3.17 0.42 7.55:1 1000 3171
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 744
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 422
🔧 Slider.Fluent 1.59 0.47 3.38:1 1000 1591
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 412
🦄 Tooltip.Fluent 0.14 0.9 0.16:1 5000 715

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FormMinimalPerf.default 494 451 1.1:1
ReactionMinimalPerf.default 483 438 1.1:1
AttachmentMinimalPerf.default 193 180 1.07:1
ListMinimalPerf.default 574 540 1.06:1
Avatar.Fluent 389 368 1.06:1
HeaderSlotsPerf.default 878 834 1.05:1
ImageMinimalPerf.default 440 418 1.05:1
InputMinimalPerf.default 1373 1307 1.05:1
IconMinimalPerf.default 739 702 1.05:1
Text.Fluent 412 392 1.05:1
AttachmentSlotsPerf.default 1275 1230 1.04:1
TableMinimalPerf.default 466 447 1.04:1
ButtonSlotsPerf.default 617 601 1.03:1
DialogMinimalPerf.default 869 841 1.03:1
GridMinimalPerf.default 401 388 1.03:1
ListNestedPerf.default 627 606 1.03:1
ListWith60ListItems.default 706 687 1.03:1
RefMinimalPerf.default 241 235 1.03:1
StatusMinimalPerf.default 808 781 1.03:1
BoxMinimalPerf.default 409 402 1.02:1
ButtonUseCssNestingPerf.default 1138 1121 1.02:1
ChatMinimalPerf.default 663 653 1.02:1
DropdownManyItemsPerf.default 788 776 1.02:1
MenuMinimalPerf.default 956 937 1.02:1
ToolbarMinimalPerf.default 1030 1013 1.02:1
Dropdown.Fluent 3171 3101 1.02:1
CardMinimalPerf.default 621 616 1.01:1
DropdownMinimalPerf.default 3150 3112 1.01:1
ItemLayoutMinimalPerf.default 1330 1319 1.01:1
PopupMinimalPerf.default 731 722 1.01:1
ProviderMinimalPerf.default 1012 1000 1.01:1
SegmentMinimalPerf.default 403 400 1.01:1
TooltipMinimalPerf.default 1009 1000 1.01:1
TreeMinimalPerf.default 853 841 1.01:1
Checkbox.Fluent 641 634 1.01:1
Icon.Fluent 744 734 1.01:1
AccordionMinimalPerf.default 169 169 1:1
AvatarMinimalPerf.default 219 220 1:1
ButtonOverridesMissPerf.default 1781 1789 1:1
DatepickerMinimalPerf.default 46235 46071 1:1
FlexMinimalPerf.default 335 334 1:1
ListCommonPerf.default 693 692 1:1
SkeletonMinimalPerf.default 417 415 1:1
CustomToolbarPrototype.default 3811 3815 1:1
TreeWith60ListItems.default 184 184 1:1
Dialog.Fluent 847 846 1:1
AnimationMinimalPerf.default 424 428 0.99:1
ButtonMinimalPerf.default 197 200 0.99:1
ButtonUseCssPerf.default 877 885 0.99:1
ChatWithPopoverPerf.default 410 413 0.99:1
CheckboxMinimalPerf.default 2843 2878 0.99:1
EmbedMinimalPerf.default 4306 4354 0.99:1
HeaderMinimalPerf.default 414 418 0.99:1
MenuButtonMinimalPerf.default 1698 1719 0.99:1
ProviderMergeThemesPerf.default 1585 1593 0.99:1
SliderMinimalPerf.default 1590 1608 0.99:1
SplitButtonMinimalPerf.default 3976 3998 0.99:1
TableManyItemsPerf.default 2205 2225 0.99:1
TextAreaMinimalPerf.default 556 560 0.99:1
Image.Fluent 422 427 0.99:1
Slider.Fluent 1591 1599 0.99:1
DividerMinimalPerf.default 405 415 0.98:1
LayoutMinimalPerf.default 444 452 0.98:1
LoaderMinimalPerf.default 758 770 0.98:1
Tooltip.Fluent 715 732 0.98:1
CarouselMinimalPerf.default 506 523 0.97:1
LabelMinimalPerf.default 449 463 0.97:1
VideoMinimalPerf.default 688 707 0.97:1
AlertMinimalPerf.default 326 338 0.96:1
RadioGroupMinimalPerf.default 486 506 0.96:1
TextMinimalPerf.default 389 404 0.96:1
Button.Fluent 629 657 0.96:1
RosterPerf.default 1256 1342 0.94:1
PortalMinimalPerf.default 167 180 0.93:1
ChatDuplicateMessagesPerf.default 295 323 0.91:1

@khamudom khamudom force-pushed the users/khamu/inputs-form-appearance-behavior branch from e3eedc2 to f667a51 Compare March 25, 2021 01:57
@chrisdholt
Copy link
Member

closes #17558

neutralFillRestBehavior,
forcedColorsStylesheetBehavior(
css`
:host(.filled) .root {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@khamudom while we're here - can you update all instances of these so they target the appearance attribute?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

Copy link
Member

@chrisdholt chrisdholt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good - thanks @khamudom! I see one bug visually in number field but it's unrelated to your PR, so I'll make that change separately :)

@chrisdholt chrisdholt merged commit 0f3e58b into microsoft:master Mar 25, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

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

Handy links:

miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
…t#17565)

* create a separate css block for filled appearance and add appearanceBehavior

* Change files

* update import order in combobox and removed unused import in textarea

* update to use appearance attribute
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.

6 participants