Fix(core/card|push-card) set correct cursors and adjust styling (#1621)

Co-authored-by: Lukas Maurer <[email protected]>
Co-authored-by: matthiashader <[email protected]>
Co-authored-by: matthias <[email protected]>

.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**.

packages/core/src/components/card-content/card-content.scss

@@ -10,12 +10,19 @@
 
 :host {
   @include ix-component;
-
   display: flex;
-  position: relative;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
   padding: 1rem;
   height: 100%;
+  overflow: hidden;
+
+  .content-wrapper {
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    gap: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }

packages/core/src/components/card-content/card-content.tsx

@@ -12,7 +12,9 @@ export class CardContent {
   render() {
     return (
       <Host>
-        <slot></slot>
+        <div class="content-wrapper">
+          <slot></slot>
+        </div>
       </Host>
     );
   }

packages/core/src/components/card-list/card-list.scss

@@ -130,6 +130,7 @@ $CardList__Title__Height: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100%;
   }
 
   .Show__All__Card__Icon {

packages/core/src/components/card-list/card-list.tsx

@@ -326,15 +326,17 @@ export class CardList {
                   })
                 }
               >
-                <ix-card-content class="Show__All__Card__Content">
-                  <ix-icon
-                    name={'more-menu'}
-                    size={'32'}
-                    class={'Show__All__Card__Icon'}
-                  ></ix-icon>
-                  <span class="Show__All__Card__Text">
-                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})
-                  </span>
+                <ix-card-content>
+                  <div class="Show__All__Card__Content">
+                    <ix-icon
+                      name={'more-menu'}
+                      size={'32'}
+                      class={'Show__All__Card__Icon'}
+                    ></ix-icon>
+                    <span class="Show__All__Card__Text">
+                      {this.i18nMoreCards} ({this.numberOfOverflowingElements})
+                    </span>
+                  </div>
                 </ix-card-content>
               </ix-card>
             ) : null}

packages/core/src/components/card-title/card-title.scss

@@ -6,7 +6,7 @@
   flex-direction: row;
   align-items: center;
   margin-top: 0.25rem;
-  margin-bottom: $small-space;
+  margin-bottom: 0.25rem;
   gap: $default-space;
 
   width: 100%;
@@ -17,6 +17,6 @@
     flex-direction: row;
     gap: 0.25rem;
     margin-left: auto;
-    margin-right: 0px;
+    margin-right: 0;
   }
 }

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,13 @@
     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 {
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   .card-footer {

packages/core/src/components/push-card/push-card.scss

@@ -11,8 +11,17 @@
   display: block;
   position: relative;
 
+  ix-card {
+    cursor: default;
+  }
+
+  ix-card-accordion {
+    cursor: pointer;
+  }
+
   .icon {
-    transform: scale(1.25);
+    height: 2.5rem;
+    width: 2.5rem;
   }
 
   .notification {

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();
+  });
+});

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>

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>

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

packages/react-test-app/src/preview-examples/card-list.tsx

@@ -14,7 +14,7 @@ export default () => {
     <>
       <IxCardList label="Stack Layout" showAllCount={12} listStyle={'stack'}>
         <IxPushCard
-          icon="rocket"
+          icon="bulb"
           notification="3"
           heading="Heading content"
           subheading="Subheading"

packages/storybook-docs/src/stories/push-card.stories.ts

@@ -0,0 +1,39 @@
+import type { ArgTypes, Meta, StoryObj } from '@storybook/web-components';
+import type { Components } from '@siemens/ix/components';
+import { genericRender, makeArgTypes } from './utils/generic-render';
+
+type Element = Components.IxPushCard & { defaultSlot: string };
+
+const meta = {
+  title: 'Example/PushCard',
+  tags: [],
+  render: (args) => genericRender('ix-push-card', args),
+  argTypes: makeArgTypes<Partial<ArgTypes<Element>>>('ix-push-card', {
+    defaultSlot: {
+      control: 'text',
+    },
+  }),
+  args: {
+    defaultSlot: '',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=6396-139080&m=dev',
+    },
+  },
+} satisfies Meta<Element>;
+
+export default meta;
+type Story = StoryObj<Element>;
+
+export const Default: Story = {
+  args: {
+    defaultSlot: ``,
+    icon: 'bulb',
+    notification: '99',
+    heading: 'Heading content',
+    subheading: 'Subheading',
+    variant: 'insight',
+  },
+};