chore(react-input, react-textarea): Deprecating filled with shadow ap…

…pearance variants (#24900) * fix: Deprecate filled with shadow appearance variants. * change files * wording
microsoft · Sep 27, 2022 · 316aa1e · 316aa1e
1 parent adea89e
commit 316aa1e
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 36 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
@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "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
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "chore: Deprecating filled with shadow appearance variant.",
+ "packageName": "@fluentui/react-textarea",
+ "email": "esteban.230@hotmail.com",
+ "dependentChangeType": "patch"
+}
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
  );
 };