Skip to content

Spec review for @fluentui/react-textarea#21898

Merged
sopranopillow merged 11 commits intomicrosoft:masterfrom
sopranopillow:react-textarea-spec
Mar 7, 2022
Merged

Spec review for @fluentui/react-textarea#21898
sopranopillow merged 11 commits intomicrosoft:masterfrom
sopranopillow:react-textarea-spec

Conversation

@sopranopillow
Copy link
Contributor

@sopranopillow sopranopillow commented Feb 28, 2022 •
edited
Loading

PR Summary

This PR adds the spec for the convergence of TextArea. Please feel free to add any feedback you might have!

@sopranopillow sopranopillow mentioned this pull request Feb 28, 2022
Closed
33 tasks
@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 1, 2022 •
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 5b92825:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented Mar 1, 2022 •
edited
Loading

Asset size changes

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

Baseline commit: b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 1, 2022 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)		 73.035 kB
22.11 kB
react-avatar
Avatar		 44.982 kB
13.059 kB
react-badge
Badge		 20.869 kB
6.549 kB
react-badge
CounterBadge		 21.737 kB
6.843 kB
react-badge
PresenceBadge		 21.866 kB
6.536 kB
react-button
Button		 28.013 kB
8.059 kB
react-button
CompoundButton		 33.336 kB
9.037 kB
react-button
MenuButton		 29.763 kB
8.656 kB
react-button
SplitButton		 36.235 kB
9.857 kB
react-button
ToggleButton		 37.395 kB
8.68 kB
react-card
Card - All		 53.205 kB
15.27 kB
react-card
Card		 48.898 kB
14.083 kB
react-card
CardFooter		 7.653 kB
3.246 kB
react-card
CardHeader		 8.931 kB
3.689 kB
react-card
CardPreview		 7.626 kB
3.272 kB
react-combobox
Combobox		 6.813 kB
2.895 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 172.513 kB
48.34 kB
react-components
react-components: FluentProvider & webLightTheme		 32.526 kB
10.645 kB
react-divider
Divider		 15.301 kB
5.532 kB
react-image
Image		 10.105 kB
3.952 kB
react-input
Input		 21.538 kB
7.134 kB
react-label
Label		 8.341 kB
3.487 kB
react-link
Link		 11.102 kB
4.504 kB
react-menu
Menu (including children components)		 103.976 kB
31.998 kB
react-menu
Menu (including selectable components)		 106.331 kB
32.361 kB
react-popover
Popover		 96.776 kB
29.553 kB
react-portal
Portal		 6.267 kB
2.168 kB
react-positioning
usePopper		 23.21 kB
8.084 kB
react-provider
FluentProvider		 14.009 kB
5.25 kB
react-select
Select		 7.754 kB
3.258 kB
react-slider
Slider		 23.351 kB
7.894 kB
react-spinner
Spinner		 6.811 kB
2.895 kB
react-switch
Switch		 22.598 kB
7.642 kB
react-text
Text - Default		 10.793 kB
4.23 kB
react-text
Text - Wrappers		 14.107 kB
4.573 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 29.426 kB
6.551 kB
react-theme
Teams: Light theme		 18.42 kB
5.27 kB
react-tooltip
Tooltip		 42.76 kB
14.701 kB
react-utilities
SSRProvider		 189 B
161 B
🤖 This report was generated against b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 1, 2022 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
SkeletonMinimalPerf.default 313 260 1.2:1
TreeWith60ListItems.default 158 133 1.19:1
DropdownManyItemsPerf.default 590 536 1.1:1
PortalMinimalPerf.default 148 135 1.1:1
SegmentMinimalPerf.default 297 269 1.1:1
ButtonSlotsPerf.default 452 422 1.07:1
TextMinimalPerf.default 279 260 1.07:1
ChatDuplicateMessagesPerf.default 247 232 1.06:1
AttachmentMinimalPerf.default 123 117 1.05:1
ButtonMinimalPerf.default 140 133 1.05:1
CardMinimalPerf.default 434 414 1.05:1
DatepickerMinimalPerf.default 4432 4280 1.04:1
DividerMinimalPerf.default 281 271 1.04:1
FormMinimalPerf.default 308 297 1.04:1
RefMinimalPerf.default 214 206 1.04:1
TableMinimalPerf.default 318 307 1.04:1
AnimationMinimalPerf.default 421 410 1.03:1
AttachmentSlotsPerf.default 847 819 1.03:1
ChatMinimalPerf.default 573 556 1.03:1
FlexMinimalPerf.default 225 218 1.03:1
SplitButtonMinimalPerf.default 3400 3309 1.03:1
TableManyItemsPerf.default 1487 1441 1.03:1
ToolbarMinimalPerf.default 725 707 1.03:1
ChatWithPopoverPerf.default 313 306 1.02:1
EmbedMinimalPerf.default 3172 3117 1.02:1
ImageMinimalPerf.default 293 287 1.02:1
ListWith60ListItems.default 503 495 1.02:1
ProviderMergeThemesPerf.default 1445 1422 1.02:1
TooltipMinimalPerf.default 781 769 1.02:1
TreeMinimalPerf.default 664 653 1.02:1
CheckboxMinimalPerf.default 2046 2022 1.01:1
DropdownMinimalPerf.default 2323 2303 1.01:1
DialogMinimalPerf.default 580 579 1:1
MenuMinimalPerf.default 675 676 1:1
PopupMinimalPerf.default 510 510 1:1
ReactionMinimalPerf.default 326 326 1:1
SliderMinimalPerf.default 1415 1408 1:1
ItemLayoutMinimalPerf.default 986 993 0.99:1
CustomToolbarPrototype.default 3275 3299 0.99:1
BoxMinimalPerf.default 260 264 0.98:1
HeaderMinimalPerf.default 274 280 0.98:1
HeaderSlotsPerf.default 567 578 0.98:1
ListCommonPerf.default 471 482 0.98:1
ListNestedPerf.default 420 429 0.98:1
LoaderMinimalPerf.default 506 515 0.98:1
StatusMinimalPerf.default 500 512 0.98:1
AccordionMinimalPerf.default 118 122 0.97:1
InputMinimalPerf.default 986 1018 0.97:1
IconMinimalPerf.default 449 462 0.97:1
LayoutMinimalPerf.default 273 283 0.96:1
ProviderMinimalPerf.default 879 914 0.96:1
ButtonOverridesMissPerf.default 1290 1363 0.95:1
LabelMinimalPerf.default 301 317 0.95:1
MenuButtonMinimalPerf.default 1302 1371 0.95:1
TextAreaMinimalPerf.default 382 402 0.95:1
AlertMinimalPerf.default 206 218 0.94:1
ListMinimalPerf.default 401 429 0.93:1
VideoMinimalPerf.default 486 520 0.93:1
RadioGroupMinimalPerf.default 345 373 0.92:1
AvatarMinimalPerf.default 136 154 0.88:1
CarouselMinimalPerf.default 353 403 0.88:1
GridMinimalPerf.default 258 293 0.88:1
RosterPerf.default 830 968 0.86:1

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 1, 2022 •
edited
Loading

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 994 934 5000 Possible regression
BaseButton mount 941 981 5000 Possible regression
Breadcrumb mount 2451 2322 1000 Possible regression
ButtonNext mount 599 595 5000 Possible regression
Checkbox mount 1498 1447 5000 Possible regression
CheckboxBase mount 1306 1231 5000 Possible regression
ChoiceGroup mount 4315 4332 5000 Possible regression
ComboBox mount 1014 1100 1000 Possible regression
CommandBar mount 9231 9376 1000 Possible regression
ContextualMenu mount 3851 14992 1000 Possible regression
DefaultButton mount 1194 1171 5000 Possible regression
DetailsRow mount 3532 3534 5000 Possible regression
DetailsRowFast mount 3486 3436 5000 Possible regression
DetailsRowNoStyles mount 3441 3328 5000 Possible regression
Dialog mount 2091 2092 1000 Possible regression
DocumentCardTitle mount 340 342 1000 Possible regression
Dropdown mount 3000 3058 5000 Possible regression
FluentProviderNext mount 1911 1951 5000 Possible regression
FluentProviderWithTheme mount 288 300 10 Possible regression
FluentProviderWithTheme virtual-rerender 257 253 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 337 361 10 Possible regression
FocusTrapZone mount 1841 1787 5000 Possible regression
FocusZone mount 1788 1803 5000 Possible regression
IconButton mount 1750 1770 5000 Possible regression
Label mount 501 505 5000 Possible regression
Layer mount 2766 2729 5000 Possible regression
Link mount 600 593 5000 Possible regression
MakeStyles mount 1670 1615 50000 Possible regression
MenuButton mount 1454 1496 5000 Possible regression
MessageBar mount 1911 1979 5000 Possible regression
Nav mount 3036 3078 1000 Possible regression
OverflowSet mount 1164 1142 5000 Possible regression
Panel mount 2068 2078 1000 Possible regression
Persona mount 943 930 1000 Possible regression
Pivot mount 1422 1439 1000 Possible regression
PrimaryButton mount 1286 1331 5000 Possible regression
Rating mount 6883 6907 5000 Possible regression
SearchBox mount 1333 1327 5000 Possible regression
Shimmer mount 2371 2333 5000 Possible regression
Slider mount 1889 1859 5000 Possible regression
SpinButton mount 4552 4637 5000 Possible regression
Spinner mount 551 597 5000 Possible regression
SplitButton mount 2939 2947 5000 Possible regression
Stack mount 678 660 5000 Possible regression
StackWithIntrinsicChildren mount 2200 2187 5000 Possible regression
StackWithTextChildren mount 4828 4747 5000 Possible regression
SwatchColorPicker mount 10449 10381 5000 Possible regression
TagPicker mount 2383 2494 5000 Possible regression
TeachingBubble mount 11689 51815 5000 Possible regression
Text mount 570 556 5000 Possible regression
TextField mount 1398 1440 5000 Possible regression
ThemeProvider mount 1241 1235 5000 Possible regression
ThemeProvider virtual-rerender 761 771 5000 Possible regression
ThemeProvider virtual-rerender-with-unmount 1833 1799 5000 Possible regression
Toggle mount 880 893 5000 Possible regression
buttonNative mount 324 314 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 994 934 5000 Possible regression
BaseButton mount 941 981 5000 Possible regression
Breadcrumb mount 2451 2322 1000 Possible regression
ButtonNext mount 599 595 5000 Possible regression
Checkbox mount 1498 1447 5000 Possible regression
CheckboxBase mount 1306 1231 5000 Possible regression
ChoiceGroup mount 4315 4332 5000 Possible regression
ComboBox mount 1014 1100 1000 Possible regression
CommandBar mount 9231 9376 1000 Possible regression
ContextualMenu mount 3851 14992 1000 Possible regression
DefaultButton mount 1194 1171 5000 Possible regression
DetailsRow mount 3532 3534 5000 Possible regression
DetailsRowFast mount 3486 3436 5000 Possible regression
DetailsRowNoStyles mount 3441 3328 5000 Possible regression
Dialog mount 2091 2092 1000 Possible regression
DocumentCardTitle mount 340 342 1000 Possible regression
Dropdown mount 3000 3058 5000 Possible regression
FluentProviderNext mount 1911 1951 5000 Possible regression
FluentProviderWithTheme mount 288 300 10 Possible regression
FluentProviderWithTheme virtual-rerender 257 253 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 337 361 10 Possible regression
FocusTrapZone mount 1841 1787 5000 Possible regression
FocusZone mount 1788 1803 5000 Possible regression
IconButton mount 1750 1770 5000 Possible regression
Label mount 501 505 5000 Possible regression
Layer mount 2766 2729 5000 Possible regression
Link mount 600 593 5000 Possible regression
MakeStyles mount 1670 1615 50000 Possible regression
MenuButton mount 1454 1496 5000 Possible regression
MessageBar mount 1911 1979 5000 Possible regression
Nav mount 3036 3078 1000 Possible regression
OverflowSet mount 1164 1142 5000 Possible regression
Panel mount 2068 2078 1000 Possible regression
Persona mount 943 930 1000 Possible regression
Pivot mount 1422 1439 1000 Possible regression
PrimaryButton mount 1286 1331 5000 Possible regression
Rating mount 6883 6907 5000 Possible regression
SearchBox mount 1333 1327 5000 Possible regression
Shimmer mount 2371 2333 5000 Possible regression
Slider mount 1889 1859 5000 Possible regression
SpinButton mount 4552 4637 5000 Possible regression
Spinner mount 551 597 5000 Possible regression
SplitButton mount 2939 2947 5000 Possible regression
Stack mount 678 660 5000 Possible regression
StackWithIntrinsicChildren mount 2200 2187 5000 Possible regression
StackWithTextChildren mount 4828 4747 5000 Possible regression
SwatchColorPicker mount 10449 10381 5000 Possible regression
TagPicker mount 2383 2494 5000 Possible regression
TeachingBubble mount 11689 51815 5000 Possible regression
Text mount 570 556 5000 Possible regression
TextField mount 1398 1440 5000 Possible regression
ThemeProvider mount 1241 1235 5000 Possible regression
ThemeProvider virtual-rerender 761 771 5000 Possible regression
ThemeProvider virtual-rerender-with-unmount 1833 1799 5000 Possible regression
Toggle mount 880 893 5000 Possible regression
buttonNative mount 324 314 5000 Possible regression

