fix(input): search and reveal adornments not disabled when input disa…

…bled (#4300)
lumada-design · Aug 23, 2024 · fceeb18 · fceeb18
1 parent 8e1685f
commit fceeb18
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 7 deletions.
diff --git a/packages/core/src/Forms/Adornment/Adornment.styles.tsx b/packages/core/src/Forms/Adornment/Adornment.styles.tsx
@@ -1,4 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 
 import { outlineStyles } from "../../utils/focusUtils";
 
@@ -19,4 +20,9 @@ export const { staticClasses, useClasses } = createClasses("HvAdornment", {
       ...outlineStyles,
     },
   },
+  disabled: {
+    "&$adornmentButton": { cursor: "not-allowed" },
+    "&$adornmentIcon": { cursor: "not-allowed" },
+    "& svg *.color0": { fill: theme.colors.secondary_60 },
+  },
 });
diff --git a/packages/core/src/Forms/Adornment/Adornment.tsx b/packages/core/src/Forms/Adornment/Adornment.tsx
@@ -62,7 +62,8 @@ export const HvAdornment = forwardRef<
   ) => {
     const { classes, cx } = useClasses(classesProp);
 
-    const { elementStatus = "" } = useContext(HvFormElementContext);
+    const { elementStatus = "", elementDisabled } =
+      useContext(HvFormElementContext);
 
     const { input } = useContext(HvFormElementDescriptorsContext);
 
@@ -82,12 +83,17 @@ export const HvAdornment = forwardRef<
           classes.root,
           classes.adornment,
           classes.adornmentButton,
-          { [classes.hideIcon]: !displayIcon },
+          {
+            [classes.hideIcon]: !displayIcon,
+            [classes.disabled]: elementDisabled,
+          },
           className,
         )}
         onClick={onClick}
         onMouseDown={(event) => event.preventDefault()}
         onKeyDown={noop}
+        disabled={elementDisabled}
+        aria-disabled={elementDisabled}
         {...others}
       >
         <div className={classes.icon}>{icon}</div>
@@ -100,7 +106,10 @@ export const HvAdornment = forwardRef<
           classes.root,
           classes.adornment,
           classes.adornmentIcon,
-          { [classes.hideIcon]: !displayIcon },
+          {
+            [classes.hideIcon]: !displayIcon,
+            [classes.disabled]: elementDisabled,
+          },
           className,
         )}
         role="presentation"

diff --git a/packages/core/src/Input/Input.stories.tsx b/packages/core/src/Input/Input.stories.tsx
@@ -23,8 +23,9 @@ const showcaseDecorator: Decorator = (Story) => (
   <div
     className={css({
       display: "flex",
-      justifyContent: "space-around",
+      justifyContent: "flex-start",
       flexFlow: "row wrap",
+      gap: theme.space.sm,
       "& > div": {
         width: 200,
       },
@@ -134,6 +135,14 @@ export const Variants: StoryObj<HvInputProps> = {
           placeholder="Enter password"
           validationMessages={validationMessages}
         />
+        <HvInput
+          disabled
+          type="password"
+          label="Disabled"
+          description="Enter password"
+          placeholder="Enter password"
+          validationMessages={validationMessages}
+        />
         <HvInput
           type="search"
           label="Search"
@@ -142,6 +151,15 @@ export const Variants: StoryObj<HvInputProps> = {
           validationMessages={validationMessages}
           onEnter={(event, value) => console.log("Searching", value)}
         />
+        <HvInput
+          disabled
+          type="search"
+          label="Disabled"
+          description="Search for a value"
+          placeholder="Search..."
+          validationMessages={validationMessages}
+          onEnter={(event, value) => console.log("Searching", value)}
+        />
         <HvInput
           required
           type="number"

diff --git a/packages/core/src/Input/Input.test.tsx b/packages/core/src/Input/Input.test.tsx
@@ -27,4 +27,34 @@ describe("Input", () => {
 
     expect(screen.getByRole("presentation")).toBeVisible();
   });
+
+  it("renders the adornment as disabled for the search when the input is disabled", () => {
+    render(
+      <HvInput
+        disabled
+        type="search"
+        label="My input"
+        placeholder="Type something..."
+        onEnter={() => {}}
+      />,
+    );
+
+    expect(screen.getByRole("searchbox")).toBeDisabled();
+    expect(screen.getByLabelText("Search")).toBeDisabled(); // role can't be used since the parent has aria-hidden
+  });
+
+  it("renders the adornment as disabled for the password when the input is disabled", () => {
+    render(
+      <HvInput
+        disabled
+        type="password"
+        label="My input"
+        placeholder="Type something..."
+        onEnter={() => {}}
+      />,
+    );
+
+    expect(screen.getByLabelText("My input")).toBeDisabled(); // can't find by role searchbox since password inputs don't have a role...
+    expect(screen.getByLabelText("Reveal password")).toBeDisabled(); // role can't be used since the parent has aria-hidden
+  });
 });
diff --git a/packages/core/src/Input/Input.tsx b/packages/core/src/Input/Input.tsx
@@ -164,11 +164,11 @@ export interface HvInputProps
   /** If `true` it should autofocus. */
   autoFocus?: boolean;
   /** If `true` the clear button is disabled. */
-  disableClear?: boolean;
+  disableClear?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button
   /** If `true` the reveal password button is disabled. Valid only when type is "password". */
-  disableRevealPassword?: boolean;
+  disableRevealPassword?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button
   /** If `true` the search button is disabled. Valid only when type is "search". */
-  disableSearchButton?: boolean;
+  disableSearchButton?: boolean; // TODO - rename in v6 since it doesn't disable but hides the button
   /**
    * If `true` the validation icon adornment is visible. Defaults to `false`.
    *