feat(core/split-button): migrate to shadow DOM (#607)

siemens · Jun 29, 2023 · 3b6dea9 · 3b6dea9
1 parent bac0e95
commit 3b6dea9
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 98 deletions.
diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -39,3 +39,18 @@ ___Now___
 
 Remove typo `sencodary` from `variant` property
 
+### `ix-split-button`
+
+Remove deprecated `invisible`-property
+
+___Before___
+```tsx
+<ix-split-button invisible></ix-split-button>
+```
+
+___Now___
+```tsx
+<ix-split-button ghost></ix-split-button>
+
+```
+
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1739,14 +1739,14 @@ export declare interface IxSpinner extends Components.IxSpinner {}
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'ghost', 'icon', 'invisible', 'label', 'outline', 'placement', 'splitIcon', 'variant']
+  inputs: ['disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'splitIcon', 'variant']
 })
 @Component({
   selector: 'ix-split-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'ghost', 'icon', 'invisible', 'label', 'outline', 'placement', 'splitIcon', 'variant'],
+  inputs: ['disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'splitIcon', 'variant'],
 })
 export class IxSplitButton {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -778,6 +778,7 @@
         "ix-empty-state",
         "ix-menu-about-news",
         "ix-modal-example",
+        "ix-split-button",
         "ix-time-picker",
         "ix-upload"
       ],
@@ -811,6 +812,9 @@
         "ix-modal-example": [
           "ix-button"
         ],
+        "ix-split-button": [
+          "ix-button"
+        ],
         "ix-time-picker": [
           "ix-button"
         ],
@@ -5010,6 +5014,7 @@
         "ix-modal-example",
         "ix-pagination",
         "ix-select",
+        "ix-split-button",
         "ix-time-picker",
         "ix-toast"
       ],
@@ -5082,6 +5087,9 @@
         "ix-select": [
           "ix-icon-button"
         ],
+        "ix-split-button": [
+          "ix-icon-button"
+        ],
         "ix-time-picker": [
           "ix-icon-button"
         ],
@@ -8903,16 +8911,26 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
-        "ix-icon",
+        "ix-button",
+        "ix-icon-button",
         "ix-dropdown"
       ],
       "dependencyGraph": {
         "ix-split-button": [
-          "ix-icon",
+          "ix-button",
+          "ix-icon-button",
           "ix-dropdown"
+        ],
+        "ix-button": [
+          "ix-spinner",
+          "ix-icon"
+        ],
+        "ix-icon-button": [
+          "ix-spinner",
+          "ix-icon"
         ]
       },
       "props": [
@@ -8967,29 +8985,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "invisible",
-          "type": "boolean",
-          "mutable": false,
-          "attr": "invisible",
-          "reflectToAttr": false,
-          "docs": "Button invisible",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0. Use ghost property"
-            }
-          ],
-          "default": "false",
-          "deprecation": "Will be removed in 2.0.0. Use ghost property",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "label",
           "type": "string",
@@ -9103,7 +9098,7 @@
           "mutable": false,
           "attr": "split-icon",
           "reflectToAttr": false,