ecraig12345
ecraig12345 reviewed Mar 1, 2022
View reviewed changes
spmonahan
spmonahan reviewed Mar 1, 2022
View reviewed changes
@sopranopillow sopranopillow marked this pull request as ready for review March 1, 2022 22:31
@sopranopillow sopranopillow requested review from a team, JustSlone and jurokapsiar as code owners March 1, 2022 22:31
spmonahan
spmonahan reviewed Mar 1, 2022
View reviewed changes
micahgodbolt
micahgodbolt reviewed Mar 2, 2022
View reviewed changes
@theerebuss theerebuss self-requested a review March 2, 2022 13:18
@layershifter layershifter self-requested a review March 2, 2022 16:25
JustSlone
JustSlone approved these changes Mar 2, 2022
View reviewed changes
Copy link
Collaborator

@JustSlone JustSlone left a comment

Choose a reason for hiding this comment

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

Approving codeowners change

khmakoto
khmakoto approved these changes Mar 4, 2022
View reviewed changes
theerebuss
theerebuss reviewed Mar 4, 2022
View reviewed changes
packages/react-textarea/Spec.md
*
* @defaultvalue outline
*/
appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
Copy link
Contributor

@theerebuss theerebuss Mar 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

We should opt for kebab-case for consistency with other appearances.

