-
-
-
-
+
+
diff --git a/src/components/button/button/button.stories.ts b/src/components/button/button/button.stories.ts
index 504ac9a93d..22165c4cbe 100644
--- 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
index f66e7cb288..d5cfdced18 100644
--- 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
index 6d4a359b7b..338f3cada5 100644
--- a/src/components/button/common/button-common.ts
+++ b/src/components/button/common/button-common.ts
@@ -50,7 +50,7 @@ export const SbbButtonCommonElementMixin = ${super.renderIconSlot()}
+ ${super.renderIconSlot()}
diff --git a/src/components/button/common/common-stories.ts b/src/components/button/common/common-stories.ts
index 0eb84efe99..d31bea3420 100644
--- 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}
-
+
`;
@@ -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`
-
-
-
-
+
+
@@ -101,10 +99,8 @@ snapshots["sbb-secondary-button-link renders a disabled sbb-secondary-button-lin
role="presentation"
tabindex="-1"
>
-
-
-
-
+
+
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
index 3c1ede4707..5e32817f03 100644
--- 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/src/components/button/secondary-button-static/__snapshots__/secondary-button-static.spec.snap.js b/src/components/button/secondary-button-static/__snapshots__/secondary-button-static.spec.snap.js
index 84dc69cae3..b148cebbdc 100644
--- a/src/components/button/secondary-button-static/__snapshots__/secondary-button-static.spec.snap.js
+++ b/src/components/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"] =
`
-
-
-
-
+
+
@@ -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"] =
`
-
-
-
-
+
+
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
index a93343230f..69479dfc63 100644
--- 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
index 155e5c19ba..0552f7cafa 100644
--- 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"] =
`
-
-
-
-
+
+
@@ -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"] =
`
-
-
-
-
+
+
diff --git a/src/components/button/secondary-button/secondary-button.stories.ts b/src/components/button/secondary-button/secondary-button.stories.ts
index 7851690776..b60f633605 100644
--- 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
index d6deb09f6f..18fc01e439 100644
--- 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"
>
-
-
-
-
+
+
@@ -101,10 +99,8 @@ snapshots["sbb-tertiary-button-link renders a disabled sbb-tertiary-button-link
role="presentation"
tabindex="-1"
>
-
-
-
-
+
+
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
index 3b4d00fd85..f57c55b2ee 100644
--- 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/src/components/button/tertiary-button-static/__snapshots__/tertiary-button-static.spec.snap.js b/src/components/button/tertiary-button-static/__snapshots__/tertiary-button-static.spec.snap.js
index 530dcc541f..dcdb853695 100644
--- a/src/components/button/tertiary-button-static/__snapshots__/tertiary-button-static.spec.snap.js
+++ b/src/components/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"] =
`
-
-
-
-
+
+
@@ -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"] =
`
-
-
-
-
+
+
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
index 147e9519c4..743ba465ec 100644
--- 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,
diff --git a/src/components/button/tertiary-button/__snapshots__/tertiary-button.spec.snap.js b/src/components/button/tertiary-button/__snapshots__/tertiary-button.spec.snap.js
index 51410b75fb..91aa8fce44 100644
--- a/src/components/button/tertiary-button/__snapshots__/tertiary-button.spec.snap.js
+++ b/src/components/button/tertiary-button/__snapshots__/tertiary-button.spec.snap.js
@@ -25,10 +25,8 @@ snapshots["sbb-tertiary-button renders a sbb-tertiary-button without icon Dom"]
snapshots["sbb-tertiary-button renders a sbb-tertiary-button without icon ShadowDom"] =
`
-
-
-
-
+
+
@@ -63,10 +61,8 @@ snapshots["sbb-tertiary-button renders a sbb-tertiary-button with slotted icon D
snapshots["sbb-tertiary-button renders a sbb-tertiary-button with slotted icon ShadowDom"] =
`
-
-
-
-
+
+
diff --git a/src/components/button/tertiary-button/tertiary-button.stories.ts b/src/components/button/tertiary-button/tertiary-button.stories.ts
index cb67df48f0..0dc5b2b78b 100644
--- a/src/components/button/tertiary-button/tertiary-button.stories.ts
+++ b/src/components/button/tertiary-button/tertiary-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/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js b/src/components/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js
index 586a9d99de..3665721fc5 100644
--- a/src/components/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js
+++ b/src/components/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js
@@ -31,10 +31,8 @@ snapshots["sbb-transparent-button-link renders a sbb-transparent-button-link wit
tabindex="-1"
target="_blank"
>
-
-
-
-
+
+
@@ -101,10 +99,8 @@ snapshots["sbb-transparent-button-link renders a disabled sbb-transparent-button
role="presentation"
tabindex="-1"
>
-
-
-
-
+
+
diff --git a/src/components/button/transparent-button-link/transparent-button-link.stories.ts b/src/components/button/transparent-button-link/transparent-button-link.stories.ts
index 097af9851f..0157296298 100644
--- a/src/components/button/transparent-button-link/transparent-button-link.stories.ts
+++ b/src/components/button/transparent-button-link/transparent-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/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js b/src/components/button/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js
index da4f20476d..82ed2a1361 100644
--- a/src/components/button/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js
+++ b/src/components/button/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js
@@ -18,10 +18,8 @@ snapshots["sbb-transparent-button-static renders a sbb-transparent-button-static
snapshots["sbb-transparent-button-static renders a sbb-transparent-button-static without icon ShadowDom"] =
`
-
-
-
-
+
+
@@ -53,10 +51,8 @@ snapshots["sbb-transparent-button-static renders a sbb-transparent-button-static
snapshots["sbb-transparent-button-static renders a sbb-transparent-button-static with slotted icon ShadowDom"] =
`
-
-
-
-
+
+
diff --git a/src/components/button/transparent-button-static/transparent-button-static.stories.ts b/src/components/button/transparent-button-static/transparent-button-static.stories.ts
index c644566179..825c83d8b5 100644
--- a/src/components/button/transparent-button-static/transparent-button-static.stories.ts
+++ b/src/components/button/transparent-button-static/transparent-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/transparent-button/__snapshots__/transparent-button.spec.snap.js b/src/components/button/transparent-button/__snapshots__/transparent-button.spec.snap.js
index ffc14f519d..83c25d0ec5 100644
--- a/src/components/button/transparent-button/__snapshots__/transparent-button.spec.snap.js
+++ b/src/components/button/transparent-button/__snapshots__/transparent-button.spec.snap.js
@@ -25,10 +25,8 @@ snapshots["sbb-transparent-button renders a sbb-transparent-button without icon
snapshots["sbb-transparent-button renders a sbb-transparent-button without icon ShadowDom"] =
`
-
-
-
-
+
+
@@ -63,10 +61,8 @@ snapshots["sbb-transparent-button renders a sbb-transparent-button with slotted
snapshots["sbb-transparent-button renders a sbb-transparent-button with slotted icon ShadowDom"] =
`
-
-
-
-
+
+
diff --git a/src/components/button/transparent-button/transparent-button.stories.ts b/src/components/button/transparent-button/transparent-button.stories.ts
index a0f7c01979..f6c7b475ff 100644
--- a/src/components/button/transparent-button/transparent-button.stories.ts
+++ b/src/components/button/transparent-button/transparent-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,