fix(sbb-button): fix gap between icon and text for size s (#2678)

sbb-design-systems · May 23, 2024 · 38efbd8 · 38efbd8
1 parent b4a2006
commit 38efbd8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/button/button/button.snapshot.spec.ts b/src/components/button/button/button.snapshot.spec.ts
@@ -28,7 +28,7 @@ describe(`sbb-button`, () => {
       };
 
       // 'l' as default is covered by other cases.
-      const sizeCases = { size: ['s', 'm'] };
+      const sizeCases = { size: ['s', 'm'], icon: [undefined, 'arrow-right-small'] };
 
       describeViewports({ viewports: ['zero', 'medium'] }, () => {
         describeEach(cases, ({ disabled, negative, state }) => {
@@ -50,10 +50,10 @@ describe(`sbb-button`, () => {
           visualRegressionSnapshot(() => root);
         });
 
-        describeEach(sizeCases, ({ size }) => {
+        describeEach(sizeCases, ({ size, icon }) => {
           beforeEach(async function () {
             root = await visualRegressionFixture(
-              html`<sbb-button size=${size}>Button</sbb-button>`,
+              html`<sbb-button size=${size} .iconName=${icon}>Button</sbb-button>`,
               this,
             );
           });

diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss
@@ -70,6 +70,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 :host([size='s']) {
   --sbb-button-min-height: var(--sbb-size-element-xs);
   --sbb-button-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-button-gap: var(--sbb-spacing-fixed-1x);
 
   @include sbb.mq($from: medium) {
     --sbb-button-padding-inline: var(--sbb-spacing-fixed-5x);