Truncate long button labels

sumup-oss · Dec 21, 2023 · 6138829 · 6138829
1 parent c2c3376
commit 6138829
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 132 deletions.
diff --git a/.changeset/wild-chicken-call.md b/.changeset/wild-chicken-call.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Changed the overflow behaviour of long Button labels. Text that would previously wrap is now truncated to a single line with a trailing ellipsis.
diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css
@@ -24,6 +24,144 @@
   overflow: hidden;
 }
 
+/* Loader */
+.loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--loader-gap);
+  place-content: center;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity var(--cui-transitions-default),
+    visibility var(--cui-transitions-default);
+}
+
+/* The animation of the dots consists of five phases: an 80ms pause
+   and four 160ms transitions between each dot being highlighted */
+
+.dot {
+  --loader-opacity: 0.25;
+
+  display: block;
+  width: var(--loader-diameter);
+  height: var(--loader-diameter);
+  background-color: var(--cui-fg-normal);
+  border-radius: var(--cui-border-radius-circle);
+  animation-duration: 720ms; /* 80ms + 4 * 160ms */
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.75, 0, 1, 1);
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse1 {
+  0%,
+  11%,
+  55%,
+  100% {
+    opacity: var(--loader-opacity);
+    transform: scale(100%);
+  }
+
+  33% {
+    opacity: 1;
+    transform: var(--loader-transform);
+  }
+}
+
+.dot:nth-child(1) {
+  animation-name: pulse1;
+}
+
+@keyframes pulse2 {
+  0%,
+  33%,
+  77%,
+  100% {
+    opacity: var(--loader-opacity);
+    transform: scale(100%);
+  }
+
+  55% {
+    opacity: 1;
+    transform: var(--loader-transform);
+  }
+}
+
+.dot:nth-child(2) {
+  animation-name: pulse2;
+}
+
+@keyframes pulse3 {
+  0%,
+  55%,
+  100% {
+    opacity: var(--loader-opacity);
+    transform: scale(100%);
+  }
+
+  77% {
+    opacity: 1;
+    transform: var(--loader-transform);
+  }
+}
+
+.dot:nth-child(3) {
+  animation-name: pulse3;
+}
+
+.base[aria-busy="true"] .loader {
+  visibility: inherit;
+  opacity: 1;
+}
+
+.base[aria-busy="true"] .dot {
+  animation-play-state: running;
+}
+
+/* Content */
+.content {
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--content-gap);
+  place-content: center;
+  align-items: center;
+  min-width: 24px;
+  min-height: 24px;
+  opacity: 1;
+  transition: opacity var(--cui-transitions-default);
+}
+
+.base:active .content,
+.base[aria-expanded="true"] .content,
+.base[aria-pressed="true"] .content {
+  transform: translate(0, 1px);
+}
+
+.base[aria-busy="true"] .content {
+  opacity: 0;
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.leading-icon {
+  width: var(--leading-icon-size);
+  height: var(--leading-icon-size);
+}
+
+.trailing-icon {
+  width: var(--cui-icon-sizes-kilo);
+  height: var(--cui-icon-sizes-kilo);
+}
+
 /* Sizes */
 .s {
   --content-gap: var(--cui-spacings-bit);
@@ -209,138 +347,6 @@
   border-color: transparent;
 }
 
-/* Loader */
-.loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: grid;
-  grid-auto-flow: column;
-  gap: var(--loader-gap);
-  place-content: center;
-  width: 100%;
-  height: 100%;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity var(--cui-transitions-default),
-    visibility var(--cui-transitions-default);
-}
-
-/* The animation of the dots consists of five phases: an 80ms pause
-   and four 160ms transitions between each dot being highlighted */
-
-.dot {
-  --loader-opacity: 0.25;
-
-  display: block;
-  width: var(--loader-diameter);
-  height: var(--loader-diameter);
-  background-color: var(--cui-fg-normal);
-  border-radius: var(--cui-border-radius-circle);
-  animation-duration: 720ms; /* 80ms + 4 * 160ms */
-  animation-play-state: paused;
-  animation-timing-function: cubic-bezier(0.75, 0, 1, 1);
-  animation-iteration-count: infinite;
-}
-
-@keyframes pulse1 {
-  0%,
-  11%,
-  55%,
-  100% {
-    opacity: var(--loader-opacity);
-    transform: scale(100%);
-  }
-
-  33% {
-    opacity: 1;
-    transform: var(--loader-transform);
-  }
-}
-
-.dot:nth-child(1) {
-  animation-name: pulse1;
-}
-
-@keyframes pulse2 {
-  0%,
-  33%,
-  77%,
-  100% {
-    opacity: var(--loader-opacity);
-    transform: scale(100%);
-  }
-
-  55% {
-    opacity: 1;
-    transform: var(--loader-transform);
-  }
-}
-
-.dot:nth-child(2) {
-  animation-name: pulse2;
-}
-
-@keyframes pulse3 {
-  0%,
-  55%,
-  100% {
-    opacity: var(--loader-opacity);
-    transform: scale(100%);
-  }
-
-  77% {
-    opacity: 1;
-    transform: var(--loader-transform);
-  }
-}
-
-.dot:nth-child(3) {
-  animation-name: pulse3;
-}
-
-.base[aria-busy="true"] .loader {
-  visibility: inherit;
-  opacity: 1;
-}
-
-.base[aria-busy="true"] .dot {
-  animation-play-state: running;
-}
-
-/* Content */
-.content {
-  display: grid;
-  grid-auto-flow: column;
-  gap: var(--content-gap);
-  place-content: center;
-  align-items: center;
-  min-width: 24px;
-  min-height: 24px;
-  opacity: 1;
-  transition: opacity var(--cui-transitions-default);
-}
-
-.base:active .content,
-.base[aria-expanded="true"] .content,
-.base[aria-pressed="true"] .content {
-  transform: translate(0, 1px);
-}
-
-.base[aria-busy="true"] .content {
-  opacity: 0;
-}
-
-.leading-icon {
-  width: var(--leading-icon-size);
-  height: var(--leading-icon-size);
-}
-
-.trailing-icon {
-  width: var(--cui-icon-sizes-kilo);
-  height: var(--cui-icon-sizes-kilo);
-}
-
 /* ButtonGroup */
 @container cui-button-group (width < 360px) {
   .base {