fix(textbox): fix incorrect margin on prefix

fixes #5646

src/components/textbox/__internal__/prefix.style.ts

@@ -1,9 +1,17 @@
 import styled from "styled-components";
+import InputSizes from "../../../__internal__/input/input-sizes.style";
+import { TextboxProps } from "../textbox.component";
 
-const StyledPrefix = styled.span`
+const StyledPrefix = styled.span<{ size: NonNullable<TextboxProps["size"]> }>`
   align-self: center;
   font-weight: 900;
-  margin-right: 8px;
+  margin-left: ${({ size }) =>
+    InputSizes[size]
+      .horizontalPadding}; // margin must match the original component padding
+
+  && + input {
+    padding-left: var(--spacing100);
+  }
 `;
 
 export default StyledPrefix;

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 
 import specialCharacters from "../../__internal__/utils/argTypes/specialCharacters";
-import Textbox from ".";
+import Textbox, { TextboxProps } from ".";
 import CarbonProvider from "../carbon-provider/carbon-provider.component";
 import { ICONS } from "../icon/icon-config";
 
@@ -139,7 +139,7 @@ export default {
       disable: true,
     },
   },
-  includeStories: ["Default", "Multiple", "NewValidation"],
+  includeStories: ["Default", "Multiple", "NewValidation", "PrefixWithSizes"],
 };
 
 export const Default = (args: CommonTextboxArgs) => {
@@ -202,3 +202,22 @@ export const NewValidation = (args: CommonTextboxArgs) => {
 NewValidation.storyName = "new validation";
 NewValidation.argTypes = commonTextboxArgTypes(true);
 NewValidation.args = getCommonTextboxArgs(true);
+
+export const PrefixWithSizes = () => {
+  return (
+    <>
+      {["small", "medium", "large"].map((size) => (
+        <Textbox
+          key={`Textbox - ${size}`}
+          label={`Textbox - ${size}`}
+          defaultValue="Textbox"
+          prefix="prefix"
+          size={size as TextboxProps["size"]}
+          mb={2}
+        />
+      ))}
+    </>
+  );
+};
+
+PrefixWithSizes.storyName = "prefix with sizes";

src/components/textbox/textbox.component.tsx

@@ -232,7 +232,9 @@ export const Textbox = ({
     >
       {leftChildren}
       {prefix && (
-        <StyledPrefix data-element="textbox-prefix">{prefix}</StyledPrefix>
+        <StyledPrefix data-element="textbox-prefix" size={size}>
+          {prefix}
+        </StyledPrefix>
       )}
       <Input
         {...(required && { required })}

src/components/textbox/textbox.spec.tsx

@@ -191,19 +191,6 @@ describe("Textbox", () => {
     });
   });
 
-  describe("Prefix", () => {
-    it("should have expected styles", () => {
-      assertStyleMatch(
-        {
-          alignSelf: "center",
-          fontWeight: "900",
-          marginRight: "8px",
-        },
-        mount(<StyledPrefix>abc</StyledPrefix>)
-      );
-    });
-  });
-
   describe("positionedChildren", () => {
     it("passes positionedChildren prop to the InputPresentation component", () => {
       const Component = () => <div />;

src/components/textbox/textbox.stories.mdx

@@ -72,6 +72,27 @@ import Textbox from "carbon-react/lib/components/textbox";
   </Story>
 </Canvas>
 
+### Prefix
+
+<Canvas>
+  <Story name="prefix">
+    {() => {
+      const [state, setState] = useState("Textbox");
+      const setValue = ({ target }) => {
+        setState(target.value);
+      };
+      return (
+        <Textbox
+          label="Textbox"
+          value={state}
+          onChange={setValue}
+          prefix="prefix"
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
 ### Sizes
 
 <Canvas>

src/components/textbox/textbox.test.js

@@ -413,7 +413,7 @@ context("Tests for Textbox component", () => {
           .should("have.text", prefix)
           .and("have.css", "font-size", "14px")
           .and("have.css", "font-weight", "900")
-          .and("have.css", "margin-right", "8px");
+          .and("have.css", "margin-left", "12px");
       }
     );