Fix stretched SelectorGroup

Author: connor-baer

.changeset/famous-meals-perform.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the stretched styles of the SelectorGroup component.

packages/circuit-ui/components/Selector/Selector.tsx

@@ -100,7 +100,7 @@ export interface SelectorProps
 
 export const SelectorGroupContext = createContext(false);
 
-const legacySizeMap: Record<string, 's' | 'm'> = {
+export const legacySizeMap: Record<string, 's' | 'm'> = {
   kilo: 's',
   mega: 'm',
 };

packages/circuit-ui/components/SelectorGroup/SelectorGroup.module.css

@@ -1,22 +1,31 @@
-.base {
-  display: inline-flex;
+.stretch {
+  width: 100%;
+}
+
+.options {
+  display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: stretch;
+  justify-content: flex-start;
   width: auto;
 }
 
-.base > div:not(:last-child) {
-  margin-right: var(--cui-spacings-mega);
+.stretch .options {
+  justify-content: space-evenly;
+  width: 100%;
 }
 
-.stretch {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
+/* Sizes */
+.s .options {
+  gap: var(--cui-spacings-byte);
+}
+
+.m .options,
+.flexible .options {
+  gap: var(--cui-spacings-kilo);
 }
 
 .option {
   flex: 1;
-  align-self: stretch;
   width: 100%;
 }

packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx

@@ -20,6 +20,7 @@ import { forwardRef, useId, type FieldsetHTMLAttributes } from 'react';
 import {
   Selector,
   SelectorGroupContext,
+  legacySizeMap,
   type SelectorProps,
   type SelectorSize,
 } from '../Selector/Selector.js';
@@ -83,7 +84,7 @@ export interface SelectorGroupProps
    */
   size?: SelectorSize;
   /**
-   * Whether the group should take the whole width available. Defaults to true.
+   * Whether the group should take the whole width available. Defaults to false.
    */
   stretch?: boolean;
   /**
@@ -139,11 +140,12 @@ export const SelectorGroup = forwardRef<
       optionalLabel,
       disabled,
       multiple,
-      size,
+      'size': legacySize = 'm',
       stretch = false,
       validationHint,
       invalid,
       hideLabel,
+      className,
       ...props
     },
     ref,
@@ -170,6 +172,8 @@ export const SelectorGroup = forwardRef<
       return null;
     }
 
+    const size = legacySizeMap[legacySize] || legacySize;
+
     return (
       <FieldSet
         name={name}
@@ -178,6 +182,7 @@ export const SelectorGroup = forwardRef<
         disabled={disabled}
         role={multiple ? undefined : 'radiogroup'}
         aria-orientation={multiple ? undefined : 'horizontal'}
+        className={clsx(className, stretch && classes.stretch, classes[size])}
         {...props}
       >
         <FieldLegend>
@@ -188,7 +193,7 @@ export const SelectorGroup = forwardRef<
             required={required}
           />
         </FieldLegend>
-        <div className={clsx(classes.base, stretch && classes.stretch)}>
+        <div className={classes.options}>
           <SelectorGroupContext.Provider value={true}>
             {options.map((option) => (
               <Selector