fix: segmented button spacing (#1928)

telekom · Jun 5, 2023 · 9c6fbce · 9c6fbce
1 parent 6e89551
commit 9c6fbce
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/components/src/components/segment/segment.css b/packages/components/src/components/segment/segment.css
@@ -71,6 +71,7 @@
   transition: var(--transition);
   white-space: nowrap;
   color: var(--color);
+  line-height: 1;
 }
 
 button.segment--small.segment--selected .segment--mask {
@@ -112,8 +113,8 @@ button.segment--medium .segment--mask {
 }
 
 button.segment--large.segment--selected .segment--mask {
-  padding-left: 1.125rem;
-  padding-right: 1.125rem;
+  padding-left: var(--telekom-spacing-unit-x4);
+  padding-right: var(--telekom-spacing-unit-x5);
 }
 
 button.segment--large .segment--mask {

diff --git a/packages/components/src/components/segmented-button/segmented-button.tsx b/packages/components/src/components/segmented-button/segmented-button.tsx
@@ -30,8 +30,8 @@ interface SegmentStatus {
 }
 
 const CHECKMARK_WIDTH_SMALL = 14;
-const CHECKMARK_WIDTH_MEDIUM = 18;
-const CHECKMARK_WIDTH_LARGE = 20;
+const CHECKMARK_WIDTH_MEDIUM = 18 + 12;
+const CHECKMARK_WIDTH_LARGE = 20 + 18;
 
 @Component({
   tag: 'scale-segmented-button',