feat(react-textarea): Add shadow variant of filled appearance (#24512)

* feat: Adding filled with shadow appearance. * change files * updating appearance background for filled examples
microsoft · Sep 15, 2022 · 151520d · 151520d
1 parent 066df30
commit 151520d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 2 deletions.
diff --git a/change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json b/change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Adding filled with shadow appearance.",
+  "packageName": "@fluentui/react-textarea",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-textarea/etc/react-textarea.api.md b/packages/react-components/react-textarea/etc/react-textarea.api.md
@@ -22,7 +22,7 @@ export const textareaClassNames: SlotClassNames<TextareaSlots>;
 
 // @public
 export type TextareaProps = Omit<ComponentProps<Partial<TextareaSlots>, 'textarea'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
-    appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
+    appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
     defaultValue?: string;
     onChange?: (ev: React_2.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;
     resize?: 'none' | 'horizontal' | 'vertical' | 'both';

diff --git a/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts b/packages/react-components/react-textarea/src/components/Textarea/Textarea.types.ts
@@ -28,7 +28,7 @@ export type TextareaProps = Omit<
    *
    * @default outline
    */
-  appearance?: 'outline' | 'filled-darker' | 'filled-lighter';
+  appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
 
   /**
    * The default value of the Textarea.

diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
@@ -115,6 +115,18 @@ const useRootStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
   },
 
+  'filled-darker-shadow': {
+    backgroundColor: tokens.colorNeutralBackground3,
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
+    boxShadow: tokens.shadow2,
+  },
+
+  'filled-lighter-shadow': {
+    backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
+    boxShadow: tokens.shadow2,
+  },
+
   outline: {
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),

diff --git a/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx b/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx
@@ -35,7 +35,9 @@ const useStyles = makeStyles({
 export const Appearance = () => {
   const outlineId = useId('textarea-outline');
   const filledDarkerId = useId('textarea-filleddarker');
+  const filledDarkerShadowId = useId('textarea-filleddarkershadow');
   const filledLighterId = useId('textarea-filledlighter');
+  const filledLighterShadowId = useId('textarea-filledlightershadow');
   const styles = useStyles();
 
   return (
@@ -54,6 +56,26 @@ export const Appearance = () => {
         <Label htmlFor={filledLighterId}>Textarea with Filled Lighter appearance.</Label>
         <Textarea id={filledLighterId} appearance="filled-lighter" placeholder="type here..." resize="both" />
       </div>
+
+      <div className={styles.filledDarker}>
+        <Label htmlFor={filledDarkerShadowId}>Textarea with Filled Darker with shadow appearance.</Label>
+        <Textarea
+          id={filledDarkerShadowId}
+          appearance="filled-darker-shadow"
+          placeholder="type here..."
+          resize="both"
+        />
+      </div>
+
+      <div className={styles.filledLighter}>
+        <Label htmlFor={filledLighterShadowId}>Textarea with Filled Lighter with shadow appearance.</Label>
+        <Textarea
+          id={filledLighterShadowId}
+          appearance="filled-lighter-shadow"
+          placeholder="type here..."
+          resize="both"
+        />
+      </div>
     </div>
   );
 };