From 7d242f2cd542b80a6d225ee8073baee0af6835d6 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 21 Sep 2022 17:42:14 -0600
Subject: [PATCH 1/3] fix: Deprecate filled with shadow appearance variants.

---
 .../src/components/Input/Input.types.ts       |  2 ++
 .../src/components/Input/useInput.ts          | 11 ++++++++++
 .../stories/Input/InputAppearance.stories.tsx | 12 ----------
 .../src/components/Textarea/Textarea.types.ts |  2 ++
 .../src/components/Textarea/useTextarea.ts    | 11 ++++++++++
 .../components/Textarea/useTextareaStyles.ts  |  2 --
 .../Textarea/TextareaAppearance.stories.tsx   | 22 -------------------
 7 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/packages/react-components/react-input/src/components/Input/Input.types.ts b/packages/react-components/react-input/src/components/Input/Input.types.ts
index 4cf9e1181cb1cf..79a8a8500f4aed 100644
--- a/packages/react-components/react-input/src/components/Input/Input.types.ts
+++ b/packages/react-components/react-input/src/components/Input/Input.types.ts
@@ -47,6 +47,8 @@ export type InputProps = Omit<
   /**
    * Controls the colors and borders of the input.
    * @default 'outline'
+   *
+   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
    */
   appearance?:
     | 'outline'
diff --git a/packages/react-components/react-input/src/components/Input/useInput.ts b/packages/react-components/react-input/src/components/Input/useInput.ts
index c4ac4570e62ca7..e13bbcd0368d12 100644
--- a/packages/react-components/react-input/src/components/Input/useInput.ts
+++ b/packages/react-components/react-input/src/components/Input/useInput.ts
@@ -19,6 +19,17 @@ import type { InputProps, InputState } from './Input.types';
 export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {
   const { size = 'medium', appearance = 'outline', onChange } = props;
 
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      "The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" +
+        ' future.',
+    );
+  }
+
   const [value, setValue] = useControllableState({
     state: props.value,
     defaultState: props.defaultValue,
diff --git a/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx b/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx
index 424e04d98aa11c..ecb1a7620ce7ba 100644
--- a/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx
+++ b/packages/react-components/react-input/src/stories/Input/InputAppearance.stories.tsx
@@ -32,8 +32,6 @@ export const Appearance = () => {
   const underlineId = useId('input-underline');
   const filledLighterId = useId('input-filledLighter');
   const filledDarkerId = useId('input-filledDarker');
-  const filledLighterShadowId = useId('input-filledLighterShadow');
-  const filledDarkerShadowId = useId('input-filledDarkerShadow');
   const styles = useStyles();
 
   return (
@@ -57,16 +55,6 @@ export const Appearance = () => {
         <Label htmlFor={filledDarkerId}>Filled darker appearance</Label>
         <Input appearance="filled-darker" id={filledDarkerId} />
       </div>
-
-      <div className={mergeClasses(styles.field, styles.filledLighter)}>
-        <Label htmlFor={filledLighterShadowId}>Filled lighter appearance with shadow</Label>
-        <Input appearance="filled-lighter-shadow" id={filledLighterShadowId} />
-      </div>
-
-      <div className={mergeClasses(styles.field, styles.filledDarker)}>
-        <Label htmlFor={filledDarkerShadowId}>Filled darker appearance with shadow</Label>
-        <Input appearance="filled-darker-shadow" id={filledDarkerShadowId} />
-      </div>
     </div>
   );
 };
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 2d5e48c7132852..7d1f1483b11432 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
@@ -27,6 +27,8 @@ export type TextareaProps = Omit<
    * Styling the Textarea should use.
    *
    * @default outline
+   *
+   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
    */
   appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
 
diff --git a/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts b/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts
index 27fed0c6c9b919..6f012a5f7cd278 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextarea.ts
@@ -19,6 +19,17 @@ import type { TextareaProps, TextareaState } from './Textarea.types';
 export const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {
   const { size = 'medium', appearance = 'outline', resize = 'none', onChange } = props;
 
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')
+  ) {
+    // eslint-disable-next-line no-console
+    console.error(
+      "The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" +
+        ' future.',
+    );
+  }
+
   const [value, setValue] = useControllableState({
     state: props.value,
     defaultState: props.defaultValue,
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 b87e5adb72547c..f2afe781e9f98b 100644
--- a/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
+++ b/packages/react-components/react-textarea/src/components/Textarea/useTextareaStyles.ts
@@ -114,13 +114,11 @@ const useRootStyles = makeStyles({
   'filled-lighter': {
     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),
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 a6373aee02004a..1dcace710fefa8 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,9 +35,7 @@ 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 (
@@ -56,26 +54,6 @@ 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 376c140ba86ea34cf8f1fb2d618b895ca9b4d150 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 21 Sep 2022 17:44:50 -0600
Subject: [PATCH 2/3] change files

---
 ...i-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json | 7 +++++++
 ...eact-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
 create mode 100644 change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json

diff --git a/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json b/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
new file mode 100644
index 00000000000000..ae35f35403164c
--- /dev/null
+++ b/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: Removing filled with shadow appearance variant.",
+  "packageName": "@fluentui/react-input",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json b/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json
new file mode 100644
index 00000000000000..0fea204ac7b3ac
--- /dev/null
+++ b/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Removing filled with shadow appearance variant.",
+  "packageName": "@fluentui/react-textarea",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

From b4077e21af85b5026b3b10d5a934532b655079a1 Mon Sep 17 00:00:00 2001
From: Esteban Munoz <esteban.230@hotmail.com>
Date: Wed, 21 Sep 2022 17:49:19 -0600
Subject: [PATCH 3/3] wording

---
 ...uentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json | 2 +-
 ...tui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json b/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
index ae35f35403164c..91b1a59be3150e 100644
--- a/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
+++ b/change/@fluentui-react-input-7cb0a348-cba2-4166-a8a0-9e173e884bd0.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "chore: Removing filled with shadow appearance variant.",
+  "comment": "chore: Deprecating filled with shadow appearance variant.",
   "packageName": "@fluentui/react-input",
   "email": "esteban.230@hotmail.com",
   "dependentChangeType": "patch"
diff --git a/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json b/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json
index 0fea204ac7b3ac..de966869cc622f 100644
--- a/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json
+++ b/change/@fluentui-react-textarea-e5a09262-3430-4d49-b351-e92d50119fd4.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "chore: Removing filled with shadow appearance variant.",
+  "comment": "chore: Deprecating filled with shadow appearance variant.",
   "packageName": "@fluentui/react-textarea",
   "email": "esteban.230@hotmail.com",
   "dependentChangeType": "patch"