feat: align Texbox with DS + deprecations + rename WIP

Author: tomdavies73

src/__internal__/character-count/character-count.style.ts

@@ -11,6 +11,7 @@ const StyledCharacterCount = styled.div.attrs(applyBaseTheme)<{
 }>`
   text-align: left;
   font-size: var(--fontSizes100);
+  line-height: 150%;
   margin-top: var(--spacing050);
   margin-bottom: var(--spacing050);
   color: ${({ isOverLimit }) =>

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

@@ -58,6 +58,14 @@ interface CommonFormFieldProps extends MarginProps, ValidationProps {
    * @private @ignore
    * Flag dedicating if latest validation design should be used */
   validationRedesignOptIn?: boolean;
+  /** @private @internal @ignore */
+  inputHint?: string;
+  /** @private @internal @ignore */
+  inputHintId?: string;
+  /** Size of an input */
+  gap?: string;
+  /** margin */
+  labelMarginBottom?: string;
 }
 
 export interface FormFieldProps extends CommonFormFieldProps, TagProps {
@@ -80,6 +88,8 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
   maxWidth?: string;
   /** @private @internal @ignore */
   "data-component"?: string;
+  /** Set large font-size */
+  isLarge?: boolean;
 }
 
 const FormField = ({
@@ -104,13 +114,18 @@ const FormField = ({
   labelSpacing = 2,
   labelWidth,
   labelAs,
+  inputHint,
+  inputHintId,
+  gap,
   id,
   reverse,
   useValidationIcon,
   adaptiveLabelBreakpoint,
   isRequired,
   validationIconId,
   validationRedesignOptIn,
+  labelMarginBottom,
+  isLarge,
   ...rest
 }: FormFieldProps) => {
   const invalidValidationProp: string | undefined = useMemo(() => {
@@ -179,15 +194,19 @@ const FormField = ({
   return (
     <FormFieldStyle {...tagComponent(dataComponent, rest)} {...marginProps}>
       <FieldLineStyle
+        gap={gap}
         data-role="field-line"
         inline={inlineLabel}
         maxWidth={maxWidth}
       >
         {reverse && children}
 
-        {label && (
+        {(label || inputHint || (labelHelp && validationRedesignOptIn)) && (
           <Label
             labelId={labelId}
+            inputHint={inputHint}
+            inputHintId={inputHintId}
+            labelHelp={labelHelp}
             align={labelAlign}
             disabled={disabled}
             error={!validationRedesignOptIn && error}
@@ -199,12 +218,14 @@ const FormField = ({
             helpIcon={labelHelpIcon}
             inline={inlineLabel}
             width={labelWidth}
+            marginBttom={labelMarginBottom}
             useValidationIcon={useValidationIcon}
             pr={!reverse ? labelSpacing : undefined}
             pl={reverse ? labelSpacing : undefined}
             isRequired={isRequired}
             validationIconId={validationIconId}
             as={labelAs}
+            isLarge={isLarge}
           >
             {label}
           </Label>

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

@@ -17,10 +17,13 @@ const FormFieldStyle = styled.div.attrs(applyBaseTheme)`
 export interface FieldLineStyleProps {
   inline?: boolean;
   maxWidth?: string;
+  gap?: string;
 }
 const FieldLineStyle = styled.div<FieldLineStyleProps>`
-  ${({ inline, maxWidth }) => css`
-    display: ${inline ? "flex" : "block"};
+  ${({ inline, maxWidth, gap }) => css`
+    ${gap && `gap: ${gap};`}
+    display: flex;
+    flex-direction: ${inline ? "row" : "column"};
     ${maxWidth && `max-width: ${maxWidth};`}
   `}
 `;

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

@@ -87,7 +87,10 @@ test("should not render with `labelInline` when `adaptiveLabelBreakpoint` set an
     />,
   );
 
-  expect(screen.getByTestId("field-line")).toHaveStyle("display: block");
+  expect(screen.getByTestId("field-line")).toHaveStyle("display: flex");
+  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

@@ -24,6 +24,8 @@ export interface CommonInputPresentationProps extends ValidationProps {
    * Leaving the `maxWidth` prop with no value will default the width to '100%'
    */
   maxWidth?: string;
+  /** When true label is inline. */
+  labelInline?: boolean;
   /** If true, the component will be read-only */
   readOnly?: boolean;
   /** Size of an input */
@@ -52,6 +54,7 @@ const InputPresentation = ({
   info,
   inputWidth,
   maxWidth,
+  labelInline,
   positionedChildren,
   prefix,
   readOnly,
@@ -75,6 +78,35 @@ const InputPresentation = ({
     if (onGroupMouseLeave) onGroupMouseLeave();
   };
 
+  if (validationRedesignOptIn && labelInline) {
+    return (
+      <>
+        {positionedChildren}
+        <InputPresentationStyle
+          hasFocus={hasFocus}
+          role="presentation"
+          onMouseDown={onMouseDown}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          align={align}
+          prefix={prefix}
+          disabled={disabled}
+          readOnly={readOnly}
+          size={size}
+          warning={warning}
+          error={error}
+          info={info}
+          validationRedesignOptIn={validationRedesignOptIn}
+          hasIcon={hasIcon}
+          borderRadius={borderRadius}
+          hideBorders={hideBorders}
+        >
+          {children}
+        </InputPresentationStyle>
+      </>
+    );
+  }
+
   return (
     <StyledInputPresentationContainer
       inputWidth={inputWidth}

src/__internal__/input/input.component.tsx

@@ -64,6 +64,8 @@ export interface InputProps extends CommonInputProps {
   rows?: number;
   /** HTML type attribute of the input */
   type?: string;
+  /** Set large font-size */
+  isLarge?: boolean;
 }
 
 function selectTextOnFocus(
@@ -112,6 +114,7 @@ const Input = React.forwardRef<
       validationIconId,
       inputBorderRadius = "borderRadius050",
       enterKeyHint,
+      isLarge,
       ...rest
     }: InputProps,
     ref,
@@ -247,6 +250,7 @@ const Input = React.forwardRef<
         onClick={disabled || readOnly ? undefined : handleClick}
         onChange={handleChange}
         inputBorderRadius={inputBorderRadius}
+        isLarge={isLarge}
       />
     );
   },

src/__internal__/input/input.style.ts

@@ -1,10 +1,11 @@
 import styled, { css } from "styled-components";
-import { CommonInputProps } from "./input.component";
+import { CommonInputProps, InputProps } from "./input.component";
 
 const StyledInput = styled.input<
-  Pick<CommonInputProps, "align" | "disabled" | "inputBorderRadius"> & {
-    isInputInSelect: boolean;
-  }
+  Pick<CommonInputProps, "align" | "disabled" | "inputBorderRadius"> &
+    Pick<InputProps, "isLarge"> & {
+      isInputInSelect: boolean;
+    }
 >`
   ${({ isInputInSelect }) => isInputInSelect && "text-overflow: ellipsis"};
   background: transparent;
