Revert RadioGroup changes, in favor of #151

fortanix · Feb 17, 2025 · b50e445 · b50e445
1 parent 9622b97
commit b50e445
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 56 deletions.
diff --git a/src/components/forms/fields/RadioGroup/RadioGroup.module.scss b/src/components/forms/fields/RadioGroup/RadioGroup.module.scss
@@ -7,25 +7,16 @@
 @layer baklava.components {
   .bk-radio-group {
     @include bk.component-base(bk-radio-group);
-    // unfortunately `<fieldset>` can't be display:flex, it would ignore a gap, that's why the legend has a margin-bottom.
+    display: flex;
 
-    .bk-radio-group__legend {
-      @include bk.font(bk.$font-family-body, bk.$font-weight-semibold, bk.$font-size-m);
-      margin-block-end: bk.$spacing-3;
+    &.bk-radio-group--vertical {
+      flex-direction: column;
+      row-gap: 20px;
     }
-
-    .bk-radio-group__control {
-      display: flex;
-
-      &.bk-radio-group__control--vertical {
-        flex-direction: column;
-        row-gap: 20px;
-      }
-
-      &.bk-radio-group__control--horizontal {
-        flex-direction: row;
-        column-gap: bk.$spacing-7;
-      }
+
+    &.bk-radio-group--horizontal {
+      flex-direction: row;
+      column-gap: bk.$spacing-7;
     }
   }
 }
diff --git a/src/components/forms/fields/RadioGroup/RadioGroup.stories.tsx b/src/components/forms/fields/RadioGroup/RadioGroup.stories.tsx
@@ -49,16 +49,3 @@ export const RadioGroupHorizontal: Story = {
     direction: 'horizontal',
   },
 };
-
-export const RadioGroupVerticalWithLegend: Story = {
-  args: {
-    legend: 'Legend',
-  },
-};
-
-export const RadioGroupHorizontalWithLegend: Story = {
-  args: {
-    direction: 'horizontal',
-    legend: 'Legend',
-  },
-};
diff --git a/src/components/forms/fields/RadioGroup/RadioGroup.tsx b/src/components/forms/fields/RadioGroup/RadioGroup.tsx
@@ -2,7 +2,7 @@
 |* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
+import { classNames as cx } from '../../../../util/componentUtil.ts';
 import * as React from 'react';
 
 import cl from './RadioGroup.module.scss';
@@ -13,39 +13,23 @@ import { RadioField } from '../RadioField/RadioField.tsx';
 export { cl as RadioGroupClassNames };
 
 export type RadioGroupProps = React.PropsWithChildren<{
-  /** Direction of the radio elements, defaults as vertical. */
   direction?: undefined | "vertical" | "horizontal",
-
-  /** Legend for the group of radio buttons. */
-  legend?: undefined | React.ReactNode,
-
-  /** Props for the `<legend>` element, if `legend` is defined. */
-  legendProps?: undefined | ComponentProps<'legend'>,
 }>;
 
 /**
  * Radio group component, wrapping multiple RadioField components vertically or horizontally.
  */
 export const RadioGroup = Object.assign(
   (props: RadioGroupProps) => {
-    const { children, legend, direction = 'vertical', legendProps = {} } = props;
+    const { children, direction = 'vertical' } = props;
     return (
-      <div className={cx('bk', cl['bk-radio-group'])}>
-        {legend &&
-          <legend
-            {...legendProps}
-            className={cx(cl['bk-radio-group__legend'], legendProps.className)}
-          >
-            {legend}
-          </legend>
-        }
-        <div className={cx(
-          cl['bk-radio-group__control'],
-          { [cl['bk-radio-group__control--horizontal']]: direction === 'horizontal' },
-          { [cl['bk-radio-group__control--vertical']]: direction === 'vertical' },
-        )}>
-          {children}
-        </div>
+      <div className={cx(
+        'bk',
+        cl['bk-radio-group'],
+        { [cl['bk-radio-group--horizontal']]: direction === 'horizontal' },
+        { [cl['bk-radio-group--vertical']]: direction === 'vertical' },
+      )}>
+        {children}
       </div>
     );
   },

diff --git a/src/components/overlays/DialogModal/DialogModal.stories.tsx b/src/components/overlays/DialogModal/DialogModal.stories.tsx
@@ -262,7 +262,7 @@ const DialogModalControlledPattern1 = (props: React.ComponentProps<typeof Dialog
         <p>
           <Form>
             <FormLayout>
-              <RadioGroup direction="horizontal" legend="Label">
+              <RadioGroup direction="horizontal">
                 {radioOptions.map(radioOption =>
                   <RadioGroup.RadioField
                     key={radioOption}