Suggested change
appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';

Copy link
Member

@layershifter layershifter Mar 4, 2022

Choose a reason for hiding this comment

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

@andrefcdias It also not aligned in other components (Input, Select):

fluentui/packages/react-select/src/components/Select/Select.types.ts

Line 36 in 3f3ef91

appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';

fluentui/packages/react-input/src/components/Input/Input.types.ts

Line 57 in 3f3ef91

appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';

Would you mind to create an issue for this problem?

layershifter
layershifter reviewed Mar 4, 2022
View reviewed changes
layershifter
layershifter reviewed Mar 4, 2022
View reviewed changes
packages/react-textarea/Spec.md Outdated
};
```

The auto-resize feature is known to be unstable from v8 and tricky to implement. [As mentioned by ecraig12345](https://github.com/microsoft/fluentui/pull/21898#discussion_r816418917), we've been trying prioritize getting the components ready for production and may have to leave out some features for the initial version.
Copy link
Member

@layershifter layershifter Mar 4, 2022

Choose a reason for hiding this comment

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

Autosize feature is tricky for true, from my past experience it's better to have compatibility with third party libraries that handle it properly. For example, https://github.com/Andarist/react-textarea-autosize.

@sopranopillow @khmakoto
Update packages/react-textarea/Spec.md
240f28f 
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
spmonahan
spmonahan reviewed Mar 7, 2022
View reviewed changes
@sopranopillow sopranopillow merged commit b95b85b into microsoft:master Mar 7, 2022
@sopranopillow sopranopillow deleted the react-textarea-spec branch March 7, 2022 22:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@micahgodbolt micahgodbolt micahgodbolt left review comments

@khmakoto khmakoto khmakoto approved these changes

@layershifter layershifter layershifter approved these changes

@JustSlone JustSlone JustSlone approved these changes

@spmonahan spmonahan spmonahan approved these changes

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

+1 more reviewer

@theerebuss theerebuss theerebuss left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

@micahgodbolt micahgodbolt

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

9 participants

@sopranopillow @fabricteam @micahgodbolt @ecraig12345 @khmakoto @layershifter @theerebuss @JustSlone @spmonahan