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(FormTextArea): Add new FormTextArea component #16660

Merged

Conversation

assuncaocharles
Copy link
Contributor

Pull request checklist

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

Description of changes

Add new <FormTextArea /> component

Partially solves #16274

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 27, 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 e908851:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 27, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 818 817 5000
BaseButtonCompat mount 870 899 5000
Breadcrumb mount 43078 43203 5000
Checkbox mount 1469 1462 5000
CheckboxBase mount 1218 1234 5000
ChoiceGroup mount 4689 4627 5000
ComboBox mount 951 943 1000
CommandBar mount 10008 10045 1000
ContextualMenu mount 6011 6019 1000
DefaultButtonCompat mount 1098 1124 5000
DetailsRow mount 3622 3610 5000
DetailsRowFast mount 3628 3632 5000
DetailsRowNoStyles mount 3440 3415 5000
Dialog mount 1458 1442 1000
DocumentCardTitle mount 1821 1830 1000
Dropdown mount 3255 3277 5000
FocusTrapZone mount 1794 1776 5000
FocusZone mount 1805 1849 5000
IconButtonCompat mount 1728 1697 5000
Label mount 325 341 5000
Layer mount 1731 1731 5000
Link mount 467 459 5000
MakeStyles mount 2161 2147 50000
MenuButtonCompat mount 1427 1435 5000
MessageBar mount 1955 1960 5000
Nav mount 3224 3201 1000
OverflowSet mount 998 1037 5000
Panel mount 1389 1380 1000
Persona mount 823 848 1000
Pivot mount 1372 1396 1000
PrimaryButtonCompat mount 1266 1235 5000
Rating mount 7292 7400 5000
SearchBox mount 1292 1292 5000
Shimmer mount 2449 2487 5000
Slider mount 1843 1851 5000
SpinButton mount 4907 4901 5000
Spinner mount 417 412 5000
SplitButtonCompat mount 3129 3053 5000
Stack mount 495 495 5000
StackWithIntrinsicChildren mount 1503 1491 5000
StackWithTextChildren mount 4393 4422 5000
SwatchColorPicker mount 9996 10120 5000
Tabs mount 1347 1379 1000
TagPicker mount 2736 2704 5000
TeachingBubble mount 11399 11412 5000
Text mount 412 405 5000
TextField mount 1347 1345 5000
ThemeProvider mount 2151 2159 5000
ThemeProvider virtual-rerender 643 643 5000
Toggle mount 794 786 5000
button mount 689 688 5000
buttonNative mount 105 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.17 0.49 0.35:1 2000 337
🦄 Button.Fluent 0.11 0.2 0.55:1 5000 562
🔧 Checkbox.Fluent 0.63 0.33 1.91:1 1000 634
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 795
🔧 Dropdown.Fluent 2.95 0.39 7.56:1 1000 2954
🔧 Icon.Fluent 0.13 0.06 2.17:1 5000 663
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 387
🔧 Slider.Fluent 1.6 0.44 3.64:1 1000 1595
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 375
🦄 Tooltip.Fluent 0.11 0.87 0.13:1 5000 574

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ImageMinimalPerf.default 408 378 1.08:1
Text.Fluent 375 349 1.07:1
TableMinimalPerf.default 438 415 1.06:1
AttachmentMinimalPerf.default 169 161 1.05:1
BoxMinimalPerf.default 385 368 1.05:1
AvatarMinimalPerf.default 214 205 1.04:1
IconMinimalPerf.default 686 661 1.04:1
Image.Fluent 387 372 1.04:1
ButtonUseCssNestingPerf.default 1103 1070 1.03:1
ChatMinimalPerf.default 626 608 1.03:1
DividerMinimalPerf.default 374 364 1.03:1
HeaderSlotsPerf.default 788 765 1.03:1
LabelMinimalPerf.default 439 425 1.03:1
ListCommonPerf.default 654 637 1.03:1
MenuButtonMinimalPerf.default 1589 1547 1.03:1
TreeWith60ListItems.default 186 181 1.03:1
Icon.Fluent 663 645 1.03:1
ButtonMinimalPerf.default 182 178 1.02:1
ButtonOverridesMissPerf.default 1703 1674 1.02:1
ButtonUseCssPerf.default 820 804 1.02:1
DropdownManyItemsPerf.default 727 716 1.02:1
HeaderMinimalPerf.default 386 377 1.02:1
ListMinimalPerf.default 500 491 1.02:1
PopupMinimalPerf.default 708 697 1.02:1
ProviderMergeThemesPerf.default 1633 1608 1.02:1
ReactionMinimalPerf.default 416 406 1.02:1
RefMinimalPerf.default 252 248 1.02:1
TextMinimalPerf.default 368 361 1.02:1
ButtonSlotsPerf.default 589 581 1.01:1
CardMinimalPerf.default 570 564 1.01:1
ChatDuplicateMessagesPerf.default 372 367 1.01:1
CheckboxMinimalPerf.default 2834 2797 1.01:1
DialogMinimalPerf.default 795 786 1.01:1
DropdownMinimalPerf.default 2954 2936 1.01:1
EmbedMinimalPerf.default 4123 4074 1.01:1
FlexMinimalPerf.default 309 307 1.01:1
SplitButtonMinimalPerf.default 3732 3691 1.01:1
TableManyItemsPerf.default 2038 2014 1.01:1
TooltipMinimalPerf.default 819 814 1.01:1
Avatar.Fluent 337 334 1.01:1
Dialog.Fluent 795 787 1.01:1
AccordionMinimalPerf.default 161 161 1:1
DatepickerMinimalPerf.default 46205 46233 1:1
FormMinimalPerf.default 416 414 1:1
GridMinimalPerf.default 356 355 1:1
InputMinimalPerf.default 1288 1289 1:1
ItemLayoutMinimalPerf.default 1212 1210 1:1
LoaderMinimalPerf.default 721 719 1:1
ProviderMinimalPerf.default 970 973 1:1
StatusMinimalPerf.default 728 729 1:1
CustomToolbarPrototype.default 3743 3753 1:1
ToolbarMinimalPerf.default 933 934 1:1
Button.Fluent 562 564 1:1
Checkbox.Fluent 634 636 1:1
Slider.Fluent 1595 1593 1:1
AnimationMinimalPerf.default 418 421 0.99:1
CarouselMinimalPerf.default 476 481 0.99:1
RadioGroupMinimalPerf.default 445 450 0.99:1
SegmentMinimalPerf.default 360 365 0.99:1
SliderMinimalPerf.default 1564 1587 0.99:1
TextAreaMinimalPerf.default 482 488 0.99:1
Tooltip.Fluent 574 578 0.99:1
AttachmentSlotsPerf.default 1185 1205 0.98:1
ListWith60ListItems.default 614 629 0.98:1
MenuMinimalPerf.default 864 884 0.98:1
TreeMinimalPerf.default 766 780 0.98:1
VideoMinimalPerf.default 633 649 0.98:1
Dropdown.Fluent 2954 3002 0.98:1
SkeletonMinimalPerf.default 360 373 0.97:1
ChatWithPopoverPerf.default 424 441 0.96:1
LayoutMinimalPerf.default 407 423 0.96:1
AlertMinimalPerf.default 286 300 0.95:1
ListNestedPerf.default 547 590 0.93:1
PortalMinimalPerf.default 155 167 0.93:1
RosterPerf.default 1109 1213 0.91:1

