chore(switch): addresses PR comments (TBS)

Sage · Oct 23, 2024 · 7869882 · 7869882
1 parent 317daae
commit 7869882
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 113 deletions.
diff --git a/src/__internal__/checkable-input/checkable-input.style.ts b/src/__internal__/checkable-input/checkable-input.style.ts
@@ -31,7 +31,9 @@ const StyledCheckableInputWrapper = styled.div<StyledCheckableInputWrapperProps>
     labelInline,
     reverse,
   }) => css`
-    width: 100% !important;
+    && {
+      width: 100%;
+    }
 
     ${FieldLineStyle} {
       display: flex;
@@ -107,7 +109,9 @@ const StyledCheckableInputWrapper = styled.div<StyledCheckableInputWrapperProps>
     inputWidth !== 0 &&
     css`
       ${StyledCheckableInput} {
-        width: ${inputWidth}% !important;
+        && {
+          width: ${inputWidth}%;
+        }
         min-width: 67px;
       }
     `}

diff --git a/src/components/switch/__internal__/switch-slider-panel.style.ts b/src/components/switch/__internal__/switch-slider-panel.style.ts
@@ -13,19 +13,25 @@ export interface SwitchSliderPanelProps {
 const SwitchSliderPanel = styled.div`
   ${({ isLoading, size, isDarkBackground }: SwitchSliderPanelProps) => css`
     border: 0;
-    color: ${isDarkBackground ? "black" : "var(--colorsActionMinorYang100)"};
+    color: ${isDarkBackground
+      ? "var(--colorsUtilityYin100)"
+      : "var(--colorsActionMinorYang100)"};
     margin: auto;
     position: absolute;
     left: 0;
 
     &[type="on"] {
-      color: ${isDarkBackground ? "black" : "white"};
+      color: ${isDarkBackground
+        ? "var(--colorsUtilityYin100)"
+        : "var(--colorsUtilityYang100)"};
       margin-left: 9px;
       padding-right: ${size === "large" ? "43px" : "27px"};
     }
 
     &[type="off"] {
-      color: ${isDarkBackground ? "white" : "var(--colorsActionMinor500)"};
+      color: ${isDarkBackground
+        ? "var(--colorsUtilityYang100)"
+        : "var(--colorsActionMinor500)"};
       margin-right: 9px;
       padding-left: ${size === "large" ? "43px" : "27px"};
     }

diff --git a/src/components/switch/__internal__/switch-slider-panel.test.tsx b/src/components/switch/__internal__/switch-slider-panel.test.tsx
@@ -87,5 +87,5 @@ test("renders with dark background styles when `isDarkBackground` is true", () =
 
   const switchPanel = screen.getByTestId("slider-panel");
 
-  expect(switchPanel).toHaveStyleRule("color: black");
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYin100)");
 });
diff --git a/src/components/switch/__internal__/switch-slider.style.ts b/src/components/switch/__internal__/switch-slider.style.ts
@@ -42,15 +42,21 @@ const StyledSwitchSlider = styled.div`
       theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"
     };
     border-style: solid;
-    border-color: ${isDarkBackground ? "white" : "var(--colorsActionMinor400)"};
+    border-color: ${
+      isDarkBackground
+        ? "var(--colorsUtilityYang100)"
+        : "var(--colorsActionMinor400)"
+    };
     border-width: var(--borderWidth200);
     box-sizing: border-box;
     margin-top: ${size === "large" ? "-47px" : "-28px"};
     align-items: center;
 
     &::before {
       background-color: ${
-        isDarkBackground ? "white" : "var(--colorsActionMinor400)"
+        isDarkBackground
+          ? "var(--colorsUtilityYang100)"
+          : "var(--colorsActionMinor400)"
       };
       bottom: 4px;
       content: "";
@@ -67,7 +73,7 @@ const StyledSwitchSlider = styled.div`
       checked &&
       css`
         background-color: ${isDarkBackground
-          ? "white"
+          ? "var(--colorsUtilityYang100)"
           : "var(--colorsActionMinor500)"};
         border-color: var(--colorsActionMinorTransparent);
 
@@ -77,7 +83,7 @@ const StyledSwitchSlider = styled.div`
               ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
           );
           background-color: ${isDarkBackground
-            ? "black"
+            ? "var(--colorsUtilityYin100)"
             : "var(--colorsActionMinorYang100)"};
         }
       `

diff --git a/src/components/switch/__internal__/switch-slider.test.tsx b/src/components/switch/__internal__/switch-slider.test.tsx
@@ -150,7 +150,7 @@ test("renders with dark background styles when `isDarkBackground` is true", () =
 
   const switchPanel = screen.getByTestId("slider");
 
-  expect(switchPanel).toHaveStyleRule("color: black");
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYin100)");
 });
 
 // coverage
@@ -159,5 +159,5 @@ test("renders with dark background styles when `isDarkBackground` is true and ch
 
   const switchPanel = screen.getByTestId("slider");
 
-  expect(switchPanel).toHaveStyleRule("color: white");
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYang100)");
 });
diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
@@ -327,7 +327,6 @@ export const Switch = React.forwardRef(
                 ariaLabelledBy={`${label && labelId.current}`}
                 ariaDescribedBy={ariaDescribedBy}
                 {...inputPropsForNewValidation}
-                // inputWidth={undefined}
                 fieldHelp={labelInline ? undefined : rest.fieldHelp}
               >
                 <SwitchSlider {...switchSliderPropsForNewValidation} />

diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx
@@ -328,38 +328,6 @@ export const NewValidationInlineDefaultWithOptions: Story = () => {
 NewValidationInlineDefaultWithOptions.storyName =
   "New Validation - Inline with options";
 
-export const NewValidationInlineDefaultWithOptionsAndCustomWidths: Story = () => {
-  return (
-    <Box m={2}>
-      <CarbonProvider validationRedesignOptIn>
-        <Switch
-          label="90% Width"
-          labelInline
-          labelHelp="Hint text"
-          fieldHelp="Field help"
-          inputWidth={90}
-        />
-        <Switch
-          label="70% Width"
-          labelInline
-          labelHelp="Hint text"
-          fieldHelp="Field help"
-          inputWidth={70}
-        />
-        <Switch
-          label="20% Width"
-          labelInline
-          labelHelp="Hint text"
-          fieldHelp="Field help"
-          inputWidth={20}
-        />
-      </CarbonProvider>
-    </Box>
-  );
-};
-NewValidationInlineDefaultWithOptionsAndCustomWidths.storyName =
-  "New Validation - Inline with options and custom widths";
-
 export const NewValidationInlineError: Story = () => {
   return (
     <Box m={2}>
@@ -375,39 +343,6 @@ export const NewValidationInlineError: Story = () => {
 };
 NewValidationInlineError.storyName = "New Validation - Inline with error";
 
-export const NewValidationInlineErrorAndOptions: Story = () => {
-  return (
-    <Box m={2}>
-      <CarbonProvider validationRedesignOptIn>
-        <Switch
-          label="Example switch (error state)"
-          labelInline
-          error="Error message (Fix is required)"
-          labelHelp="Hint text"
-          fieldHelp="Field help"
-        />
-      </CarbonProvider>
-    </Box>
-  );
-};
-NewValidationInlineErrorAndOptions.storyName =
-  "New Validation - Inline with error and options";
-
-export const NewValidationInlineWarning: Story = () => {
-  return (
-    <Box m={2}>
-      <CarbonProvider validationRedesignOptIn>
-        <Switch
-          label="Example switch (warning state)"
-          labelInline
-          warning="Warning message (Fix is required)"
-        />
-      </CarbonProvider>
-    </Box>
-  );
-};
-NewValidationInlineWarning.storyName = "New Validation - Inline with warning";
-
 export const NewValidationInlineWithOverflowHintText: Story = () => {
   return (
     <Box m={2}>
@@ -425,23 +360,6 @@ export const NewValidationInlineWithOverflowHintText: Story = () => {
 NewValidationInlineWithOverflowHintText.storyName =
   "New Validation - Inline with overflowing hint text";
 
-export const NewValidationInlineWithOverflowFieldHelp: Story = () => {
-  return (
-    <Box m={2}>
-      <CarbonProvider validationRedesignOptIn>
-        <Switch
-          label="Example switch"
-          labelInline
-          labelHelp="Hint text"
-          fieldHelp="Really long field help that should extend beyond the control regardless of length"
-        />
-      </CarbonProvider>
-    </Box>
-  );
-};
-NewValidationInlineWithOverflowFieldHelp.storyName =
-  "New Validation - Inline with overflowing field help";
-
 export const NewValidationInlineWithDarkMode: Story = () => {
   return (
     <Box m={2} padding={3} backgroundColor="#000000">
@@ -470,20 +388,3 @@ export const NewValidationInlineWithDarkModeAndError: Story = () => {
 };
 NewValidationInlineWithDarkModeAndError.storyName =
   "New Validation - Inline with dark background support and error";
-
-export const NewValidationInlineWithDarkModeAndHintText: Story = () => {
-  return (
-    <Box m={2} padding={3} backgroundColor="#000000">
-      <CarbonProvider validationRedesignOptIn>
-        <Switch
-          label="Example switch (error state)"
-          labelInline
-          isDarkBackground
-          labelHelp="A helpful hint for the user"
-        />
-      </CarbonProvider>
-    </Box>
-  );
-};
-NewValidationInlineWithDarkModeAndHintText.storyName =
-  "New Validation - Inline with dark background support and hint text";
diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx
@@ -445,7 +445,7 @@ test("renders with dark background styles when `isDarkBackground` is true", () =
 
   const switchElement = screen.getByRole("switch");
 
-  expect(switchElement).toHaveStyleRule("color: black");
+  expect(switchElement).toHaveStyleRule("color: var(--colorsUtilityYin100)");
 });
 
 // coverage