@@ -17,6 +18,12 @@ const StyledInput = styled.input<
   margin: 0;
   width: 30px;
 
+  ${({ isLarge }) =>
+    isLarge &&
+    css`
+      font-size: var(--fontSizes200);
+    `}
+
   &:-webkit-autofill {
     background-clip: text;
     -webkit-background-clip: text;

src/__internal__/label/label.component.tsx

@@ -12,6 +12,8 @@ import { InputContext, InputGroupContext } from "../input-behaviour";
 import { ValidationProps } from "../validations";
 import { IconType } from "../../components/icon";
 import createGuid from "../../__internal__/utils/helpers/guid";
+import HintText from "../hint-text";
+import newValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 
 export interface LabelProps
   extends ValidationProps,
@@ -40,6 +42,14 @@ export interface LabelProps
    * @internal
    * Sets className for component. INTERNAL USE ONLY. */
   className?: string;
+  /** @private @internal @ignore */
+  inputHint?: string;
+  /** @private @internal @ignore */
+  inputHintId?: string;
+  /** @private @internal @ignore */
+  labelHelp?: React.ReactNode;
+  /** @private @internal @ignore */
+  marginBttom?: string;
   /** Sets aria-label for label element */
   "aria-label"?: string;
   /** Whether this component is shown against a dark background */
@@ -79,11 +89,15 @@ export const Label = ({
   isDarkBackground = false,
   isRequired,
   labelId,
+  inputHint,
+  inputHintId,
+  labelHelp,
   pr,
   pl,
   tooltipId,
   useValidationIcon = true,
   validationIconId,
+  marginBttom = "8px",
   warning,
   width = 30,
   className,
@@ -96,6 +110,8 @@ export const Label = ({
     useContext(InputGroupContext);
   const guid = useRef(createGuid());
 
+  const { validationRedesignOptIn } = useContext(newValidationContext);
+
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
     if (onGroupMouseEnter) onGroupMouseEnter();
@@ -167,26 +183,42 @@ export const Label = ({
       id={`label-container-${labelId ?? guid.current}`}
       align={alignment}
       inline={inline}
+      validationRedesignOptIn={validationRedesignOptIn}
       width={width}
+      marginBttom={marginBttom}
       pr={pr}
       pl={pl}
       className={className}
     >
-      <StyledLabel
-        data-element="label"
-        disabled={disabled}
-        id={labelId}
-        {...(as === "label" ? { htmlFor } : {})}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        isRequired={isRequired}
-        as={as}
-        aria-label={ariaLabel}
-        isDarkBackground={isDarkBackground}
-        isLarge={isLarge}
-      >
-        {children}
-      </StyledLabel>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <StyledLabel
+          data-element="label"
+          disabled={disabled}
+          id={labelId}
+          {...(as === "label" ? { htmlFor } : {})}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          isRequired={isRequired}
+          as={as}
+          aria-label={ariaLabel}
+          isDarkBackground={isDarkBackground}
+          isLarge={isLarge}
+        >
+          {children}
+        </StyledLabel>
+        {(inputHint || (labelHelp && validationRedesignOptIn)) && (
+          <HintText
+            align={alignment}
+            data-element="input-hint"
+            id={inputHintId}
+            marginBottom="var(--spacing000)"
+            isLarge={isLarge}
+            isComponentInline={inline}
+          >
+            {inputHint || labelHelp}
+          </HintText>
+        )}
+      </div>
       {icon()}
     </StyledLabelContainer>
   );

src/__internal__/label/label.style.ts

@@ -24,6 +24,7 @@ const StyledLabel = styled.label<StyledLabelProps>`
     css`
       font-size: var(--fontSizes200);
     `}
+  line-height: 150%;
 
   ${({ isRequired }) =>
     isRequired &&
@@ -54,27 +55,36 @@ export interface StyledLabelContainerProps {
   pl?: 1 | 2;
   /** Label width */
   width?: number;
+  validationRedesignOptIn?: boolean;
+  marginBttom?: string;
 }
 
 export const StyledLabelContainer = styled.div<StyledLabelContainerProps>`
   display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-
+  align-items: ${({ validationRedesignOptIn }) =>
+    validationRedesignOptIn ? "top" : "center"};
+  ${({ inline }) => css`
+    text-align: ${inline ? "right" : "left"};
+  `}
+  ${({ marginBttom }) => css`
+    margin-bottom: ${marginBttom};
+  `}
   ${({ align }) => css`
     justify-content: ${align !== "right" ? "flex-start" : "flex-end"};
   `}
 
-  ${({ inline, pr, pl, width }) =>
+  ${({ inline, validationRedesignOptIn, pr, pl, width }) =>
     inline &&
     css`
       box-sizing: border-box;
       margin-bottom: 0;
       ${pr &&
+      !validationRedesignOptIn &&
       css`
         padding-right: var(${pr === 1 ? "--spacing100" : "--spacing200"});
       `};
       ${pl &&
+      !validationRedesignOptIn &&
       css`
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};