fix(core/panes): rotate icon at left and right pane (#1336)

Co-authored-by: Lukas Maurer <[email protected]>
siemens · Jun 18, 2024 · 1db5a06 · 1db5a06
1 parent 46e7be6
commit 1db5a06
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 0 deletions.
diff --git a/.changeset/breezy-rings-report.md b/.changeset/breezy-rings-report.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/panes): rotate icon at left and right pane
diff --git a/packages/core/src/components/pane/pane.scss b/packages/core/src/components/pane/pane.scss
@@ -105,6 +105,10 @@
         text-orientation: mixed;
         transform: rotate(180deg);
         flex-direction: row-reverse;
+
+        ix-icon {
+          transform: rotate(90deg);
+        }
       }
     }
 

diff --git a/packages/core/src/tests/panes/icon/index.html b/packages/core/src/tests/panes/icon/index.html
@@ -0,0 +1,33 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+      name="viewport"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="width: 100vw; height: 100vh">
+    <ix-pane-layout
+      id="pane-layout"
+      variant="floating"
+      layout="full-horizontal"
+      borderless="true"
+    >
+      <ix-pane heading="Pane Left" slot="left" icon="about" size="33%">
+        <p>This is the left pane.</p>
+      </ix-pane>
+      <ix-pane heading="Pane Right" slot="right" icon="about" size="33%">
+        <p>This is the right pane.</p>
+      </ix-pane>
+    </ix-pane-layout>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/panes/panes.e2e.ts b/packages/core/src/tests/panes/panes.e2e.ts
@@ -106,6 +106,13 @@ test.describe('pane', () => {
     await expect(page).toHaveScreenshot();
   });
 
+  regressionTest('layout, inline, icon, collapsed', async ({ page }) => {
+    await page.goto('panes/icon');
+    await page.waitForTimeout(1000);
+
+    await expect(page).toHaveScreenshot();
+  });
+
   regressionTest('layout, inline, expanded', async ({ page }) => {
     await page.goto('panes/layout');
     await page.locator('ix-button').first().click();

diff --git a/...ots/pane-layout-inline-icon-collapsed-1-chromium---theme-classic-dark-linux.png b/...ots/pane-layout-inline-icon-collapsed-1-chromium---theme-classic-dark-linux.png
diff --git a/...ts/pane-layout-inline-icon-collapsed-1-chromium---theme-classic-light-linux.png b/...ts/pane-layout-inline-icon-collapsed-1-chromium---theme-classic-light-linux.png