fix(core/group): header and item hover/active style (#453)

siemens · Mar 24, 2023 · 64cd604 · 64cd604
1 parent b3dec82
commit 64cd604
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 1 deletion.
diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss
@@ -66,11 +66,21 @@
     @include hover {
       background-color: var(--theme-group-item--background--hover);
       border-color: var(--theme-group-item--border-color--hover);
+
+      &.selected {
+        border-color: var(--theme-group-item--border-color--selected);
+        background-color: var(--theme-group-item--background--selected);
+      }
     }
 
     @include active {
       background-color: var(--theme-group-item--background--active);
       border-color: var(--theme-group-item--border-color--active);
+
+      &.selected {
+        border-color: var(--theme-group-item--border-color--selected);
+        background-color: var(--theme-group-item--background--selected);
+      }
     }
   }
 

diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss
@@ -36,11 +36,21 @@
     @include hover {
       background-color: var(--theme-group-item--background--hover);
       border-color: var(--theme-group-item--border-color--hover);
+
+      &.selected {
+        border: var(--theme-primary-bdr-2);
+        background-color: var(--theme-group-item--background--selected);
+      }
     }
 
     @include active {
       background-color: var(--theme-group-item--background--active);
       border-color: var(--theme-group-item--border-color--active);
+
+      &.selected {
+        border: var(--theme-primary-bdr-2);
+        background-color: var(--theme-group-item--background--selected);
+      }
     }
 
     @include focus-visible {

diff --git a/packages/core/src/tests/group/basic/index.html b/packages/core/src/tests/group/basic/index.html
@@ -14,7 +14,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <ix-group header="Header text" sub-header="Subheader text">
+    <ix-group id="group" header="Header text" sub-header="Subheader text">
       <ix-group-item text="Example text 1"></ix-group-item>
       <ix-group-item text="Example text 2"></ix-group-item>
       <ix-group-item text="Example text 3"></ix-group-item>

diff --git a/packages/core/src/tests/group/group.e2e.ts b/packages/core/src/tests/group/group.e2e.ts
@@ -26,5 +26,21 @@ regressionTest.describe('group', () => {
     });
   });
 
+  regressionTest('selected', async ({ page }) => {
+    await page.goto('group/basic');
+    await page.click("[id='group']");
+    await page.hover("[id='group']");
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('item selected', async ({ page }) => {
+    await page.goto('group/basic');
+    await page.locator('.btn-expand-header').click();
+    await page.locator('text=Example text 1').first().click();
+    await page.locator('text=Example text 1').first().hover();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
   // ix-icon-button
 });
diff --git a/....e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png b/....e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-dark-linux.png
diff --git a/...e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png b/...e2e.ts-snapshots/group-item-selected-1-chromium---theme-classic-light-linux.png
diff --git a/...group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-dark-linux.png b/...group.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-dark-linux.png
diff --git a/...roup.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png b/...roup.e2e.ts-snapshots/group-selected-1-chromium---theme-classic-light-linux.png