From 38efbd86161f1bb59a66512c054543bfcf62bac2 Mon Sep 17 00:00:00 2001
From: Davide Mininni
 <101575400+DavideMininni-Fincons@users.noreply.github.com>
Date: Thu, 23 May 2024 17:54:15 +0200
Subject: [PATCH] fix(sbb-button): fix gap between icon and text for size s
 (#2678)

---
 src/components/button/button/button.snapshot.spec.ts | 6 +++---
 src/components/button/common/button-common.scss      | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/button/button/button.snapshot.spec.ts b/src/components/button/button/button.snapshot.spec.ts
index 1ece61c2ed..1ebcc79d7d 100644
--- 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
index 22af5479ff..8292350251 100644
--- 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);