fix: inline label props have unexpected behaviour with new validation

labelInline and legendInline should have no effect with new validation

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

@@ -125,5 +125,5 @@ test("should render with `labelInline` when `adaptiveLabelBreakpoint` set and sc
     />
   );
 
-  expect(screen.getByTestId("field-line")).toHaveStyle("display: flex");
+  expect(screen.getByTestId("field-line")).toHaveStyle({ display: "flex" });
 });

src/components/date-range/date-range-test.stories.tsx

@@ -144,3 +144,41 @@ export const DateRangeNewValidation = () => {
     </CarbonProvider>
   );
 };
+
+export const DateRangeNewValidationWithLabelsInline = () => {
+  const [state, setState] = React.useState(["01/10/2016", "30/10/2016"]);
+
+  const handleChange = ({ target }: DateRangeChangeEvent) => {
+    const newValue = [
+      target.value[0].formattedValue,
+      target.value[1].formattedValue,
+    ];
+    setState(newValue);
+  };
+
+  return (
+    <CarbonProvider validationRedesignOptIn>
+      {[
+        {
+          startError: "Start error with long text string",
+          endError: "End error",
+        },
+        {
+          startWarning: "Start warning",
+          endWarning: "End warning with long text string",
+        },
+      ].map((validation) => (
+        <DateRange
+          key={`${Object.keys(validation)[0]}-string-component`}
+          startLabel="Start"
+          endLabel="End"
+          onChange={handleChange}
+          value={state}
+          {...validation}
+          labelsInline
+          m={4}
+        />
+      ))}
+    </CarbonProvider>
+  );
+};

