fix(core/group): show context-menu based on dropdown (#222)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Dec 7, 2022 · 2bffcb7 · 2bffcb7
1 parent b4a0c67
commit 2bffcb7
Show file tree

Hide file tree

Showing 20 changed files with 300 additions and 99 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/group-context-menu.ts b/packages/angular-test-app/src/preview-examples/group-context-menu.ts
@@ -13,10 +13,10 @@ import { Component } from '@angular/core';
   selector: 'app-group-context-menu',
   template: `
     <ix-group header="Header text" sub-header="Subheader text">
-      <div slot="dropdown">
+      <ix-dropdown slot="dropdown">
         <ix-group-dropdown-item label="Item 1"></ix-group-dropdown-item>
         <ix-group-dropdown-item label="Item 2"></ix-group-dropdown-item>
-      </div>
+      </ix-dropdown>
       <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/angular/src/components.ts b/packages/angular/src/components.ts
@@ -664,6 +664,25 @@ export class IxGroup {
 }
 
 
+export declare interface IxGroupContextMenu extends Components.IxGroupContextMenu {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
+@Component({
+  selector: 'ix-group-context-menu',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>'
+})
+export class IxGroupContextMenu {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface IxGroupDropdownItem extends Components.IxGroupDropdownItem {}
 
 @ProxyCmp({

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -26,6 +26,7 @@ export const DIRECTIVES = [
   d.IxFlipTile,
   d.IxFlipTileContent,
   d.IxGroup,
+  d.IxGroupContextMenu,
   d.IxGroupDropdownItem,
   d.IxGroupItem,
   d.IxIcon,

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -2252,11 +2252,11 @@
       "dependents": [
         "ix-breadcrumb",
         "ix-date-picker",
-        "ix-group",
         "ix-menu",
         "ix-menu-avatar",
         "ix-select",
-        "ix-split-button"
+        "ix-split-button",
+        "my-component"
       ],
       "dependencies": [],
       "dependencyGraph": {
@@ -2266,9 +2266,6 @@
         "ix-date-picker": [
           "ix-dropdown"
         ],
-        "ix-group": [
-          "ix-dropdown"
-        ],
         "ix-menu": [
           "ix-dropdown"
         ],
@@ -2280,6 +2277,9 @@
         ],
         "ix-split-button": [
           "ix-dropdown"
+        ],
+        "my-component": [
+          "ix-dropdown"
         ]
       },
       "props": [
@@ -2575,7 +2575,8 @@
         "ix-menu-avatar-item",
         "ix-select",
         "ix-select-item",
-        "ix-split-button-item"
+        "ix-split-button-item",
+        "my-component"
       ],
       "dependencies": [
         "ix-icon"
@@ -2601,6 +2602,9 @@
         ],
         "ix-split-button-item": [
           "ix-dropdown-item"
+        ],
+        "my-component": [
+          "ix-dropdown-item"
         ]
       },
       "props": [
@@ -3224,25 +3228,31 @@
       "docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [],
+      "dependents": [
+        "my-component"
+      ],
       "dependencies": [
         "ix-icon",
-        "ix-icon-button",
-        "ix-dropdown",
+        "ix-group-context-menu",
         "ix-group-item"
       ],
       "dependencyGraph": {
         "ix-group": [
           "ix-icon",
-          "ix-icon-button",
-          "ix-dropdown",
+          "ix-group-context-menu",
           "ix-group-item"
         ],
+        "ix-group-context-menu": [
+          "ix-icon-button"
+        ],
         "ix-icon-button": [
           "ix-icon"
         ],
         "ix-group-item": [
           "ix-icon"
+        ],
+        "my-component": [
+          "ix-group"
         ]
       },
       "props": [
@@ -3404,6 +3414,44 @@
         }
       ]
     },
+    {
+      "dirPath": "./src/components/group",
+      "filePath": "./src/components/group/group-context-menu.tsx",
+      "fileName": "group-context-menu.tsx",
+      "readmePath": "./src/components/group/readme.md",
+      "usagesDir": "./src/components/group/usage",
+      "tag": "ix-group-context-menu",
+      "readme": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->\n\n# ix-group\n",
+      "overview": "",
+      "usage": {},
+      "docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
+      "docsTags": [],
+      "encapsulation": "scoped",
+      "dependents": [
+        "ix-group"
+      ],
+      "dependencies": [
+        "ix-icon-button"
+      ],
+      "dependencyGraph": {
+        "ix-group-context-menu": [
+          "ix-icon-button"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ],
+        "ix-group": [
+          "ix-group-context-menu"
+        ]
+      },
+      "props": [],
+      "methods": [],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/group-dropdown-item",
       "filePath": "./src/components/group-dropdown-item/group-dropdown-item.tsx",
@@ -3484,7 +3532,8 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [
-        "ix-group"
+        "ix-group",
+        "my-component"
       ],
       "dependencies": [
         "ix-icon"
@@ -3495,6 +3544,9 @@
         ],
         "ix-group": [
           "ix-group-item"
+        ],
+        "my-component": [
+          "ix-group-item"
         ]
       },
       "props": [
@@ -3830,7 +3882,7 @@
         "ix-drawer",
         "ix-expanding-search",
         "ix-flip-tile",
-        "ix-group",
+        "ix-group-context-menu",
         "ix-map-navigation",
         "ix-map-navigation-overlay",
         "ix-menu-about",
@@ -3861,7 +3913,7 @@
         "ix-flip-tile": [
           "ix-icon-button"
         ],
-        "ix-group": [
+        "ix-group-context-menu": [
           "ix-icon-button"
         ],
         "ix-map-navigation": [
@@ -9166,8 +9218,37 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {},
+      "dependencies": [
+        "ix-group",
+        "ix-dropdown",
+        "ix-dropdown-item",
+        "ix-group-item"
+      ],
+      "dependencyGraph": {
+        "my-component": [
+          "ix-group",
+          "ix-dropdown",
+          "ix-dropdown-item",
+          "ix-group-item"
+        ],
+        "ix-group": [
+          "ix-icon",
+          "ix-group-context-menu",
+          "ix-group-item"
+        ],
+        "ix-group-context-menu": [
+          "ix-icon-button"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ],
+        "ix-group-item": [
+          "ix-icon"
+        ],
+        "ix-dropdown-item": [
+          "ix-icon"
+        ]
+      },
       "props": [],
       "methods": [],
       "events": [],

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -581,6 +581,8 @@ export namespace Components {
          */
         "suppressHeaderSelection": boolean;
     }
+    interface IxGroupContextMenu {
+    }
     interface IxGroupDropdownItem {
         /**
           * Group dropdown icon
@@ -1768,6 +1770,12 @@ declare global {
         prototype: HTMLIxGroupElement;
         new (): HTMLIxGroupElement;
     };
+    interface HTMLIxGroupContextMenuElement extends Components.IxGroupContextMenu, HTMLStencilElement {
+    }
+    var HTMLIxGroupContextMenuElement: {
+        prototype: HTMLIxGroupContextMenuElement;
+        new (): HTMLIxGroupContextMenuElement;
+    };
     interface HTMLIxGroupDropdownItemElement extends Components.IxGroupDropdownItem, HTMLStencilElement {
     }
     var HTMLIxGroupDropdownItemElement: {
@@ -2039,6 +2047,7 @@ declare global {
         "ix-flip-tile": HTMLIxFlipTileElement;
         "ix-flip-tile-content": HTMLIxFlipTileContentElement;
         "ix-group": HTMLIxGroupElement;
+        "ix-group-context-menu": HTMLIxGroupContextMenuElement;
         "ix-group-dropdown-item": HTMLIxGroupDropdownItemElement;
         "ix-group-item": HTMLIxGroupItemElement;
         "ix-icon": HTMLIxIconElement;
@@ -2733,6 +2742,8 @@ declare namespace LocalJSX {
          */
         "suppressHeaderSelection"?: boolean;
     }
+    interface IxGroupContextMenu {
+    }
     interface IxGroupDropdownItem {
         /**
           * Group dropdown icon
@@ -3707,6 +3718,7 @@ declare namespace LocalJSX {
         "ix-flip-tile": IxFlipTile;
         "ix-flip-tile-content": IxFlipTileContent;
         "ix-group": IxGroup;
+        "ix-group-context-menu": IxGroupContextMenu;
         "ix-group-dropdown-item": IxGroupDropdownItem;
         "ix-group-item": IxGroupItem;
         "ix-icon": IxIcon;
@@ -3778,6 +3790,7 @@ declare module "@stencil/core" {
             "ix-flip-tile": LocalJSX.IxFlipTile & JSXBase.HTMLAttributes<HTMLIxFlipTileElement>;
             "ix-flip-tile-content": LocalJSX.IxFlipTileContent & JSXBase.HTMLAttributes<HTMLIxFlipTileContentElement>;
             "ix-group": LocalJSX.IxGroup & JSXBase.HTMLAttributes<HTMLIxGroupElement>;
+            "ix-group-context-menu": LocalJSX.IxGroupContextMenu & JSXBase.HTMLAttributes<HTMLIxGroupContextMenuElement>;
             "ix-group-dropdown-item": LocalJSX.IxGroupDropdownItem & JSXBase.HTMLAttributes<HTMLIxGroupDropdownItemElement>;
             "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes<HTMLIxGroupItemElement>;
             "ix-icon": LocalJSX.IxIcon & JSXBase.HTMLAttributes<HTMLIxIconElement>;

diff --git a/packages/core/src/components/group/group-context-menu.scss b/packages/core/src/components/group/group-context-menu.scss
@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  display: block;
+  position: relative;
+  margin-block-start: 0.3125rem;
+  margin-inline-end: 0.3125rem;
+  margin-inline-start: auto;
+
+  ix-icon-button {
+    &::after {
+      display: none;
+    }
+  }
+
+  .hide {
+    visibility: collapse;
+  }
+}