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: add full width to controls for text-field and text-area, add examples #14492

Merged
merged 1 commit into from
Aug 13, 2020
Merged

fix: add full width to controls for text-field and text-area, add examples #14492

merged 1 commit into from
Aug 13, 2020

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

Fixes a duplicate resolved issue found in FAST Components where the text-field and text-area controls parts were not expanded to the full width of the component when the component was styled with a larger than default width.

This issue arose in the FAST Components package and also exists here in Fluent's Web Components.
See the related FAST PR 3623 and resolved issue 3615

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 12, 2020 •
edited
Loading

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 1a73d7f:

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

@size-auditor
Copy link

size-auditor bot commented Aug 12, 2020 •
edited
Loading

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 673554b

Possible causes

  • The baseline build 673554b is broken
  • The Size Auditor run for the baseline build 673554b was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 12, 2020 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 910 905 5000
ButtonNext mount 585 602 5000
Checkbox mount 1573 1627 5000
CheckboxBase mount 1354 1357 5000
CheckboxNext mount 1721 1677 5000
ChoiceGroup mount 5086 5016 5000
ComboBox mount 983 941 1000
CommandBar mount 7865 7859 1000
ContextualMenu mount 13831 13913 1000
DefaultButton mount 1139 1113 5000
DetailsRow mount 3539 3653 5000
DetailsRowFast mount 3696 3639 5000
DetailsRowNoStyles mount 3490 3469 5000
Dialog mount 1570 1560 1000
DocumentCardTitle mount 1890 1889 1000
Dropdown mount 2637 2685 5000
FocusZone mount 1802 1810 5000
IconButton mount 1949 1784 5000
Label mount 342 348 5000
Link mount 466 461 5000
LinkNext mount 488 502 5000
MenuButton mount 1495 1499 5000
Nav mount 3322 3307 1000
Panel mount 1438 1470 1000
Persona mount 851 866 1000
Pivot mount 1422 1502 1000
PivotNext mount 1436 1435 1000
PrimaryButton mount 1287 1269 5000
SearchBox mount 1330 1293 5000
SearchBoxNext mount 1294 1324 5000
Slider mount 1510 1547 5000
SliderNext mount 1986 1967 5000
SpinButton mount 5131 5057 5000
SpinButtonNext mount 5204 5190 5000
Spinner mount 433 426 5000
SplitButton mount 3182 3235 5000
Stack mount 530 526 5000
StackWithIntrinsicChildren mount 2081 2056 5000
StackWithTextChildren mount 5149 5121 5000
TagPicker mount 2821 2815 5000
Text mount 447 432 5000
TextField mount 1407 1415 5000
ThemeProvider mount 2938 2873 5000
ThemeProvider virtual-rerender 456 469 5000
Toggle mount 834 860 5000
ToggleNext mount 840 825 5000
button mount 110 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.48 0.92:1 2000 872
🦄 Button.Fluent 0.11 0.19 0.58:1 5000 552
🔧 Checkbox.Fluent 0.64 0.35 1.83:1 1000 636
🦄 Dialog.Fluent 0.15 0.22 0.68:1 5000 762
🔧 Dropdown.Fluent 3.06 0.48 6.38:1 1000 3055
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 678
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 367
🔧 Slider.Fluent 1.68 0.35 4.8:1 1000 1678
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 333
🦄 Tooltip.Fluent 0.11 17.59 0.01:1 5000 550

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 146 124 1.18:1
FlexMinimalPerf.default 286 258 1.11:1
CarouselMinimalPerf.default 475 440 1.08:1
ChatMinimalPerf.default 633 588 1.08:1
ListMinimalPerf.default 466 437 1.07:1
Button.Fluent 552 523 1.06:1
EmbedMinimalPerf.default 1905 1815 1.05:1
MenuButtonMinimalPerf.default 1549 1473 1.05:1
RadioGroupMinimalPerf.default 417 397 1.05:1
RefMinimalPerf.default 214 203 1.05:1
AttachmentMinimalPerf.default 164 157 1.04:1
ButtonSlotsPerf.default 619 595 1.04:1
ListCommonPerf.default 967 926 1.04:1
MenuMinimalPerf.default 851 818 1.04:1
ProviderMinimalPerf.default 961 927 1.04:1
TreeWith60ListItems.default 218 210 1.04:1
Image.Fluent 367 353 1.04:1
AnimationMinimalPerf.default 396 384 1.03:1
BoxMinimalPerf.default 356 345 1.03:1
ChatWithPopoverPerf.default 474 459 1.03:1
CheckboxMinimalPerf.default 2889 2811 1.03:1
LayoutMinimalPerf.default 387 375 1.03:1
LoaderMinimalPerf.default 753 732 1.03:1
IconMinimalPerf.default 646 628 1.03:1
TreeMinimalPerf.default 866 842 1.03:1
Text.Fluent 333 322 1.03:1
AttachmentSlotsPerf.default 1177 1156 1.02:1
HierarchicalTreeMinimalPerf.default 413 405 1.02:1
PopupMinimalPerf.default 670 654 1.02:1
TextMinimalPerf.default 329 321 1.02:1
Dialog.Fluent 762 744 1.02:1
Tooltip.Fluent 550 537 1.02:1
AlertMinimalPerf.default 290 288 1.01:1
CardMinimalPerf.default 559 554 1.01:1
GridMinimalPerf.default 324 321 1.01:1
InputMinimalPerf.default 1329 1315 1.01:1
ItemLayoutMinimalPerf.default 1264 1255 1.01:1
LabelMinimalPerf.default 389 386 1.01:1
ProviderMergeThemesPerf.default 1944 1922 1.01:1
SkeletonMinimalPerf.default 385 383 1.01:1
ChatDuplicateMessagesPerf.default 420 418 1:1
DialogMinimalPerf.default 756 757 1:1
DropdownManyItemsPerf.default 738 737 1:1
DropdownMinimalPerf.default 3011 3011 1:1
ListWith60ListItems.default 1068 1072 1:1
SliderMinimalPerf.default 1672 1666 1:1
SplitButtonMinimalPerf.default 3779 3772 1:1
StatusMinimalPerf.default 653 652 1:1
TableMinimalPerf.default 380 381 1:1
CustomToolbarPrototype.default 3873 3866 1:1
ToolbarMinimalPerf.default 950 953 1:1
Dropdown.Fluent 3055 3066 1:1
DividerMinimalPerf.default 352 357 0.99:1
HeaderSlotsPerf.default 742 747 0.99:1
ListNestedPerf.default 868 878 0.99:1
PortalMinimalPerf.default 127 128 0.99:1
ReactionMinimalPerf.default 374 376 0.99:1
TableManyItemsPerf.default 2150 2171 0.99:1
TooltipMinimalPerf.default 790 801 0.99:1
Avatar.Fluent 872 882 0.99:1
FormMinimalPerf.default 386 394 0.98:1
ImageMinimalPerf.default 357 363 0.98:1
SegmentMinimalPerf.default 333 339 0.98:1
TextAreaMinimalPerf.default 446 456 0.98:1
Checkbox.Fluent 636 651 0.98:1
Slider.Fluent 1678 1710 0.98:1
HeaderMinimalPerf.default 329 344 0.96:1
VideoMinimalPerf.default 588 611 0.96:1
AvatarMinimalPerf.default 471 497 0.95:1
Icon.Fluent 678 711 0.95:1
ButtonMinimalPerf.default 161 175 0.92:1

@SethDonohue SethDonohue force-pushed the fix-textarea-textfield-controls-width branch 2 times, most recently from c789b54 to 9d2292f Compare August 13, 2020 00:12
@SethDonohue SethDonohue force-pushed the fix-textarea-textfield-controls-width branch from 9d2292f to 1a73d7f Compare August 13, 2020 00:13
@chrisdholt chrisdholt merged commit b9a825d into microsoft:master Aug 13, 2020
@msft-github-bot
Copy link
Contributor

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

Handy links:

levithomason pushed a commit to levithomason/fluentui that referenced this pull request Aug 24, 2020
@SethDonohue @levithomason
Fix: ensure controls for text-field and text-area span the full width…
b266ae0 
… of host (microsoft#14492)

Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
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

@khmakoto khmakoto

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@SethDonohue @msft-github-bot @chrisdholt @khmakoto