Fix stretched SelectorGroup

sumup-oss · Jan 23, 2024 · 95ffe71 · 95ffe71
1 parent 07c0da3
commit 95ffe71
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/.changeset/famous-meals-perform.md b/.changeset/famous-meals-perform.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the stretched styles of the SelectorGroup component.
diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx
@@ -98,7 +98,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',
 };

diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.module.css b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.module.css
@@ -1,22 +1,32 @@
-.base {
-  display: inline-flex;
+.stretch {
+  width: 100%;
+}
+
+.options {
+  display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  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%;
 }
diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx
@@ -20,6 +20,7 @@ import {
   SelectorGroupContext,
   SelectorProps,
   SelectorSize,
+  legacySizeMap,
 } from '../Selector/Selector.js';
 import {
   AccessibilityError,
@@ -81,7 +82,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;
   /**
@@ -137,11 +138,12 @@ export const SelectorGroup = forwardRef<
       optionalLabel,
       disabled,
       multiple,
-      size,
+      'size': legacySize = 'm',
       stretch = false,
       validationHint,
       invalid,
       hideLabel,
+      className,
       ...props
     },
     ref,
@@ -168,6 +170,8 @@ export const SelectorGroup = forwardRef<
       return null;
     }
 
+    const size = legacySizeMap[legacySize] || legacySize;
+
     return (
       <FieldSet
         name={name}
@@ -176,6 +180,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>
@@ -186,7 +191,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