From b5ff32ee9b8cc7c501dcd7e37e20b8f8fc5133a3 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 12 May 2023 12:25:18 -0700 Subject: [PATCH 1/5] isolating disabled styles --- .../src/components/Textarea/useTextareaStyles.styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts index 91f4350cf545f4..aa3c03da9442e3 100644 --- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts +++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.styles.ts @@ -32,6 +32,7 @@ const useRootStyles = makeStyles({ backgroundColor: tokens.colorTransparentBackground, ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeDisabled), [`& > textarea`]: { + color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', '::placeholder': { color: tokens.colorNeutralForegroundDisabled, @@ -244,9 +245,9 @@ export const useTextareaStyles_unstable = (state: TextareaState): TextareaState state.root.className = mergeClasses( textareaClassNames.root, rootStyles.base, - rootStyles[appearance], - filled && rootStyles.filled, disabled && rootStyles.disabled, + !disabled && filled && rootStyles.filled, + !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, From 795f71dfcfe19d7c6f9245a48b15ddeccb438aa1 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 12 May 2023 12:26:29 -0700 Subject: [PATCH 2/5] change files --- ...eact-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json diff --git a/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json b/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json new file mode 100644 index 00000000000000..745a8a6b431502 --- /dev/null +++ b/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Don't remove outline when filled and disabled and apply correct disabled color to text.", + "packageName": "@fluentui/react-textarea", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} From 94808caa2a92185cd09ec0ec64ad16e5fbf6f44a Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Fri, 12 May 2023 13:31:18 -0700 Subject: [PATCH 3/5] Update change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com> --- ...tui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json b/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json index 745a8a6b431502..e6ef814ed6ae7e 100644 --- a/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json +++ b/change/@fluentui-react-textarea-5bff6329-66e1-4f78-b54e-615647eb847c.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fix: Don't remove outline when filled and disabled and apply correct disabled color to text.", + "comment": "fix: When Textarea is disabled, make the text gray and add an outline for the filled appearance.", "packageName": "@fluentui/react-textarea", "email": "esteban.230@hotmail.com", "dependentChangeType": "patch" From b64d010be01c861160562e5d4f858de6a02c0d80 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 12 May 2023 16:12:06 -0700 Subject: [PATCH 4/5] adding vr-tests for disabled appearance and value states --- .../src/stories/Textarea.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx index bdb63be8204ba1..53e15ff3bd894e 100644 --- a/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Textarea.stories.tsx @@ -37,7 +37,11 @@ storiesOf('Textarea Converged', module)