-          "docs": "Splitbutton icon",
+          "docs": "Icon of the button on the right",
           "docsTags": [],
           "default": "'context-menu'",
           "values": [
@@ -9165,7 +9160,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-dropdown-item"

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1572,11 +1572,6 @@ export namespace Components {
           * Button icon
          */
         "icon": string;
-        /**
-          * Button invisible
-          * @deprecated Will be removed in 2.0.0. Use ghost property
-         */
-        "invisible": boolean;
         /**
           * Button label
          */
@@ -1590,7 +1585,7 @@ export namespace Components {
          */
         "placement": Placement;
         /**
-          * Splitbutton icon
+          * Icon of the button on the right
          */
         "splitIcon": string;
         /**
@@ -4463,11 +4458,6 @@ declare namespace LocalJSX {
           * Button icon
          */
         "icon"?: string;
-        /**
-          * Button invisible
-          * @deprecated Will be removed in 2.0.0. Use ghost property
-         */
-        "invisible"?: boolean;
         /**
           * Button label
          */
@@ -4485,7 +4475,7 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
         /**
-          * Splitbutton icon
+          * Icon of the button on the right
          */
         "splitIcon"?: string;
         /**

diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -13,7 +13,6 @@
 
 :host {
   @include ix-component;
-
   display: inline-block;
   width: auto;
   height: 2rem;

diff --git a/packages/core/src/components/split-button-item/split-button-item.css b/packages/core/src/components/split-button-item/split-button-item.css
@@ -8,5 +8,5 @@
  */
 
 :host {
-  display: block;
+  display: contents;
 }
diff --git a/packages/core/src/components/split-button-item/split-button-item.tsx b/packages/core/src/components/split-button-item/split-button-item.tsx
@@ -19,7 +19,7 @@ import {
 @Component({
   tag: 'ix-split-button-item',
   styleUrl: 'split-button-item.css',
-  scoped: true,
+  shadow: true,
 })
 export class SplitButtonItem {
   /**

diff --git a/packages/core/src/components/split-button/split-button.scss b/packages/core/src/components/split-button/split-button.scss
@@ -6,19 +6,24 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+@import 'mixins/shadow-dom/component';
+@import 'components/button-group';
 
 :host {
+  @include ix-component;
   display: inline-block;
 
   .btn-group {
-    // Overwrite styling from bootstrap button group
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
     width: 100%;
 
-    > button:nth-child(1) {
+    > ix-button:nth-child(1) {
       width: calc(100% - 2rem);
     }
 
-    > button:nth-child(2) {
+    > ix-button:nth-child(2) {
       width: 2rem;
     }
   }

diff --git a/packages/core/src/components/split-button/split-button.tsx b/packages/core/src/components/split-button/split-button.tsx
@@ -17,7 +17,6 @@ import {
   Prop,
   State,
 } from '@stencil/core';
-import { getButtonClasses } from '../button/base-button';
 import { ButtonVariant } from '../button/button';
 import { Placement } from '../dropdown/placement';
 
@@ -26,7 +25,7 @@ export type SplitButtonVariant = ButtonVariant;
 @Component({
   tag: 'ix-split-button',
   styleUrl: 'split-button.scss',
-  scoped: true,
+  shadow: true,
 })
 export class SplitButton {
   @Element() hostElement!: HTMLIxSplitButtonElement;
@@ -41,13 +40,6 @@ export class SplitButton {
    */
   @Prop() outline = false;
 
-  /**
-   * Button invisible
-   *
-   * @deprecated Will be removed in 2.0.0. Use ghost property
-   */
-  @Prop() invisible = false;
-
   /**
    * Button invisible
    */
@@ -64,7 +56,7 @@ export class SplitButton {
   @Prop() icon = '';
 
   /**
-   * Splitbutton icon
+   * Icon of the button on the right
    */
   @Prop() splitIcon = 'context-menu';
 
@@ -105,47 +97,35 @@ export class SplitButton {
   }
 
   render() {
+    const buttonAttributes = {
+      variant: this.variant,
+      outline: this.outline,
+      ghost: this.ghost,
+      disabled: this.disabled,
+      class: {
+        'left-button-border': !this.outline,
+      },
+      onClick: (e) => this.buttonClick.emit(e),
+    };
     return (
       <Host>
         <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>
-          <button
-            class={{
-              ...getButtonClasses(
-                this.variant,
-                this.outline,
-                this.ghost || this.invisible,
-                !this.label,
-                false,
-                false,
-                this.disabled
-              ),
-              ...{
-                'left-button-border': !this.outline,
-              },
-            }}
-            onClick={(e) => this.buttonClick.emit(e)}
-          >
-            {this.icon ? <ix-icon name={this.icon} /> : null} {this.label}
-          </button>
-          <button
+          {this.label ? (
+            <ix-button {...buttonAttributes} icon={this.icon}>
+              {this.label}
+            </ix-button>
+          ) : (
+            <ix-icon-button
+              {...buttonAttributes}
+              icon={this.icon}
+            ></ix-icon-button>
+          )}
+          <ix-icon-button
+            {...buttonAttributes}
             ref={(r) => (this.triggerElement = r)}
-            class={{
-              ...getButtonClasses(
-                this.variant,
-                this.outline,
-                this.ghost || this.invisible,
-                true,
-                false,
-                false,
-                this.disabled
-              ),
-              ...{
-                anchor: true,
-              },
-            }}
-          >
-            <ix-icon name={this.splitIcon} />
-          </button>
+            class={'anchor'}
+            icon={this.splitIcon}
+          ></ix-icon-button>
         </div>
 
         <ix-dropdown ref={(r) => (this.dropdownElement = r)}>

diff --git a/packages/core/src/tests/split-button/split-button.e2e.ts b/packages/core/src/tests/split-button/split-button.e2e.ts
@@ -13,8 +13,12 @@ import { regressionTest } from '@utils/test';
 regressionTest.describe('split-button', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto('split-button/basic');
-    await page.locator('.btn-group button:nth-child(2)').click();
-    await page.waitForSelector('.dropdown-menu.show');
+
+    const button = page.locator('ix-split-button');
+    const dropdownButton = button.getByRole('button', { name: '' });
+    await expect(dropdownButton).toBeVisible();
+    await dropdownButton.click();
+    await expect(button.locator('.dropdown-menu.show')).toBeVisible();
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
       maxDiffPixelRatio: 0.02,
     });

diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -618,7 +618,6 @@ export const IxSpinner = /*@__PURE__*/ defineContainer<JSX.IxSpinner>('ix-spinne
 export const IxSplitButton = /*@__PURE__*/ defineContainer<JSX.IxSplitButton>('ix-split-button', undefined, [
   'variant',
   'outline',
-  'invisible',
   'ghost',
   'label',
   'icon',