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/Field/Field.module.css b/packages/circuit-ui/components/Field/Field.module.css index e9bd723ebe..ed042899a3 100644 --- a/packages/circuit-ui/components/Field/Field.module.css +++ b/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); } 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 = { +export const legacySizeMap: Record = { 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..4da2e94b27 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.module.css +++ b/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%; } 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 (
@@ -186,7 +191,7 @@ export const SelectorGroup = forwardRef< required={required} /> -
+
{options.map((option) => (