siemens · AndreasBerliner · Dec 12, 2024 · Dec 12, 2024 · Dec 16, 2024 · Dec 18, 2024
diff --git a/.changeset/strong-bags-run.md b/.changeset/strong-bags-run.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+Set correct cursors and handle overflow for **ix-card** and **ix-push-card**.
diff --git a/packages/core/src/components/card-content/card-content.scss b/packages/core/src/components/card-content/card-content.scss
@@ -16,6 +16,6 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
-  padding: 1rem;
   height: 100%;
+  overflow: hidden;
 }
diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss
@@ -16,6 +16,7 @@
   align-items: flex-start;
   align-self: flex-start;
   overflow: hidden;
+  cursor: pointer;
 
   width: 20rem;
 
@@ -32,6 +33,14 @@
     background-color: var(--ix-card-background, transparent);
     border-top-left-radius: var(--theme-default-border-radius);
     border-top-right-radius: var(--theme-default-border-radius);
+    overflow: hidden;
+  }
+
+  .card-content-wrapper {
+    padding: 1rem;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   .card-footer {

diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
@@ -45,7 +45,9 @@ export class Card {
         }}
       >
         <div class="card-content">
-          <slot></slot>
+          <div class="card-content-wrapper">
+            <slot></slot>
+          </div>
         </div>
         <div class="card-footer">
           <slot name="card-accordion"></slot>

diff --git a/packages/core/src/components/push-card/push-card.scss b/packages/core/src/components/push-card/push-card.scss
@@ -11,6 +11,14 @@
   display: block;
   position: relative;
 
+  ix-card {
+    cursor: default;
+  }
+
+  ix-card-accordion {
+    cursor: pointer;
+  }
+
   .icon {
     transform: scale(1.25);
   }

diff --git a/packages/core/src/tests/card/card.e2e.ts b/packages/core/src/tests/card/card.e2e.ts
@@ -24,3 +24,10 @@ regressionTest.describe('card: basic', () => {
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 });
+
+regressionTest.describe('card: overflow', () => {
+  regressionTest('should hide overflowing text', async ({ page }) => {
+    await page.goto('card/overflow');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...overflow-should-hide-overflowing-text-1-chromium---theme-classic-dark-linux.png b/...overflow-should-hide-overflowing-text-1-chromium---theme-classic-dark-linux.png
diff --git a/...verflow-should-hide-overflowing-text-1-chromium---theme-classic-light-linux.png b/...verflow-should-hide-overflowing-text-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/card/overflow/index.html b/packages/core/src/tests/card/overflow/index.html
@@ -0,0 +1,39 @@
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <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-card {
+        margin: 1rem;
+        height: 12rem;
+        width: 12rem;
+      }
+    </style>
+  </head>
+  <body>
+    <ix-card>
+      <ix-card-content>
+        <ix-typography>
+          This is an example text for testing the overflow behavior. This is an
+          example text for testing the overflow behavior. This is an example
+          text for testing the overflow behavior. This is an example text for
+          testing the overflow behavior. This is an example text for testing the
+          overflow behavior. This is an example text for testing the overflow
+          behavior.
+        </ix-typography>
+      </ix-card-content>
+    </ix-card>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/push-card/overflow/index.html b/packages/core/src/tests/push-card/overflow/index.html
@@ -0,0 +1,37 @@
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <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-push-card {
+        margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <ix-push-card
+      icon="bulb"
+      notification="99"
+      heading="This is an example text for testing the overflow behavior."
+      subheading="This is an example text for testing the overflow behavior. This is an
+      example text for testing the overflow behavior. This is an example
+      text for testing the overflow behavior. This is an example text for
+      testing the overflow behavior. This is an example text for testing the
+      overflow behavior. This is an example text for testing the overflow
+      behavior."
+    >
+    </ix-push-card>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts b/packages/core/src/tests/push-card/push-card.e2e.ts
@@ -35,6 +35,13 @@ regressionTest.describe('push-card: basic', () => {
   });
 });
 
+regressionTest.describe('push-card: overflow', () => {
+  regressionTest('should hide overflowing text', async ({ page }) => {
+    await page.goto('push-card/overflow');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
+
 test('push card expand', async ({ page, mount }) => {
   await mount(`
       <ix-push-card

diff --git a/...overflow-should-hide-overflowing-text-1-chromium---theme-classic-dark-linux.png b/...overflow-should-hide-overflowing-text-1-chromium---theme-classic-dark-linux.png
diff --git a/...verflow-should-hide-overflowing-text-1-chromium---theme-classic-light-linux.png b/...verflow-should-hide-overflowing-text-1-chromium---theme-classic-light-linux.png
diff --git a/packages/react-test-app/src/preview-examples/card.scoped.css b/packages/react-test-app/src/preview-examples/card.scoped.css
@@ -22,6 +22,6 @@ ix-card {
 
 ix-card ix-typography:last-of-type {
   position: absolute;
-  bottom: 1rem;
-  right: 1rem;
+  bottom: 0;
+  right: 0;
 }