Fix stretched SelectorGroup

.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/Field/Field.module.css

@@ -1,6 +1,8 @@
 .wrapper[disabled],
+.wrapper[aria-disabled="true"],
 .wrapper[data-disabled="true"],
 .fieldset[disabled],
+.fieldset[aria-disabled="true"],
 .fieldset[data-disabled="true"] {
   pointer-events: none;
 }
@@ -17,17 +19,18 @@
   margin-bottom: var(--cui-spacings-bit);
 }
 
-[disabled] .label-text,
+:global([disabled]) .label-text,
+:global([aria-disabled="true"]) .label-text,
 :global([data-disabled="true"]) .label-text {
   color: var(--cui-fg-normal-disabled);
 }
 
-
 .label-text-optional {
   color: var(--cui-fg-subtle);
 }
 
-[disabled] .label-text-optional,
+:global([disabled]) .label-text-optional,
+:global([aria-disabled="true"]) .label-text-optional,
 :global([data-disabled="true"]) .label-text-optional {
   color: var(--cui-fg-subtle-disabled);
 }
@@ -39,7 +42,8 @@
   color: var(--cui-fg-subtle);
 }
 
-[disabled] .description,
+:global([disabled]) .description,
+:global([aria-disabled="true"]) .description,
 :global([data-disabled="true"]) .description {
   color: var(--cui-fg-subtle-disabled);
 }
@@ -53,17 +57,18 @@
   transition: color var(--cui-transitions-default);
 }
 
-[disabled] .validation-hint,
+:global([disabled]) .validation-hint,
+:global([aria-disabled="true"]) .validation-hint,
 :global([data-disabled="true"]) .validation-hint {
   color: var(--cui-fg-subtle-disabled);
 }
 
-
 .valid {
   color: var(--cui-fg-success);
 }
 
-[disabled] .valid,
+:global([disabled]) .valid,
+:global([aria-disabled="true"]) .valid,
 :global([data-disabled="true"]) .valid {
   color: var(--cui-fg-success-disabled);
 }
@@ -72,7 +77,8 @@
   color: var(--cui-fg-warning);
 }
 
-[disabled] .warning,
+:global([disabled]) .warning,
+:global([aria-disabled="true"]) .warning,
 :global([data-disabled="true"]) .warning {
   color: var(--cui-fg-warning-disabled);
 }
@@ -81,7 +87,8 @@
   color: var(--cui-fg-danger);
 }
 
-[disabled] .invalid,
+:global([disabled]) .invalid,
+:global([aria-disabled="true"]) .invalid,
 :global([data-disabled="true"]) .invalid {
   color: var(--cui-fg-danger-disabled);
 }
@@ -93,7 +100,8 @@
   width: var(--cui-icon-sizes-kilo);
   height: var(--cui-icon-sizes-kilo);
   margin-top: calc(
-    (var(--cui-typography-body-two-line-height) - var(--cui-icon-sizes-kilo)) / 2
+    (var(--cui-typography-body-two-line-height) - var(--cui-icon-sizes-kilo)) /
+      2
   );
-  margin-right: var(--cui-spacings-bit)
+  margin-right: var(--cui-spacings-bit);
 }

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',
 };

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 {
   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