Styling fixes: RadioField, CheckboxField, Select (Input)

src/components/forms/controls/Select/Select.module.scss

@@ -6,21 +6,33 @@
 
 @layer baklava.components {
   $bk-select-min-width: 14rem;
+  $bk-caret-size: 17px;
 
   .bk-select {
     @include bk.component-base(bk-select);
 
     /* Make sure the content does not have any extra space (e.g. under the line) due to baseline alignment */
     display: flex;
 
+    --bk-input-accent-color: #{bk.$theme-form-rule-default};
+    border: 0 solid var(--bk-input-accent-color);
+    border-bottom-width: 1px;
+
+    height: 24px;
+
     .bk-select__input {
       min-width: $bk-select-min-width;
       caret-color: transparent; /* FIXME: find better way to manage the input state */
+      border: none;
+    }
+
+    &.bk-select--open .bk-select__input__arrow {
+      rotate: 0.5turn;
     }
   }
 
   .bk-select__dropdown {
-    min-width: $bk-select-min-width;
+    min-width: calc($bk-select-min-width + $bk-caret-size);
     max-height: 18rem;
 
     background: bk.$theme-dropdown-menu-menu-background-default;
@@ -50,6 +62,10 @@
         border-top: 1px solid bk.$theme-dropdown-menu-menu-border-default;
       }
 
+      &:last-child {
+        padding-bottom: bk.$spacing-2;
+      }
+
       &:hover {
         background: bk.$theme-dropdown-menu-menu-background-hover;
       }
@@ -88,7 +104,7 @@
   }
 
   .bk-select__option {
-    padding: 8px 14px;
+    padding: 8px 14px 8px 26px;
 
     @include bk.font(bk.$font-family-body);
     font-size: 14px;

src/components/forms/controls/Select/Select.tsx

@@ -103,6 +103,7 @@ export const Select = Object.assign(
       getReferenceProps,
       getFloatingProps,
       getItemProps,
+      isOpen,
       setIsOpen,
     } = usePopover({
       placement: 'bottom',
@@ -136,6 +137,7 @@ export const Select = Object.assign(
           className={cx(
             'bk',
             { [cl['bk-select']]: !unstyled },
+            { [cl['bk-select--open']]: isOpen },
             propsRest.className,
           )}
           {...getReferenceProps()}
@@ -148,7 +150,7 @@ export const Select = Object.assign(
             value={selected === null ? '' : selected.label}
             onChange={() => {}}
           />
-          <Icon icon="caret-down"/>
+          <Icon icon="caret-down" className={cl['bk-select__input__arrow']}/>
         </Button>
         <ul
           ref={refs.setFloating}

src/components/forms/fields/CheckboxField/CheckboxField.module.scss

@@ -7,37 +7,36 @@
 @layer baklava.components {
   .bk-checkbox-field {
     @include bk.component-base(bk-checkbox-field);
-
+    
     .bk-checkbox-field__title {
       color: bk.$theme-text-label-default;
       font-weight: bk.$font-weight-semibold;
       margin-bottom: bk.$spacing-1;
-
+      
       .bk-checkbox-field__title__icon {
         margin-left: bk.$spacing-1;
       }
-
+      
       .bk-checkbox-field__title__optional {
         font-size: bk.$font-size-xs;
         font-weight: bk.$font-weight-regular;
         margin-left: bk.$spacing-1;
       }
     }
-
+    
     .bk-checkbox-field__label {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
+      column-gap: bk.$spacing-2;
     }
-
+    
     .bk-checkbox-field__label__content {
       color: bk.$theme-text-label-default;
       cursor: pointer;
-      position: relative;
-      margin-left: bk.$spacing-2;
-      top: -2px;
+      font-size: bk.$font-size-m;
     }
-
-    .bk-checkbox-field__sublabel {
+    
+    .bk-checkbox-field__description {
       font-size: bk.$font-size-xs;
       padding-left: 26px;
     }

src/components/forms/fields/CheckboxField/CheckboxField.stories.tsx

@@ -66,9 +66,9 @@ export const CheckboxFieldWithLabelWithTitleWithTooltipWithOptional: Story = {
   },
 };
 
-export const CheckboxFieldWithLabelAndSublabel: Story = {
+export const CheckboxFieldWithLabelAndDescription: Story = {
   args: {
     label: 'Label',
-    sublabel: 'Supporting copy',
+    description: 'Additional description',
   },
 };

src/components/forms/fields/CheckboxField/CheckboxField.tsx

@@ -45,31 +45,31 @@ export const CheckboxFieldTitle = ({ className, children, titleOptional, titleTo
 export type CheckboxFieldProps = ComponentProps<'div'> & {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
-
+  
   /** A label to be displayed after the checkbox. */
   label: string,
-
-  /** An optional supporting copy to be displayed under the label. */
-  sublabel?: undefined | string,
-
+  
+  /** Additional supporting text to be displayed under the label. Optional. */
+  description?: undefined | string,
+  
   /** An optional title. */
   title?: undefined | string,
-
+  
   /** An optional tooltip to be displayed on an info icon next to the title. */
   titleTooltip?: undefined | string,
-
+  
   /** Whether to display the optional observation on title. */
   titleOptional?: undefined | boolean,
-
+  
   /** Whether the checkbox is checked by default. Passed down to Checkbox component. */
   defaultChecked?: undefined | boolean,
-
+  
   /** Whether the checkbox is checked. Passed down to Checkbox component. */
   checked?: undefined | boolean,
-
+  
   /** Whether the checkbox is disabled. Passed down to Checkbox component. */
   disabled?: undefined | boolean,
-
+  
   /** The onChange event for the checkbox. Passed down to Checkbox component. */
   onChange?: (e: React.FormEvent) => void,
 };
@@ -81,13 +81,13 @@ export const CheckboxField = (props: CheckboxFieldProps) => {
   const {
     unstyled = false,
     label = '',
-    sublabel,
+    description,
     title,
     titleOptional,
     titleTooltip,
     className,
   } = props;
-
+  
   return (
     <div className={cx(
       'bk',
@@ -102,7 +102,7 @@ export const CheckboxField = (props: CheckboxFieldProps) => {
           {title}
         </CheckboxFieldTitle>
       )}
-      {/* biome ignore lint/a11y/noLabelWithoutControl: the `<Checkbox>` will resolve to an `<input>` */}
+      {/* biome-ignore lint/a11y/noLabelWithoutControl: the `<Checkbox>` will resolve to an `<input>` */}
       <label className={cl['bk-checkbox-field__label']}>
         <Checkbox
           checked={props.checked}
@@ -114,9 +114,9 @@ export const CheckboxField = (props: CheckboxFieldProps) => {
           {label}
         </span>
       </label>
-      {sublabel && (
-        <div className={cl['bk-checkbox-field__sublabel']}>{sublabel}</div>
-      )}
+      {description &&
+        <div className={cl['bk-checkbox-field__description']}>{description}</div>
+      }
     </div>
   );
 };

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

@@ -7,37 +7,36 @@
 @layer baklava.components {
   .bk-radio-field {
     @include bk.component-base(bk-radio-field);
-
+    
     .bk-radio-field__title {
       color: bk.$theme-text-label-default;
       font-weight: bk.$font-weight-semibold;
       margin-bottom: bk.$spacing-1;
-
+      
       .bk-radio-field__title__icon {
         margin-left: bk.$spacing-1;
       }
-
+      
       .bk-radio-field__title__optional {
         font-size: bk.$font-size-xs;
         font-weight: bk.$font-weight-regular;
         margin-left: bk.$spacing-1;
       }
     }
-
+    
     .bk-radio-field__label {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
+      column-gap: bk.$spacing-2;
     }
-
+    
     .bk-radio-field__label__content {
-      color: bk.$theme-text-label-default;
       cursor: pointer;
-      position: relative;
-      padding-left: bk.$spacing-2;
-      top: -2px;
+      color: bk.$theme-text-label-default;
+      font-size: bk.$font-size-m;
     }
-
-    .bk-radio-field__sublabel {
+    
+    .bk-radio-field__description {
       font-size: bk.$font-size-xs;
       padding-left: 26px;
     }

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

@@ -66,9 +66,9 @@ export const RadioFieldWithLabelWithTitleWithTooltipWithOptional: Story = {
   },
 };
 
-export const RadioFieldWithLabelAndSublabel: Story = {
+export const RadioFieldWithLabelAndDescription: Story = {
   args: {
     label: 'Label',
-    sublabel: 'Supporting copy',
+    description: 'Additional description',
   },
 };

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

@@ -16,10 +16,10 @@ export { cl as RadioFieldClassNames };
 
 export type RadioTitleProps = React.PropsWithChildren<{
   className?: ClassNameArgument,
-
+  
   /** Whether to display the optional observation on title. */
   optional?: undefined | boolean,
-
+  
   /** An optional tooltip to be displayed on an info icon next to the title. */
   titleTooltip?: undefined | string,
 }>;
@@ -45,33 +45,33 @@ export const RadioFieldTitle = ({ className, children, optional, titleTooltip }:
 export type RadioFieldProps = ComponentProps<'div'> & {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
-
+  
   /** A label to be displayed after the radio button. */
   label: string,
-
-  /** An optional supporting copy to be displayed under the label. */
-  sublabel?: undefined | string,
-
+  
+  /** Additional supporting text to be displayed under the label. Optional. */
+  description?: undefined | string,
+  
   /** An optional title. */
   title?: undefined | string,
-
+  
   /** An optional tooltip to be displayed on an info icon next to the title. */
   titleTooltip?: undefined | string,
-
+  
   /** Whether to display the optional observation on title. */
   optional?: undefined | boolean,
-
+  
   /** Whether the radio is selected by default. Passed down to Radio component. */
   defaultChecked?: undefined | boolean,
-
+  
   /** Whether the radio is selected. Passed down to Radio component. */
   checked?: undefined | boolean,
-
+  
   /** Whether the radio is disabled. Passed down to Radio component. */
   disabled?: undefined | boolean,
-
+  
   /** The onChange event for the radio. Passed down to Radio component. */
-  onChange?: (e: React.FormEvent) => void,
+  onChange?: undefined | ((event: React.FormEvent) => void),
 };
 
 /**
@@ -81,13 +81,13 @@ export const RadioField = (props: RadioFieldProps) => {
   const {
     unstyled = false,
     label = '',
-    sublabel,
+    description,
     title,
     optional,
     titleTooltip,
     className,
   } = props;
-
+  
   return (
     <div className={cx(
       'bk',
@@ -102,7 +102,7 @@ export const RadioField = (props: RadioFieldProps) => {
           {title}
         </RadioFieldTitle>
       )}
-      {/* biome ignore lint/a11y/noLabelWithoutControl: the `<Checkbox>` will resolve to an `<input>` */}
+      {/* biome-ignore lint/a11y/noLabelWithoutControl: the `<Radio>` will resolve to an `<input>` */}
       <label className={cl['bk-radio-field__label']}>
         <Radio
           checked={props.checked}
@@ -114,9 +114,9 @@ export const RadioField = (props: RadioFieldProps) => {
           {label}
         </span>
       </label>
-      {sublabel && (
-        <div className={cl['bk-radio-field__sublabel']}>{sublabel}</div>
-      )}
+      {description &&
+        <div className={cl['bk-radio-field__description']}>{description}</div>
+      }
     </div>
   );
 };