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(TextArea): Add autoResize #14860

Merged
merged 11 commits into from
Sep 3, 2020

Conversation

assuncaocharles
Copy link
Contributor

@assuncaocharles assuncaocharles commented Sep 2, 2020

Pull request checklist

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

Description of changes

This PR adds the ability for TextArea to auto adjust the height based in the content

cAUtPGDi1P

Focus areas to test

(optional)

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Sep 2, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 2, 2020

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 b93e4bb:

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

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 2, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 969 984 5000
ButtonNext mount 604 614 5000
Checkbox mount 1703 1656 5000
CheckboxBase mount 1450 1434 5000
CheckboxNext mount 1773 1776 5000
ChoiceGroup mount 5261 5414 5000
ChoiceGroupNext mount 5369 5269 5000
ComboBox mount 967 942 1000
CommandBar mount 7667 7774 1000
ContextualMenu mount 13361 13005 1000
DefaultButton mount 1185 1269 5000
DetailsRow mount 3702 3781 5000
DetailsRowFast mount 3715 3780 5000
DetailsRowNoStyles mount 3568 3605 5000
Dialog mount 1565 1550 1000
DocumentCardTitle mount 1828 1822 1000
Dropdown mount 2817 2779 5000
FocusZone mount 1832 1971 5000
IconButton mount 1912 2086 5000
Label mount 352 369 5000
Link mount 497 506 5000
LinkNext mount 525 526 5000
MenuButton mount 1634 1594 5000
MessageBar mount 2157 2189 5000
MessageBarNext mount 2155 2157 5000
Nav mount 3426 3813 1000
OverflowSet mount 1564 1494 5000
OverflowSetNext mount 1087 1120 5000
Panel mount 1536 1530 1000
Persona mount 861 889 1000
Pivot mount 1507 1504 1000
PivotNext mount 1430 1455 1000
PrimaryButton mount 1358 1331 5000
SearchBox mount 1382 1375 5000
SearchBoxNext mount 1357 1424 5000
Shimmer mount 2793 2793 5000
ShimmerNext mount 2699 2812 5000
Slider mount 1550 1684 5000
SliderNext mount 2006 1967 5000
SpinButton mount 5149 5649 5000
SpinButtonNext mount 5288 5313 5000
Spinner mount 435 419 5000
SplitButton mount 3341 3305 5000
Stack mount 553 569 5000
StackWithIntrinsicChildren mount 2176 2141 5000
StackWithTextChildren mount 5412 5496 5000
SwatchColorPicker mount 10889 11776 5000
SwatchColorPickerNext mount 10878 10855 5000
TagPicker mount 2901 2975 5000
TeachingBubble mount 51020 52017 5000
TeachingBubbleNext mount 50878 50620 5000
Text mount 428 452 5000
TextField mount 1454 1467 5000
ThemeProvider mount 4275 4274 5000
ThemeProvider virtual-rerender 476 453 5000
Toggle mount 886 837 5000
ToggleNext mount 873 858 5000
button mount 127 102 5000

Perf Analysis (Fluent)

