fix(core/group): group selected style and actions & header correction (…

…#470) Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Apr 14, 2023 · 21eead6 · 21eead6
1 parent 696366d
commit 21eead6
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 73 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -9601,18 +9601,13 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [
-        "my-component"
-      ],
+      "dependents": [],
       "dependencies": [
         "ix-icon"
       ],
       "dependencyGraph": {
         "ix-workflow-step": [
           "ix-icon"
-        ],
-        "my-component": [
-          "ix-workflow-step"
         ]
       },
       "props": [
@@ -9764,15 +9759,9 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [
-        "my-component"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "my-component": [
-          "ix-workflow-steps"
-        ]
-      },
+      "dependencyGraph": {},
       "props": [
         {
           "name": "clickable",
@@ -9873,19 +9862,8 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [],
-      "dependencies": [
-        "ix-workflow-steps",
-        "ix-workflow-step"
-      ],
-      "dependencyGraph": {
-        "my-component": [
-          "ix-workflow-steps",
-          "ix-workflow-step"
-        ],
-        "ix-workflow-step": [
-          "ix-icon"
-        ]
-      },
+      "dependencies": [],
+      "dependencyGraph": {},
       "props": [],
       "methods": [],
       "events": [],

diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss
@@ -21,9 +21,7 @@
   padding: $small-space $large-space $small-space 2.5rem;
   position: relative;
   margin-top: 0.0625rem;
-  border: 1px solid var(--theme-group-item--border-color);
   outline: none;
-
   background-color: var(--theme-group-item--background);
 
   &.last {
@@ -68,7 +66,6 @@
       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);
       }
     }
@@ -78,23 +75,21 @@
       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);
       }
     }
   }
 
   &.selected {
     border-top-width: 0.062rem !important;
-    border-color: var(--theme-group-item--border-color--selected);
     background-color: var(--theme-group-item--background--selected);
 
     .group-entry-selection-indicator {
-      background-color: var(--theme-color-input--focus);
+      background-color: var(--theme-group-item-indicator--background--selected);
     }
   }
 
   @include focus-visible {
-    border-color: var(--focus--border-color) !important;
+    border: 1px solid var(--theme-color-focus-bdr) !important;
   }
 }
diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss
@@ -25,47 +25,55 @@
     height: 4rem;
     min-height: 4rem;
     max-height: 4rem;
-    border-radius: 0.25rem;
+    border-radius: var(--theme-group--border-radius)
+      var(--theme-group--border-radius) 0 0;
     display: flex;
     background-color: var(--theme-group-item--background);
-    border: 1px solid var(--theme-group-item--border-color);
     color: var(--theme-group-header--color);
 
     cursor: pointer;
 
     @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 {
-      border-color: var(--focus--border-color);
-      border-radius: var(--theme-group--border-radius--focus);
+      border: 1px solid var(--theme-color-focus-bdr);
+      border-radius: var(--theme-default-border-radius)
+        var(--theme-default-border-radius) 0px 0px;
       outline: none;
     }
 
     &.selected {
-      border: var(--theme-primary-bdr-2);
       background-color: var(--theme-group-item--background--selected);
+
+      .group-header-selection-indicator {
+        background-color: var(
+          --theme-group-item-indicator--background--selected
+        );
+      }
     }
 
     .group-header-selection-indicator {
       background-color: var(--theme-color-input--focus);
+
+      &.group-header-selection-indicator-item-selected {
+        background-color: var(
+          --theme-group-item-indicator--background--selected
+        );
+      }
     }
   }
 
@@ -77,13 +85,9 @@
     min-width: 0;
   }
 
-  .group-header.expand {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
   .group-header-selection-indicator {
     width: $tiny-space;
+    border-top-left-radius: var(--theme-group--border-radius);
   }
 
   .group-header-content {
@@ -93,9 +97,9 @@
     flex-direction: row;
     justify-content: space-between;
     min-width: 0;
+    flex-grow: 1;
     padding: 0.5rem;
     padding-left: 0;
-    width: 100%;
 
     .group-header-props-container {
       width: 100%;
@@ -132,6 +136,7 @@
   .btn-expand-header {
     margin: $small-space;
     margin-inline-end: $tiny-space;
+    min-width: 1.5rem;
   }
 
   .group-content {
@@ -143,4 +148,8 @@
     height: auto;
     min-height: 0;
   }
+
+  .hidden {
+    display: none;
+  }
 }
diff --git a/packages/core/src/components/group/group.tsx b/packages/core/src/components/group/group.tsx
@@ -18,6 +18,7 @@ import {
   Prop,
   State,
 } from '@stencil/core';
+import { createMutationObserver } from '../utils/mutation-observer';
 
 @Component({
   tag: 'ix-group',
@@ -78,6 +79,8 @@ export class Group {
 
   @Element() hostElement!: HTMLIxGroupElement;
 
+  @State() itemSelected = false;
+
   get dropdownItems() {
     return Array.from(
       this.hostElement.querySelectorAll('ix-group-dropdown-item')
@@ -100,6 +103,8 @@ export class Group {
 
   @State() dropdownTriggerRef: HTMLElement;
 
+  @State() slotSize = this.groupItems.length;
+
   constructor() {}
 
   @Listen('keydown', {
@@ -127,14 +132,8 @@ export class Group {
   }
 
   private onExpandClick(event: Event) {
-    const wasCollapsed = this.collapsed;
     this.collapsed = !this.collapsed;
 
-    if (!wasCollapsed && this.index !== undefined) {
-      this.index = undefined;
-      this.setGroupSelection(true);
-    }
-
     this.collapsedChanged.emit(this.collapsed);
     event.stopPropagation();
   }
@@ -156,6 +155,10 @@ export class Group {
       this.selectItem.emit(index);
     }
 
+    if (this.index >= 0) {
+      this.itemSelected = true;
+    } else this.itemSelected = false;
+
     this.setGroupSelection(false);
   }
 
@@ -168,13 +171,16 @@ export class Group {
 
   componentWillRender() {
     this.groupItems.forEach((item, index) => {
+      if (this.selected === true) {
+        item.selected = false;
+        this.index = undefined;
+        this.itemSelected = false;
+        return;
+      }
       item.selected = index === this.index;
       item.index = index;
       item.classList.remove('last');
-      if (
-        !this.footer?.children.length &&
-        index === this.groupItems.length - 1
-      ) {
+      if (!this.footer?.children.length && index === this.slotSize - 1) {
         item.classList.add('last');
       }
     });
@@ -184,7 +190,17 @@ export class Group {
     }
   }
 
+  private observer: MutationObserver;
+
   componentDidLoad() {
+    this.observer = createMutationObserver(() => {
+      this.slotSize = this.groupItems.length;
+    });
+
+    this.observer.observe(this.groupContent, {
+      childList: true,
+    });
+
     this.groupContent.addEventListener(
       'selectedChanged',
       (evt: CustomEvent<HTMLIxGroupItemElement>) => {
@@ -193,6 +209,12 @@ export class Group {
     );
   }
 
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
   render() {
     return (
       <Host>
@@ -208,12 +230,23 @@ export class Group {
             class="group-header-clickable"
             onClick={(e) => this.onHeaderClick(e)}
           >
-            <div class="group-header-selection-indicator"></div>
-            <ix-icon
-              class="btn-expand-header"
-              name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}
-              onClick={(e) => this.onExpandClick(e)}
-            ></ix-icon>
+            <div
+              class={{
+                'group-header-selection-indicator': true,
+                'group-header-selection-indicator-item-selected':
+                  this.itemSelected,
+              }}
+            ></div>
+            <div class="btn-expand-header">
+              <ix-icon
+                class={{
+                  hidden: this.slotSize === 0,
+                }}
+                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}
+                onClick={(e) => this.onExpandClick(e)}
+              ></ix-icon>
+            </div>
+
             <div class="group-header-content">
               {this.header ? (
                 <div class="group-header-props-container">

diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx
@@ -15,12 +15,6 @@ import { Component, h, Host } from '@stencil/core';
 })
 export class MyComponent {
   render() {
-    return (
-      <Host>
-        <ix-workflow-steps>
-          <ix-workflow-step></ix-workflow-step>
-        </ix-workflow-steps>
-      </Host>
-    );
+    return <Host></Host>;
   }
 }
diff --git a/packages/core/src/tests/group/group.e2e.ts b/packages/core/src/tests/group/group.e2e.ts
@@ -35,7 +35,7 @@ regressionTest.describe('group', () => {
 
   regressionTest('item selected', async ({ page }) => {
     await page.goto('group/basic');
-    await page.locator('.btn-expand-header').click();
+    await page.locator('.btn-expand-header .glyph').click();
     await page.locator('text=Example text 1').first().click();
     await page.locator('text=Example text 1').first().hover();
 

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