fix(core/application-header): align logo in center position

siemens · Oct 5, 2022 · 74be7a1 · 74be7a1
1 parent c3eef6e
commit 74be7a1
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 26 deletions.
diff --git a/packages/core/src/components/application-header/application-header.scss b/packages/core/src/components/application-header/application-header.scss
@@ -27,7 +27,8 @@
   }
 
   .logo {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     position: relative;
     height: 32px;
     overflow: hidden;

diff --git a/packages/core/src/components/application-header/test/application-header.e2e.ts b/packages/core/src/components/application-header/test/application-header.e2e.ts
@@ -15,4 +15,12 @@ regressionTest.describe('application header: basic', () => {
     await page.goto(`application-header/test/basic`);
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest(
+    'should not have visual regressions - svg',
+    async ({ page }) => {
+      await page.goto(`application-header/test/basic-svg`);
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    }
+  );
 });
diff --git a/...uld-not-have-visual-regressions---svg-1-chromium---theme-classic-dark-linux.png b/...uld-not-have-visual-regressions---svg-1-chromium---theme-classic-dark-linux.png
diff --git a/...ld-not-have-visual-regressions---svg-1-chromium---theme-classic-light-linux.png b/...ld-not-have-visual-regressions---svg-1-chromium---theme-classic-light-linux.png
diff --git a/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
diff --git a/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/components/application-header/test/basic-svg/index.html b/packages/core/src/components/application-header/test/basic-svg/index.html
@@ -0,0 +1,46 @@
+<!--
+SPDX-FileCopyrightText: 2022 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>
+    <ix-application-header name="Test app name">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 184.567 138"
+        slot="logo"
+      >
+        <defs>
+          <linearGradient
+            id="x05mhzd7ga"
+            x1=".5"
+            x2=".5"
+            y2="1"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="0" stop-color="#00ffb9" />
+            <stop offset="1" stop-color="#0cc" />
+          </linearGradient>
+        </defs>
+        <path
+          data-name="Vereinigungsmenge 41"
+          d="M0 126c0-.337.014-.67.041-1H0V60a12 12 0 1 1 24 0v65h-.042c.027.329.042.663.042 1a12 12 0 0 1-24 0zm50.944 8.052a12 12 0 0 1 0-16.969L99.027 69 50.944 20.919A12 12 0 0 1 67.915 3.947L116 52.03l48.083-48.084a12 12 0 0 1 16.969 16.971L132.969 69l48.084 48.084a12 12 0 0 1-16.969 16.971L116 85.971l-48.085 48.082a12 12 0 0 1-16.971 0zM0 12a12 12 0 1 1 12 12A12 12 0 0 1 0 12z"
+          style="fill: url(#x05mhzd7ga)"
+        />
+      </svg>
+    </ix-application-header>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/application-header/test/basic/index.html b/packages/core/src/components/application-header/test/basic/index.html
@@ -15,31 +15,7 @@
   </head>
   <body>
     <ix-application-header name="Test app name">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="32"
-        height="32"
-        viewBox="0 0 184.567 138"
-        slot="logo"
-      >
-        <defs>
-          <linearGradient
-            id="x05mhzd7ga"
-            x1=".5"
-            x2=".5"
-            y2="1"
-            gradientUnits="objectBoundingBox"
-          >
-            <stop offset="0" stop-color="#00ffb9" />
-            <stop offset="1" stop-color="#0cc" />
-          </linearGradient>
-        </defs>
-        <path
-          data-name="Vereinigungsmenge 41"
-          d="M0 126c0-.337.014-.67.041-1H0V60a12 12 0 1 1 24 0v65h-.042c.027.329.042.663.042 1a12 12 0 0 1-24 0zm50.944 8.052a12 12 0 0 1 0-16.969L99.027 69 50.944 20.919A12 12 0 0 1 67.915 3.947L116 52.03l48.083-48.084a12 12 0 0 1 16.969 16.971L132.969 69l48.084 48.084a12 12 0 0 1-16.969 16.971L116 85.971l-48.085 48.082a12 12 0 0 1-16.971 0zM0 12a12 12 0 1 1 12 12A12 12 0 0 1 0 12z"
-          style="fill: url(#x05mhzd7ga)"
-        />
-      </svg>
+      <div slot="logo">Text Logo</div>
     </ix-application-header>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>