Merge branch 'main' into fix/echarts-themes

.changeset/cyan-garlics-worry.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/input-group): update margin

.github/workflows/build.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - 'main'
       - 'release/*'
+  workflow_dispatch:
 
 jobs:
   build:

packages/core/src/components/input-group/input-group.scss

@@ -28,7 +28,7 @@
   .group-start {
     left: 0px;
     height: 2rem;
-    margin-left: 0.375rem;
+    margin-left: 0.5rem;
     color: var(--theme-color-soft-text);
   }
 

packages/core/src/components/toast/toast.tsx

@@ -67,21 +67,56 @@ export class Toast {
 
   private getIcon() {
     if (this.icon) {
-      return <ix-icon name={this.icon} color={this.iconColor} size="24" />;
+      return (
+        <ix-icon
+          data-testid="toast-icon"
+          name={this.icon}
+          color={this.iconColor}
+          size="24"
+        />
+      );
     }
 
     switch (this.type) {
       case 'info':
-        return <ix-icon name={'info'} size="24" color="color-std-text" />;
+        return (
+          <ix-icon
+            data-testid="toast-icon"
+            name={'info'}
+            size="24"
+            color="color-std-text"
+          />
+        );
 
       case 'error':
-        return <ix-icon name={'error'} size="24" color="color-alarm" />;
+        return (
+          <ix-icon
+            data-testid="toast-icon"
+            name={'error'}
+            size="24"
+            color="color-alarm"
+          />
+        );
 
       case 'success':
-        return <ix-icon name={'success'} size="24" color="color-success" />;
+        return (
+          <ix-icon
+            data-testid="toast-icon"
+            name={'success'}
+            size="24"
+            color="color-success"
+          />
+        );
 
       case 'warning':
-        return <ix-icon name={'warning'} size="24" color="color-warning" />;
+        return (
+          <ix-icon
+            data-testid="toast-icon"
+            name={'warning'}
+            size="24"
+            color="color-warning"
+          />
+        );
 
       default:
         return '';

packages/react/package.json

@@ -54,6 +54,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
+    "shadow-dom-testing-library": "^1.11.2",
     "typescript": "^4.5.5",
     "vitest": "^1.3.1"
   },

packages/react/src/tests/toast/toast.spec.tsx

@@ -6,10 +6,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, it } from 'vitest';
 import Content from './toast';
+import { screen } from 'shadow-dom-testing-library';
 
 describe(`toast`, () => {
   it(`basic`, async () => {
@@ -22,25 +23,15 @@ describe(`toast`, () => {
     await customElements.whenDefined('ix-toast-container');
 
     const toast = await screen.findByText('Foobar');
-    const toastShadowRoot = toast.shadowRoot;
-
-    expect(toast).toBeDefined();
-    expect(toastShadowRoot).toBeDefined();
-    expect(toast.innerText).toBe('Foobar');
-
-    await customElements.whenDefined('ix-icon');
-
-    const icon = toastShadowRoot?.querySelector(
-      '.toast-icon ix-icon'
-    ) as HTMLIxIconElement;
-
-    expect(icon).toBeDefined();
 
     await waitFor(() => {
-      expect(icon.shadowRoot).toBeDefined();
+      expect(toast).toBeInTheDocument();
     });
 
-    expect(icon.shadowRoot).toBeDefined();
+    const icon = (await screen.findByShadowTestId(
+      'toast-icon'
+    )) as HTMLIxIconElement;
+
     expect(icon.name).toEqual('star');
   });
 });

packages/react/tsconfig.json

@@ -11,6 +11,7 @@
       "dom",
       "es2015"
     ],
+    "types": ["node", "@testing-library/jest-dom"],
     "importHelpers": true,
     "module": "es2015",
     "moduleResolution": "node",