@size-auditor
Copy link

size-auditor bot commented Jan 27, 2021

Asset size changes

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

Baseline commit: 6d8be1da4da333d1a2095f11dd5e61dba3bb6170 (build)

…Area.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…ExampleErrorAndSuccessful.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
@assuncaocharles assuncaocharles merged commit a8004b1 into microsoft:master Jan 27, 2021
@assuncaocharles assuncaocharles deleted the feat/add-form-textarea branch January 27, 2021 15:33
assuncaocharles added a commit to assuncaocharles/fluentui that referenced this pull request Feb 22, 2021
* feat(FormTextArea): add new FormTextArea component

* feat(FormTextArea): add test

* feat(FormTextArea): change type

* feat(FormTextArea): add changelog

* feat(TextArea): fix changelog

* Update packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(TextArea): add error exampel

* Update packages/fluentui/docs/src/examples/components/Form/Usage/FormExampleErrorAndSuccessful.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
assuncaocharles added a commit that referenced this pull request Feb 22, 2021
* fix(useEventListener): use a proper .event and clean up properly (#16991)

* fix(useEventListener): use a proper .event and clean up properly

* update impl to use refs

* revert refs, use settimeout reset

* add changelog entry

* Export tree context (#16891)

* export tree context

* update changelog

* fix(Dropdown): Add missing prop type (#16920)

* Add missing prop type

* Add changelog

* fix(Tree): change selectionIndicator from visibility:hidden to display:none (#16922)

…y:none

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

As described in title.
`visibility: hidden` cause problem because the selectionIndicator still takes width

(optional)

* fix(useEventListener): avoid double handlers calls in React 17 (#16514)

* fix(useEventListener): avoid double handlers calls in React 17

* add changelog entry

* fix(MergeVariablesOverrides): return variables if they are defined (#16560)

* fix(MergeVariablesOverrides): return variables if they are defined

* fix(MergeVariablesOverrides): add changelog

* Update packages/fluentui/react-bindings/src/utils/mergeVariablesOverrides.ts

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* fix(MergeVariablesOverrides): check for plain objects

* fix(MergeVariablesOverrides): fix test

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* fix(react-context-selector): fix React warnings about setState() (#16714)

* WIP on fixing contextSelector

* fix(ContextSelector): fix

* fix(ContextSelector): selectors

* fix(ContextSelector): selectors tests fix

* fix(ContextSelector): changelog

* fix(ContextSelector): fix rollup

* fix(ContextSelector): flatten context value

* fix(ContextSelector): add comments

* Update packages/fluentui/CHANGELOG.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* fix(ContextSelector): move scheduler to peerDependencies

* Update packages/fluentui/react-context-selector/src/types.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/types.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/types.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/createContext.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/src/useContextSelector.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-context-selector/package.json

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Button): disabledFocusable for v0 Button (#16419)

* button disabled focusable for v0

* fixes

* changelog

* disable  pointer events only for disabled, not for disabledFocusable

* fix

* cleanup examples

* small revert

Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>

* adding Channel Share Icon for ODSP (#16619)

* adding Channel Share Icon

* feat(FormTextArea): Add new FormTextArea component (#16660)

* feat(FormTextArea): add new FormTextArea component

* feat(FormTextArea): add test

* feat(FormTextArea): change type

* feat(FormTextArea): add changelog

* feat(TextArea): fix changelog

* Update packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(TextArea): add error exampel

* Update packages/fluentui/docs/src/examples/components/Form/Usage/FormExampleErrorAndSuccessful.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(checkbox): add indeterminate support (#16081)

* feat(checkbox): add indeterminate support

* feat(checkbox): add props comment

* feat(checkbox): add best practices

* feat(checkbox): add changelog

* feat(checkbox): rename indicator

* feat(Checkbox): add mixed value support

* feat(Checkbox): remove inderminate prop

* feat(Checkbox): remove inderminate from state

* feat(Checkbox): remove cast

* Update packages/fluentui/CHANGELOG.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Checkbox): remove indeterminate from behavior

* feat(Checkbox): remove unecessary check

* feat(Checkbox): rename best practices

* feat(Checkbox): remove indeterminate from styles

* feat(Checkbox): rename example

* feat(Checkbox): update contorl

* Update packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update packages/fluentui/docs/src/examples/components/Checkbox/States/index.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* feat(Checkbox): update styles

* feat(Checkbox): screener

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Adding imageAltText icon (#16884)

* adding imageAltText icon

* fix(felaRenderer): exclude className for CKEditor to avoid collisions (#17025)

* fix(felaRenderer): exclude className for CKEditor to avoid collisions

* add changelog entry

* Update packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx

* Update packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx

* fix(useEventListener): use a proper .event and clean up properly (#16991)

* fix(useEventListener): use a proper .event and clean up properly

* update impl to use refs

* revert refs, use settimeout reset

* add changelog entry

* fix(popupBehavior): remove role='complementary' from inline popup (#17032)

* fix(popupBehavior): remove role='complementary' from inline popup

* changelog

* add popup test

* chore: Automated release pipeline for fluent N* (#16866)

* add pack-nightly task

* Add nightly package to docsite

* Add post publish validation script

* Add canary release script

* Fix dep url when pack nightly tarball

* yaml pipeline

* update redirect

* fix pipeline

* rename

* nightly build fix

* remove todo

* gzip true

* make dropdown display nightly version properly

* update comment

* update pipeline

* put 0.0.0-nightly into const

* Update scripts/tasks/fluentui-publish.ts

Co-authored-by: ling1726 <lingfan.gao@microsoft.com>

* Update azure-pipelines.release-fluentui.yml

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* update pipeline

* update pipeline

* update pipeline

* hide clip board for nightly release

* Update azure-pipelines.release-fluentui.yml

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* Update scripts/tasks/fluentui-publish.ts

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* Update scripts/tasks/fluentui-publish.ts

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

* update packtarball

* test pipeline

* Update falsy check of nightlyRelease

* fix doc build

* fix

* remove cruft

* separate fluent ui tasks

* store nightly tarballs in Build.ArtifactStagingDirectory

* cleanup after tar; add --no-verify-access

* add no-verify-access comment

* update after trying out real release

* add pipeline name

* update pipeline description

* Update scripts/fluentui-publish/index.ts

Co-authored-by: ling1726 <lingfan.gao@microsoft.com>

* fix screener build

* test adding nightly date to nightly tarball versions

* Update scripts/fluentui-publish/index.ts

Co-authored-by: ling1726 <lingfan.gao@microsoft.com>

* use newest folder for docsite

* Revert "use newest folder for docsite"

This reverts commit 2b8af70.

* make codesandbox consistent for nightly release

Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Amber <yuanboxue@microsoft.com>
Co-authored-by: Roman Sudarikov <pompomon@users.noreply.github.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Juraj Kapsiar <jurokapsiar@gmail.com>
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Andrew Martin <andmarti@microsoft.com>
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants