fix(checkbox-group, radio-button-group): ensure right-aligned legend does not extend past the input

Author: nuria1110

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

@@ -102,6 +102,7 @@ export const CheckboxGroup = ({
           warning={warning}
           isRequired={required}
           isOptional={isOptional}
+          width="fit-content"
           {...(combinedAriaDescribedBy && {
             "aria-describedby": combinedAriaDescribedBy,
           })}

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

@@ -145,66 +145,29 @@ NewValidation.args = {
   inline: false,
 };
 
-export const GroupWithFieldMetadata = ({ ...args }: CheckboxGroupProps) => {
+export const WithLegendAlignment = ({ ...args }: CheckboxGroupProps) => {
   return (
     <CarbonProvider validationRedesignOptIn>
-      {["left", "right"].map((legendAlign) => (
-        <div key={legendAlign}>
-          <CheckboxGroup
-            {...args}
-            legendAlign={legendAlign as CheckboxGroupProps["legendAlign"]}
-          >
-            <Checkbox label="Checkbox 1" />
-            <Checkbox label="Checkbox 2" />
-          </CheckboxGroup>
-        </div>
-      ))}
+      <CheckboxGroup {...args} legendAlign="left" mb={2}>
+        <Checkbox label="Checkbox option 1" />
+        <Checkbox label="Checkbox option 2" fieldHelp="fieldHelp Text" />
+      </CheckboxGroup>
+      <CheckboxGroup {...args} legendAlign="right">
+        <Checkbox label="Checkbox option 1" />
+        <Checkbox label="Checkbox option 2" fieldHelp="fieldHelp Text" />
+      </CheckboxGroup>
     </CarbonProvider>
   );
 };
-GroupWithFieldMetadata.storyName = "Group With Field Metadata";
-
-GroupWithFieldMetadata.args = {
-  id: "default",
-  label: "Example Checkbox",
-  autoFocus: false,
-  disabled: false,
-  fieldHelp: "This text provides help for the input.",
-  fieldHelpInline: false,
-  reverse: false,
-  labelHelp: "This text provides more information for the label.",
+WithLegendAlignment.storyName = "With Legend Alignment";
+WithLegendAlignment.args = {
+  id: "label-align",
   legend: "Checkbox Group",
   legendHelp: "Help text",
   legendInline: false,
-  legendAlign: "left",
-  inputWidth: 0,
-  labelWidth: 0,
-  labelSpacing: 1,
-  size: "small",
-  value: "",
-  ml: "0",
-  adaptiveSpacingBreakpoint: 0,
   required: false,
   isOptional: false,
-  helpAriaLabel: "",
-  validationOnLabel: false,
   validationIconId: "",
-  error: "",
+  error: "Error message",
   warning: "",
-  info: "",
-};
-
-GroupWithFieldMetadata.argTypes = {
-  labelSpacing: {
-    options: [1, 2],
-    control: {
-      type: "select",
-    },
-  },
-  size: {
-    options: ["small", "large"],
-    control: {
-      type: "select",
-    },
-  },
 };

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

@@ -150,6 +150,7 @@ export const RadioButtonGroup = ({
           legendAlign={legendAlign}
           isRequired={required}
           isOptional={isOptional}
+          width="fit-content"
           {...tagComponent("radiogroup", rest)}
           {...marginProps}
           ml={marginLeft}

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

@@ -8,16 +8,6 @@ import CarbonProvider from "../carbon-provider";
 
 export default {
   title: "Radio Button/Test",
-  includeStories: [
-    "WithLabelHelp",
-    "WithValidationsOnButtons",
-    "WithValidationsOnRadioGroup",
-    "WithTooltipPosition",
-    "WithTooltipPositionOnRadioGroup",
-    "WithNewValidation",
-    "WithNewValidationGroup",
-    "WithHintTextAlignment",
-  ],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -133,6 +123,7 @@ WithValidationsOnRadioGroup.args = {
   legendInline: false,
   required: false,
   inline: false,
+  legendAlign: "left",
 };
 
 export const WithTooltipPosition: StoryFn<typeof RadioButton> = () => (
@@ -240,35 +231,46 @@ WithNewValidationGroup.parameters = {
   chromatic: { disableSnapshot: false },
 };
 
-export const WithHintTextAlignment = ({
+export const WithLegendAlignment = ({
   ...props
 }: Partial<RadioButtonGroupProps>) => {
   return (
     <CarbonProvider validationRedesignOptIn>
-      {["left", "right"].map((legendAlign) => {
-        return (
-          <RadioButtonGroup
-            name="radio-button-group"
-            legendAlign={legendAlign as RadioButtonGroupProps["legendAlign"]}
-            {...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"
-              fieldHelp="fieldHelp text"
-            />
-          </RadioButtonGroup>
-        );
-      })}
+      <RadioButtonGroup
+        name="radio-button-group-left"
+        {...props}
+        legendAlign="left"
+        mb={2}
+      >
+        <RadioButton id="radio-1-left" value="radio1" label="Yes" />
+        <RadioButton id="radio-2-left" value="radio2" label="No" />
+        <RadioButton
+          id="radio-3-left"
+          value="radio3"
+          label="RadioButton with a longer label"
+          fieldHelp="fieldHelp text"
+        />
+      </RadioButtonGroup>
+      <RadioButtonGroup
+        name="radio-button-group-right"
+        {...props}
+        legendAlign="right"
+      >
+        <RadioButton id="radio-1-right" value="radio1" label="Yes" />
+        <RadioButton id="radio-2-right" value="radio2" label="No" />
+        <RadioButton
+          id="radio-3-right"
+          value="radio3"
+          label="RadioButton with a longer label"
+          fieldHelp="fieldHelp text"
+        />
+      </RadioButtonGroup>
     </CarbonProvider>
   );
 };
 
-WithHintTextAlignment.args = {
-  id: "with-hint-text-alignment",
+WithLegendAlignment.args = {
+  id: "with-legend-alignment",
   legend: "Radio group legend",
   error: "Error message",
   warning: "",
@@ -277,6 +279,6 @@ WithHintTextAlignment.args = {
   isOptional: false,
   inline: false,
 };
-WithHintTextAlignment.parameters = {
+WithLegendAlignment.parameters = {
   chromatic: { disableSnapshot: false },
 };