feat(core/dropdownbutton): migrate to shadow dom (#638)

siemens · Jul 25, 2023 · 5ac2ecb · 5ac2ecb
1 parent 5ab05e0
commit 5ac2ecb
Show file tree

Hide file tree

Showing 56 changed files with 505 additions and 361 deletions.
diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -2,6 +2,37 @@
 
 ## v2.0.0
 
+### `ix-dropdown` removed deprecated properties
+
+- adjustDropdownWidthToReferenceWith
+- adjustDropdownWidthToReferenceWidth
+
+### `ix-dropdown` submenu
+
+The submenu now appends a chevron icon automatically to the trigger element, if the trigger element is an ix-dropdown-item.
+
+___Before___
+
+```tsx
+<ix-dropdown-item id="submenuTrigger" label="Submenu">
+  <ix-icon name="chevron-right-small" size="24"></ix-icon>
+</ix-dropdown-item>
+```
+
+___Now___
+```tsx
+<ix-dropdown-item id="submenuTrigger" label="Submenu"></ix-dropdown-item>
+```
+
+### `ix-dropdown` `ix-validation-tooltip` auto placement type removed
+
+All automatic placement types are removed from placement type:
+```
+export declare type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
+```
+
+Placement will be automatically chosen depending on remaining space. If you want to suppress the automatic behavior you can set the property `suppress-automatic-placement`.
+
 ### `ix-flip-tile`
 
 Change flip-state from

diff --git a/packages/angular-test-app/src/preview-examples/dropdown.ts b/packages/angular-test-app/src/preview-examples/dropdown.ts
@@ -14,9 +14,12 @@ import { Component } from '@angular/core';
   template: `
     <ix-button #trigger>Open</ix-button>
     <ix-dropdown [ixDropdownTrigger]="trigger">
-      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-header label="Category"></ix-dropdown-header>
       <ix-dropdown-item label="Item 2"></ix-dropdown-item>
       <ix-dropdown-item label="Item 3"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 4"></ix-dropdown-item>
+      <ix-divider></ix-divider>
+      <ix-dropdown-item label="Item 5"></ix-dropdown-item>
     </ix-dropdown>
   `,
 })

diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -635,15 +635,15 @@ export declare interface IxDrawer extends Components.IxDrawer {
 
 
 @ProxyCmp({
-  inputs: ['adjustDropdownWidthToReferenceWidth', 'adjustDropdownWidthToReferenceWith', 'anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'trigger'],
+  inputs: ['anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'suppressAutomaticPlacement', 'trigger'],
   methods: ['updatePosition']
 })
 @Component({
   selector: 'ix-dropdown',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['adjustDropdownWidthToReferenceWidth', 'adjustDropdownWidthToReferenceWith', 'anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'trigger'],
+  inputs: ['anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'suppressAutomaticPlacement', 'trigger'],
 })
 export class IxDropdown {
   protected el: HTMLElement;
@@ -685,6 +685,28 @@ export class IxDropdownButton {
 export declare interface IxDropdownButton extends Components.IxDropdownButton {}
 
 
+@ProxyCmp({
+  inputs: ['label']
+})
+@Component({
+  selector: 'ix-dropdown-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['label'],
+})
+export class IxDropdownHeader {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IxDropdownHeader extends Components.IxDropdownHeader {}
+
+
 @ProxyCmp({
   inputs: ['checked', 'disabled', 'hover', 'icon', 'label'],
   methods: ['emitItemClick']
@@ -2082,14 +2104,14 @@ export declare interface IxUpload extends Components.IxUpload {
 
 
 @ProxyCmp({
-  inputs: ['message', 'placement']
+  inputs: ['message', 'placement', 'suppressAutomaticPlacement']
 })
 @Component({
   selector: 'ix-validation-tooltip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['message', 'placement'],
+  inputs: ['message', 'placement', 'suppressAutomaticPlacement'],
 })
 export class IxValidationTooltip {
   protected el: HTMLElement;

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -27,6 +27,7 @@ export const DIRECTIVES = [
   d.IxDrawer,
   d.IxDropdown,
   d.IxDropdownButton,
+  d.IxDropdownHeader,
   d.IxDropdownItem,
   d.IxDropdownQuickActions,
   d.IxEmptyState,