Code Review: Refactor RadioButton* to Radio*

src/components/forms/controls/RadioButton/RadioButton.module.scss → src/components/forms/controls/Radio/Radio.module.scss

@@ -5,8 +5,8 @@
 @use '../../../../styling/defs.scss' as bk;
 
 @layer baklava.components {
-  .bk-radio-button {
-    @include bk.component-base(bk-radio-button);
+  .bk-radio {
+    @include bk.component-base(bk-radio);
 
     cursor: pointer;
 
@@ -37,13 +37,14 @@
       }
     }
     &:focus-visible, &.pseudo-focused {
+      // those have !important to override CSS rules on layer accessibility
       outline: 2px solid bk.$theme-radio-focus !important;
       outline-offset: 0 !important;
     }
 
-    // @media (prefers-reduced-motion: no-preference) {
-    //   transition: none 100ms ease-out;
-    //   transition-property: background-color, background-position, border-color;
-    // }
+    @media (prefers-reduced-motion: no-preference) {
+      transition: none 100ms ease-out;
+      transition-property: background-color, background-position, border-color;
+    }
   }
 }

src/components/forms/controls/RadioButton/RadioButton.stories.tsx → src/components/forms/controls/Radio/Radio.stories.tsx

@@ -6,16 +6,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import * as React from 'react';
 
-import { RadioButton } from './RadioButton.tsx';
+import { Radio } from './Radio.tsx';
 
