From e1f61f7c1bfb5c412e7d103d22e316842abf572f Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 24 Aug 2022 12:19:55 -0600
Subject: [PATCH 1/3] feat: Adding filled with shadow appearance.

---
 .../react-textarea/etc/react-textarea.api.md  |  2 +-
 .../src/components/Textarea/Textarea.types.ts |  2 +-
 .../components/Textarea/useTextareaStyles.ts  | 12 ++++++++++
 .../Textarea/TextareaAppearance.stories.tsx   | 22 +++++++++++++++++++
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-textarea/etc/react-textarea.api.md b/packages/react-components/react-textarea/etc/react-textarea.api.md
index bb5841e720352..033194d9e76a7 100644
--- 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
index ef54e1aced954..2d5e48c713285 100644
--- 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
index 3b341e7de1eb0..76b0881dad42f 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
@@ -112,6 +112,18 @@ const useRootStyles = makeStyles({
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStrokeInteractive),
   },
 
+  '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
index 37a036322e03e..c7854cb481561 100644
--- 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>
   );
 };

From 554d0c755771b8ce0cc8734269f78e49f2eb9bc2 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 24 Aug 2022 12:21:35 -0600
Subject: [PATCH 2/3] change files

---
 ...eact-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json

diff --git a/change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json b/change/@fluentui-react-textarea-0dad2dd6-d586-4358-ba42-c9a6b9a0bfc9.json
new file mode 100644
index 0000000000000..a4fac4bd0e068
--- /dev/null
+++ 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": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

From 4d4fec6b1d9b95eb80c50b17986aba236cfbfdbe Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Thu, 8 Sep 2022 10:49:01 -0600
Subject: [PATCH 3/3] updating appearance background for filled examples

---
 .../src/stories/Textarea/TextareaAppearance.stories.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index c7854cb481561..7ff7d9ca027a8 100644
--- a/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx
+++ b/packages/react-components/react-textarea/src/stories/Textarea/TextareaAppearance.stories.tsx
@@ -19,13 +19,13 @@ const useStyles = makeStyles({
     },
   },
   filledLighter: {
-    backgroundColor: tokens.colorPaletteBerryForeground1,
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
     '> label': {
       color: tokens.colorNeutralForegroundInverted,
     },
   },
   filledDarker: {
-    backgroundColor: tokens.colorPaletteBerryForeground1,
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
     '> label': {
       color: tokens.colorNeutralForegroundInverted,
     },