fix(sbb-button): remove gap for hidden icons in icon slot (#2526)

sbb-design-systems · Mar 27, 2024 · 433c57c · 433c57c
1 parent 6fbf085
commit 433c57c
Show file tree

Hide file tree

Showing 27 changed files with 86 additions and 107 deletions.
diff --git a/src/components/button/button-link/__snapshots__/button-link.spec.snap.js b/src/components/button/button-link/__snapshots__/button-link.spec.snap.js
@@ -31,10 +31,8 @@ snapshots["sbb-button-link renders a sbb-button-link without icon ShadowDom"] =
   tabindex="-1"
   target="_blank"
 >
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -101,10 +99,8 @@ snapshots["sbb-button-link renders a disabled sbb-button-link with slotted icon
   role="presentation"
   tabindex="-1"
 >
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/button-link/button-link.stories.ts b/src/components/button/button-link/button-link.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories';
 
@@ -49,6 +50,7 @@ export const Active: StoryObj = primaryActive;
 export const NegativeActive: StoryObj = primaryNegativeActive;
 export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,

diff --git a/src/components/button/button-static/__snapshots__/button-static.spec.snap.js b/src/components/button/button-static/__snapshots__/button-static.spec.snap.js
@@ -18,10 +18,8 @@ snapshots["sbb-button-static renders a sbb-button-static without icon Dom"] =
 
 snapshots["sbb-button-static renders a sbb-button-static without icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-button-static">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -53,10 +51,8 @@ snapshots["sbb-button-static renders a sbb-button-static with slotted icon Dom"]
 
 snapshots["sbb-button-static renders a sbb-button-static with slotted icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-button-static">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/button-static/button-static.stories.ts b/src/components/button/button-static/button-static.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeDisabled,
   sizeM,
   withSlottedIcon,
+  withHiddenSlottedIcon,
 } from '../common/common-stories';
 
 import readme from './readme.md?raw';
@@ -61,6 +62,7 @@ export const Active: StoryObj = primaryActive;
 export const NegativeActive: StoryObj = primaryNegativeActive;
 export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,

diff --git a/src/components/button/button/__snapshots__/button.spec.snap.js b/src/components/button/button/__snapshots__/button.spec.snap.js
@@ -25,10 +25,8 @@ snapshots["sbb-button renders a sbb-button without icon Dom"] =
 
 snapshots["sbb-button renders a sbb-button without icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-button">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -63,10 +61,8 @@ snapshots["sbb-button renders a sbb-button with slotted icon Dom"] =
 
 snapshots["sbb-button renders a sbb-button with slotted icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-button">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/button/button.stories.ts b/src/components/button/button/button.stories.ts
@@ -21,6 +21,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories';
 
@@ -51,6 +52,7 @@ export const NegativeActive: StoryObj = primaryNegativeActive;
 export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const RequestSubmit: StoryObj = requestSubmit;
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,

diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss
@@ -195,7 +195,8 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 }
 
 .sbb-button__label,
-.sbb-button__icon {
+::slotted([slot='icon']),
+sbb-icon {
   transition: transform var(--sbb-button-transition-duration)
     var(--sbb-button-transition-easing-function);
   transform: translateY(var(--sbb-button-translate-y-content-hover, #{sbb.px-to-rem-build(0)}));
@@ -210,11 +211,3 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
     display: none;
   }
 }
-
-.sbb-button__icon {
-  display: flex;
-
-  :host(:not([data-slot-names~='icon'], [icon-name])) & {
-    display: none;
-  }
-}
diff --git a/src/components/button/common/button-common.ts b/src/components/button/common/button-common.ts
@@ -50,7 +50,7 @@ export const SbbButtonCommonElementMixin = <T extends AbstractConstructor<SbbAct
 
     protected override renderTemplate(): TemplateResult {
       return html`
-        <span class="sbb-button__icon"> ${super.renderIconSlot()} </span>
+        ${super.renderIconSlot()}
         <span class="sbb-button__label">
           <slot></slot>
         </span>

diff --git a/src/components/button/common/common-stories.ts b/src/components/button/common/common-stories.ts
@@ -38,11 +38,12 @@ const IconSlotTemplate = ({
   tag,
   text,
   'icon-name': iconName,
+  hiddenIcon,
   ...args
 }: Args): TemplateResult => html`
   <${unsafeStatic(tag)} ${sbbSpread(args)}>
     ${text}
-    <sbb-icon slot="icon" name=${iconName}></sbb-icon>
+    <sbb-icon slot="icon" name=${iconName} style=${hiddenIcon ? 'display: none;' : ''} ></sbb-icon>
   </${unsafeStatic(tag)}>
 `;
 
@@ -226,6 +227,14 @@ export const loadingIndicator: StoryObj = {
   args: { disabled: true },
 };
 
+export const withHiddenSlottedIcon: StoryObj = {
+  render: IconSlotTemplate,
+  args: {
+    hiddenIcon: true,
+    'icon-name': 'chevron-small-right-small',
+  },
+};
+
 export const commonDecorators = [
   (story: () => WebComponentsRenderer['storyResult'], context: StoryContext) => html`
     <div

diff --git a/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js b/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js
@@ -31,10 +31,8 @@ snapshots["sbb-secondary-button-link renders a sbb-secondary-button-link without
   tabindex="-1"
   target="_blank"
 >
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -101,10 +99,8 @@ snapshots["sbb-secondary-button-link renders a disabled sbb-secondary-button-lin
   role="presentation"
   tabindex="-1"
 >
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/secondary-button-link/secondary-button-link.stories.ts b/src/components/button/secondary-button-link/secondary-button-link.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories';
 
@@ -49,6 +50,7 @@ export const Active: StoryObj = primaryActive;
 export const NegativeActive: StoryObj = primaryNegativeActive;
 export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,

diff --git a/...ponents/button/secondary-button-static/__snapshots__/secondary-button-static.spec.snap.js b/...ponents/button/secondary-button-static/__snapshots__/secondary-button-static.spec.snap.js
@@ -18,10 +18,8 @@ snapshots["sbb-secondary-button-static renders a sbb-secondary-button-static wit
 
 snapshots["sbb-secondary-button-static renders a sbb-secondary-button-static without icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-secondary-button-static">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -53,10 +51,8 @@ snapshots["sbb-secondary-button-static renders a sbb-secondary-button-static wit
 
 snapshots["sbb-secondary-button-static renders a sbb-secondary-button-static with slotted icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-secondary-button-static">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/secondary-button-static/secondary-button-static.stories.ts b/src/components/button/secondary-button-static/secondary-button-static.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeDisabled,
   sizeM,
   withSlottedIcon,
+  withHiddenSlottedIcon,
 } from '../common/common-stories';
 
 import readme from './readme.md?raw';
@@ -61,6 +62,7 @@ export const Active: StoryObj = primaryActive;
 export const NegativeActive: StoryObj = primaryNegativeActive;
 export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,

diff --git a/src/components/button/secondary-button/__snapshots__/secondary-button.spec.snap.js b/src/components/button/secondary-button/__snapshots__/secondary-button.spec.snap.js
@@ -25,10 +25,8 @@ snapshots["sbb-secondary-button renders a sbb-secondary-button without icon Dom"
 
 snapshots["sbb-secondary-button renders a sbb-secondary-button without icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-secondary-button">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -63,10 +61,8 @@ snapshots["sbb-secondary-button renders a sbb-secondary-button with slotted icon
 
 snapshots["sbb-secondary-button renders a sbb-secondary-button with slotted icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-secondary-button">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/secondary-button/secondary-button.stories.ts b/src/components/button/secondary-button/secondary-button.stories.ts
@@ -21,6 +21,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories';
 
@@ -52,6 +53,8 @@ export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
 export const RequestSubmit: StoryObj = requestSubmit;
 
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
+
 const meta: Meta = {
   args: defaultArgs,
   argTypes: defaultArgTypes,

diff --git a/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js b/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js
@@ -31,10 +31,8 @@ snapshots["sbb-tertiary-button-link renders a sbb-tertiary-button-link without i
   tabindex="-1"
   target="_blank"
 >
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -101,10 +99,8 @@ snapshots["sbb-tertiary-button-link renders a disabled sbb-tertiary-button-link
   role="presentation"
   tabindex="-1"
 >
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts b/src/components/button/tertiary-button-link/tertiary-button-link.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeActive,
   primaryNegativeDisabled,
   sizeM,
+  withHiddenSlottedIcon,
   withSlottedIcon,
 } from '../common/common-stories';
 
@@ -49,6 +50,7 @@ export const Active: StoryObj = primaryActive;
 export const NegativeActive: StoryObj = primaryNegativeActive;
 export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,

diff --git a/...omponents/button/tertiary-button-static/__snapshots__/tertiary-button-static.spec.snap.js b/...omponents/button/tertiary-button-static/__snapshots__/tertiary-button-static.spec.snap.js
@@ -18,10 +18,8 @@ snapshots["sbb-tertiary-button-static renders a sbb-secondary-button-static with
 
 snapshots["sbb-tertiary-button-static renders a sbb-secondary-button-static without icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-tertiary-button-static">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>
@@ -53,10 +51,8 @@ snapshots["sbb-tertiary-button-static renders a sbb-tertiary-button-static with
 
 snapshots["sbb-tertiary-button-static renders a sbb-tertiary-button-static with slotted icon ShadowDom"] = 
 `<span class="sbb-action-base sbb-tertiary-button-static">
-  <span class="sbb-button__icon">
-    <slot name="icon">
-    </slot>
-  </span>
+  <slot name="icon">
+  </slot>
   <span class="sbb-button__label">
     <slot>
     </slot>

diff --git a/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts b/src/components/button/tertiary-button-static/tertiary-button-static.stories.ts
@@ -20,6 +20,7 @@ import {
   primaryNegativeDisabled,
   sizeM,
   withSlottedIcon,
+  withHiddenSlottedIcon,
 } from '../common/common-stories';
 
 import readme from './readme.md?raw';
@@ -61,6 +62,7 @@ export const Active: StoryObj = primaryActive;
 export const NegativeActive: StoryObj = primaryNegativeActive;
 export const FocusVisible: StoryObj = primaryFocusVisible;
 export const LoadingIndicator: StoryObj = loadingIndicator;
+export const WithHiddenSlottedIcon: StoryObj = withHiddenSlottedIcon;
 
 const meta: Meta = {
   args: defaultArgs,