⚠️ 5 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
ButtonOverridesMissPerf.default 1830 44 41.59:1 analysis
ButtonUseCssNestingPerf.default 61 45 1.36:1 analysis
PortalMinimalPerf.default 149 123 1.21:1 analysis
ButtonUseCssPerf.default 52 46 1.13:1 analysis
ChatWithPopoverPerf.default 500 483 1.04:1 analysis
Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.52 0.9:1 2000 932
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 592
🔧 Checkbox.Fluent 0.65 0.39 1.67:1 1000 653
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 843
🔧 Dropdown.Fluent 3.1 0.49 6.33:1 1000 3100
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 779
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 406
🔧 Slider.Fluent 1.7 0.37 4.59:1 1000 1696
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 367
🦄 Tooltip.Fluent 0.11 16.08 0.01:1 5000 567

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TextAreaMinimalPerf.default 670 511 1.31:1
AnimationMinimalPerf.default 476 407 1.17:1
ButtonMinimalPerf.default 207 181 1.14:1
ImageMinimalPerf.default 435 385 1.13:1
BoxMinimalPerf.default 404 366 1.1:1
ReactionMinimalPerf.default 441 401 1.1:1
SkeletonMinimalPerf.default 468 424 1.1:1
TooltipMinimalPerf.default 896 814 1.1:1
ChatDuplicateMessagesPerf.default 454 418 1.09:1
GridMinimalPerf.default 379 349 1.09:1
FormMinimalPerf.default 464 429 1.08:1
PopupMinimalPerf.default 736 684 1.08:1
DropdownManyItemsPerf.default 844 792 1.07:1
HeaderMinimalPerf.default 399 372 1.07:1
LabelMinimalPerf.default 472 443 1.07:1
RefMinimalPerf.default 216 201 1.07:1
StatusMinimalPerf.default 766 713 1.07:1
AttachmentMinimalPerf.default 180 170 1.06:1
AttachmentSlotsPerf.default 1265 1193 1.06:1
RadioGroupMinimalPerf.default 483 457 1.06:1
SegmentMinimalPerf.default 381 358 1.06:1
TextMinimalPerf.default 387 366 1.06:1
Icon.Fluent 779 735 1.06:1
Tooltip.Fluent 567 533 1.06:1
MenuMinimalPerf.default 917 877 1.05:1
ProviderMinimalPerf.default 1027 974 1.05:1
ToolbarMinimalPerf.default 1046 994 1.05:1
Dialog.Fluent 843 801 1.05:1
HeaderSlotsPerf.default 860 827 1.04:1
LoaderMinimalPerf.default 791 757 1.04:1
Image.Fluent 406 392 1.04:1
ButtonSlotsPerf.default 672 651 1.03:1
ChatMinimalPerf.default 645 624 1.03:1
SplitButtonMinimalPerf.default 4148 4035 1.03:1
CustomToolbarPrototype.default 3956 3841 1.03:1
TreeMinimalPerf.default 967 939 1.03:1
VideoMinimalPerf.default 683 662 1.03:1
AccordionMinimalPerf.default 169 166 1.02:1
CarouselMinimalPerf.default 514 504 1.02:1
CheckboxMinimalPerf.default 3020 2951 1.02:1
InputMinimalPerf.default 1418 1385 1.02:1
MenuButtonMinimalPerf.default 1679 1650 1.02:1
TableMinimalPerf.default 421 412 1.02:1
Avatar.Fluent 932 910 1.02:1
Dropdown.Fluent 3100 3047 1.02:1
DividerMinimalPerf.default 398 394 1.01:1
LayoutMinimalPerf.default 422 419 1.01:1
SliderMinimalPerf.default 1753 1731 1.01:1
IconMinimalPerf.default 713 706 1.01:1
TableManyItemsPerf.default 2392 2374 1.01:1
ProviderMergeThemesPerf.default 1998 2008 1:1
Button.Fluent 592 590 1:1
Checkbox.Fluent 653 655 1:1
Text.Fluent 367 370 0.99:1
AlertMinimalPerf.default 329 336 0.98:1
DropdownMinimalPerf.default 3053 3116 0.98:1
EmbedMinimalPerf.default 2009 2050 0.98:1
ItemLayoutMinimalPerf.default 1358 1391 0.98:1
ListMinimalPerf.default 516 527 0.98:1
Slider.Fluent 1696 1731 0.98:1
AvatarMinimalPerf.default 509 523 0.97:1
DialogMinimalPerf.default 807 828 0.97:1
FlexMinimalPerf.default 297 306 0.97:1
TreeWith60ListItems.default 230 238 0.97:1
CardMinimalPerf.default 605 643 0.94:1
ListWith60ListItems.default 1026 1112 0.92:1
ListCommonPerf.default 751 981 0.77:1
ListNestedPerf.default 690 960 0.72:1

@@ -44,9 +45,16 @@ export interface TextAreaProps extends UIComponentProps, ChildrenComponentProps

/** A textarea can take the width of its container. */
fluid?: boolean;

/** A textarea can be set to automatically adjust the height */
autoAdjustHeight?: boolean;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I called it autoAdjustHeight to be similar to Fabric and it was also as the user named it when requiring it.... But I wonder if autoResize wouldn't be a better name

Copy link
Contributor

Choose a reason for hiding this comment

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

I would vote for autoResize it's what I would search for if I need behavior like this.

@assuncaocharles assuncaocharles marked this pull request as ready for review September 2, 2020 14:33
@assuncaocharles assuncaocharles changed the title feat(text-area): Add autoAdjustHeight feat(TextArea): Add autoAdjustHeight Sep 2, 2020
@size-auditor
Copy link

size-auditor bot commented Sep 2, 2020

Asset size changes

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

Baseline commit: 12e72defeec4e1c2a6c7326c9cef670f6c2b2a55 (build)

@msft-github-bot
Copy link
Contributor

Hello @assuncaocharles!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot msft-github-bot merged commit cf13453 into microsoft:master Sep 3, 2020
@assuncaocharles assuncaocharles deleted the feat/text-area branch September 3, 2020 09:35
inputRef.current.style.height = '0';
inputRef.current.style.height = `${inputRef.current?.scrollHeight}px`;
}
}, [inputRef.current?.scrollHeight, autoResize]);
Copy link
Member

Choose a reason for hiding this comment

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

During the first render inputRef.current.scrollHeight will be null. In general it's incorrect to use such things as effect dependencies

@assuncaocharles assuncaocharles changed the title feat(TextArea): Add autoAdjustHeight feat(TextArea): Add autoResize Sep 3, 2020
@layershifter
Copy link
Member

https://codesandbox.io/s/microsoftfluentui-codesandbox-react-northstar-template-forked-czevk?file=/src/index.tsx

border & minHeight

The combination of border and minHeight breaks the logic:
textarea-bug


You can also go through linked issues in Semantic-Org/Semantic-UI-React#3465, there are numerous interesting issues 🔫 I suggest to revert this an use react-textarea-autosize instead.

assuncaocharles added a commit to assuncaocharles/fluentui that referenced this pull request Sep 3, 2020
assuncaocharles added a commit that referenced this pull request Sep 3, 2020
hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [ ] Include a change request file using `$ yarn change`

#### Description of changes

This PR adds the ability for `TextArea` to auto adjust the height based in the content

![cAUtPGDi1P](https://user-images.githubusercontent.com/8545105/91996646-86e08000-ed39-11ea-8aaa-1197bc4204da.gif)


#### Focus areas to test

(optional)
hutchcodes pushed a commit to hutchcodes/fluentui that referenced this pull request Sep 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants