Merge pull request #6381 from Sage/FE-6224-textbox-disabled-icon

fix(textarea, textbox): display icon when component is disabled or readOnly
Sage · Nov 6, 2023 · ba95c6c · ba95c6c
2 parents 5ebfab8 + 6afe2d4
commit ba95c6c
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 17 deletions.
diff --git a/cypress/components/date/date.cy.tsx b/cypress/components/date/date.cy.tsx
@@ -527,6 +527,34 @@ context("Test for DateInput component", () => {
         .parent()
         .should("have.css", "max-width", "100%");
     });
+
+    it("should render Date with disabled prop", () => {
+      CypressMountWithProviders(<DateInputCustom disabled />);
+
+      dateInput().should("be.disabled").and("have.attr", "disabled");
+    });
+
+    it("should render Date icon with disabled style", () => {
+      CypressMountWithProviders(<DateInputCustom disabled />);
+
+      dateIcon()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
+    it("should render Date with read only prop", () => {
+      CypressMountWithProviders(<DateInputCustom readOnly />);
+
+      dateInput().should("have.attr", "readOnly");
+    });
+
+    it("should render Date icon with read only style", () => {
+      CypressMountWithProviders(<DateInputCustom readOnly />);
+
+      dateIcon()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
   });
 
   it("should check the pickerProps prop", () => {

diff --git a/cypress/components/select/filterable-select/filterable-select.cy.tsx b/cypress/components/select/filterable-select/filterable-select.cy.tsx
@@ -201,6 +201,14 @@ context("Tests for FilterableSelect component", () => {
         .and("have.attr", "disabled");
     });
 
+    it("should render FilterableSelect icon with disabled style", () => {
+      CypressMountWithProviders(<stories.FilterableSelectComponent disabled />);
+
+      dropdownButton()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it("should render FilterableSelect as read only", () => {
       CypressMountWithProviders(<stories.FilterableSelectComponent readOnly />);
 
@@ -209,6 +217,14 @@ context("Tests for FilterableSelect component", () => {
       selectListWrapper().should("not.be.visible");
     });
 
+    it("should render FilterableSelect icon with read only style", () => {
+      CypressMountWithProviders(<stories.FilterableSelectComponent readOnly />);
+
+      dropdownButton()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it.each([
       [SIZE.SMALL, 32],
       [SIZE.MEDIUM, 40],

diff --git a/cypress/components/select/multi-select/multi-select.cy.tsx b/cypress/components/select/multi-select/multi-select.cy.tsx
@@ -212,6 +212,14 @@ context("Tests for MultiSelect component", () => {
         .and("have.attr", "disabled");
     });
 
+    it("should render MultiSelect icon with disabled style", () => {
+      CypressMountWithProviders(<stories.MultiSelectComponent disabled />);
+
+      dropdownButton()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it("should render MultiSelect as read only", () => {
       CypressMountWithProviders(<stories.MultiSelectComponent readOnly />);
 
@@ -220,6 +228,14 @@ context("Tests for MultiSelect component", () => {
       selectListWrapper().should("not.be.visible");
     });
 
+    it("should render MultiSelect icon with read only style", () => {
+      CypressMountWithProviders(<stories.MultiSelectComponent readOnly />);
+
+      dropdownButton()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it.each([
       [SIZE.SMALL, 32],
       [SIZE.MEDIUM, 40],

diff --git a/cypress/components/select/simple-select/simple-select.cy.tsx b/cypress/components/select/simple-select/simple-select.cy.tsx
@@ -175,6 +175,14 @@ context("Tests for SimpleSelect component", () => {
         .and("have.attr", "disabled");
     });
 
+    it("should render SimpleSelect icon with disabled style", () => {
+      CypressMountWithProviders(<stories.SimpleSelectComponent disabled />);
+
+      dropdownButton()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it("should render SimpleSelect as read only", () => {
       CypressMountWithProviders(<stories.SimpleSelectComponent readOnly />);
 
@@ -184,6 +192,14 @@ context("Tests for SimpleSelect component", () => {
       selectListWrapper().should("not.be.visible");
     });
 
+    it("should render SimpleSelect icon with read only style", () => {
+      CypressMountWithProviders(<stories.SimpleSelectComponent readOnly />);
+
+      dropdownButton()
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it("should render SimpleSelect as transparent", () => {
       CypressMountWithProviders(<stories.SimpleSelectComponent transparent />);
 

diff --git a/cypress/components/textarea/textarea.cy.tsx b/cypress/components/textarea/textarea.cy.tsx
@@ -307,6 +307,15 @@ context("Tests for Textarea component", () => {
       textareaChildren().should("be.disabled").and("have.attr", "disabled");
     });
 
+    it("should render Textarea icon with disabled style", () => {
+      CypressMountWithProviders(<TextareaComponent disabled inputIcon="bin" />);
+
+      textarea()
+        .find(ICON)
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it.each(testData)(
       "should render Textarea with placeholder prop set to %s",
       (placeholder) => {
@@ -364,6 +373,15 @@ context("Tests for Textarea component", () => {
       textareaChildren().and("have.attr", "readOnly");
     });
 
+    it("should render Textarea icon with readOnly style", () => {
+      CypressMountWithProviders(<TextareaComponent readOnly inputIcon="bin" />);
+
+      textarea()
+        .find(ICON)
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it.each(["error", "warning", "info"])(
       "should verify Textarea is displayed with %s validation icon on input",
       (type) => {

diff --git a/cypress/components/textbox/textbox.cy.tsx b/cypress/components/textbox/textbox.cy.tsx
@@ -363,6 +363,17 @@ context("Tests for Textbox component", () => {
       textboxInput().should("be.disabled").and("have.attr", "disabled");
     });
 
+    it("should render Textbox icon with disabled style", () => {
+      CypressMountWithProviders(
+        <stories.TextboxComponent disabled inputIcon="bin" />
+      );
+
+      textbox()
+        .find(ICON)
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it.each(testData)(
       "should render Textbox with placeholder prop set to %s",
       (placeholder) => {
@@ -420,6 +431,17 @@ context("Tests for Textbox component", () => {
       textboxInput().and("have.attr", "readOnly");
     });
 
+    it("should render Textbox icon with readOnly style", () => {
+      CypressMountWithProviders(
+        <stories.TextboxComponent readOnly inputIcon="bin" />
+      );
+
+      textbox()
+        .find(ICON)
+        .should("be.visible")
+        .and("have.css", "color", "rgba(0, 0, 0, 0.3)");
+    });
+
     it.each(["error", "warning", "info"])(
       "should verify Textbox is displayed with %s validation icon on input",
       (type) => {

diff --git a/src/__internal__/input-icon-toggle/input-icon-toggle.component.tsx b/src/__internal__/input-icon-toggle/input-icon-toggle.component.tsx
@@ -75,7 +75,7 @@ const InputIconToggle = ({
     );
   }
 
-  if (type && !(disabled || readOnly)) {
+  if (type) {
     return (
       <InputIconToggleStyle
         size={size}
@@ -85,8 +85,10 @@ const InputIconToggle = ({
         onMouseDown={onMouseDown}
         tabIndex={iconTabIndex}
         data-element="input-icon-toggle"
+        disabled={disabled}
+        readOnly={readOnly}
       >
-        <Icon type={type} />
+        <Icon disabled={disabled || readOnly} type={type} />
       </InputIconToggleStyle>
     );
   }

diff --git a/src/__internal__/input-icon-toggle/input-icon-toggle.spec.tsx b/src/__internal__/input-icon-toggle/input-icon-toggle.spec.tsx
@@ -17,14 +17,6 @@ function renderInputIconToggle(props: InputIconToggleProps) {
 }
 
 describe("InputIconToggle", () => {
-  describe("when initiated with the disabled prop set to true", () => {
-    it("does not render anything", () => {
-      const wrapper = shallow(renderInputIconToggle({ disabled: true }));
-
-      expect(wrapper.isEmptyRender()).toBeTruthy();
-    });
-  });
-
   describe("tooltip positioning", () => {
     const testCases: [InputIconToggleProps["align"], string][] = [
       ["left", "right"],
@@ -64,7 +56,7 @@ describe("InputIconToggle", () => {
         });
 
         describe("with disabled prop", () => {
-          it("does not render an icon", () => {
+          it("does render an icon", () => {
             const wrapper = mount(
               renderInputIconToggle({
                 [validationProp]: "Message",
@@ -73,7 +65,7 @@ describe("InputIconToggle", () => {
               })
             );
             expect(wrapper.find(ValidationIcon).exists()).toBe(false);
-            expect(wrapper.find(Icon).exists()).toBe(false);
+            expect(wrapper.find(Icon).exists()).toBe(true);
           });
         });
 
@@ -86,8 +78,8 @@ describe("InputIconToggle", () => {
                 readOnly: true,
               })
             );
-            const validationIcon = wrapper.find(ValidationIcon);
-            expect(validationIcon.exists()).toBe(true);
+            expect(wrapper.find(ValidationIcon).exists()).toBe(true);
+            expect(wrapper.find(Icon).exists()).toBe(false);
           });
         });
       });
@@ -154,18 +146,33 @@ describe("InputIconToggle", () => {
     }
   );
 
-  describe("does not render input icon", () => {
+  describe("renders input icon", () => {
     it("when disabled prop is true", () => {
       const wrapper = mount(
         renderInputIconToggle({ inputIcon: "dropdown", disabled: true })
       );
-      expect(wrapper.find(Icon).exists()).toBe(false);
+      expect(wrapper.find(Icon).exists()).toBe(true);
+      expect(wrapper.find(Icon).prop("disabled")).toBe(true);
+      assertStyleMatch(
+        {
+          cursor: "not-allowed",
+        },
+        wrapper.find(InputIconToggleStyle)
+      );
     });
     it("when readOnly prop is true", () => {
       const wrapper = mount(
         renderInputIconToggle({ inputIcon: "dropdown", readOnly: true })
       );
-      expect(wrapper.find(Icon).exists()).toBe(false);
+
+      expect(wrapper.find(Icon).exists()).toBe(true);
+      expect(wrapper.find(Icon).prop("disabled")).toBe(true);
+      assertStyleMatch(
+        {
+          cursor: "default",
+        },
+        wrapper.find(InputIconToggleStyle)
+      );
     });
   });
 

diff --git a/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts b/src/__internal__/input-icon-toggle/input-icon-toggle.style.ts
@@ -9,6 +9,8 @@ const oldFocusStyling = `
 
 export interface InputIconToggleStyleProps extends ValidationProps {
   size?: "small" | "medium" | "large";
+  disabled?: boolean;
+  readOnly?: boolean;
   onClick?: (
     event:
       | React.MouseEvent<HTMLSpanElement>
@@ -37,6 +39,18 @@ const InputIconToggleStyle = styled.span.attrs(
     width: ${sizes[size].height};
   `}
 
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      cursor: not-allowed;
+    `}
+  
+  ${({ readOnly }) =>
+    readOnly &&
+    css`
+      cursor: default;
+    `}
+
   ${({ theme }) =>
     `
     &:focus {