fix(core/card-list): adapt title margin to figma (#1492)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/small-meals-think.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/card-list): adapt title margin to figma

packages/core/component-doc.json

@@ -1936,7 +1936,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -1970,7 +1970,7 @@
           "name": "showAllCount",
           "type": "number",
           "complexType": {
-            "original": "number | undefined",
+            "original": "number",
             "resolved": "number",
             "references": {}
           },
@@ -1984,7 +1984,7 @@
               "type": "number"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {

packages/core/src/components.d.ts

@@ -342,7 +342,7 @@ export namespace Components {
         /**
           * Name the card list
          */
-        "label": string;
+        "label"?: string;
         /**
           * List style
          */
@@ -354,7 +354,7 @@ export namespace Components {
         /**
           * Overwrite the default show all count.
          */
-        "showAllCount": number | undefined;
+        "showAllCount"?: number;
         /**
           * Suppress the overflow handling of child elements
          */
@@ -4435,7 +4435,7 @@ declare namespace LocalJSX {
         /**
           * Overwrite the default show all count.
          */
-        "showAllCount"?: number | undefined;
+        "showAllCount"?: number;
         /**
           * Suppress the overflow handling of child elements
          */

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

@@ -25,7 +25,7 @@ $CardList__Title__Height: 1.5rem;
     height: $CardList__Title__Height;
     align-items: center;
     width: 100%;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
 
     &__Label {
       overflow: hidden;

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

@@ -12,15 +12,15 @@ import {
 import { createMutationObserver } from '../utils/mutation-observer';
 
 function CardListTitle(props: {
-  label: string;
+  label?: string;
   isCollapsed: boolean;
   onClick: (e: MouseEvent) => void;
   onShowAllClick: (e: MouseEvent) => void;
   showAllLabel: string;
   showAllCounter: number;
   hideShowAll: boolean;
 }) {
-  if (props.label === '') {
+  if (!props.label) {
     return null;
   }
 
@@ -67,7 +67,7 @@ export class CardList {
   /**
    * Name the card list
    */
-  @Prop() label: string;
+  @Prop() label?: string;
 
   /**
    * Collapse the list
@@ -89,7 +89,7 @@ export class CardList {
   /**
    * Overwrite the default show all count.
    * */
-  @Prop() showAllCount: number | undefined;
+  @Prop() showAllCount?: number;
 
   /**
    * Suppress the overflow handling of child elements
@@ -116,31 +116,31 @@ export class CardList {
   /**
    * Fire event when the collapse state is changed by the user
    */
-  @Event() collapseChanged: EventEmitter<boolean>;
+  @Event() collapseChanged!: EventEmitter<boolean>;
 
   /**
    * Fire event when the collapse state is changed by the user
    */
-  @Event() showAllClick: EventEmitter<{
+  @Event() showAllClick!: EventEmitter<{
     nativeEvent: MouseEvent;
   }>;
 
   /**
    * Fire event when the show more card is clicked.
    */
-  @Event() showMoreCardClick: EventEmitter<{
+  @Event() showMoreCardClick!: EventEmitter<{
     nativeEvent: MouseEvent;
   }>;
 
-  @Element() hostElement: HTMLIxCardListElement;
+  @Element() hostElement!: HTMLIxCardListElement;
 
   @State() private hasOverflowingElements = false;
   @State() private numberOfOverflowingElements = 0;
   @State() private numberOfAllChildElements = 0;
   @State() private leftScrollDistance = 0;
   @State() private rightScrollDistance = 0;
 
-  private observer: MutationObserver;
+  private observer?: MutationObserver;
 
   private onCardListVisibilityToggle() {
     this.collapse = !this.collapse;
@@ -154,7 +154,7 @@ export class CardList {
   }
 
   private getListChildren() {
-    const slot = this.hostElement.shadowRoot.querySelector(
+    const slot = this.hostElement.shadowRoot!.querySelector(
       '.CardList__Content > slot'
     ) as HTMLSlotElement;
     return slot.assignedElements({ flatten: true });
@@ -185,7 +185,7 @@ export class CardList {
     });
 
     this.observer.observe(
-      this.hostElement.shadowRoot.querySelector('.CardList__Content'),
+      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,
       {
         childList: true,
         subtree: true,
@@ -207,7 +207,7 @@ export class CardList {
   }
 
   private get listElement() {
-    return this.hostElement.shadowRoot.querySelector('.CardList__Content');
+    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');
   }
 
   private onCardListScroll() {
@@ -260,6 +260,9 @@ export class CardList {
 
   @Listen('resize', { target: 'window' })
   private detectOverflow() {
+    if (!this.listElement) {
+      return;
+    }
     const { clientWidth, scrollWidth, scrollLeft } = this.listElement;
 
     this.leftScrollDistance = scrollLeft;