fix(chip): prevent cut of the descender of the lables of small sized …

…chips (#259)
statistikZH · Jan 14, 2025 · 08f5365 · 08f5365
1 parent 503a302
commit 08f5365
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/components/chip/chip.css b/src/components/chip/chip.css
@@ -55,7 +55,7 @@
   border: none;
   border-radius: 1rem;
   background-color: var(--chip-background-color);
-  padding: 0.5rem 1rem;
+  padding: 8px 1rem;
 
   color: var(--chip-color);
   font-family: inherit;
@@ -66,6 +66,7 @@
 
   display: inline-flex;
   gap: 0.5rem;
+  align-items: center;
 
   /* Allow shrinking to achieve text truncation (ellipsis) */
   min-width: 0;
@@ -108,10 +109,10 @@
 }
 
 :host([size="small"]:not([variant="radio"])) .button {
-  padding: 0.5625rem 0.75rem 0.4375rem;
+  padding: 0.3125rem 0.75rem;
 
   font-size: 0.75rem;
-  line-height: 1;
+  line-height: 1.25rem;
 }
 
 :host([variant="radio"]) .button::before {

diff --git a/src/components/chip/stories/chip-selectable.stories.js b/src/components/chip/stories/chip-selectable.stories.js
@@ -50,7 +50,7 @@ export const Default = Template.bind({})
 Default.args = {}
 
 export const Small = Template.bind({})
-Small.args = { size: SIZES.small }
+Small.args = { size: SIZES.small, label: "Publikationen Region" }
 
 export const Radio = Template.bind({})
 Radio.args = { variant: VARIANTS.radio }