src/components/date-range/date-range.component.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useContext,
+} from "react";
 import { MarginProps } from "styled-system";
 import {
   formatToISO,
@@ -21,6 +27,7 @@ import DateRangeContext, {
   InputName,
   SetInputRefMapValue,
 } from "./__internal__/date-range.context";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 
 interface DateInputValue {
   formattedValue: string;
@@ -128,6 +135,11 @@ export const DateRange = ({
   isOptional,
   ...rest
 }: DateRangeProps) => {
+  const { validationRedesignOptIn } = useContext(NewValidationContext);
+  const labelsInlineWithNewValidation = validationRedesignOptIn
+    ? false
+    : labelsInline;
+
   const l = useLocale();
   const { dateFnsLocale } = l.date;
   const { format } = useMemo(() => getFormatData(dateFnsLocale()), [
@@ -324,7 +336,7 @@ export const DateRange = ({
 
     return {
       label: rest[`${propsKey}Label`],
-      labelInline: labelsInline,
+      labelInline: labelsInlineWithNewValidation,
       value: inputValue,
       error: rest[`${propsKey}Error`],
       warning: rest[`${propsKey}Warning`],
@@ -343,7 +355,7 @@ export const DateRange = ({
   return (
     <StyledDateRange
       {...tagComponent("date-range", rest)}
-      labelsInline={labelsInline}
+      labelsInline={labelsInlineWithNewValidation}
       {...filterStyledSystemMarginProps(rest)}
     >
       <DateRangeContext.Provider

src/components/date-range/date-range.test.tsx

@@ -1117,3 +1117,22 @@ test("should have the expected styling when the `labelsInline` prop is set", ()
   expect(screen.getByTestId("start")).toHaveStyle("vertical-align: top");
   expect(screen.getByTestId("end")).toHaveStyle("vertical-align: top");
 });
+
+test("should have the default styling when the `labelsInline` prop is set and `validationRedesignOptIn` is set", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <DateRange
+        startLabel="start"
+        endLabel="end"
+        onChange={() => {}}
+        value={["10/10/2016", "11/11/2016"]}
+        labelsInline
+        startDateProps={{ "data-role": "start" }}
+        endDateProps={{ "data-role": "end" }}
+      />
+    </CarbonProvider>
+  );
+
+  expect(screen.getByTestId("start")).toHaveStyle("vertical-align: bottom");
+  expect(screen.getByTestId("end")).toHaveStyle("vertical-align: bottom");
+});

src/components/numeral-date/numeral-date-test.stories.tsx

@@ -184,6 +184,30 @@ export const NewDesignValidations = () => {
 
 NewDesignValidations.storyName = "new design validations";
 
+export const NewDesignValidationsWithLabelInline = () => {
+  return (
+    <CarbonProvider validationRedesignOptIn>
+      <h4>New designs validation</h4>
+      {["error", "warning"].map((validationType) =>
+        ["small", "medium", "large"].map((size) => (
+          <div style={{ width: "296px" }} key={`${validationType}-${size}`}>
+            <NumeralDate
+              label={`${size} - ${validationType}`}
+              {...{ [validationType]: "Message" }}
+              size={size as NumeralDateProps["size"]}
+              m={4}
+              labelInline
+            />
+          </div>
+        ))
+      )}
+    </CarbonProvider>
+  );
+};
+
+NewDesignValidationsWithLabelInline.storyName =
+  "new design validations with labelInline";
+
 export const Required = () => {
   return <NumeralDate label="Date of Birth" required />;
 };

src/components/numeral-date/numeral-date.component.tsx

@@ -259,6 +259,10 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
   const locale = useLocale();
   const { validationRedesignOptIn } = useContext(NewValidationContext);
 
+  const labelInlineWithNewValidation = validationRedesignOptIn
+    ? false
+    : labelInline;
+
   const { current: uniqueId } = useRef(id || guid());
   const isControlled = useRef(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
@@ -403,7 +407,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
           warning={internalWarning}
           info={info}
           label={label}
-          labelInline={labelInline}
+          labelInline={labelInlineWithNewValidation}
           labelWidth={labelWidth}
           labelAlign={labelAlign}
           labelHelp={!validationRedesignOptIn && labelHelp}

src/components/numeral-date/numeral-date.test.tsx

@@ -669,6 +669,24 @@ test("should render the `labelHelp` text as additional content and not render th
   expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
 });
 
+test("should have the default styling when the `labelsInline` prop is set and `validationRedesignOptIn` is set", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <NumeralDate
+        label="label"
+        value={{ dd: "02", mm: "01", yyyy: "2020" }}
+        onChange={() => {}}
+        labelHelp="labelHelp"
+        labelInline
+      />
+    </CarbonProvider>
+  );
+
+  const fields = screen.getAllByTestId("field-line");
+
+  expect(fields[0]).toHaveStyle("display: flex");
+});
+
 test("should render the help icon and tooltip when `labelHelp` prop is set and `validationRedesignOptIn` is not", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(

src/components/radio-button/radio-button-group/radio-button-group.component.tsx

@@ -86,6 +86,10 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
 
   const { validationRedesignOptIn } = useContext(NewValidationContext);
 
+  const legendInlineWithNewValidation = validationRedesignOptIn
+    ? false
+    : legendInline;
+
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate(
@@ -103,7 +107,7 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
     adaptiveSpacingBreakpoint
   );
 
-  let inlineLegend = legendInline;
+  let inlineLegend = legendInlineWithNewValidation;
   if (adaptiveLegendBreakpoint) {
     inlineLegend = !!isAboveLegendBreakpoint;
   }

src/components/radio-button/radio-button-group/radio-button-group.test.tsx

@@ -296,4 +296,29 @@ describe("when `validationRedesignOptIn` flag is true", () => {
     expect(screen.getAllByRole("radio")).toHaveLength(2);
     expect(screen.getByText("foo")).toBeVisible();
   });
+
+  it("renders legend with default styling when `legendInline` is set", () => {
+    render(
+      <CarbonProvider validationRedesignOptIn>
+        <RadioButtonGroup
+          name="group"
+          data-role="radio-group-inline"
+          onChange={() => {}}
+          legendInline
+        >
+          {[
+            <RadioButton key="radio1" value="radio1" label="Radio Button 1" />,
+            null,
+            undefined,
+            "foo",
+            <RadioButton key="radio2" value="radio2" label="Radio Button 2" />,
+          ]}
+        </RadioButtonGroup>
+      </CarbonProvider>
+    );
+
+    expect(screen.getByTestId("radio-group-inline")).not.toHaveStyle({
+      marginTop: "4px",
+    });
+  });
 });

src/components/radio-button/radio-button-test.stories.tsx

@@ -4,6 +4,8 @@ import { StoryFn } from "@storybook/react";
 import { RadioButtonGroup, RadioButton } from ".";
 import { RadioButtonGroupProps } from "./radio-button-group/radio-button-group.component";
 import { RadioButtonProps } from "./radio-button.component";
+import CarbonProvider from "../carbon-provider";
+import Box from "../box";
 
 export default {
   title: "Radio Button/Test",
@@ -13,6 +15,7 @@ export default {
     "WithValidationsOnRadioGroup",
     "WithTooltipPosition",
     "WithTooltipPositionOnRadioGroup",
+    "WithNewValidationLegendInline",
   ],
   parameters: {
     info: { disable: true },
@@ -187,3 +190,62 @@ export const RadioButtonGroupComponent = ({
     </div>
   );
 };
+
+export const WithNewValidationLegendInline = () => {
+  return (
+    <Box m={2}>
+      <CarbonProvider validationRedesignOptIn>
+        <RadioButtonGroup
+          legend="Label"
+          legendHelp="Hint Text"
+          name="error-validations-group-inline"
+          error="Error Message (Fix is required)"
+          legendInline
+        >
+          <RadioButton
+            id="radio-one-1"
+            value="radioOne1"
+            label="Radio Option 1"
+          />
+          <RadioButton
+            id="radio-one-2"
+            value="radioOne2"
+            label="Radio Option 2"
+          />
+          <RadioButton
+            id="radio-one-3"
+            value="radioOne3"
+            label="Radio Option 3"
+          />
+        </RadioButtonGroup>
+
+        <RadioButtonGroup
+          mt={2}
+          legend="Label"
+          legendHelp="Hint Text"
+          name="warning-validations-group-inline"
+          warning="Warning Message (Fix is optional)"
+        >
+          <RadioButton
+            id="radio-two-1"
+            value="radioTwo1"
+            label="Radio Option 1"
+          />
+          <RadioButton
+            id="radio-two-2"
+            value="radioTwo2"
+            label="Radio Option 2"
+          />
+          <RadioButton
+            id="radio-two-3"
+            value="radioTwo3"
+            label="Radio Option 3"
+          />
+        </RadioButtonGroup>
+      </CarbonProvider>
+    </Box>
+  );
+};
+
+WithNewValidationLegendInline.storyName =
+  "with new validation - legend inline ";

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

@@ -6,14 +6,21 @@ import Dialog from "../dialog";
 import Form from "../form";
 import Button from "../button";
 import isChromatic from "../../../.storybook/isChromatic";
+import Box from "../box";
+import CarbonProvider from "../carbon-provider/carbon-provider.component";
 
 interface TextareaTestProps extends TextareaProps {
   labelHelp?: string;
 }
 
 export default {
   title: "Textarea/Test",
-  includeStories: ["Default", "InScrollableContainer", "WithExpandableAndRows"],
+  includeStories: [
+    "Default",
+    "InScrollableContainer",
+    "WithExpandableAndRows",
+    "NewDesignValidationStoryWithLableInline",
+  ],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -258,3 +265,31 @@ WithExpandableAndRows.decorators = [
 WithExpandableAndRows.parameters = {
   chromatic: { disableSnapshot: false },
 };
+
+export const NewDesignValidationStoryWithLableInline: StoryType = () => {
+  return (
+    <CarbonProvider validationRedesignOptIn>
+      {["error", "warning"].map((validationType) => (
+        <Box width={296} key={`${validationType}-string-component`}>
+          <Textarea
+            label={`${validationType}`}
+            inputHint="Hint text (optional)."
+            {...{ [validationType]: "Message" }}
+            m={4}
+            labelInline
+          />
+          <Textarea
+            label={`readOnly - ${validationType}`}
+            inputHint="Hint text (optional)."
+            readOnly
+            {...{ [validationType]: "Message" }}
+            m={4}
+            labelInline
+          />
+        </Box>
+      ))}
+    </CarbonProvider>
+  );
+};
+NewDesignValidationStoryWithLableInline.storyName =
+  "Validations - String - New Design - Label Inline";