fix(sbb-teaser): prevent overlapping chip if including long content (#…

…2450)
sbb-design-systems · Mar 4, 2024 · b78b3ce · b78b3ce
1 parent 5e5a7cb
commit b78b3ce
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/src/components/teaser/teaser.scss b/src/components/teaser/teaser.scss
@@ -61,6 +61,12 @@
   flex-flow: var(--sbb-teaser-flex-direction) nowrap;
   align-items: var(--sbb-teaser-align-items);
   gap: var(--sbb-teaser-gap);
+  max-width: 100%;
+}
+
+.sbb-teaser__text {
+  overflow: hidden;
+  max-width: 100%;
 }
 
 ::slotted([slot='image']) {

diff --git a/src/components/teaser/teaser.stories.ts b/src/components/teaser/teaser.stories.ts
@@ -93,6 +93,15 @@ const TemplateDefault = ({ description, ...remainingArgs }: Args): TemplateResul
   `;
 };
 
+const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): TemplateResult => {
+  return html`
+    <sbb-teaser ${sbbSpread(remainingArgs)} style="width:400px">
+      <img slot="image" src=${placeholderImage} alt="400x300" />
+      ${description}
+    </sbb-teaser>
+  `;
+};
+
 const TemplateCustom = ({ description, ...remainingArgs }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
@@ -162,12 +171,32 @@ export const AfterChip: StoryObj = {
   args: { ...defaultArgs, alignment: 'after', 'chip-content': 'This is a chip.' },
 };
 
+export const AfterWithLongContentChip: StoryObj = {
+  render: TemplateDefaultFixedWidth,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    alignment: 'after',
+    'chip-content': 'This is a chip which has a very long content and should receive ellipsis.',
+  },
+};
+
 export const BelowChip: StoryObj = {
   render: TemplateDefault,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, alignment: 'below', 'chip-content': 'This is a chip.' },
 };
 
+export const BelowWithLongContentChip: StoryObj = {
+  render: TemplateDefaultFixedWidth,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    alignment: 'below',
+    'chip-content': 'This is a chip which has a very long content and should receive ellipsis.',
+  },
+};
+
 export const WithLongTextCentered: StoryObj = {
   render: TemplateDefault,
   argTypes: defaultArgTypes,