Merge branch 'main' into feat/menu-breakpoint

siemens · Mar 14, 2024 · 3f7c949 · 3f7c949
2 parents 00faccd + adf9472
commit 3f7c949
Show file tree

Hide file tree

Showing 22 changed files with 254 additions and 7 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts b/packages/angular-test-app/src/preview-examples/vertical-tabs-with-avatar.ts
@@ -14,7 +14,7 @@ import { Component } from '@angular/core';
   template: `
     <ix-menu>
       <ix-menu-avatar top="[email protected]" bottom="Administrator" image="https://ui-avatars.com/api/?name=John+Doe">
-        <ix-menu-avatar-item label="Option 1"></ix-menu-avatar-item>
+        <ix-menu-avatar-item icon="user-profile" label="User profile..."></ix-menu-avatar-item>
       </ix-menu-avatar>
       <ix-menu-item home-tab tab-icon="home"> Home </ix-menu-item>
       <ix-menu-item tab-icon="globe"> Normal Tab </ix-menu-item>

diff --git a/packages/core/src/components/select-item/select-item.scss b/packages/core/src/components/select-item/select-item.scss
@@ -15,6 +15,10 @@
     width: 100%;
   }
 
+  ix-dropdown-item {
+    color: var(--theme-color-std-text);
+  }
+
   .select-item-checked {
     background-color: var(--theme-select-list-item--background--selected);
     --ix-dropdown-item-checked-color: var(--theme-color-std-text);

diff --git a/packages/core/src/components/typography/typography.tsx b/packages/core/src/components/typography/typography.tsx
@@ -128,7 +128,7 @@ export class IxTypography {
 
     if (this.textColor) {
       style = {
-        color: `var(--theme-color-${this.color}-text)`,
+        color: `var(--theme-color-${this.textColor}-text)`,
       };
     }
 

diff --git a/...scrollbar-on-collapsed-but-scrollable-1-chromium---theme-classic-dark-linux.png b/...scrollbar-on-collapsed-but-scrollable-1-chromium---theme-classic-dark-linux.png
diff --git a/...crollbar-on-collapsed-but-scrollable-1-chromium---theme-classic-light-linux.png b/...crollbar-on-collapsed-but-scrollable-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/menu/overflow/index.html b/packages/core/src/tests/menu/overflow/index.html
@@ -20,7 +20,7 @@
         <div class="placeholder-logo" slot="logo"></div>
       </ix-application-header>
       <ix-menu start-expanded>
-        <ix-menu-avatar image="https://ui-avatars.com/api/?name=John+Doe">
+        <ix-menu-avatar initials="JD">
           <ix-menu-avatar-item label="Option 1"></ix-menu-avatar-item>
         </ix-menu-avatar>
         <ix-menu-item home tab-icon="home">

diff --git a/packages/core/src/tests/typography/basic/index.html b/packages/core/src/tests/typography/basic/index.html
@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: 2023 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>
+  </head>
+  <body>
+    <script>
+      const textFormats = [
+        'label-lg',
+        'label',
+        'label-sm',
+        'label-xs',
+
+        'body-lg',
+        'body',
+        'body-sm',
+        'body-xs',
+
+        'display-xxl',
+        'display-xl',
+        'display-lg',
+        'display',
+        'display-sm',
+        'display-xs',
+
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+
+        'code-lg',
+        'code',
+        'code-sm',
+      ];
+
+      textFormats.map(format => {
+        const typography = document.createElement('ix-typography');
+        typography.format = format;
+        typography.innerHTML = format;
+        document.body.appendChild(typography);
+      });
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/typography/line-through/index.html b/packages/core/src/tests/typography/line-through/index.html
@@ -0,0 +1,58 @@
+<!--
+SPDX-FileCopyrightText: 2023 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>
+  </head>
+  <body>
+    <script>
+      const textFormats = [
+        'label-lg',
+        'label',
+        'label-sm',
+        'label-xs',
+
+        'body-lg',
+        'body',
+        'body-sm',
+        'body-xs',
+
+        'display-xxl',
+        'display-xl',
+        'display-lg',
+        'display',
+        'display-sm',
+        'display-xs',
+
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+
+        'code-lg',
+        'code',
+        'code-sm',
+      ];
+
+      textFormats.map(format => {
+        const typography = document.createElement('ix-typography');
+        typography.format = format;
+        typography.innerHTML = format;
+        typography.textDecoration = 'line-through';
+        document.body.appendChild(typography);
+      });
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/typography/text-color/index.html b/packages/core/src/tests/typography/text-color/index.html
@@ -0,0 +1,37 @@
+<!--
+SPDX-FileCopyrightText: 2023 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>
+      .inv-bg {
+        background-color: var(--theme-color-alarm);
+      }
+    </style>
+  </head>
+  <body>
+    <ix-typography text-color="contrast">Contrast</ix-typography>
+    <ix-typography text-color="std">Std</ix-typography>
+    <ix-typography text-color="soft">Soft</ix-typography>
+    <ix-typography text-color="weak">Weak</ix-typography>
+    <ix-typography text-color="alarm">Alarm</ix-typography>
+
+    <div class="inv-bg">
+      <ix-typography text-color="inv-contrast">Inv-contrast</ix-typography>
+      <ix-typography text-color="inv-std">Inv-std</ix-typography>
+      <ix-typography text-color="inv-soft">Inv-soft</ix-typography>
+      <ix-typography text-color="inv-weak">Inv-weak</ix-typography>
+    </div>
+
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/typography/typography.e2e.ts b/packages/core/src/tests/typography/typography.e2e.ts
@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('typography', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto('typography/basic');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('line-through', async ({ page }) => {
+    await page.goto('typography/line-through');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('underline', async ({ page }) => {
+    await page.goto('typography/underline');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('text color', async ({ page }) => {
+    await page.goto('typography/text-color');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...phy.e2e.ts-snapshots/typography-basic-1-chromium---theme-classic-dark-linux.png b/...phy.e2e.ts-snapshots/typography-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...hy.e2e.ts-snapshots/typography-basic-1-chromium---theme-classic-light-linux.png b/...hy.e2e.ts-snapshots/typography-basic-1-chromium---theme-classic-light-linux.png
diff --git a/....ts-snapshots/typography-line-through-1-chromium---theme-classic-dark-linux.png b/....ts-snapshots/typography-line-through-1-chromium---theme-classic-dark-linux.png
diff --git a/...ts-snapshots/typography-line-through-1-chromium---theme-classic-light-linux.png b/...ts-snapshots/typography-line-through-1-chromium---theme-classic-light-linux.png
diff --git a/...2e.ts-snapshots/typography-text-color-1-chromium---theme-classic-dark-linux.png b/...2e.ts-snapshots/typography-text-color-1-chromium---theme-classic-dark-linux.png
diff --git a/...e.ts-snapshots/typography-text-color-1-chromium---theme-classic-light-linux.png b/...e.ts-snapshots/typography-text-color-1-chromium---theme-classic-light-linux.png
diff --git a/...e2e.ts-snapshots/typography-underline-1-chromium---theme-classic-dark-linux.png b/...e2e.ts-snapshots/typography-underline-1-chromium---theme-classic-dark-linux.png
diff --git a/...2e.ts-snapshots/typography-underline-1-chromium---theme-classic-light-linux.png b/...2e.ts-snapshots/typography-underline-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/typography/underline/index.html b/packages/core/src/tests/typography/underline/index.html
@@ -0,0 +1,58 @@
+<!--
+SPDX-FileCopyrightText: 2023 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>
+  </head>
+  <body>
+    <script>
+      const textFormats = [
+        'label-lg',
+        'label',
+        'label-sm',
+        'label-xs',
+
+        'body-lg',
+        'body',
+        'body-sm',
+        'body-xs',
+
+        'display-xxl',
+        'display-xl',
+        'display-lg',
+        'display',
+        'display-sm',
+        'display-xs',
+
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+
+        'code-lg',
+        'code',
+        'code-sm',
+      ];
+
+      textFormats.map(format => {
+        const typography = document.createElement('ix-typography');
+        typography.format = format;
+        typography.innerHTML = format;
+        typography.textDecoration = 'underline';
+        document.body.appendChild(typography);
+      });
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/html-test-app/src/preview-examples/vertical-tabs-with-avatar.html b/packages/html-test-app/src/preview-examples/vertical-tabs-with-avatar.html
@@ -13,7 +13,7 @@
     <!-- Preview code -->
     <ix-menu>
       <ix-menu-avatar top="[email protected]" bottom="Administrator" image="https://ui-avatars.com/api/?name=John+Doe">
-        <ix-menu-avatar-item label="Option 1"></ix-menu-avatar-item>
+        <ix-menu-avatar-item icon="user-profile" label="User profile..."></ix-menu-avatar-item>
       </ix-menu-avatar>
       <ix-menu-item home icon="home"> Home </ix-menu-item>
       <ix-menu-item icon="globe"> Normal Tab </ix-menu-item>

diff --git a/packages/react-test-app/src/preview-examples/vertical-tabs-with-avatar.tsx b/packages/react-test-app/src/preview-examples/vertical-tabs-with-avatar.tsx
@@ -19,7 +19,7 @@ export default () => {
   return (
     <IxMenu>
       <IxMenuAvatar top="[email protected]" bottom="Administrator" image="https://ui-avatars.com/api/?name=John+Doe">
-        <IxMenuAvatarItem label="Option 1"></IxMenuAvatarItem>
+        <IxMenuAvatarItem icon="user-profile" label="User profile..."></IxMenuAvatarItem>
       </IxMenuAvatar>
       <IxMenuItem home tab-icon="home">
         {' '}

diff --git a/packages/vue-test-app/src/preview-examples/vertical-tabs-with-avatar.vue b/packages/vue-test-app/src/preview-examples/vertical-tabs-with-avatar.vue
@@ -18,8 +18,8 @@ import {
 
 <template>
   <IxMenu>
-    <IxMenuAvatar>
-      <IxMenuAvatarItem top="[email protected]" bottom="Administrator" label="Option 1"></IxMenuAvatarItem>
+    <IxMenuAvatar top="[email protected]" bottom="Administrator">
+      <IxMenuAvatarItem icon="user-profile" label="User profile..."></IxMenuAvatarItem>
     </IxMenuAvatar>
     <IxMenuItem home-tab tab-icon="home"> &nbsp; Home&nbsp; </IxMenuItem>
     <IxMenuItem tab-icon="globe"> Normal Tab </IxMenuItem>