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

Textarea: Adding implementation #22096

Merged

sopranopillow merged 27 commits into microsoft:master from sopranopillow:react-textarea-implementation

Mar 31, 2022

Contributor

sopranopillow commented Mar 14, 2022 •

edited

Loading

PR Summary

This PR adds the implementation of Textarea with its styling completed. Tests, and bundle fixtures will be added in separate PRs.

Related Issue(s)

Textarea Convergence #21845

sopranopillow added 2 commits

March 14, 2022 17:35


          Adding textarea implementation

0a76330


          Merge branch 'master' of https://github.com/microsoft/fluentui into r…

5666f92

…eact-textarea-implementation

sopranopillow added Fluent UI react-components (v9) Component: Textarea labels

sopranopillow self-assigned this

sopranopillow mentioned this pull request

Textarea Convergence #21845

Closed

33 tasks

codesandbox-ci bot commented Mar 14, 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 6a6dc73:

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

Collaborator

fabricteam commented Mar 14, 2022 •

edited

Loading

📊 Bundle size report

_{🤖 This report was generated against a8d3d706c64077e7fd9465ab90648d2e0bf8eb82}

size-auditor bot commented Mar 14, 2022 •

edited

Loading

Asset size changes

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

Baseline commit: e6fc4828bde76695a598636a94bc28aac26f3d47 (build)


          updating snapshots

4a34d12

sopranopillow marked this pull request as ready for review

March 15, 2022 18:22

sopranopillow requested a review from a team as a code owner

March 15, 2022 18:22

spmonahan reviewed

View reviewed changes

packages/react-textarea/src/components/TextArea/useTextAreaStyles.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/index.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/useTextAreaStyles.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/TextArea.types.ts Outdated Show resolved Hide resolved


          adding requested changes

e049a51

sopranopillow requested review from spmonahan, khmakoto and ecraig12345

March 16, 2022 19:42

sopranopillow added 3 commits

March 16, 2022 13:52


          Merge branch 'master' of https://github.com/microsoft/fluentui into r…

730b7ed

…eact-textarea-implementation


          fixing conformance test

a4b19bb


          adding updated file

4e824e7

ecraig12345 reviewed

View reviewed changes

packages/react-textarea/src/components/TextArea/useTextAreaStyles.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/useTextAreaStyles.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/useTextAreaStyles.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/index.ts Outdated Show resolved Hide resolved

sopranopillow mentioned this pull request

Project: Finish TextArea implementation, testing, and stories. #22034

Closed

12 tasks


          adding focus indicator to react-tabster and updating tests for react-…

ab24056

…textarea

sopranopillow requested a review from a team as a code owner

March 17, 2022 23:22

sopranopillow requested review from ecraig12345 and micahgodbolt

March 17, 2022 23:23

sopranopillow added 2 commits

March 17, 2022 17:26


          Adding change files

ea797ac


          Merge branch 'master' of https://github.com/microsoft/fluentui into r…

f072bea

…eact-textarea-implementation

smhigley reviewed

View reviewed changes

packages/react-textarea/src/components/TextArea/useTextAreaStyles.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/useTextAreaStyles.ts Outdated

+                  height: textAreaHeight.small,
+                  ...shorthands.padding(
+                    '0',
+                    `calc(${spacingTokens.horizontal.mNudge} + ${spacingTokens.horizontal.xss})`,

Contributor

smhigley Mar 18, 2022 •

edited

Loading

Would it make sense to create a token like this:

textAreaHorizontalPadding = {
 small: smallspacingTokens.horizontal.mNudge + spacingTokens.horizontal.xss`,
 medium: etc.,
 large: etc.
}

in this file? That way we don't need the browser to run calc for us.

Contributor

spmonahan Mar 18, 2022

If the plan is for tokens to ultimately come from react-theme I think we'll need to use calc since those tokens resolve to CSS vars.

Member

ecraig12345 Mar 19, 2022

Do you know if there's a plan any time soon to add the spacing tokens to the theme? At least to me it seems like they obviously should be there, but they're not for some reason.

Member

ling1726 Mar 28, 2022

@miroslavstastny for spacing tokens in theme question

packages/react-textarea/src/stories/TextAreaSize.stories.tsx Outdated Show resolved Hide resolved

packages/react-textarea/src/stories/TextAreaUncontrolled.stories.tsx Outdated Show resolved Hide resolved

spmonahan reviewed

View reviewed changes

packages/react-textarea/src/components/TextArea/index.ts Outdated Show resolved Hide resolved

sopranopillow added 4 commits

March 28, 2022 16:50


          removing best practices and updating resize styles

da1fd65


          Updating :after to ::after

107430e


          Merge branch 'master' of https://github.com/microsoft/fluentui into r…

9c8a23e

…eact-textarea-implementation


          Updating tests

e99a9fd

sopranopillow changed the title ~~TextArea: Adding implementation.~~ Textarea: Adding implementation.

sopranopillow added 2 commits

March 30, 2022 11:48


          Removing useBottomFocusIndicator from tabster and input

5bb440e


          Merge branch 'master' of https://github.com/microsoft/fluentui into r…

db2401b

…eact-textarea-implementation

khmakoto reviewed

View reviewed changes

packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts Outdated Show resolved Hide resolved

khmakoto reviewed

View reviewed changes

packages/react-textarea/src/components/TextArea/index.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/TextArea.tsx Outdated Show resolved Hide resolved

sopranopillow added 2 commits

March 30, 2022 12:34


          updating textarea styles

7d25bac


          adding requested changes

523f3f8

khmakoto changed the title ~~Textarea: Adding implementation.~~ Textarea: Adding implementation

sopranopillow requested review from smhigley and spmonahan

March 30, 2022 18:39

Contributor Author

sopranopillow commented Mar 30, 2022

Making a note that TextArea will be renamed to Textarea in a follow-up PR.

khmakoto reviewed

View reviewed changes

packages/react-textarea/src/components/TextArea/TextArea.types.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/TextArea.types.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/TextArea.types.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/TextArea.types.ts Outdated Show resolved Hide resolved

packages/react-textarea/src/components/TextArea/TextArea.types.ts Outdated Show resolved Hide resolved

khmakoto approved these changes

View reviewed changes

sopranopillow added 5 commits

March 30, 2022 15:46


          renaming TextArea to Textarea

a248573


          Renaming files to Textarea

df6e763


          Merge branch 'master' of https://github.com/microsoft/fluentui into r…

d238cca

…eact-textarea-implementation


          Adding requested changes

8d34e20


          removing tabster from dependencies

d66574a

This was referenced Mar 31, 2022

Initial Spinner Implementation #22207

Merged

SpinButton implementation and styles #22233

Merged

micahgodbolt reviewed

View reviewed changes

packages/react-textarea/src/stories/TextareaControlled.stories.tsx Show resolved Hide resolved

micahgodbolt reviewed

View reviewed changes

packages/react-textarea/src/stories/TextareaControlled.stories.tsx Outdated Show resolved Hide resolved

micahgodbolt approved these changes

View reviewed changes


          updating stories styles

6a6dc73

sopranopillow merged commit bc4094d into microsoft:master

sopranopillow deleted the react-textarea-implementation branch

March 31, 2022 17:54

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

ling1726 ling1726 left review comments

khmakoto khmakoto approved these changes

micahgodbolt micahgodbolt approved these changes

ecraig12345 Awaiting requested review from ecraig12345

smhigley Awaiting requested review from smhigley

spmonahan Awaiting requested review from spmonahan

Labels

Component: Textarea Fluent UI react-components (v9)