feat(core/split-button): add close behavior (#1292)

siemens · May 23, 2024 · c1d4f7d · c1d4f7d
1 parent fb48f05
commit c1d4f7d
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git a/.changeset/thin-spiders-press.md b/.changeset/thin-spiders-press.md
@@ -0,0 +1,8 @@
+---
+"@siemens/ix": patch
+"@siemens/ix-angular": patch
+"@siemens/ix-vue": patch
+
+---
+
+feat(core/split-button): add close behavior
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -2016,14 +2016,14 @@ export declare interface IxSpinner extends Components.IxSpinner {}
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'splitIcon', 'variant']
+  inputs: ['closeBehavior', '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', 'label', 'outline', 'placement', 'splitIcon', 'variant'],
+  inputs: ['closeBehavior', 'disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'splitIcon', 'variant'],
 })
 export class IxSplitButton {
   protected el: HTMLElement;

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1977,6 +1977,11 @@ export namespace Components {
         "variant": 'primary' | 'secondary';
     }
     interface IxSplitButton {
+        /**
+          * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+          * @since 2.3.0
+         */
+        "closeBehavior": CloseBehavior;
         /**
           * Disabled
          */
@@ -6172,6 +6177,11 @@ declare namespace LocalJSX {
         "variant"?: 'primary' | 'secondary';
     }
     interface IxSplitButton {
+        /**
+          * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+          * @since 2.3.0
+         */
+        "closeBehavior"?: CloseBehavior;
         /**
           * Disabled
          */

diff --git a/packages/core/src/components/split-button/split-button.tsx b/packages/core/src/components/split-button/split-button.tsx
@@ -19,6 +19,7 @@ import {
 } from '@stencil/core';
 import { ButtonVariant } from '../button/button';
 import { AlignedPlacement } from '../dropdown/placement';
+import { CloseBehavior } from '../dropdown/dropdown-controller';
 
 export type SplitButtonVariant = ButtonVariant;
 
@@ -35,6 +36,12 @@ export class SplitButton {
    */
   @Prop() variant: SplitButtonVariant = 'primary';
 
+  /**
+   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+   * @since 2.3.0
+   */
+  @Prop() closeBehavior: CloseBehavior = 'both';
+
   /**
    * Button outline variant
    */
@@ -126,7 +133,10 @@ export class SplitButton {
           ></ix-icon-button>
         </div>
 
-        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>
+        <ix-dropdown
+          ref={(r) => (this.dropdownElement = r)}
+          closeBehavior={this.closeBehavior}
+        >
           <slot></slot>
         </ix-dropdown>
       </Host>

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