chore(switch): ux qa changes

Sage · Oct 29, 2024 · e2aa03b · e2aa03b
1 parent eaeb102
commit e2aa03b
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 16 deletions.
diff --git a/src/__internal__/validation-message/validation-message.component.tsx b/src/__internal__/validation-message/validation-message.component.tsx
@@ -10,12 +10,15 @@ export interface ValidationMessageProps {
   /** Indicate that warning has occurred
   Pass string to display hint with warning */
   warning?: boolean | string;
+  /** Whether this component resides on a dark background */
+  isDarkBackground?: boolean;
 }
 
 const ValidationMessage = ({
   error,
   validationId,
   warning,
+  isDarkBackground,
 }: ValidationMessageProps) => {
   const validation = error || warning;
   const isStringValidation = typeof validation === "string";
@@ -25,6 +28,7 @@ const ValidationMessage = ({
       id={validationId}
       isWarning={!!(!error && warning)}
       data-role="validation-message"
+      isDarkBackground={isDarkBackground}
     >
       {validation}
     </StyledValidationMessage>

diff --git a/src/__internal__/validation-message/validation-message.style.ts b/src/__internal__/validation-message/validation-message.style.ts
@@ -2,17 +2,22 @@ import styled, { css } from "styled-components";
 
 interface StyledValidationMessageProps {
   isWarning?: boolean;
+  isDarkBackground?: boolean;
 }
 
 const StyledValidationMessage = styled.p<StyledValidationMessageProps>`
-  ${({ isWarning }) => css`
-    color: ${isWarning
-      ? "var(--colorsSemanticCaution600)"
-      : "var(--colorsSemanticNegative500)"};
-    font-weight: ${isWarning ? "normal" : "500"};
-    margin-top: 0px;
-    margin-bottom: 8px;
-  `}
+  ${({ isWarning, isDarkBackground }) => {
+    const darkBgColour =
+      !isWarning && isDarkBackground
+        ? "var(--colorsSemanticNegative450)"
+        : "var(--colorsSemanticNegative500)";
+    return css`
+      color: ${isWarning ? "var(--colorsSemanticCaution600)" : darkBgColour};
+      font-weight: ${isWarning ? "normal" : "500"};
+      margin-top: 0px;
+      margin-bottom: 8px;
+    `;
+  }}
 `;
 
 export default StyledValidationMessage;
diff --git a/src/__internal__/validation-message/validation-message.test.tsx b/src/__internal__/validation-message/validation-message.test.tsx
@@ -43,3 +43,21 @@ test("sets the 'id' attribute to the value of the `validationId` prop", () => {
   const validationMessage = screen.getByTestId("validation-message");
   expect(validationMessage).toHaveAttribute("id", "foo");
 });
+
+// coverage
+test("renders with the correct colour when `isDarkBackground` is true", () => {
+  render(<ValidationMessage error="error" isDarkBackground />);
+
+  expect(screen.getByTestId("validation-message")).toHaveStyle({
+    color: "var(--colorsSemanticNegative450)",
+  });
+});
+
+// coverage
+test("renders with the correct colour when `isDarkBackground` is false", () => {
+  render(<ValidationMessage error="error" isDarkBackground={false} />);
+
+  expect(screen.getByTestId("validation-message")).toHaveStyle({
+    color: "var(--colorsSemanticNegative500)",
+  });
+});
diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
@@ -252,7 +252,9 @@ export const Switch = React.forwardRef(
     }
 
     const defaultMargin = labelInline ? 1 : 0;
-    const errorMargin = error || warning ? 3 : defaultMargin;
+    const defaultInputWrapperMargin = labelInline ? 3 : 0;
+    const errorMargin =
+      error || warning ? defaultInputWrapperMargin : defaultMargin;
     const direction = labelInline ? "row" : "column";
     const reverseDirection = labelInline ? "row-reverse" : "column";
 
@@ -288,7 +290,7 @@ export const Switch = React.forwardRef(
             >
               <Box
                 data-role="hint-text-wrapper"
-                mb={labelHelp ? 0 : 1}
+                mb={labelHelp || labelInline ? 0 : 1}
                 mr={reverse ? 0 : 1}
                 ml={reverse ? 0 : 1}
               >
@@ -305,8 +307,8 @@ export const Switch = React.forwardRef(
               </Box>
             </Label>
             <Box
-              ml={reverse ? errorMargin : rest.ml}
-              mr={!reverse ? errorMargin : rest.mr}
+              ml={reverse ? errorMargin : defaultInputWrapperMargin}
+              mr={!reverse ? errorMargin : defaultInputWrapperMargin}
               position="relative"
               id="input-wrapper"
               width={enforcedInputWidth}
@@ -315,12 +317,14 @@ export const Switch = React.forwardRef(
                 error={error}
                 warning={warning}
                 validationId={validationMessageId.current}
+                isDarkBackground={isDarkBackground}
               />
               {applyValidation && (
                 <ErrorBorder
                   data-role="error-border"
                   warning={!!(!error && warning)}
                   reverse={!reverse}
+                  isDarkBackground={isDarkBackground}
                 />
               )}
               <CheckableInput

diff --git a/src/components/switch/switch.style.ts b/src/components/switch/switch.style.ts
@@ -32,18 +32,32 @@ const oldFocusStyling = `
 `;
 
 export const ErrorBorder = styled.span`
-  ${({ reverse, warning }: { reverse: boolean; warning: boolean }) =>
-    css`
+  ${({
+    reverse,
+    warning,
+    isDarkBackground,
+  }: {
+    reverse: boolean;
+    warning: boolean;
+    isDarkBackground: boolean;
+  }) => {
+    const darkBgColour =
+      !warning && isDarkBackground
+        ? "var(--colorsSemanticNegative450)"
+        : "var(--colorsSemanticNegative500)";
+
+    return css`
       position: absolute;
       z-index: 6;
       width: 2px;
       background-color: ${warning
         ? "var(--colorsSemanticCaution500)"
-        : "var(--colorsSemanticNegative500)"};
+        : darkBgColour};
       ${reverse ? "right" : "left"}: -12px;
       bottom: -4px;
       top: 2px;
-    `}
+    `;
+  }}
 `;
 
 export const StyledHintText = styled.div<StyledHintTextProps>`

diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx
@@ -564,3 +564,57 @@ test("renders correctly with inline label, dark background and field help in new
 
   expect(switchElement).toHaveStyleRule("width: 50%");
 });
+
+// coverage
+test("renders correctly with inline label, dark background, error and field help in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch
+        labelInline
+        fieldHelp="Field help"
+        error="error"
+        isDarkBackground
+      />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders with the correct error colour when `isDarkBackground` is false", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch
+        labelInline
+        fieldHelp="Field help"
+        error="error"
+        isDarkBackground={false}
+      />
+    </CarbonProvider>
+  );
+
+  expect(screen.getByTestId("validation-message")).toHaveStyleRule(
+    "color: var(--colorsSemanticNegative500)"
+  );
+});
+
+// coverage
+test("renders with the correct error colour when `isDarkBackground` is true", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch
+        labelInline
+        fieldHelp="Field help"
+        error="error"
+        isDarkBackground
+      />
+    </CarbonProvider>
+  );
+
+  expect(screen.getByTestId("validation-message")).toHaveStyleRule(
+    "color: var(--colorsSemanticNegative450)"
+  );
+});