Merge pull request #6884 from Sage/FE-6703

fix(radio-button, checkbox): prevent labelHelp and fieldHelp from rendering with new validation
Sage · Aug 23, 2024 · eb8311e · eb8311e
2 parents 9df9267 + 2f2f340
commit eb8311e
Show file tree

Hide file tree

Showing 17 changed files with 313 additions and 201 deletions.
diff --git a/src/__internal__/checkable-input/checkable-input.component.tsx b/src/__internal__/checkable-input/checkable-input.component.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useContext } from "react";
 
 import {
   StyledCheckableInput,
@@ -12,6 +12,7 @@ import HiddenCheckableInput, {
 import guid from "../utils/helpers/guid";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import { ValidationProps } from "../validations";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 
 export interface CommonCheckableInputProps
   extends ValidationProps,
@@ -20,10 +21,10 @@ export interface CommonCheckableInputProps
   disabled?: boolean;
   /** @private @ignore */
   loading?: boolean;
-  /** Help content to be displayed under an input */
+  /** [Legacy] Help content to be displayed under an input */
   fieldHelp?: React.ReactNode;
   /**
-   * If true, the FieldHelp will be displayed inline
+   * [Legacy] If true, the FieldHelp will be displayed inline
    * To be used with labelInline prop set to true
    */
   fieldHelpInline?: boolean;
@@ -33,7 +34,7 @@ export interface CommonCheckableInputProps
   inputWidth?: number;
   /** Label content */
   label?: React.ReactNode;
-  /** The content for the help tooltip, to appear next to the Label */
+  /** [Legacy] The content for the help tooltip, to appear next to the Label */
   labelHelp?: React.ReactNode;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing?: 1 | 2;
@@ -100,6 +101,7 @@ const CheckableInput = React.forwardRef(
     ref: React.ForwardedRef<HTMLInputElement>
   ) => {
     const { current: id } = useRef(inputId || guid());
+    const { validationRedesignOptIn } = useContext(NewValidationContext);
 
     const {
       labelId,
@@ -137,7 +139,7 @@ const CheckableInput = React.forwardRef(
       // However, we still want the input element to receive the required prop
       isRequired: required,
       isOptional,
-      useValidationIcon: validationOnLabel,
+      useValidationIcon: validationRedesignOptIn ? false : validationOnLabel,
     };
 
     const inputProps = {

diff --git a/src/components/checkbox/checkbox-group/checkbox-group.component.tsx b/src/components/checkbox/checkbox-group/checkbox-group.component.tsx
@@ -17,8 +17,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
   /** The content for the CheckboxGroup Legend */
   legend?: string;
   /**
-   * The content for the CheckboxGroup Help tooltip,
-   * will be rendered as hint text when `validationRedesignOptIn` is true.
+   * The content for the CheckboxGroup hint text,
+   * will only be rendered when `validationRedesignOptIn` is true.
    */
   legendHelp?: string;
   /** [Legacy] When true, legend is placed inline with the checkboxes */
@@ -39,7 +39,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
   isOptional?: boolean;
   /** [Legacy] Overrides the default tooltip */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** When true, Checkboxes are in line */
+  /** When true, Checkboxes are inline */
   inline?: boolean;
 }
 
@@ -69,12 +69,8 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
         <Fieldset
           legend={legend}
           inline={legendInline}
-          legendWidth={legendWidth}
-          legendAlign={legendAlign}
-          legendSpacing={legendSpacing}
           error={error}
           warning={warning}
-          info={info}
           isRequired={required}
           isOptional={isOptional}
           {...tagComponent("checkboxgroup", props)}
@@ -90,7 +86,6 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
             <StyledCheckboxGroup
               data-component="checkbox-group"
               data-role="checkbox-group"
-              legendInline={legendInline}
               inline={inline}
             >
               <CheckboxGroupContext.Provider
@@ -127,6 +122,7 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
               data-component="checkbox-group"
               data-role="checkbox-group"
               legendInline={legendInline}
+              inline={inline}
             >
               <CheckboxGroupContext.Provider
                 value={{

diff --git a/src/components/checkbox/checkbox-group/checkbox-group.test.tsx b/src/components/checkbox/checkbox-group/checkbox-group.test.tsx
@@ -121,6 +121,27 @@ test("should render with expected styles when inline is true", () => {
   });
 });
 
+test("should not render labelHelp and fieldHelp passed to children when validationRedesignOptIn is true", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <CheckboxGroup legend="legend">
+        <Checkbox
+          value="1"
+          label="label"
+          labelHelp="labelHelp"
+          fieldHelp="fieldHelp"
+          onChange={() => {}}
+        />
+      </CheckboxGroup>
+    </CarbonProvider>
+  );
+
+  expect(
+    screen.queryByRole("button", { name: "help" })
+  ).not.toBeInTheDocument();
+  expect(screen.queryByText("fieldHelp")).not.toBeInTheDocument();
+});
+
 testStyledSystemMargin((props) => (
   <CheckboxGroup legend="legend" {...props}>
     <Checkbox value="1" label="label" onChange={() => {}} />

diff --git a/src/components/checkbox/checkbox-test.stories.tsx b/src/components/checkbox/checkbox-test.stories.tsx
@@ -1,12 +1,18 @@
 import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 
-import { Checkbox, CheckboxProps } from ".";
+import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from ".";
 import Box from "../box";
+import CarbonProvider from "../carbon-provider";
 
 export default {
   title: "Checkbox/Test",
-  includeStories: ["Default", "WithLongLabel"],
+  includeStories: [
+    "Default",
+    "WithLongLabel",
+    "WithNewValidation",
+    "WithNewValidationGroup",
+  ],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -111,3 +117,42 @@ WithLongLabel.args = {
   label: "A really long description that will wrap onto the next line.",
   size: "",
 };
+
+export const WithNewValidation = (props: Partial<CheckboxProps>) => {
+  return (
+    <CarbonProvider validationRedesignOptIn>
+      <Checkbox label="Checkbox 1" {...props} />
+    </CarbonProvider>
+  );
+};
+
+WithNewValidation.args = {
+  error: "Error message",
+  warning: "",
+  fieldHelp: "field help text",
+  labelHelp: "label help text",
+  required: false,
+  checked: false,
+};
+
+export const WithNewValidationGroup = ({
+  ...props
+}: Partial<CheckboxGroupProps>) => {
+  return (
+    <CarbonProvider validationRedesignOptIn>
+      <CheckboxGroup legend="Checkbox legend" {...props}>
+        <Checkbox label="Checkbox 1" labelHelp="this shouldn't render" />
+        <Checkbox label="Checkbox 2" fieldHelp="this shouldn't render either" />
+        <Checkbox label="Checkbox 3" />
+      </CheckboxGroup>
+    </CarbonProvider>
+  );
+};
+
+WithNewValidationGroup.args = {
+  error: "Error message",
+  warning: "",
+  legendHelp: "Legend help text",
+  legendInline: false,
+  required: false,
+};
diff --git a/src/components/checkbox/checkbox.component.tsx b/src/components/checkbox/checkbox.component.tsx
@@ -24,13 +24,13 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
   "data-element"?: string;
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role"?: string;
-  /** Aria label for rendered help component */
+  /** [Legacy] Aria label for rendered help component */
   helpAriaLabel?: string;
   /** When true label is inline */
   labelInline?: boolean;
   /** Accepts a callback function which is triggered on click event */
   onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-  /** Overrides the default tooltip position */
+  /** [Legacy] Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** The value of the checkbox, passed on form submit */
   value?: string;
@@ -97,6 +97,15 @@ export const Checkbox = React.forwardRef(
       );
     }
 
+    const commonProps = {
+      fieldHelpInline,
+      labelSpacing,
+      labelHelp,
+      fieldHelp,
+    };
+
+    const isInGroup = Object.keys(checkboxGroupContext).length !== 0;
+
     const inputProps = {
       ariaLabelledBy,
       onClick,
@@ -110,27 +119,22 @@ export const Checkbox = React.forwardRef(
       type: "checkbox",
       name,
       reverse: !reverse,
-      fieldHelp,
       autoFocus,
-      labelHelp,
-      labelSpacing,
       required,
       isOptional,
-      fieldHelpInline,
       checked,
       disabled,
       inputWidth,
       labelWidth,
       ref,
       ...rest,
+      ...(isInGroup && validationRedesignOptIn ? {} : { ...commonProps }),
     };
 
     const validationProps = {
       error: contextError || error,
       warning: contextWarning || warning,
-      ...(validationRedesignOptIn
-        ? { validationOnLabel: false }
-        : { info: contextInfo || info }),
+      info: contextInfo || info,
     };
 
     const marginProps = useFormSpacing(rest);

diff --git a/src/components/checkbox/checkbox.mdx b/src/components/checkbox/checkbox.mdx
@@ -63,34 +63,37 @@ import { Checkbox, CheckboxGroup } from "carbon-react/lib/components/checkbox";
 
 <Canvas of={CheckboxStories.Reversed} />
 
-### With fieldHelp
+### With custom labelWidth
 
-<Canvas of={CheckboxStories.WithFieldHelp} />
+<Canvas of={CheckboxStories.WithCustomLabelWidth} />
 
-### With labelHelp
+### Checkbox Group
 
-**Note:** The `legendHelp` tooltip will be rendered as hint text if the `validationRedesignOptIn` flag on the `CarbonProvider` is true.
+<Canvas of={CheckboxStories.CheckboxGroupStory} />
 
-<Canvas of={CheckboxStories.WithLabelHelp} />
+### Inline Checkbock Group
 
-### With custom labelWidth
+A `Checkbox` in a `CheckboxGroup` can be displayed inline using the `inline` prop. 
 
-<Canvas of={CheckboxStories.WithCustomLabelWidth} />
+<Canvas of={CheckboxStories.NewInline} />
 
-### Checkbox Group
+### Required
 
-<Canvas of={CheckboxStories.CheckboxGroupStory} />
+You can use the `required` prop to indicate if the fields are mandatory. This can be done on 
+an individual checkbox input or on the group level.
 
-### With inline legend
+<Canvas of={CheckboxStories.Required} />
 
-The legend can be made inline by passing the `legendInline` prop to `CheckboxGroup`. Its width can be changed with the `legendWidth` prop and its text alignment with `legendAlign`.
+<Canvas of={CheckboxStories.CheckboxGroupRequired} />
 
-The spacing between the legend and the checkboxes can be changed with the `legendSpacing` prop, this can be `1` or `2`, which is multiplied by the base theme spacing constant of `8px`, 
-so therefore `8px` or `16px`. The default is `2` for this prop.
+### IsOptional
 
-**Note:** The `legendInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true. 
+You can use the `isOptional` prop to indicate if the fields are optional. This can be done on 
+an individual checkbox input or on the group level.
 
-<Canvas of={CheckboxStories.CheckboxGroupWithInlineLegend} />
+<Canvas of={CheckboxStories.IsOptional} />
+
+<Canvas of={CheckboxStories.CheckboxGroupIsOptional} />
 
 ## Validations
 
@@ -100,13 +103,11 @@ For more information check our [Validations](../?path=/docs/documentation-valida
 
 This is an example of `Checkbox` in a `CheckboxGroup` with validations passed as a string.
 
-**Note:** The `legendHelp` tooltip will be rendered as "Hint text".
-
-<Canvas of={ValidationStories.NewStringValidation} />
+You can use the `legendHelp` prop to provide a hint text for the group.
 
-This is an example of `Checkbox` in a `CheckboxGroup` displayed inline using the `inline` prop. 
+**Note:** The `labelHelp` and/or `fieldHelp` props will not be supported if a `Checkbox` is within a group.
 
-<Canvas of={ValidationStories.NewInline} />
+<Canvas of={ValidationStories.NewStringValidation} />
 
 This is an example of `Checkbox` in a `CheckboxGroup` with validations passed as a string displayed inline.
 
@@ -116,23 +117,24 @@ This is an example of `Checkbox` with validations passed as boolean values.
 
 <Canvas of={ValidationStories.NewBooleanValidation} />
 
-### Required
+### With inline legend
 
-You can use the `required` prop to indicate if the fields are mandatory. This can be done on 
-an individual checkbox input or on the group level.
+The legend can be made inline by passing the `legendInline` prop to `CheckboxGroup`. Its width can be changed with the `legendWidth` prop and its text alignment with `legendAlign`.
 
-<Canvas of={CheckboxStories.Required} />
+The spacing between the legend and the checkboxes can be changed with the `legendSpacing` prop, this can be `1` or `2`, which is multiplied by the base theme spacing constant of `8px`, 
+so therefore `8px` or `16px`. The default is `2` for this prop.
 
-<Canvas of={CheckboxStories.CheckboxGroupRequired} />
+**Note:** The `legendInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true. 
 
-### IsOptional
+<Canvas of={CheckboxStories.CheckboxGroupWithInlineLegend} />
 
-You can use the `isOptional` prop to indicate if the fields are optional. This can be done on 
-an individual checkbox input or on the group level.
+### With fieldHelp
 
-<Canvas of={CheckboxStories.IsOptional} />
+<Canvas of={CheckboxStories.WithFieldHelp} />
 
-<Canvas of={CheckboxStories.CheckboxGroupIsOptional} />
+### With labelHelp
+
+<Canvas of={CheckboxStories.WithLabelHelp} />
 
 ## Props
 

diff --git a/src/components/checkbox/checkbox.stories.tsx b/src/components/checkbox/checkbox.stories.tsx
@@ -125,6 +125,32 @@ export const CheckboxGroupStory: Story = () => {
 };
 CheckboxGroupStory.storyName = "CheckboxGroup";
 
+export const NewInline: Story = () => {
+  return (
+    <CheckboxGroup legend="Label" inline>
+      <Checkbox
+        id="checkbox-one-new-inline"
+        key="checkbox-one-new-inline"
+        label="Example checkbox one"
+        name="checkbox-one-new-inline"
+      />
+      <Checkbox
+        id="checkbox-two-new-inline"
+        key="checkbox-two-new-inline"
+        label="Example checkbox two"
+        name="checkbox-two-new-inline"
+      />
+      <Checkbox
+        id="checkbox-three-new-inline"
+        key="checkbox-three-new-inline"
+        label="Example checkbox three"
+        name="checkbox-three-new-inline"
+      />
+    </CheckboxGroup>
+  );
+};
+NewInline.storyName = "Inline CheckboxGroup";
+
 export const CheckboxGroupWithInlineLegend: Story = () => {
   return (
     <CheckboxGroup