fix(card-list): fixed card-list show all ellipsis issue (#1354)

Co-authored-by: Demirci <ridvan.demirci@siemens.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com> Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Jul 29, 2024 · 938ca56 · 938ca56
1 parent 1b4da95
commit 938ca56
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 2 deletions.
diff --git a/.changeset/loud-moons-occur.md b/.changeset/loud-moons-occur.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/card-list): card-list show all not getting truncated
diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss
@@ -26,6 +26,12 @@ $CardList__Title__Height: 1.5rem;
     align-items: center;
     width: 100%;
     margin-bottom: 0.5rem;
+
+    &__Label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .CardList__Title__Button {
@@ -41,6 +47,7 @@ $CardList__Title__Height: 1.5rem;
     align-self: center;
     margin-left: auto;
     margin-right: 0px;
+    flex-shrink: 0;
   }
 
   .CardList__Content {

diff --git a/packages/core/src/components/card-list/card-list.tsx b/packages/core/src/components/card-list/card-list.tsx
@@ -36,7 +36,9 @@ function CardListTitle(props: {
           CardList__Title__Button__Collapsed: props.isCollapsed,
         }}
       ></ix-icon-button>
-      <ix-typography variant="large-single">{props.label}</ix-typography>
+      <ix-typography class="CardList_Title__Label" variant="large-single">
+        {props.label}
+      </ix-typography>
       {!props.hideShowAll && (
         <ix-button
           class="CardList__Title__Show__All"

diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts b/packages/core/src/tests/card-list/card-list.e2e.ts
@@ -8,17 +8,25 @@
  */
 
 import { expect } from '@playwright/test';
-import { regressionTest } from '@utils/test';
+import { regressionTest, viewPorts } from '@utils/test';
 
 regressionTest.describe('card-list: basic', () => {
   regressionTest('should not have visual regressions', async ({ page }) => {
     await page.goto('card-list/basic');
     await page.waitForTimeout(1000);
+
     expect(
       await page.screenshot({ fullPage: true, animations: 'disabled' })
     ).toMatchSnapshot();
   });
 
+  regressionTest('should show  ellipsis label', async ({ page }) => {
+    await page.goto('card-list/long-label');
+    await page.waitForTimeout(1000);
+    await page.setViewportSize(viewPorts.sm);
+    expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot();
+  });
+
   regressionTest('should hide show all button', async ({ page }) => {
     await page.goto('card-list/hide-show-all');
     await page.waitForTimeout(1000);

diff --git a/...list-basic-should-show-ellipsis-label-1-chromium---theme-classic-dark-linux.png b/...list-basic-should-show-ellipsis-label-1-chromium---theme-classic-dark-linux.png
diff --git a/...ist-basic-should-show-ellipsis-label-1-chromium---theme-classic-light-linux.png b/...ist-basic-should-show-ellipsis-label-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/card-list/long-label/index.html b/packages/core/src/tests/card-list/long-label/index.html
@@ -0,0 +1,127 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+    <style>
+      ix-action-card {
+        margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <ix-card-list
+      label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna enim, pretium eget vulputate et, finibus et enim. Aliquam luctus metus sit amet sem venenatis bibendum. "
+      list-style="scroll"
+    >
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="insight"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="notification"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="alarm"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="critical"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="warning"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="success"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="info"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content End of list"
+        subheading="Subheading"
+        variant="neutral"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content End of list"
+        subheading="Subheading"
+        variant="neutral"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content End of list"
+        subheading="Subheading"
+        variant="neutral"
+      ></ix-push-card>
+      <ix-push-card
+        id="end"
+        icon="bulb"
+        notification="99"
+        heading="Heading content End of list"
+        subheading="Subheading"
+        variant="neutral"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="success"
+      ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="primary"
+      ></ix-push-card>
+    </ix-card-list>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>