fix(switch): margins and alignment

the margins have been updated to take into account reverse, labelInline and margin props

fixes: #7179

src/components/switch/switch-test.stories.tsx

@@ -3,10 +3,16 @@ import React, { useState } from "react";
 import I18nProvider from "../i18n-provider/i18n-provider.component";
 import CarbonProvider from "../carbon-provider/carbon-provider.component";
 import Switch, { SwitchProps } from "./switch.component";
+import Box from "../box/box.component";
 
 export default {
   title: "Switch/Test",
-  includeStories: ["Default", "NewDefault", "WithLongTextStrings"],
+  includeStories: [
+    "Default",
+    "NewDefault",
+    "WithLongTextStrings",
+    "WithMargin",
+  ],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -159,3 +165,41 @@ WithLongTextStrings.parameters = {
     disableSnapshot: false,
   },
 };
+
+export const WithMargin = ({ ...args }: Partial<SwitchProps>) => {
+  return (
+    <CarbonProvider validationRedesignOptIn>
+      <Box
+        margin="var(--spacing200)"
+        display="flex"
+        flexDirection="column"
+        gap="var(--spacing200)"
+        minWidth="320px"
+        maxWidth="1024px"
+      >
+        <Box display="flex" justifyContent="flex-start">
+          <Switch
+            label="Some text"
+            labelInline
+            reverse={args.reverse}
+            defaultChecked
+            ml={args.ml}
+            mr={args.mr}
+          />
+        </Box>
+      </Box>
+    </CarbonProvider>
+  );
+};
+
+WithMargin.storyName = "With Margin";
+WithMargin.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+  },
+};
+WithMargin.args = {
+  reverse: true,
+  ml: 3,
+  mr: 3,
+};

src/components/switch/switch.component.tsx

@@ -252,7 +252,25 @@ export const Switch = React.forwardRef(
     }
 
     const defaultMargin = labelInline ? 1 : 0;
-    const defaultInputWrapperMargin = labelInline ? 3 : 0;
+
+    let defaultInputWrapperMargin = 0;
+
+    if (labelInline) {
+      if (!reverse) {
+        if (marginProps.ml === 0 || marginProps.marginLeft === 0) {
+          defaultInputWrapperMargin = 0;
+        } else {
+          defaultInputWrapperMargin = 3;
+        }
+      } else if (marginProps.mr === 0 || marginProps.marginRight === 0) {
+        defaultInputWrapperMargin = 0;
+      } else {
+        defaultInputWrapperMargin = 3;
+      }
+    } else {
+      defaultInputWrapperMargin = 0;
+    }
+
     const errorMargin =
       error || warning ? defaultInputWrapperMargin : defaultMargin;
     const direction = labelInline ? "row" : "column";
@@ -303,6 +321,7 @@ export const Switch = React.forwardRef(
               mr={!reverse ? errorMargin : defaultInputWrapperMargin}
               position="relative"
               id="input-wrapper"
+              data-role="input-wrapper"
             >
               <ValidationMessage
                 error={error}

src/components/switch/switch.test.tsx

@@ -648,3 +648,25 @@ test("renders correctly with inline label and hint text in new validation when r
 
   expect(switchElement).toHaveStyleRule("width: 50%");
 });
+
+test("when `labelInline` is true,`reverse` is false and ml is equal to 0 no margin left is applied to the input-wrapper", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch label="label" labelInline reverse={false} ml={0} />
+    </CarbonProvider>,
+  );
+
+  const test = screen.getByTestId("input-wrapper");
+  expect(test).toHaveStyleRule("margin-left: 0px");
+});
+
+test("when `labelInline` is true,`reverse` is true and mr is equal to 0 no margin right is applied to the input-wrapper", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch label="label" labelInline reverse mr={0} />
+    </CarbonProvider>,
+  );
+
+  const test = screen.getByTestId("input-wrapper");
+  expect(test).toHaveStyleRule("margin-right: 0px");
+});