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

fix (web components): text-field label hidden styles ordering #16355

Conversation

SethDonohue
Copy link
Contributor

Pull request checklist

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

Description of changes

Moves text-field label__hidden styles below main label styles for proper ordering so the styles are applied correctly.

@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-text-field-label-hidden-styles branch from ac914e6 to 9047ca8 Compare January 4, 2021 19:52
@chrisdholt chrisdholt assigned chrisdholt and unassigned layershifter Jan 4, 2021
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 4, 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 9047ca8:

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

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 830 837 5000
BaseButtonCompat mount 905 901 5000
Breadcrumb mount 43806 44017 5000
Checkbox mount 1495 1527 5000
CheckboxBase mount 1264 1274 5000
ChoiceGroup mount 4854 4735 5000
ComboBox mount 969 982 1000
CommandBar mount 10458 10421 1000
ContextualMenu mount 6297 6352 1000
DefaultButtonCompat mount 1157 1134 5000
DetailsRow mount 3680 3653 5000
DetailsRowFast mount 3626 3669 5000
DetailsRowNoStyles mount 3468 3554 5000
Dialog mount 1493 1443 1000
DocumentCardTitle mount 1834 1828 1000
Dropdown mount 3406 3404 5000
FocusTrapZone mount 1830 1846 5000
FocusZone mount 1901 1914 5000
IconButtonCompat mount 1785 1803 5000
Label mount 345 363 5000
Layer mount 1767 1786 5000
Link mount 471 492 5000
MakeStyles mount 1961 1954 50000
MenuButtonCompat mount 1474 1504 5000
MessageBar mount 2031 2030 5000
Nav mount 3279 3313 1000
OverflowSet mount 1054 1054 5000
Panel mount 1467 1473 1000
Persona mount 905 866 1000
Pivot mount 1416 1429 1000
PrimaryButtonCompat mount 1250 1275 5000
Rating mount 7614 7602 5000
SearchBox mount 1292 1361 5000
Shimmer mount 2562 2516 5000
Slider mount 1917 1910 5000
SpinButton mount 4961 5011 5000
Spinner mount 423 431 5000
SplitButtonCompat mount 3191 3105 5000
Stack mount 513 505 5000
StackWithIntrinsicChildren mount 1578 1558 5000
StackWithTextChildren mount 4522 4492 5000
SwatchColorPicker mount 10317 10248 5000
Tabs mount 1405 1398 1000
TagPicker mount 2866 2881 5000
TeachingBubble mount 11698 11763 5000
Text mount 408 422 5000
TextField mount 1356 1395 5000
ThemeProvider mount 2177 2158 5000
ThemeProvider virtual-rerender 680 647 5000
Toggle mount 792 802 5000
button mount 671 650 5000
buttonNative mount 101 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.52 0.87:1 2000 900
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 596
🔧 Checkbox.Fluent 0.66 0.36 1.83:1 1000 660
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 822
🔧 Dropdown.Fluent 3.06 0.41 7.46:1 1000 3058
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 756
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 412
🔧 Slider.Fluent 1.65 0.44 3.75:1 1000 1645
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 384
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 602

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
RefMinimalPerf.default 276 243 1.14:1
ButtonMinimalPerf.default 198 180 1.1:1
GridMinimalPerf.default 380 352 1.08:1
AttachmentMinimalPerf.default 172 161 1.07:1
ButtonSlotsPerf.default 625 590 1.06:1
SegmentMinimalPerf.default 384 361 1.06:1
AccordionMinimalPerf.default 169 161 1.05:1
AnimationMinimalPerf.default 433 414 1.05:1
DialogMinimalPerf.default 868 829 1.05:1
DropdownManyItemsPerf.default 790 754 1.05:1
LayoutMinimalPerf.default 450 428 1.05:1
ListMinimalPerf.default 521 494 1.05:1
TreeMinimalPerf.default 830 799 1.04:1
Text.Fluent 384 371 1.04:1
Tooltip.Fluent 602 579 1.04:1
CarouselMinimalPerf.default 461 449 1.03:1
ListCommonPerf.default 661 640 1.03:1
ReactionMinimalPerf.default 428 416 1.03:1
StatusMinimalPerf.default 748 727 1.03:1
VideoMinimalPerf.default 676 655 1.03:1
Button.Fluent 596 579 1.03:1
Image.Fluent 412 400 1.03:1
HeaderMinimalPerf.default 392 384 1.02:1
InputMinimalPerf.default 1361 1330 1.02:1
ListNestedPerf.default 601 588 1.02:1
PopupMinimalPerf.default 737 724 1.02:1
Avatar.Fluent 900 886 1.02:1
Dialog.Fluent 822 804 1.02:1
AvatarMinimalPerf.default 479 473 1.01:1
ButtonUseCssPerf.default 853 842 1.01:1
ChatDuplicateMessagesPerf.default 433 427 1.01:1
ChatMinimalPerf.default 637 628 1.01:1
ChatWithPopoverPerf.default 489 483 1.01:1
EmbedMinimalPerf.default 4302 4254 1.01:1
ItemLayoutMinimalPerf.default 1311 1292 1.01:1
ListWith60ListItems.default 962 952 1.01:1
ProviderMinimalPerf.default 1062 1051 1.01:1
SplitButtonMinimalPerf.default 3841 3807 1.01:1
TableManyItemsPerf.default 2139 2126 1.01:1
TextMinimalPerf.default 374 370 1.01:1
CustomToolbarPrototype.default 4067 4024 1.01:1
TooltipMinimalPerf.default 847 841 1.01:1
Icon.Fluent 756 745 1.01:1
ButtonOverridesMissPerf.default 1768 1763 1:1
CheckboxMinimalPerf.default 2937 2944 1:1
DatepickerMinimalPerf.default 49084 48890 1:1
DropdownMinimalPerf.default 3046 3044 1:1
LabelMinimalPerf.default 443 441 1:1
LoaderMinimalPerf.default 750 750 1:1
MenuMinimalPerf.default 888 890 1:1
TreeWith60ListItems.default 222 221 1:1
Dropdown.Fluent 3058 3065 1:1
Slider.Fluent 1645 1648 1:1
AttachmentSlotsPerf.default 1143 1157 0.99:1
CardMinimalPerf.default 579 583 0.99:1
DividerMinimalPerf.default 398 404 0.99:1
HeaderSlotsPerf.default 790 798 0.99:1
MenuButtonMinimalPerf.default 1592 1607 0.99:1
SliderMinimalPerf.default 1633 1656 0.99:1
IconMinimalPerf.default 694 703 0.99:1
TextAreaMinimalPerf.default 502 505 0.99:1
ToolbarMinimalPerf.default 973 979 0.99:1
BoxMinimalPerf.default 384 390 0.98:1
ButtonUseCssNestingPerf.default 1103 1120 0.98:1
RadioGroupMinimalPerf.default 458 466 0.98:1
Checkbox.Fluent 660 672 0.98:1
FlexMinimalPerf.default 320 330 0.97:1
PortalMinimalPerf.default 169 174 0.97:1
ProviderMergeThemesPerf.default 2143 2208 0.97:1
SkeletonMinimalPerf.default 380 391 0.97:1
TableMinimalPerf.default 424 439 0.97:1
FormMinimalPerf.default 419 437 0.96:1
ImageMinimalPerf.default 395 411 0.96:1
AlertMinimalPerf.default 301 317 0.95:1

@size-auditor
Copy link

size-auditor bot commented Jan 4, 2021

Asset size changes

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

Baseline commit: 6d4e38765cd0fd80feb2c8487ba7a60e37653ef6 (build)

@chrisdholt chrisdholt merged commit 887a5e9 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-text-field-label-hidden-styles branch January 5, 2021 18:00
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.

5 participants