Fixes Selector component size padding (#2255)

* Fixes Selector component size padding * Fixes Selector label wrapping
sumup-oss · Sep 26, 2023 · 600eff2 · 600eff2 · vercel · Sep 26, 2023
1 parent e2f8230
commit 600eff2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/smooth-kiwis-drive.md b/.changeset/smooth-kiwis-drive.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixes Selector component size padding
diff --git a/packages/circuit-ui/components/Selector/Selector.module.css b/packages/circuit-ui/components/Selector/Selector.module.css
@@ -56,6 +56,7 @@
   height: 100%;
   color: var(--cui-fg-normal);
   text-align: center;
+  white-space: nowrap;
   cursor: pointer;
   background-color: var(--cui-bg-normal);
   border-radius: var(--cui-border-radius-byte);
@@ -100,14 +101,15 @@
   text-align: start;
 }
 
+
 /* Sizes */
 
 .kilo {
-  padding: var(--cui-spacings-bit) var(--cui-spacings-mega);
+  padding: var(--cui-spacings-byte) var(--cui-spacings-kilo);
 }
 
 .mega {
-  padding: var(--cui-spacings-kilo) var(--cui-spacings-giga);
+  padding: var(--cui-spacings-kilo) var(--cui-spacings-mega);
 }
 
 .flexible {
@@ -118,6 +120,10 @@
   font-weight: var(--cui-font-weight-bold);
 }
 
+.description {
+  white-space: initial;
+}
+
 .icon {
   margin-bottom: var(--cui-spacings-bit);
 }
diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx
@@ -175,7 +175,9 @@ export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
           {hasDescription ? (
             <Fragment>
               <span className={classes.title}>{label || children}</span>
-              <span aria-hidden="true">{description}</span>
+              <span className={classes.description} aria-hidden="true">
+                {description}
+              </span>
             </Fragment>
           ) : (
             label || children