From 66fabccd78414b51bf936507566b0f295237373c Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 7 Sep 2022 17:53:00 -0600 Subject: [PATCH 1/2] fix: Change filled appearances' normal state's token. --- .../src/components/Textarea/useTextareaStyles.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts index 3b341e7de1eb0c..039920dfbdf661 100644 --- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts +++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts @@ -102,14 +102,17 @@ const useRootStyles = makeStyles({ }, }, + filled: { + ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke), + ':hover,:focus-within': { + ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive), + }, + }, 'filled-darker': { backgroundColor: tokens.colorNeutralBackground3, - ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive), }, - 'filled-lighter': { backgroundColor: tokens.colorNeutralBackground1, - ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive), }, outline: { @@ -217,14 +220,16 @@ const useTextareaResizeStyles = makeStyles({ * Apply styling to the Textarea slots based on the state */ export const useTextareaStyles_unstable = (state: TextareaState): TextareaState => { - const disabled = state.textarea.disabled; const { size, appearance, resize } = state; + const disabled = state.textarea.disabled; + const filled = appearance.startsWith('filled'); const rootStyles = useRootStyles(); state.root.className = mergeClasses( textareaClassNames.root, rootStyles.base, rootStyles[appearance], + filled && rootStyles.filled, disabled && rootStyles.disabled, !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, From d8b6b7af15e18c848f24892e4f2b41c2fc87867a Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 7 Sep 2022 17:56:55 -0600 Subject: [PATCH 2/2] change files --- ...eact-textarea-a60f7be9-9011-4b41-81f6-b700be755b8e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-textarea-a60f7be9-9011-4b41-81f6-b700be755b8e.json diff --git a/change/@fluentui-react-textarea-a60f7be9-9011-4b41-81f6-b700be755b8e.json b/change/@fluentui-react-textarea-a60f7be9-9011-4b41-81f6-b700be755b8e.json new file mode 100644 index 00000000000000..23bcc3b52449ba --- /dev/null +++ b/change/@fluentui-react-textarea-a60f7be9-9011-4b41-81f6-b700be755b8e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Change filled appearances' normal state's token.", + "packageName": "@fluentui/react-textarea", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +}