fix(radio-button): incorrect spacing on fieldHelp with validationRede…

…signOptIn flag

Fixes issue where fieldHelp did not have correct spacing with the new validaiton opt in flag. Also
fixes issue where all radio buttons in a required group would display the asterisk.

fix #6985

src/components/checkbox/checkbox-group/checkbox-group.component.tsx

@@ -74,7 +74,6 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
           legendSpacing={legendSpacing}
           error={error}
           warning={warning}
-          info={info}
           isRequired={required}
           isOptional={isOptional}
           {...tagComponent("checkboxgroup", props)}

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

@@ -124,7 +124,6 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
           legend={legend}
           error={error}
           warning={warning}
-          info={info}
           inline={inlineLegend}
           legendWidth={legendWidth}
           legendAlign={legendAlign}
@@ -168,8 +167,6 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
                     labelSpacing,
                     error: !!error,
                     warning: !!warning,
-                    info: !!info,
-                    required,
                     ...child.props,
                   });
                 })}

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

@@ -5,41 +5,70 @@ 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",
   includeStories: [
-    "Required",
+    "WithLabelHelp",
     "WithValidationsOnButtons",
     "WithValidationsOnRadioGroup",
     "WithTooltipPosition",
     "WithTooltipPositionOnRadioGroup",
-    "WithNewValidationLegendInline",
+    "WithNewValidation",
+    "WithNewValidationGroup",
   ],
   parameters: {
     info: { disable: true },
     chromatic: {
       disableSnapshot: true,
     },
   },
+  argTypes: {
+    labelSpacing: {
+      options: [1, 2],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "large"],
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
-export const Required: StoryFn<typeof RadioButton> = () => (
-  <RadioButtonGroup name="required" legend="Radio group legend" required>
-    <RadioButton id="radio-1" value="radio1" label="Radio Option 1" />
-    <RadioButton id="radio-2" value="radio2" label="Radio Option 2" />
-    <RadioButton id="radio-3" value="radio3" label="Radio Option 3" />
+export const WithLabelHelp: StoryFn<typeof RadioButton> = () => (
+  <RadioButtonGroup name="labelHelp" legend="Radio group legend">
+    <RadioButton
+      id="radio-1"
+      value="radio1"
+      label="Radio Option 1"
+      labelHelp="Radio 1"
+    />
+    <RadioButton
+      id="radio-2"
+      value="radio2"
+      label="Radio Option 2"
+      labelHelp="Radio 2"
+    />
+    <RadioButton
+      id="radio-3"
+      value="radio3"
+      label="Radio Option 3"
+      labelHelp="Radio 3"
+    />
   </RadioButtonGroup>
 );
 
-Required.storyName = "required";
+WithLabelHelp.storyName = "with labelHelp";
 
-export const WithValidationsOnButtons: StoryFn<typeof RadioButton> = () => (
+export const WithValidationsOnButtons = ({ ...args }) => (
   <RadioButtonGroup
     name="validations-on-buttons-group"
     onChange={() => console.log("change")}
-    legend="Radio group legend"
+    {...args}
   >
     <RadioButton
       id="validations-on-buttons-radio-1"
@@ -64,13 +93,18 @@ export const WithValidationsOnButtons: StoryFn<typeof RadioButton> = () => (
 );
 
 WithValidationsOnButtons.storyName = "with validations on RadioButton";
+WithValidationsOnButtons.args = {
+  legend: "Radio group legend",
+  legendInline: false,
+  required: false,
+  inline: false,
+};
 
-export const WithValidationsOnRadioGroup: StoryFn<typeof RadioButton> = () => (
+export const WithValidationsOnRadioGroup = ({ ...args }) => (
   <RadioButtonGroup
     name="validations-on-group"
     onChange={() => console.log("change")}
-    legend="Radio group legend"
-    error="Error message"
+    {...args}
   >
     <RadioButton
       id="validations-on-group-radio-1"
@@ -91,6 +125,14 @@ export const WithValidationsOnRadioGroup: StoryFn<typeof RadioButton> = () => (
 );
 
 WithValidationsOnRadioGroup.storyName = "with validations on RadioGroup";
+WithValidationsOnRadioGroup.args = {
+  error: "Error message",
+  warning: "",
+  legend: "Radio group legend",
+  legendInline: false,
+  required: false,
+  inline: false,
+};
 
 export const WithTooltipPosition: StoryFn<typeof RadioButton> = () => (
   <RadioButtonGroup
@@ -141,111 +183,61 @@ export const WithTooltipPositionOnRadioGroup: StoryFn<
 WithTooltipPositionOnRadioGroup.storyName =
   "with tooltip position on RadioGroup";
 
-const radioContainerWidth = 400;
-
-export const RadioButtonComponent = (props: Partial<RadioButtonProps>) => {
-  const [isChecked, setIsChecked] = React.useState(false);
+export const WithNewValidation = (props: Partial<RadioButtonProps>) => {
   return (
-    <div
-      style={{
-        marginTop: "64px",
-        marginLeft: "64px",
-        width: radioContainerWidth,
-      }}
-    >
+    <CarbonProvider validationRedesignOptIn>
       <RadioButton
         id="radio-1"
         value="radio1"
         label="Radiobutton 1"
-        checked={isChecked}
-        onChange={(e) => setIsChecked(e.target.checked)}
         {...props}
       />
-    </div>
+    </CarbonProvider>
   );
 };
 
-export const RadioButtonGroupComponent = ({
-  children,
+WithNewValidation.args = {
+  error: true,
+  warning: false,
+  fieldHelp: "",
+  labelHelp: "",
+  required: false,
+  checked: false,
+  disabled: false,
+  labelSpacing: 1,
+};
+
+export const WithNewValidationGroup = ({
   ...props
 }: Partial<RadioButtonGroupProps>) => {
   return (
-    <div
-      style={{
-        marginTop: "64px",
-        marginLeft: "64px",
-      }}
-    >
+    <CarbonProvider validationRedesignOptIn>
       <RadioButtonGroup
-        name="radiobuttongroup"
+        name="radio-button-group"
         legend="Radio group legend"
         {...props}
       >
         <RadioButton id="radio-1" value="radio1" label="Yes" />
         <RadioButton id="radio-2" value="radio2" label="No" />
-        <RadioButton id="radio-3" value="radio3" label="Maybe" />
-
-        {children}
+        <RadioButton
+          id="radio-3"
+          value="radio3"
+          label="Maybe"
+          fieldHelp="fieldHelp text"
+        />
       </RadioButtonGroup>
-    </div>
+    </CarbonProvider>
   );
 };
 
-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>
-  );
+WithNewValidationGroup.args = {
+  error: "Error message",
+  warning: "",
+  legendHelp: "Legend help text",
+  legendInline: false,
+  required: true,
+  inline: false,
+};
+WithNewValidationGroup.parameters = {
+  chromatic: { disableSnapshot: false },
 };
-
-WithNewValidationLegendInline.storyName =
-  "with new validation - legend inline ";

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

@@ -86,23 +86,21 @@ export const RadioButton = React.forwardRef<
     );
 
     const validationProps = {
-      disabled,
-      inputWidth,
       error,
       warning,
       info,
     };
 
     const commonProps = {
       ...validationProps,
+      disabled,
+      inputWidth,
       fieldHelpInline,
       labelSpacing,
     };
 
     const inputProps = {
-      ...(validationRedesignOptIn
-        ? { ...validationProps }
-        : { ...commonProps }),
+      ...commonProps,
       autoFocus,
       checked,
       fieldHelp,
@@ -142,9 +140,7 @@ export const RadioButton = React.forwardRef<
         inline={inline}
         reverse={reverse}
         size={size}
-        {...(validationRedesignOptIn
-          ? { ...validationProps }
-          : { ...commonProps, fieldHelp })}
+        {...commonProps}
         {...marginProps}
       >
         <CheckableInput {...inputProps}>