chore(switch): wIP: fix up playwright tests and minor styling issues

Sage · Oct 21, 2024 · c8f4397 · c8f4397
1 parent 8c81497
commit c8f4397
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 26 deletions.
diff --git a/src/__internal__/checkable-input/checkable-input.style.ts b/src/__internal__/checkable-input/checkable-input.style.ts
@@ -2,10 +2,11 @@ import styled, { css } from "styled-components";
 
 import FieldHelpStyle from "../field-help/field-help.style";
 import { FieldLineStyle } from "../form-field/form-field.style";
-import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import LabelStyle, { StyledLabelContainer } from "../label/label.style";
-import StyledHelp from "../../components/help/help.style";
 import StyledValidationIcon from "../validations/validation-icon.style";
+import StyledHelp from "../../components/help/help.style";
+
+import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 
 const StyledCheckableInput = styled.div`
   display: inline-block;
@@ -30,6 +31,12 @@ const StyledCheckableInputWrapper = styled.div<StyledCheckableInputWrapperProps>
     labelInline,
     reverse,
   }) => css`
+    /* ${inputWidth !== undefined &&
+    inputWidth !== 0 &&
+    css` */
+      width: 100% !important;
+    /* `} */
+
     ${FieldLineStyle} {
       display: flex;
     }
@@ -105,6 +112,7 @@ const StyledCheckableInputWrapper = styled.div<StyledCheckableInputWrapperProps>
     css`
       ${StyledCheckableInput} {
         width: ${inputWidth}% !important;
+        min-width: 67px;
       }
     `}
 

diff --git a/src/components/switch/__internal__/switch-slider.style.ts b/src/components/switch/__internal__/switch-slider.style.ts
@@ -141,7 +141,7 @@ const StyledSwitchSlider = styled.div`
       error &&
       !disabled &&
       css`
-        border-color: var(--colorsSemanticNegative450);
+        border-color: var(--colorsSemanticNegative500);
       `
     }
 

diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
@@ -251,10 +251,23 @@ export const Switch = React.forwardRef(
       );
     }
 
-    const errorMargin = labelInline && (error || warning) ? 3 : 1;
+    const defaultMargin = labelInline ? 1 : 0;
+    const errorMargin = error || warning ? 3 : defaultMargin;
     const direction = labelInline ? "row" : "column";
     const reverseDirection = labelInline ? "row-reverse" : "column";
 
+    let requestedInputWidth = rest.inputWidth;
+    if (
+      requestedInputWidth &&
+      requestedInputWidth <= 1 &&
+      requestedInputWidth >= 0
+    )
+      requestedInputWidth *= 100;
+    const enforcedInputWidth =
+      requestedInputWidth && typeof requestedInputWidth === "number"
+        ? `${requestedInputWidth}%`
+        : rest.inputWidth;
+
     return (
       <>
         <StyledSwitch {...switchStylePropsForNewValidation}>
@@ -264,34 +277,38 @@ export const Switch = React.forwardRef(
             flexWrap="wrap"
             alignItems="flex-start"
             flexDirection={!reverse ? reverseDirection : direction}
+            width={labelInline ? "100%" : "auto"}
           >
-            <Box id="flow-control">
-              <Label
-                isDarkBackground={isDarkBackground}
-                labelId={labelId.current}
-                disabled={disabled}
-                isRequired={required}
-                optional={isOptional}
+            <Label
+              isDarkBackground={isDarkBackground}
+              labelId={labelId.current}
+              disabled={disabled}
+              isRequired={required}
+              optional={isOptional}
+            >
+              <Box
+                data-role="hint-text-wrapper"
+                mb={labelHelp ? 0 : 1}
+                mr={reverse ? 0 : 1}
+                ml={reverse ? 0 : 1}
               >
-                <Box
-                  data-role="hint-text-wrapper"
-                  mb={labelHelp ? 0 : 1}
-                  mr={reverse ? 0 : 1}
-                  ml={reverse ? 0 : 1}
-                >
-                  {label}
-                </Box>
-              </Label>
-              {labelHelp && (
-                <StyledHintText data-role="hint-text" id={inputHintId.current}>
-                  {labelHelp}
-                </StyledHintText>
-              )}
-            </Box>
+                {label}
+                {labelHelp && (
+                  <StyledHintText
+                    data-role="hint-text"
+                    id={inputHintId.current}
+                  >
+                    {labelHelp}
+                  </StyledHintText>
+                )}
+              </Box>
+            </Label>
             <Box
               ml={reverse ? errorMargin : rest.ml}
               mr={!reverse ? errorMargin : rest.mr}
               position="relative"
+              id="input-wrapper"
+              width={enforcedInputWidth}
             >
               <ValidationMessage
                 error={error}
@@ -309,6 +326,7 @@ 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.mdx b/src/components/switch/switch.mdx
@@ -177,6 +177,13 @@ The folowing examples use the new validation pattern that is available by settin
   name="single switch - inline validation with options"
 />
 
+#### With optional props and custom widths
+
+<Canvas
+  of={SwitchStories.NewValidationInlineDefaultWithOptionsAndCustomWidths}
+  name="single switch - inline validation with options and custom widths"
+/>
+
 #### With error
 
 <Canvas

diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx
@@ -328,6 +328,38 @@ 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}>