From 95ffe719e86abe11ebcde5466a403e886f29bc1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <github@connorbaer.com>
Date: Tue, 23 Jan 2024 19:25:30 +0000
Subject: [PATCH] Fix stretched SelectorGroup

---
 .changeset/famous-meals-perform.md            |  5 ++++
 .../components/Selector/Selector.tsx          |  2 +-
 .../SelectorGroup/SelectorGroup.module.css    | 30 ++++++++++++-------
 .../SelectorGroup/SelectorGroup.tsx           | 11 +++++--
 4 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/famous-meals-perform.md

diff --git a/.changeset/famous-meals-perform.md b/.changeset/famous-meals-perform.md
new file mode 100644
index 0000000000..8d30398cea
--- /dev/null
+++ 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
index f877bb2680..d614660f1a 100644
--- 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
index bb7267f4f3..74511c48db 100644
--- 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
index 0d3fc31ae9..c5e592b77f 100644
--- 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