fix: Updated Input stories to show appearance and disabled (microsoft…

…#32176)
GeoffCoxMSFT · Aug 1, 2024 · 102904a · 102904a
1 parent 3d0d61f
commit 102904a
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 23 deletions.
diff --git a/change/@fluentui-react-input-a0d70a8b-d328-4827-81af-cebe154a4b80.json b/change/@fluentui-react-input-a0d70a8b-d328-4827-81af-cebe154a4b80.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added comments on deprecated appearances",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts b/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts
@@ -187,10 +187,12 @@ const useRootStyles = makeStyles({
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
   },
+  // This shadow appearance is deprecated and will be removed in a future release.
   'filled-darker-shadow': {
     backgroundColor: tokens.colorNeutralBackground3,
     boxShadow: tokens.shadow2,
   },
+  // This shadow appearance is deprecated and will be removed in a future release.
   'filled-lighter-shadow': {
     backgroundColor: tokens.colorNeutralBackground1,
     boxShadow: tokens.shadow2,

diff --git a/packages/react-components/react-input/stories/src/Input/InputAppearance.stories.tsx b/packages/react-components/react-input/stories/src/Input/InputAppearance.stories.tsx
@@ -28,32 +28,33 @@ const useStyles = makeStyles({
 });
 
 export const Appearance = () => {
-  const outlineId = useId('input-outline');
-  const underlineId = useId('input-underline');
-  const filledLighterId = useId('input-filledLighter');
-  const filledDarkerId = useId('input-filledDarker');
+  const idPrefix = 'input-appearance-story';
+  const inputIds = {
+    default: useId(idPrefix),
+    underline: useId(idPrefix),
+    filledLighter: useId(idPrefix),
+    filledDarker: useId(idPrefix),
+  };
+
   const styles = useStyles();
 
   return (
     <div className={styles.base}>
       <div className={styles.field}>
-        <Label htmlFor={outlineId}>Outline appearance (default)</Label>
-        <Input appearance="outline" id={outlineId} />
+        <Label htmlFor={inputIds.default}>Outline appearance (default)</Label>
+        <Input appearance="outline" id={inputIds.default} />
       </div>
-
       <div className={styles.field}>
-        <Label htmlFor={underlineId}>Underline appearance</Label>
-        <Input appearance="underline" id={underlineId} />
+        <Label htmlFor={inputIds.underline}>Underline appearance</Label>
+        <Input appearance="underline" id={inputIds.underline} />
       </div>
-
       <div className={mergeClasses(styles.field, styles.filledLighter)}>
-        <Label htmlFor={filledLighterId}>Filled lighter appearance</Label>
-        <Input appearance="filled-lighter" id={filledLighterId} />
+        <Label htmlFor={inputIds.filledLighter}>Filled lighter appearance</Label>
+        <Input appearance="filled-lighter" id={inputIds.filledLighter} />
       </div>
-
       <div className={mergeClasses(styles.field, styles.filledDarker)}>
-        <Label htmlFor={filledDarkerId}>Filled darker appearance</Label>
-        <Input appearance="filled-darker" id={filledDarkerId} />
+        <Label htmlFor={inputIds.filledDarker}>Filled darker appearance</Label>
+        <Input appearance="filled-darker" id={inputIds.filledDarker} />
       </div>
     </div>
   );

diff --git a/packages/react-components/react-input/stories/src/Input/InputDisabled.stories.tsx b/packages/react-components/react-input/stories/src/Input/InputDisabled.stories.tsx
@@ -1,26 +1,81 @@
 import * as React from 'react';
-import { makeStyles, useId, Input, Label } from '@fluentui/react-components';
+import { makeStyles, useId, Input, Label, tokens, mergeClasses, Switch } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
-    // Stack the label above the field
     display: 'flex',
     flexDirection: 'column',
-    // Use 2px gap below the label (per the design system)
-    gap: '2px',
-    // Prevent the example from taking the full width of the page (optional)
     maxWidth: '400px',
   },
+  field: {
+    display: 'grid',
+    gridRowGap: tokens.spacingVerticalXXS,
+    marginTop: tokens.spacingVerticalMNudge,
+    padding: tokens.spacingHorizontalMNudge,
+  },
+  filledLighter: {
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
+    '> label': {
+      color: tokens.colorNeutralForegroundInverted2,
+    },
+  },
+  filledDarker: {
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
+    '> label': {
+      color: tokens.colorNeutralForegroundInverted2,
+    },
+  },
+  toggle: {
+    marginTop: tokens.spacingVerticalXL,
+  },
 });
 
 export const Disabled = () => {
-  const inputId = useId('input');
+  const idPrefix = 'input-disabled-story';
+  const inputIds = {
+    default: useId(idPrefix),
+    underline: useId(idPrefix),
+    filledLighter: useId(idPrefix),
+    filledDarker: useId(idPrefix),
+  };
   const styles = useStyles();
 
+  const [disabled, setDisabled] = React.useState(true);
+
   return (
     <div className={styles.root}>
-      <Label htmlFor={inputId}>Disabled input</Label>
-      <Input disabled id={inputId} defaultValue="disabled value" />
+      <div className={styles.field}>
+        <Label htmlFor={inputIds.default}>Disabled (default outline appearance)</Label>
+        <Input disabled={disabled} id={inputIds.default} defaultValue="disabled value" />
+      </div>
+      <div className={styles.field}>
+        <Label htmlFor={inputIds.underline}>Disabled (underline appearance)</Label>
+        <Input appearance="underline" disabled={disabled} id={inputIds.underline} defaultValue="disabled value" />
+      </div>
+      <div className={mergeClasses(styles.field, styles.filledLighter)}>
+        <Label htmlFor={inputIds.filledLighter}>Disabled (filled lighter appearance)</Label>
+        <Input
+          appearance="filled-lighter"
+          disabled={disabled}
+          id={inputIds.filledLighter}
+          defaultValue="disabled value"
+        />
+      </div>
+      <div className={mergeClasses(styles.field, styles.filledDarker)}>
+        <Label htmlFor={inputIds.filledDarker}>Disabled (filled darker appearance)</Label>
+        <Input
+          appearance="filled-darker"
+          disabled={disabled}
+          id={inputIds.filledDarker}
+          defaultValue="disabled value"
+        />
+      </div>
+      <Switch
+        className={styles.toggle}
+        checked={disabled}
+        label="Disabled"
+        onChange={(_e, data) => setDisabled(data.checked)}
+      />
     </div>
   );
 };