feat(text-input): add new next component

Author: tomdavies73

docs/validations.mdx

@@ -23,7 +23,7 @@ These states can indicate whether the input is valid or not, and can also preven
 ### Validation Redesign
 
 Carbon is in the process of implementing a new validation pattern to our input components. To opt into this new pattern, you can set the 
-`validationRedesignOptIn` flag to true on the [CarbonProvider](../?path=/docs/carbon-provider--docs).
+`validationRedesignOptIn` flag to true on the [CarbonProvider](../?path=/docs/carbon-provider--docs). 
 
 The new validation pattern is designed to be more consistent and user-friendly, providing a clearer indication of the input's state and we encourage its use over the legacy pattern using tooltips.
 
@@ -64,6 +64,9 @@ Component props that are not supported if the opt-in flag is set to true are lab
 The legacy validation pattern is still available for use, but we recommend using the new validation pattern for a more consistent and user-friendly experience.
 This pattern uses tooltips to provide feedback to users about the state of their input.
 
+The `Textbox` component is used below for documentation purposes, but it is recommend to use the new `TextInput` component instead which only uses the new validation pattern 
+by default.
+
 #### States
 
 Each input component that supports validations accepts the following props - `error`, `warning` and `info`.
@@ -117,7 +120,7 @@ For more information on how to use React Hook Form, please refer to the [React H
 import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import Button from 'carbon-react/lib/components/button';
 import Form from 'carbon-react/lib/components/form';
-import Textbox from 'carbon-react/lib/components/textbox';
+import TextInput from 'carbon-react/lib/components/textbox/__next__';
 
 interface FormValues {
   name: string;
@@ -146,7 +149,7 @@ const MyForm = () => {
           required: 'Name is required',
         }}
         render={({ field: { onChange, onBlur, value }, fieldState }) => (
-          <Textbox
+          <TextInput
             label="Name"
             required
             value={value}

docs/validations.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
 import Textbox from "../src/components/textbox";
+import TextInput from "../src/components/textbox/__next__";
 import { RadioButton, RadioButtonGroup } from "../src/components/radio-button";
 import { Checkbox, CheckboxGroup } from "../src/components/checkbox";
 import CarbonProvider from "../src/components/carbon-provider";
@@ -134,15 +135,15 @@ export const ValidationRedesign: StoryObj = () => {
         <RequiredFieldsIndicator mb={2}>
           Fill in all fields marked with
         </RequiredFieldsIndicator>
-        <Textbox
+        <TextInput
           label="Textbox"
           inputHint="Hint text"
           value={state}
           onChange={(e) => setState(e.target.value)}
           required
           error="Error Message (Fix is required)"
         />
-        <Textbox
+        <TextInput
           label="Textbox"
           inputHint="Hint text"
           value={state}

playwright-ct.config.ts

@@ -49,6 +49,7 @@ export default defineConfig({
         ...devices["Desktop Chrome"],
         testIdAttribute: "data-role",
         viewport: { width: 1366, height: 768 },
+        trace: "on-first-retry",
       },
     },
   ],

src/__internal__/form-field/form-field.component.tsx

@@ -10,8 +10,9 @@ import { MarginProps } from "styled-system";
 import invariant from "invariant";
 
 import { ValidationProps } from "../validations";
-import FormFieldStyle, { FieldLineStyle } from "./form-field.style";
+import FormFieldStyle, { FieldLineStyle, LabelField } from "./form-field.style";
 import Label, { LabelProps } from "../label";
+import HintText from "../../__internal__/hint-text";
 import FieldHelp from "../field-help";
 import tagComponent, { TagProps } from "../utils/helpers/tags/tags";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
@@ -40,6 +41,10 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
   fieldHelpId?: string;
   /** Label content */
   label?: React.ReactNode;
+  /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+  inputHint?: string;
+  /** The unique identifier for the hint element. Useful for accessibility (e.g., connecting via aria-describedby). */
+  inputHintId?: string;
   /** Text alignment of the label */
   labelAlign?: "left" | "right";
   /** A message that the Help component will display */
@@ -86,6 +91,11 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
   maxWidth?: string;
   /** @private @internal @ignore */
   "data-component"?: string;
+  size?: "small" | "medium" | "large";
+  /** The width of the component container as a percentage */
+  containerWidth?: number;
+  /** @private @internal @ignore */
+  isInsideTextInput?: boolean;
 }
 
 const FormField = ({
@@ -102,6 +112,8 @@ const FormField = ({
   tooltipId,
   fieldHelpId,
   label,
+  inputHint,
+  inputHintId,
   labelId,
   labelAlign,
   labelHelp,
@@ -117,6 +129,9 @@ const FormField = ({
   isRequired,
   validationIconId,
   validationRedesignOptIn,
+  size,
+  containerWidth,
+  isInsideTextInput,
   ...rest
 }: FormFieldProps) => {
   const invalidValidationProp: string | undefined = useMemo(() => {
@@ -204,40 +219,69 @@ const FormField = ({
     </FieldHelp>
   ) : null;
 
+  const labelComponent = label && (
+    <Label
+      labelId={labelId}
+      align={labelAlign}
+      disabled={disabled}
+      error={!validationRedesignOptIn && error}
+      warning={!validationRedesignOptIn && warning}
+      info={!validationRedesignOptIn && info}
+      help={labelHelp}
+      tooltipId={tooltipId}
+      htmlFor={id}
+      helpIcon={labelHelpIcon}
+      inline={inlineLabel}
+      width={labelWidth}
+      useValidationIcon={useValidationIcon}
+      pr={!reverse ? labelSpacing : undefined}
+      pl={reverse ? labelSpacing : undefined}
+      isRequired={isRequired}
+      validationIconId={validationIconId}
+      as={labelAs}
+    >
+      {label}
+    </Label>
+  );
+
   return (
-    <FormFieldStyle {...tagComponent(dataComponent, rest)} {...marginProps}>
+    <FormFieldStyle
+      containerWidth={containerWidth}
+      {...tagComponent(dataComponent, rest)}
+      {...marginProps}
+    >
       <FieldLineStyle
         data-role="field-line"
         inline={inlineLabel}
         maxWidth={maxWidth}
+        labelInline={labelInline}
+        size={size}
+        isInsideTextInput={isInsideTextInput}
       >
         {reverse && children}
 
-        {label && (
-          <Label
-            labelId={labelId}
-            align={labelAlign}
-            disabled={disabled}
-            error={!validationRedesignOptIn && error}
-            warning={!validationRedesignOptIn && warning}
-            info={!validationRedesignOptIn && info}
-            help={labelHelp}
-            tooltipId={tooltipId}
-            htmlFor={id}
-            helpIcon={labelHelpIcon}
-            inline={inlineLabel}
+        {(label || inputHint) && isInsideTextInput && (
+          <LabelField
+            data-role="label-field"
+            labelInline={labelInline}
             width={labelWidth}
-            useValidationIcon={useValidationIcon}
-            pr={!reverse ? labelSpacing : undefined}
-            pl={reverse ? labelSpacing : undefined}
-            isRequired={isRequired}
-            validationIconId={validationIconId}
-            as={labelAs}
+            isLarge={size === "large"}
           >
-            {label}
-          </Label>
+            {labelComponent}
+            {inputHint && (
+              <HintText
+                marginBottom="0"
+                data-element="input-hint"
+                id={inputHintId}
+              >
+                {inputHint}
+              </HintText>
+            )}
+          </LabelField>
         )}
 
+        {!isInsideTextInput && labelComponent}
+
         {fieldHelpInline && fieldHelp}
 
         {!reverse && children}

src/__internal__/form-field/form-field.style.ts

@@ -1,8 +1,12 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
 import applyBaseTheme from "../../style/themes/apply-base-theme";
+import labelConfig from "../../components/textbox/__next__/config";
 
-const FormFieldStyle = styled.div.attrs(applyBaseTheme)`
+const FormFieldStyle = styled.div.attrs(applyBaseTheme)<{
+  containerWidth?: number;
+}>`
+  ${({ containerWidth }) => containerWidth && `width: ${containerWidth}%;`}
   position: relative;
   margin-bottom: var(--fieldSpacing);
   & + & {
@@ -17,13 +21,51 @@ const FormFieldStyle = styled.div.attrs(applyBaseTheme)`
 export interface FieldLineStyleProps {
   inline?: boolean;
   maxWidth?: string;
+  labelInline?: boolean;
+  size?: "small" | "medium" | "large";
+  isInsideTextInput?: boolean;
 }
 const FieldLineStyle = styled.div<FieldLineStyleProps>`
-  ${({ inline, maxWidth }) => css`
-    display: ${inline ? "flex" : "block"};
+  ${({
+    inline,
+    maxWidth,
+    labelInline,
+    size = "medium",
+    isInsideTextInput,
+  }) => css`
+    display: flex;
+    flex-direction: ${inline ? "row" : "column"};
     ${maxWidth && `max-width: ${maxWidth};`}
+
+    ${isInsideTextInput &&
+    `
+      gap: ${
+        labelInline
+          ? labelConfig[size].gap.inline
+          : labelConfig[size].gap.nonInline
+      };
+      `}
   `}
 `;
 
-export { FieldLineStyle };
+interface LabelFieldProps {
+  width?: number;
+  labelInline?: boolean;
+  isLarge?: boolean;
+}
+
+const LabelField = styled.div<LabelFieldProps>`
+  ${({ width }) => width && `width: ${width}%;`}
+  display: flex;
+  flex-direction: column;
+  ${({ labelInline }) => `align-items: ${labelInline ? "end" : "start"};`}
+  ${({ isLarge }) =>
+    `font-size: ${isLarge ? "var(--fontSizes200)" : "var(--fontSizes100)"};`}
+
+  [data-role="label-container"] {
+    all: revert;
+  }
+`;
+
+export { FieldLineStyle, LabelField };
 export default FormFieldStyle;

src/__internal__/form-field/form-field.test.tsx

@@ -147,7 +147,9 @@ test("should not render with `labelInline` when `adaptiveLabelBreakpoint` set an
     />,
   );
 
-  expect(screen.getByTestId("field-line")).toHaveStyle("display: block");
+  expect(screen.getByTestId("field-line")).toHaveStyle(
+    "flex-direction: column",
+  );
 });
 
 test("should render with `labelInline` when `adaptiveLabelBreakpoint` set and screen is bigger than the breakpoint", () => {

src/__internal__/hint-text/hint-text.style.tsx

@@ -16,6 +16,7 @@ const StyledHintText = styled.div<HintTextProps>`
   display: flex;
   align-items: center;
   font-size: 14px;
+  line-height: 150%;
 
   ${({ isLarge }) =>
     isLarge &&

src/__internal__/input/input-presentation.component.tsx

@@ -34,6 +34,8 @@ export interface CommonInputPresentationProps extends ValidationProps {
   borderRadius?: BorderRadiusType | BorderRadiusType[];
   /** Renders with transparent borders. This will not effect focus styling or validation borders  */
   hideBorders?: boolean;
+  /** @private @internal @ignore */
+  isInsideTextInput?: boolean;
 }
 
 export interface InputPresentationProps extends CommonInputPresentationProps {
@@ -56,6 +58,7 @@ const InputPresentation = ({
   prefix,
   readOnly,
   size = "medium",
+  isInsideTextInput,
   warning,
 }: InputPresentationProps): JSX.Element => {
   const { hasFocus, onMouseDown, onMouseEnter, onMouseLeave } =
@@ -79,6 +82,7 @@ const InputPresentation = ({
     <StyledInputPresentationContainer
       inputWidth={inputWidth}
       maxWidth={maxWidth}
+      isInsideTextInput={isInsideTextInput}
       data-role="input-presentation-container"
     >
       {positionedChildren}

src/__internal__/input/input-presentation.style.ts

@@ -7,9 +7,16 @@ import { CarbonProviderProps } from "../../components/carbon-provider";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 
 export const StyledInputPresentationContainer = styled.div<
-  Pick<CommonInputPresentationProps, "inputWidth" | "maxWidth">
+  Pick<
+    CommonInputPresentationProps,
+    "inputWidth" | "maxWidth" | "isInsideTextInput"
+  >
 >`
-  flex: 0 0 ${({ inputWidth }) => inputWidth}%;
+  ${({ inputWidth, isInsideTextInput }) => {
+    if (!inputWidth) return "";
+    if (isInsideTextInput) return `width: ${inputWidth}%;`;
+    return `flex: 0 0 ${inputWidth}%;`;
+  }}
   display: flex;
   position: relative;
   max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}` : "100%")};

src/__internal__/validation-message/validation-message.style.ts

@@ -18,6 +18,7 @@ const StyledValidationMessage = styled.p<StyledValidationMessageProps>`
       ? "var(--colorsSemanticNegative450)"
       : "var(--colorsSemanticNegative500)";
     return css`
+      line-height: 150%;
       color: ${isWarning ? "var(--tempColorsSemanticCaution600)" : darkBgColour};
       font-weight: ${isWarning ? "normal" : "500"};
       font-size: ${isLarge ? "var(--fontSizes200)" : "var(--fontSizes100)"};