-import cl from './RadioButton.module.scss';
+import cl from './Radio.module.scss';
 
 
-type RadioButtonArgs = React.ComponentProps<typeof RadioButton>;
-type Story = StoryObj<RadioButtonArgs>;
+type RadioArgs = React.ComponentProps<typeof Radio>;
+type Story = StoryObj<RadioArgs>;
 
 export default {
-  component: RadioButton,
+  component: Radio,
   parameters: {
     layout: 'centered',
   },
@@ -26,8 +26,8 @@ export default {
   decorators: [
     Story => <form onSubmit={event => { event.preventDefault(); }}><Story/></form>,
   ],
-  render: (args) => <RadioButton {...args}/>,
-} satisfies Meta<RadioButtonArgs>;
+  render: (args) => <Radio {...args}/>,
+} satisfies Meta<RadioArgs>;
 
 
 export const Checked: Story = {

src/components/forms/controls/RadioButton/RadioButton.tsx → src/components/forms/controls/Radio/Radio.tsx

@@ -5,19 +5,19 @@
 import { classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
 import * as React from 'react';
 
-import cl from './RadioButton.module.scss';
+import cl from './Radio.module.scss';
 
 
-export { cl as RadioButtonClassNames };
+export { cl as RadioClassNames };
 
-export type RadioButtonProps = ComponentProps<'input'> & {
+export type RadioProps = ComponentProps<'input'> & {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 };
 /**
- * A simple RadioButton control, just the &lt;input type="radio"&gt; and nothing else..
+ * A simple Radio control, just the &lt;input type="radio"&gt; and nothing else..
  */
-export const RadioButton = (props: RadioButtonProps) => {
+export const Radio = (props: RadioProps) => {
   const {
     unstyled = false,
     ...propsRest
@@ -29,7 +29,7 @@ export const RadioButton = (props: RadioButtonProps) => {
       {...propsRest}
       className={cx(
         'bk',
-        { [cl['bk-radio-button']]: !unstyled },
+        { [cl['bk-radio']]: !unstyled },
         propsRest.className,
       )}
     />

src/components/forms/fields/RadioButtonField/RadioButtonField.module.scss → src/components/forms/fields/RadioField/RadioField.module.scss

@@ -5,40 +5,40 @@
 @use '../../../../styling/defs.scss' as bk;
 
 @layer baklava.components {
-  .bk-radio-button-field {
-    @include bk.component-base(bk-radio-button-field);
+  .bk-radio-field {
+    @include bk.component-base(bk-radio-field);
 
-    .bk-radio-button-field__title {
+    .bk-radio-field__title {
       color: bk.$theme-text-label-default;
       font-weight: bk.$font-weight-semibold;
       margin-bottom: bk.$spacing-1;
 
-      .bk-radio-button-field__title__icon {
+      .bk-radio-field__title__icon {
         font-size: 18px;
         margin-left: bk.$spacing-1;
       }
 
-      .bk-radio-button-field__title__optional {
+      .bk-radio-field__title__optional {
         font-size: bk.$font-size-xs;
         font-weight: bk.$font-weight-regular;
         margin-left: bk.$spacing-1;
       }
     }
 
-    .bk-radio-button-field__label {
+    .bk-radio-field__label {
       display: flex;
       align-items: flex-start;
     }
 
-    .bk-radio-button-field__label__content {
+    .bk-radio-field__label__content {
       color: bk.$theme-text-label-default;
       cursor: pointer;
       position: relative;
-      margin-left: bk.$spacing-2;
+      padding-left: bk.$spacing-2;
       top: -2px;
     }
 
-    .bk-radio-button-field__sublabel {
+    .bk-radio-field__sublabel {
       font-size: bk.$font-size-xs;
       padding-left: 26px;
     }

src/components/forms/fields/RadioButtonField/RadioButtonField.stories.tsx → src/components/forms/fields/RadioField/RadioField.stories.tsx

@@ -6,14 +6,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import * as React from 'react';
 
-import { RadioButtonField } from './RadioButtonField.tsx';
+import { RadioField } from './RadioField.tsx';
 
 
-type RadioButtonFieldArgs = React.ComponentProps<typeof RadioButtonField>;
-type Story = StoryObj<RadioButtonFieldArgs>;
+type RadioFieldArgs = React.ComponentProps<typeof RadioField>;
+type Story = StoryObj<RadioFieldArgs>;
 
 export default {
-  component: RadioButtonField,
+  component: RadioField,
   parameters: {
     layout: 'centered',
   },
@@ -24,40 +24,40 @@ export default {
   decorators: [
     Story => <form onSubmit={event => { event.preventDefault(); }}><Story/></form>,
   ],
-  render: (args) => <RadioButtonField {...args}/>,
-} satisfies Meta<RadioButtonFieldArgs>;
+  render: (args) => <RadioField {...args}/>,
+} satisfies Meta<RadioFieldArgs>;
 
 
-export const RadioButtonFieldWithLabel: Story = {
+export const RadioFieldWithLabel: Story = {
   args: {
     label: 'Label',
   },
 };
 
-export const RadioButtonFieldWithLabelAndTitle: Story = {
+export const RadioFieldWithLabelAndTitle: Story = {
   args: {
     title: 'Title',
     label: 'Label',
   },
 };
 
-export const RadioButtonFieldWithLabelWithTitleWithTooltip: Story = {
+export const RadioFieldWithLabelWithTitleWithTooltip: Story = {
   args: {
     title: 'Title',
     label: 'Label',
     titleTooltip: 'This is a tooltip',
   }
 };
 
-export const RadioButtonFieldWithLabelWithTitleWithOptional: Story = {
+export const RadioFieldWithLabelWithTitleWithOptional: Story = {
   args: {
     title: 'Title',
     label: 'Label',
     optional: true,
   },
 };
 
-export const RadioButtonFieldWithLabelWithTitleWithTooltipWithOptional: Story = {
+export const RadioFieldWithLabelWithTitleWithTooltipWithOptional: Story = {
   args: {
     title: 'Title',
     label: 'Label',
@@ -66,7 +66,7 @@ export const RadioButtonFieldWithLabelWithTitleWithTooltipWithOptional: Story =
   },
 };
 
-export const RadioButtonFieldWithLabelAndSublabel: Story = {
+export const RadioFieldWithLabelAndSublabel: Story = {
   args: {
     label: 'Label',
     sublabel: 'Supporting copy',

src/components/forms/fields/RadioButtonField/RadioButtonField.tsx → src/components/forms/fields/RadioField/RadioField.tsx

@@ -5,16 +5,16 @@
 import { classNames as cx, type ComponentProps, type ClassNameArgument } from '../../../../util/componentUtil.ts';
 import * as React from 'react';
 
-import { RadioButton } from '../../controls/RadioButton/RadioButton.tsx';
+import { Radio } from '../../controls/Radio/Radio.tsx';
 import { Icon } from '../../../graphics/Icon/Icon.tsx';
 import { TooltipProvider } from '../../../overlays/Tooltip/TooltipProvider.tsx';
 
-import cl from './RadioButtonField.module.scss';
+import cl from './RadioField.module.scss';
 
 
-export { cl as RadioButtonFieldClassNames };
+export { cl as RadioFieldClassNames };
 
-export type RadioButtonFieldTitleProps = React.PropsWithChildren<{
+export type RadioTitleProps = React.PropsWithChildren<{
   className?: ClassNameArgument,
 
   /** Whether to display the optional observation on title. */
@@ -24,25 +24,25 @@ export type RadioButtonFieldTitleProps = React.PropsWithChildren<{
   titleTooltip?: undefined | string,
 }>;
 
-export const RadioButtonFieldTitle = ({ className, children, optional, titleTooltip }: RadioButtonFieldTitleProps) => (
+export const RadioFieldTitle = ({ className, children, optional, titleTooltip }: RadioTitleProps) => (
   <h1 className={cx(
     'bk',
-    cl['bk-radio-button-field__title'],
+    cl['bk-radio-field__title'],
     className,
   )}>
     {children}
     {titleTooltip && (
       <TooltipProvider tooltip={titleTooltip}>
-        <Icon icon="info" className={cl['bk-radio-button-field__title__icon']}/>
+        <Icon icon="info" className={cl['bk-radio-field__title__icon']}/>
       </TooltipProvider>
     )}
     {optional && (
-      <small className={cl['bk-radio-button-field__title__optional']}>(Optional)</small>
+      <small className={cl['bk-radio-field__title__optional']}>(Optional)</small>
     )}
   </h1>
 );
 
-export type RadioButtonFieldProps = ComponentProps<'div'> & {
+export type RadioFieldProps = ComponentProps<'div'> & {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
@@ -61,23 +61,23 @@ export type RadioButtonFieldProps = ComponentProps<'div'> & {
   /** Whether to display the optional observation on title. */
   optional?: undefined | boolean,
 
-  /** Whether the radio button is selected by default. Passed down to Radio Button component. */
+  /** Whether the radio is selected by default. Passed down to Radio component. */
   defaultChecked?: undefined | boolean,
 
-  /** Whether the radio button is selected. Passed down to Radio Button component. */
+  /** Whether the radio is selected. Passed down to Radio component. */
   checked?: undefined | boolean,
 
-  /** Whether the radio button is disabled. Passed down to Radio Button component. */
+  /** Whether the radio is disabled. Passed down to Radio component. */
   disabled?: undefined | boolean,
 
-  /** The onChange event for the radio button. Passed down to Radio Button component. */
+  /** The onChange event for the radio. Passed down to Radio component. */
   onChange?: (e: React.FormEvent) => void,
 };
 
 /**
- * A full-fledged Radio Button field, with optional label, title, icon etc.
+ * A full-fledged Radio field, with optional label, title, icon etc.
  */
-export const RadioButtonField = (props: RadioButtonFieldProps) => {
+export const RadioField = (props: RadioFieldProps) => {
   const {
     unstyled = false,
     label = '',
@@ -91,31 +91,31 @@ export const RadioButtonField = (props: RadioButtonFieldProps) => {
   return (
     <div className={cx(
       'bk',
-      { [cl['bk-radio-button-field']]: !unstyled },
+      { [cl['bk-radio-field']]: !unstyled },
       className,
     )}>
       {title && (
-        <RadioButtonFieldTitle
+        <RadioFieldTitle
           optional={optional}
           titleTooltip={titleTooltip}
         >
           {title}
-        </RadioButtonFieldTitle>
+        </RadioFieldTitle>
       )}
       {/* biome ignore lint/a11y/noLabelWithoutControl: the `<Checkbox>` will resolve to an `<input>` */}
-      <label className={cl['bk-radio-button-field__label']}>
-        <RadioButton
+      <label className={cl['bk-radio-field__label']}>
+        <Radio
           checked={props.checked}
           defaultChecked={props.defaultChecked}
           disabled={props.disabled}
           onChange={props.onChange}
         />
-        <span className={cl['bk-radio-button-field__label__content']}>
+        <span className={cl['bk-radio-field__label__content']}>
           {label}
         </span>
       </label>
       {sublabel && (
-        <div className={cl['bk-radio-button-field__sublabel']}>{sublabel}</div>
+        <div className={cl['bk-radio-field__sublabel']}>{sublabel}</div>
       )}
     </div>
   );