fix(core/empty-state): center header texts for large layouts (#985)

siemens · Dec 12, 2023 · 150f58b · 150f58b
1 parent 326e5f8
commit 150f58b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 0 deletions.
diff --git a/packages/core/src/components/empty-state/empty-state.scss b/packages/core/src/components/empty-state/empty-state.scss
@@ -43,6 +43,11 @@
       gap: $small-space;
     }
   }
+
+  .label__subHeader,
+  ix-typography {
+    text-align: center;
+  }
 }
 
 :host(.emptyState.emptyState--compact) {

diff --git a/packages/core/src/tests/empty-state/empty-state.e2e.ts b/packages/core/src/tests/empty-state/empty-state.e2e.ts
@@ -17,6 +17,12 @@ regressionTest.describe('empty state', () => {
     expect(await emptyState.screenshot()).toMatchSnapshot();
   });
 
+  regressionTest('overflow', async ({ page }) => {
+    await page.goto('empty-state/overflow');
+    const emptyState = await page.waitForSelector('ix-empty-state');
+    expect(await emptyState.screenshot()).toMatchSnapshot();
+  });
+
   regressionTest('compact', async ({ page }) => {
     await page.goto('empty-state/compact');
     const emptyState = await page.waitForSelector('ix-empty-state');

diff --git a/...e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-dark-linux.png b/...e2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-dark-linux.png
diff --git a/...2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-light-linux.png b/...2e.ts-snapshots/empty-state-overflow-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/empty-state/overflow/index.html b/packages/core/src/tests/empty-state/overflow/index.html
@@ -0,0 +1,26 @@
+<!--
+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>
+    <ix-empty-state
+      header="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+      sub-header="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+      icon="add"
+      action="Create element"
+    ></ix-empty-state>
+
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>