feat(core/group): migrate to shadow dom (#661)

siemens · Jul 28, 2023 · 8970a03 · 8970a03
1 parent 17daf4b
commit 8970a03
Show file tree

Hide file tree

Showing 26 changed files with 183 additions and 353 deletions.
diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -2,6 +2,23 @@
 
 ## v2.0.0
 
+### `ix-group-dropdown-item` removed
+
+Replaced with standard `ix-dropdown-item`
+
+___Now___
+```tsx
+<ix-group header="Header text" sub-header="Subheader text">
+  <ix-dropdown slot="dropdown">
+    <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+    <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+  </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>
+</ix-group>
+```
+
 ### `ix-dropdown` removed deprecated properties
 
 - adjustDropdownWidthToReferenceWith

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
@@ -14,8 +14,8 @@ import { Component } from '@angular/core';
   template: `
     <ix-group header="Header text" sub-header="Subheader text">
       <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>
+        <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+        <ix-dropdown-item label="Item 2"></ix-dropdown-item>
       </ix-dropdown>
       <ix-group-item text="Example text 1"></ix-group-item>
       <ix-group-item text="Example text 2"></ix-group-item>

diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -991,28 +991,6 @@ export class IxGroupContextMenu {
 export declare interface IxGroupContextMenu extends Components.IxGroupContextMenu {}
 
 
-@ProxyCmp({
-  inputs: ['icon', 'label']
-})
-@Component({
-  selector: 'ix-group-dropdown-item',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['icon', 'label'],
-})
-export class IxGroupDropdownItem {
-  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({
   inputs: ['focusable', 'icon', 'index', 'secondaryText', 'selected', 'suppressSelection', 'text']
 })

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

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -3618,7 +3618,6 @@
       "encapsulation": "shadow",
       "dependents": [
         "ix-breadcrumb",
-        "ix-group-dropdown-item",
         "ix-menu-avatar-item",
         "ix-menu-category",
         "ix-select",
@@ -3635,9 +3634,6 @@
         "ix-breadcrumb": [
           "ix-dropdown-item"
         ],
-        "ix-group-dropdown-item": [
-          "ix-dropdown-item"
-        ],
         "ix-menu-avatar-item": [
           "ix-dropdown-item"
         ],
@@ -4533,7 +4529,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon",
@@ -4707,14 +4703,7 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "listeners": [
-        {
-          "event": "keydown",
-          "target": "window",
-          "capture": false,
-          "passive": false
-        }
-      ]
+      "listeners": []
     },
     {
       "dirPath": "./src/components/group",
@@ -4727,7 +4716,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-group"
       ],
@@ -4754,71 +4743,6 @@
       "parts": [],
       "listeners": []
     },
-    {
-      "dirPath": "./src/components/group-dropdown-item",
-      "filePath": "./src/components/group-dropdown-item/group-dropdown-item.tsx",
-      "fileName": "group-dropdown-item.tsx",
-      "readmePath": "./src/components/group-dropdown-item/readme.md",
-      "usagesDir": "./src/components/group-dropdown-item/usage",
-      "tag": "ix-group-dropdown-item",
-      "overview": "",
-      "usage": {},
-      "docs": "",
-      "docsTags": [],
-      "encapsulation": "scoped",
-      "dependents": [],
-      "dependencies": [
-        "ix-dropdown-item"
-      ],
-      "dependencyGraph": {
-        "ix-group-dropdown-item": [
-          "ix-dropdown-item"
-        ],
-        "ix-dropdown-item": [
-          "ix-icon"
-        ]
-      },
-      "props": [
-        {
-          "name": "icon",
-          "type": "string",
-          "mutable": false,
-          "attr": "icon",
-          "reflectToAttr": false,
-          "docs": "Group dropdown icon",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "mutable": false,
-          "attr": "label",
-          "reflectToAttr": false,
-          "docs": "Group dropdown label",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "styles": [],
-      "slots": [],
-      "parts": [],
-      "listeners": []
-    },
     {
       "dirPath": "./src/components/group-item",
       "filePath": "./src/components/group-item/group-item.tsx",
@@ -4830,7 +4754,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-group"
       ],

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -895,16 +895,6 @@ export namespace Components {
     }
     interface IxGroupContextMenu {
     }
-    interface IxGroupDropdownItem {
-        /**
-          * Group dropdown icon
-         */
-        "icon": string;
-        /**
-          * Group dropdown label
-         */
-        "label": string;
-    }
     interface IxGroupItem {
         /**
           * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise.
@@ -2449,12 +2439,6 @@ declare global {
         prototype: HTMLIxGroupContextMenuElement;
         new (): HTMLIxGroupContextMenuElement;
     };
-    interface HTMLIxGroupDropdownItemElement extends Components.IxGroupDropdownItem, HTMLStencilElement {
-    }
-    var HTMLIxGroupDropdownItemElement: {
-        prototype: HTMLIxGroupDropdownItemElement;
-        new (): HTMLIxGroupDropdownItemElement;
-    };
     interface HTMLIxGroupItemElement extends Components.IxGroupItem, HTMLStencilElement {
     }
     var HTMLIxGroupItemElement: {
@@ -2833,7 +2817,6 @@ declare global {
         "ix-flip-tile-content": HTMLIxFlipTileContentElement;
         "ix-group": HTMLIxGroupElement;
         "ix-group-context-menu": HTMLIxGroupContextMenuElement;
-        "ix-group-dropdown-item": HTMLIxGroupDropdownItemElement;
         "ix-group-item": HTMLIxGroupItemElement;
         "ix-icon-button": HTMLIxIconButtonElement;
         "ix-index-button": HTMLIxIndexButtonElement;
@@ -3838,16 +3821,6 @@ declare namespace LocalJSX {
     }
     interface IxGroupContextMenu {
     }
-    interface IxGroupDropdownItem {
-        /**
-          * Group dropdown icon
-         */
-        "icon"?: string;
-        /**
-          * Group dropdown label
-         */
-        "label"?: string;
-    }
     interface IxGroupItem {
         /**
           * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise.
@@ -5062,7 +5035,6 @@ declare namespace LocalJSX {
         "ix-flip-tile-content": IxFlipTileContent;
         "ix-group": IxGroup;
         "ix-group-context-menu": IxGroupContextMenu;
-        "ix-group-dropdown-item": IxGroupDropdownItem;
         "ix-group-item": IxGroupItem;
         "ix-icon-button": IxIconButton;
         "ix-index-button": IxIndexButton;
@@ -5197,7 +5169,6 @@ declare module "@stencil/core" {
             "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-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes<HTMLIxIconButtonElement>;
             "ix-index-button": LocalJSX.IxIndexButton & JSXBase.HTMLAttributes<HTMLIxIndexButtonElement>;

diff --git a/packages/core/src/components/group-dropdown-item/group-dropdown-item.scss b/packages/core/src/components/group-dropdown-item/group-dropdown-item.scss
diff --git a/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx b/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx