fix(search): update icon colour and hover colour in default variant

Sage · Jul 7, 2022 · 2912a74 · 2912a74
1 parent 875f265
commit 2912a74
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 14 deletions.
diff --git a/src/components/search/search.spec.js b/src/components/search/search.spec.js
@@ -11,7 +11,7 @@ import {
 } from "../../__spec_helper__/test-utils";
 import StyledTextInput from "../../__internal__/input/input-presentation.style";
 import StyledInputIconToggle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-
+import StyledIcon from "../icon/icon.style";
 import Icon from "../icon";
 import TextBox from "../textbox";
 import { rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
@@ -165,6 +165,82 @@ describe("Search", () => {
         wrapper,
         { modifier: `${StyledInputIconToggle}` }
       );
+
+      assertStyleMatch(
+        {
+          color: "var(--colorsActionMinor500)",
+        },
+        wrapper,
+        { modifier: `${StyledIcon}` }
+      );
+
+      assertStyleMatch(
+        {
+          color: "var(--colorsActionMinor600)",
+        },
+        wrapper,
+        { modifier: `${StyledIcon}:hover` }
+      );
+    });
+
+    it("applies the expected styling to the close icon when dark variant", () => {
+      wrapper = renderWrapper({ value: "FooBar", variant: "dark" }, mount);
+      assertStyleMatch(
+        {
+          marginBottom: "-1px",
+        },
+        wrapper,
+        { modifier: `${StyledInputIconToggle}` }
+      );
+
+      assertStyleMatch(
+        {
+          color: "var(--colorsUtilityMajor200)",
+        },
+        wrapper,
+        { modifier: `${StyledIcon}` }
+      );
+
+      assertStyleMatch(
+        {
+          color: "var(--colorsUtilityMajor100)",
+        },
+        wrapper,
+        { modifier: `${StyledIcon}:hover` }
+      );
+    });
+
+    it("applies the expected styling to the close icon when dark variant and input is focused", () => {
+      wrapper = renderWrapper({ value: "FooBar", variant: "dark" }, mount);
+      act(() => {
+        const input = wrapper.find(Input);
+        input.simulate("focus");
+      });
+      wrapper.update();
+
+      assertStyleMatch(
+        {
+          marginBottom: "-1px",
+        },
+        wrapper,
+        { modifier: `${StyledInputIconToggle}` }
+      );
+
+      assertStyleMatch(
+        {
+          color: "var(--colorsUtilityMajor400)",
+        },
+        wrapper,
+        { modifier: `${StyledIcon}` }
+      );
+
+      assertStyleMatch(
+        {
+          color: "var(--colorsUtilityMajor500)",
+        },
+        wrapper,
+        { modifier: `${StyledIcon}:hover` }
+      );
     });
   });
 

diff --git a/src/components/search/search.style.js b/src/components/search/search.style.js
@@ -129,26 +129,38 @@ const StyledSearch = styled.div`
         z-index: ${theme.zIndex.smallOverlay};
       }
       ${StyledIcon} {
-        color: ${iconColor
-          ? "var(--colorsUtilityMajor400)"
-          : "var(--colorsUtilityMajor200)"};
+        ${darkVariant &&
+        css`
+          ${iconColor &&
+          css`
+            color: var(--colorsUtilityMajor400);
+
+            :hover {
+              color: var(--colorsUtilityMajor500);
+            }
+          `}
+          ${!iconColor &&
+          css`
+            color: var(--colorsUtilityMajor200);
+
+            :hover {
+              color: var(--colorsUtilityMajor100);
+            }
+          `}
+        `}
+
         ${!darkVariant &&
         css`
-          color: var(--colorsUtilityMajor400);
+          color: var(--colorsActionMinor500);
+
+          :hover {
+            color: var(--colorsActionMinor600);
+          }
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
-        :hover {
-          color: ${iconColor
-            ? "var(--colorsUtilityMajor500)"
-            : "var(--colorsUtilityMajor100)"};
-          ${!darkVariant &&
-          css`
-            color: var(--colorsUtilityMajor500);
-          `}
-        }
       }
 
       ${StyledInputIconToggle} {