fix(core/button): add space between leading icon and text (#149)

Co-authored-by: PhentomPT <phentom.net@gmail.com>
Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

packages/core/scss/components/_buttons.scss

@@ -20,6 +20,7 @@
   transition: $default-time;
   padding: 0 $small-space;
   min-width: 5rem;
+  gap: $tiny-space;
 
   @include ellipsis;
 

packages/core/src/components/breadcrumb/breadcrumb.scss

@@ -130,7 +130,7 @@
     }
 
     .crumb-text + .glyph-chevron-right-small {
-      margin-inline-start: $small-space;
+      margin-inline-start: $tiny-space;
       margin-inline-end: 0; // Overwrite global selector: .btn .glyph
     }
 

packages/core/src/components/button/base-button.tsx

@@ -15,9 +15,17 @@ const isSecondary = (variant: string) => {
   return variant.toUpperCase() === 'Secondary'.toUpperCase();
 };
 
-export const getButtonClasses = (variant: 'Primary' | 'Secondary', outline: boolean, ghost: boolean, iconOnly = false, iconOval = false, selected: boolean, disabled: boolean) => {
+export const getButtonClasses = (
+  variant: 'Primary' | 'Secondary',
+  outline: boolean,
+  ghost: boolean,
+  iconOnly = false,
+  iconOval = false,
+  selected: boolean,
+  disabled: boolean
+) => {
   return {
-    'btn': true,
+    btn: true,
     'btn-primary': isPrimary(variant) && !outline && !ghost,
     'btn-outline-primary': isPrimary(variant) && outline && !ghost,
     'btn-invisible-primary': isPrimary(variant) && !outline && ghost,
@@ -26,7 +34,7 @@ export const getButtonClasses = (variant: 'Primary' | 'Secondary', outline: bool
     'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,
     'btn-icon': iconOnly,
     'btn-oval': iconOval,
-    'selected': isSecondary(variant) && (outline || ghost) && selected,
-    'disabled': disabled,
+    selected: isSecondary(variant) && (outline || ghost) && selected,
+    disabled: disabled,
   };
 };