Merge pull request #6964 from Sage/restore-field-help

fix(checkbox, radio-button): restore support for `labelHelp` and `fieldHelp`
Sage · Sep 18, 2024 · 4f9ccaa · 4f9ccaa
2 parents 924963f + 81dfeb2
commit 4f9ccaa
Show file tree

Hide file tree

Showing 17 changed files with 201 additions and 313 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, useContext } from "react";
+import React, { useRef } from "react";
 
 import {
   StyledCheckableInput,
@@ -12,7 +12,6 @@ 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,
@@ -21,10 +20,10 @@ export interface CommonCheckableInputProps
   disabled?: boolean;
   /** @private @ignore */
   loading?: boolean;
-  /** [Legacy] Help content to be displayed under an input */
+  /** Help content to be displayed under an input */
   fieldHelp?: React.ReactNode;
   /**
-   * [Legacy] If true, the FieldHelp will be displayed inline
+   * If true, the FieldHelp will be displayed inline
    * To be used with labelInline prop set to true
    */
   fieldHelpInline?: boolean;
@@ -34,7 +33,7 @@ export interface CommonCheckableInputProps
   inputWidth?: number;
   /** Label content */
   label?: React.ReactNode;
-  /** [Legacy] The content for the help tooltip, to appear next to the Label */
+  /** 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;
@@ -101,7 +100,6 @@ const CheckableInput = React.forwardRef(
     ref: React.ForwardedRef<HTMLInputElement>
   ) => {
     const { current: id } = useRef(inputId || guid());
-    const { validationRedesignOptIn } = useContext(NewValidationContext);
 
     const {
       labelId,
@@ -139,7 +137,7 @@ const CheckableInput = React.forwardRef(
       // However, we still want the input element to receive the required prop
       isRequired: required,
       isOptional,
-      useValidationIcon: validationRedesignOptIn ? false : validationOnLabel,
+      useValidationIcon: 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 hint text,
-   * will only be rendered when `validationRedesignOptIn` is true.
+   * The content for the CheckboxGroup Help tooltip,
+   * will be rendered as hint text 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 inline */
+  /** When true, Checkboxes are in line */
   inline?: boolean;
 }
 
@@ -69,8 +69,12 @@ 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)}
@@ -86,6 +90,7 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
             <StyledCheckboxGroup
               data-component="checkbox-group"
               data-role="checkbox-group"
+              legendInline={legendInline}
               inline={inline}
             >
               <CheckboxGroupContext.Provider
@@ -122,7 +127,6 @@ 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,27 +121,6 @@ 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,18 +1,12 @@
 import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 
-import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from ".";
+import { Checkbox, CheckboxProps } from ".";
 import Box from "../box";
-import CarbonProvider from "../carbon-provider";
 
 export default {
   title: "Checkbox/Test",
-  includeStories: [
-    "Default",
-    "WithLongLabel",
-    "WithNewValidation",
-    "WithNewValidationGroup",
-  ],
+  includeStories: ["Default", "WithLongLabel"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -117,42 +111,3 @@ 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;
-  /** [Legacy] Aria label for rendered help component */
+  /** 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;
-  /** [Legacy] Overrides the default tooltip position */
+  /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** The value of the checkbox, passed on form submit */
   value?: string;
@@ -97,15 +97,6 @@ export const Checkbox = React.forwardRef(
       );
     }
 
-    const commonProps = {
-      fieldHelpInline,
-      labelSpacing,
-      labelHelp,
-      fieldHelp,
-    };
-
-    const isInGroup = Object.keys(checkboxGroupContext).length !== 0;
-
     const inputProps = {
       ariaLabelledBy,
       onClick,
@@ -119,22 +110,27 @@ 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,
-      info: contextInfo || info,
+      ...(validationRedesignOptIn
+        ? { validationOnLabel: false }
+        : { info: contextInfo || info }),
     };
 
     const marginProps = useFormSpacing(rest);

diff --git a/src/components/checkbox/checkbox.mdx b/src/components/checkbox/checkbox.mdx
@@ -63,37 +63,34 @@ import { Checkbox, CheckboxGroup } from "carbon-react/lib/components/checkbox";
 
 <Canvas of={CheckboxStories.Reversed} />
 
-### With custom labelWidth
-
-<Canvas of={CheckboxStories.WithCustomLabelWidth} />
+### With fieldHelp
 
-### Checkbox Group
+<Canvas of={CheckboxStories.WithFieldHelp} />
 
-<Canvas of={CheckboxStories.CheckboxGroupStory} />
+### With labelHelp
 
-### Inline Checkbock Group
+**Note:** The `legendHelp` tooltip will be rendered as hint text if the `validationRedesignOptIn` flag on the `CarbonProvider` is true.
 
-A `Checkbox` in a `CheckboxGroup` can be displayed inline using the `inline` prop. 
+<Canvas of={CheckboxStories.WithLabelHelp} />
 
-<Canvas of={CheckboxStories.NewInline} />
+### With custom labelWidth
 
-### Required
+<Canvas of={CheckboxStories.WithCustomLabelWidth} />
 
-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.
+### Checkbox Group
 
-<Canvas of={CheckboxStories.Required} />
+<Canvas of={CheckboxStories.CheckboxGroupStory} />
 
-<Canvas of={CheckboxStories.CheckboxGroupRequired} />
+### With inline legend
 
-### IsOptional
+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`.
 
-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.
+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.IsOptional} />
+**Note:** The `legendInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true. 
 
-<Canvas of={CheckboxStories.CheckboxGroupIsOptional} />
+<Canvas of={CheckboxStories.CheckboxGroupWithInlineLegend} />
 
 ## Validations
 
@@ -103,12 +100,14 @@ 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.
 
-You can use the `legendHelp` prop to provide a hint text for the group.
-
-**Note:** The `labelHelp` and/or `fieldHelp` props will not be supported if a `Checkbox` is within a group.
+**Note:** The `legendHelp` tooltip will be rendered as "Hint text".
 
 <Canvas of={ValidationStories.NewStringValidation} />
 
+This is an example of `Checkbox` in a `CheckboxGroup` displayed inline using the `inline` prop. 
+
+<Canvas of={ValidationStories.NewInline} />
+
 This is an example of `Checkbox` in a `CheckboxGroup` with validations passed as a string displayed inline.
 
 <Canvas of={ValidationStories.NewStringValidationInline} />
@@ -117,24 +116,23 @@ This is an example of `Checkbox` with validations passed as boolean values.
 
 <Canvas of={ValidationStories.NewBooleanValidation} />
 
-### With inline legend
-
-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`.
+### 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.
+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.
 
-**Note:** The `legendInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true. 
+<Canvas of={CheckboxStories.Required} />
 
-<Canvas of={CheckboxStories.CheckboxGroupWithInlineLegend} />
+<Canvas of={CheckboxStories.CheckboxGroupRequired} />
 
-### With fieldHelp
+### IsOptional
 
-<Canvas of={CheckboxStories.WithFieldHelp} />
+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 labelHelp
+<Canvas of={CheckboxStories.IsOptional} />
 
-<Canvas of={CheckboxStories.WithLabelHelp} />
+<Canvas of={CheckboxStories.CheckboxGroupIsOptional} />
 
 ## Props
 

diff --git a/src/components/checkbox/checkbox.stories.tsx b/src/components/checkbox/checkbox.stories.tsx
@@ -125,32 +125,6 @@ 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