feat(core/dropdown-button): add dropdown-button (#229)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com> Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jan 11, 2023 · 8d6ae8b · 8d6ae8b
1 parent 6d55b93
commit 8d6ae8b
Show file tree

Hide file tree

Showing 25 changed files with 1,022 additions and 0 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts b/packages/angular-test-app/src/preview-examples/dropdown-button-icon.ts
@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dropdown-button-icon',
+  template: `
+    <ix-dropdown-button label="" variant="Primary" icon="checkboxes">
+      <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-dropdown-button label="" variant="Primary" outline icon="checkboxes">
+      <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-dropdown-button label="" variant="Primary" ghost icon="checkboxes">
+      <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-dropdown-button label="" variant="Primary" disabled icon="checkboxes">
+    </ix-dropdown-button>
+  `,
+})
+export class Dropdown {}
diff --git a/packages/angular-test-app/src/preview-examples/dropdown-button.ts b/packages/angular-test-app/src/preview-examples/dropdown-button.ts
@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dropdown-button',
+  template: `
+    <ix-dropdown-button label="Dropdown" variant="Primary" icon="checkboxes">
+      <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-dropdown-button
+      label="Dropdown"
+      variant="Primary"
+      outline
+      icon="checkboxes"
+    >
+      <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-dropdown-button
+      label="Dropdown"
+      variant="Primary"
+      ghost
+      icon="checkboxes"
+    >
+      <ix-dropdown-item label="Item 1" value="1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" value="2"></ix-dropdown-item>
+    </ix-dropdown-button>
+    <ix-dropdown-button
+      label="Dropdown"
+      variant="Primary"
+      disabled
+      icon="checkboxes"
+    >
+    </ix-dropdown-button>
+  `,
+})
+export class Dropdown {}
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -454,6 +454,27 @@ export class IxDropdown {
 }
 
 
+export declare interface IxDropdownButton extends Components.IxDropdownButton {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'variant']
+})
+@Component({
+  selector: 'ix-dropdown-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'variant']
+})
+export class IxDropdownButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface IxDropdownItem extends Components.IxDropdownItem {
   /**
    * Click on item 

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -18,6 +18,7 @@ export const DIRECTIVES = [
   d.IxDatetimePicker,
   d.IxDrawer,
   d.IxDropdown,
+  d.IxDropdownButton,
   d.IxDropdownItem,
   d.IxEventList,
   d.IxEventListItem,

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -504,6 +504,7 @@
       "dependents": [
         "ix-date-picker",
         "ix-datetime-picker",
+        "ix-dropdown-button",
         "ix-modal-example",
         "ix-time-picker",
         "ix-upload"
@@ -516,6 +517,9 @@
         "ix-datetime-picker": [
           "ix-button"
         ],
+        "ix-dropdown-button": [
+          "ix-button"
+        ],
         "ix-modal-example": [
           "ix-button"
         ],
@@ -2236,6 +2240,7 @@
       "dependents": [
         "ix-breadcrumb",
         "ix-date-picker",
+        "ix-dropdown-button",
         "ix-menu",
         "ix-menu-avatar",
         "ix-select",
@@ -2249,6 +2254,9 @@
         "ix-date-picker": [
           "ix-dropdown"
         ],
+        "ix-dropdown-button": [
+          "ix-dropdown"
+        ],
         "ix-menu": [
           "ix-dropdown"
         ],
@@ -2536,6 +2544,169 @@
         }
       ]
     },
+    {
+      "dirPath": "./src/components/dropdown-button",
+      "filePath": "./src/components/dropdown-button/dropdown-button.tsx",
+      "fileName": "dropdown-button.tsx",
+      "readmePath": "./src/components/dropdown-button/readme.md",
+      "usagesDir": "./src/components/dropdown-button/usage",
+      "tag": "ix-dropdown-button",
+      "readme": "# ix-dropdown-button\n\n\n",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [],
+      "encapsulation": "scoped",
+      "dependents": [],
+      "dependencies": [
+        "ix-button",
+        "ix-icon",
+        "ix-icon-button",
+        "ix-dropdown"
+      ],
+      "dependencyGraph": {
+        "ix-dropdown-button": [
+          "ix-button",
+          "ix-icon",
+          "ix-icon-button",
+          "ix-dropdown"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ]
+      },
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "active",
+          "reflectToAttr": false,
+          "docs": "Active button",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "Disable button",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "ghost",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "ghost",
+          "reflectToAttr": false,
+          "docs": "Button with no background or outline",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": false,
+          "docs": "Button icon",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "mutable": false,
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Set label",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "outline",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "outline",
+          "reflectToAttr": false,
+          "docs": "Outline button",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"Primary\" | \"Secondary\"",
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": false,
+          "docs": "Button varaint",
+          "docsTags": [],
+          "default": "'Primary'",
+          "values": [
+            {
+              "value": "Primary",
+              "type": "string"
+            },
+            {
+              "value": "Secondary",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/dropdown-item",
       "filePath": "./src/components/dropdown-item/dropdown-item.tsx",
@@ -3662,6 +3833,7 @@
         "ix-category-filter",
         "ix-chip",
         "ix-date-picker",
+        "ix-dropdown-button",
         "ix-dropdown-item",
         "ix-expanding-search",
         "ix-filter-chip",
@@ -3697,6 +3869,9 @@
         "ix-date-picker": [
           "ix-icon"
         ],
+        "ix-dropdown-button": [
+          "ix-icon"
+        ],
         "ix-dropdown-item": [
           "ix-icon"
         ],
@@ -3834,6 +4009,7 @@
       "dependents": [
         "ix-date-picker",
         "ix-drawer",
+        "ix-dropdown-button",
         "ix-expanding-search",
         "ix-flip-tile",
         "ix-group-context-menu",
@@ -3861,6 +4037,9 @@
         "ix-drawer": [
           "ix-icon-button"
         ],
+        "ix-dropdown-button": [
+          "ix-icon-button"
+        ],
         "ix-expanding-search": [
           "ix-icon-button"
         ],