fix(core/split-button-item): deprecate component (#760)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Sep 19, 2023 · 950c66a · 950c66a
1 parent a396383
commit 950c66a
Show file tree

Hide file tree

Showing 15 changed files with 52 additions and 43 deletions.
diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -2,6 +2,10 @@
 
 ## v2.0.0
 
+### Deprecated `ix-split-button-item`
+
+Use `ix-dropdown-item` instead of `ix-split-button-item`. `ix-split-button-item` will be removed in the next major release.
+
 ### `ix-dropdown-item` remove 'itemClick' event
 
 Remove `itemClick` event use native `click` event instead.

diff --git a/packages/angular-test-app/src/preview-examples/split-button-icons.ts b/packages/angular-test-app/src/preview-examples/split-button-icons.ts
@@ -12,8 +12,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: ` <ix-split-button icon="document" splitIcon="chevron-down-small">
-    <ix-split-button-item icon="cut"></ix-split-button-item>
-    <ix-split-button-item icon="bulb"></ix-split-button-item>
+    <ix-dropdown-item icon="cut"></ix-dropdown-item>
+    <ix-dropdown-item icon="bulb"></ix-dropdown-item>
   </ix-split-button>`,
 })
 export default class SplitButtonIcons {}
diff --git a/packages/angular-test-app/src/preview-examples/split-button.ts b/packages/angular-test-app/src/preview-examples/split-button.ts
@@ -13,8 +13,8 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <ix-split-button label="Action text" splitIcon="chevron-down-small">
-      <ix-split-button-item label="Item 1"></ix-split-button-item>
-      <ix-split-button-item label="Item 2"></ix-split-button-item>
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
     </ix-split-button>
   `,
 })

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -9824,7 +9824,12 @@
       "overview": "",
       "usage": {},
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "since 2.0.0. Use the `ix-dropdown-item` component instead."
+        }
+      ],
       "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
@@ -9838,6 +9843,7 @@
           "ix-icon"
         ]
       },
+      "deprecation": "since 2.0.0. Use the `ix-dropdown-item` component instead.",
       "props": [
         {
           "name": "icon",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1709,6 +1709,9 @@ export namespace Components {
          */
         "variant": SplitButtonVariant;
     }
+    /**
+     * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+     */
     interface IxSplitButtonItem {
         /**
           * Dropdown icon
@@ -2879,6 +2882,9 @@ declare global {
         prototype: HTMLIxSplitButtonElement;
         new (): HTMLIxSplitButtonElement;
     };
+    /**
+     * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+     */
     interface HTMLIxSplitButtonItemElement extends Components.IxSplitButtonItem, HTMLStencilElement {
     }
     var HTMLIxSplitButtonItemElement: {
@@ -4901,6 +4907,9 @@ declare namespace LocalJSX {
          */
         "variant"?: SplitButtonVariant;
     }
+    /**
+     * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+     */
     interface IxSplitButtonItem {
         /**
           * Dropdown icon
@@ -5635,6 +5644,9 @@ declare module "@stencil/core" {
             "ix-slider": LocalJSX.IxSlider & JSXBase.HTMLAttributes<HTMLIxSliderElement>;
             "ix-spinner": LocalJSX.IxSpinner & JSXBase.HTMLAttributes<HTMLIxSpinnerElement>;
             "ix-split-button": LocalJSX.IxSplitButton & JSXBase.HTMLAttributes<HTMLIxSplitButtonElement>;
+            /**
+             * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+             */
             "ix-split-button-item": LocalJSX.IxSplitButtonItem & JSXBase.HTMLAttributes<HTMLIxSplitButtonItemElement>;
             "ix-tab-item": LocalJSX.IxTabItem & JSXBase.HTMLAttributes<HTMLIxTabItemElement>;
             "ix-tabs": LocalJSX.IxTabs & JSXBase.HTMLAttributes<HTMLIxTabsElement>;

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
@@ -16,6 +16,9 @@ import {
   Prop,
 } from '@stencil/core';
 
+/**
+ * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.
+ */
 @Component({
   tag: 'ix-split-button-item',
   styleUrl: 'split-button-item.css',

diff --git a/packages/core/src/components/split-button/split-button.tsx b/packages/core/src/components/split-button/split-button.tsx
@@ -80,12 +80,6 @@ export class SplitButton {
   private triggerElement: HTMLElement;
   private dropdownElement: HTMLIxDropdownElement;
 
-  get splitItems() {
-    return Array.from(
-      this.hostElement.querySelectorAll('ix-split-button-item')
-    );
-  }
-
   private linkTriggerRef() {
     if (this.triggerElement && this.dropdownElement) {
       this.dropdownElement.trigger = this.triggerElement;

diff --git a/packages/core/src/tests/split-button/basic/index.html b/packages/core/src/tests/split-button/basic/index.html
@@ -15,9 +15,9 @@
   </head>
   <body>
     <ix-split-button label="Test">
-      <ix-split-button-item label="Item 1" icon="print" />
-      <ix-split-button-item label="Item 2" icon="print" />
-      <ix-split-button-item label="Item 3" icon="print" />
+      <ix-dropdown-item label="Item 1" icon="print"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" icon="print"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3" icon="print"></ix-dropdown-item>
     </ix-split-button>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

diff --git a/packages/documentation/docs/controls/split-button.md b/packages/documentation/docs/controls/split-button.md
@@ -43,7 +43,7 @@ frameworks={{
   vue: SourceVueSplitButtonIcons
 }}></Playground>
 
-## Properties (ix-split-button)
+## Properties
 
 ### Props
 
@@ -52,13 +52,3 @@ frameworks={{
 ### Events
 
 <Events />
-
-## Properties (ix-split-button-item)
-
-### Props
-
-<ItemProps />
-
-### Events
-
-<ItemEvents />
diff --git a/packages/html-test-app/src/preview-examples/split-button-icons.html b/packages/html-test-app/src/preview-examples/split-button-icons.html
@@ -12,8 +12,8 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
     <ix-split-button icon="document" split-icon="chevron-down-small">
-      <ix-split-button-item icon="cut"></ix-split-button-item>
-      <ix-split-button-item icon="bulb"></ix-split-button-item>
+      <ix-dropdown-item icon="cut"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb"></ix-dropdown-item>
     </ix-split-button>
     <!-- Preview code -->
     <script type="module" src="./init.js"></script>

diff --git a/packages/html-test-app/src/preview-examples/split-button.html b/packages/html-test-app/src/preview-examples/split-button.html
@@ -12,8 +12,8 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
     <ix-split-button label="Action text" split-icon="chevron-down-small">
-      <ix-split-button-item label="Item 1"></ix-split-button-item>
-      <ix-split-button-item label="Item 2"></ix-split-button-item>
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
     </ix-split-button>
     <!-- Preview code -->
     <script type="module" src="./init.js"></script>

diff --git a/packages/react-test-app/src/preview-examples/split-button-icons.tsx b/packages/react-test-app/src/preview-examples/split-button-icons.tsx
@@ -7,14 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxSplitButton, IxSplitButtonItem } from '@siemens/ix-react';
+import { IxDropdownItem, IxSplitButton } from '@siemens/ix-react';
 import React from 'react';
 
 export default () => {
   return (
-    <IxSplitButton label="Action text" splitIcon='chevron-down-small'>
-      <IxSplitButtonItem label="Item 1" icon="cut"></IxSplitButtonItem>
-      <IxSplitButtonItem label="Item 2" icon="bulb"></IxSplitButtonItem>
+    <IxSplitButton label="Action text" splitIcon="chevron-down-small">
+      <IxDropdownItem label="Item 1" icon="cut"></IxDropdownItem>
+      <IxDropdownItem label="Item 2" icon="bulb"></IxDropdownItem>
     </IxSplitButton>
   );
 };
diff --git a/packages/react-test-app/src/preview-examples/split-button.tsx b/packages/react-test-app/src/preview-examples/split-button.tsx
@@ -7,14 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { IxSplitButton, IxSplitButtonItem } from '@siemens/ix-react';
+import { IxDropdownItem, IxSplitButton } from '@siemens/ix-react';
 import React from 'react';
 
 export default () => {
   return (
-    <IxSplitButton label="Action text" splitIcon='chevron-down-small'>
-      <IxSplitButtonItem label="Item 1"></IxSplitButtonItem>
-      <IxSplitButtonItem label="Item 2"></IxSplitButtonItem>
+    <IxSplitButton label="Action text" splitIcon="chevron-down-small">
+      <IxDropdownItem label="Item 1"></IxDropdownItem>
+      <IxDropdownItem label="Item 2"></IxDropdownItem>
     </IxSplitButton>
   );
 };
diff --git a/packages/vue-test-app/src/preview-examples/split-button-icons.vue b/packages/vue-test-app/src/preview-examples/split-button-icons.vue
@@ -8,12 +8,12 @@
 -->
 
 <script setup lang="ts">
-import { IxSplitButton, IxSplitButtonItem } from '@siemens/ix-vue';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-vue';
 </script>
 
 <template>
   <IxSplitButton label="Action text">
-    <IxSplitButtonItem label="Item 1" icon="cut"></IxSplitButtonItem>
-    <IxSplitButtonItem label="Item 2" icon="bulb"></IxSplitButtonItem>
+    <IxDropdownItem label="Item 1" icon="cut"></IxDropdownItem>
+    <IxDropdownItem label="Item 2" icon="bulb"></IxDropdownItem>
   </IxSplitButton>
 </template>
diff --git a/packages/vue-test-app/src/preview-examples/split-button.vue b/packages/vue-test-app/src/preview-examples/split-button.vue
@@ -8,12 +8,12 @@
 -->
 
 <script setup lang="ts">
-import { IxSplitButton, IxSplitButtonItem } from '@siemens/ix-vue';
+import { IxSplitButton, IxDropdownItem } from '@siemens/ix-vue';
 </script>
 
 <template>
   <IxSplitButton label="Action text">
-    <IxSplitButtonItem label="Item 1"></IxSplitButtonItem>
-    <IxSplitButtonItem label="Item 2"></IxSplitButtonItem>
+    <IxDropdownItem label="Item 1"></IxDropdownItem>
+    <IxDropdownItem label="Item 2"></IxDropdownItem>
   </IxSplitButton>
 </template>