feat(SelectDialog): add confirmButtonProps prop (#5468)

Closes #5461
SAP · Feb 6, 2024 · e3db1c0 · e3db1c0
1 parent 250ad0d
commit e3db1c0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { ListPropTypes, SelectDialogPropTypes } from '../..';
-import { Button, ListMode, SelectDialog, StandardListItem } from '../..';
+import { Button, ButtonDesign, ListMode, SelectDialog, StandardListItem } from '../..';
 
 const listItems = new Array(5).fill('o_O').map((_, index) => (
   <StandardListItem key={index} data-li={index} description={`description${index}`}>
@@ -274,4 +274,17 @@ describe('SelectDialog', () => {
       callCount++;
     });
   });
+
+  it('confirmButtonProps', () => {
+    cy.mount(
+      <SelectDialog
+        //@ts-expect-error: design is not a valid prop - only added for testing purpose
+        confirmButtonProps={{ disabled: true, design: ButtonDesign.Negative, 'data-testid': 'confirmBtn' }}
+        open
+        mode={ListMode.MultiSelect}
+      />
+    );
+    cy.findByTestId('confirmBtn').should('be.visible').and('have.attr', 'disabled');
+    cy.findByTestId('confirmBtn').should('have.attr', 'design', 'Emphasized');
+  });
 });
diff --git a/packages/main/src/components/SelectDialog/index.tsx b/packages/main/src/components/SelectDialog/index.tsx
@@ -136,6 +136,10 @@ export interface SelectDialogPropTypes
    * __Note:__ This won't work if the dialog is unmounted, if you want to unmount the dialog when closed, you need to persist the selection yourself.
    */
   rememberSelections?: boolean;
+  /**
+   * Defines the number of selected list items displayed above the list in `MultiSelect` mode. Programmatically setting the counter is necessary if all previously selected elements are to remain selected during search.
+   */
+  numberOfSelectedItems?: number;
   /**
    * Defines the mode of the SelectDialog list.
    *
@@ -153,9 +157,13 @@ export interface SelectDialogPropTypes
    */
   listProps?: Omit<ListPropTypes, 'mode' | 'children' | 'footerText' | 'growing' | 'onLoadMore'>;
   /**
-   * Defines the number of selected list items displayed above the list in `MultiSelect` mode. Programmatically setting the counter is necessary if all previously selected elements are to remain selected during search.
+   * Defines the props of the confirm button.
+   *
+   * __Note:__`onClick` and `design` are not supported.
+   *
+   * @since 1.25.0
    */
-  numberOfSelectedItems?: number;
+  confirmButtonProps?: Omit<ButtonPropTypes, 'onClick' | 'design'>;
   /**
    * This event will be fired when the value of the search field is changed by a user - e.g. at each key press
    */
@@ -194,6 +202,7 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
     children,
     className,
     confirmButtonText,
+    confirmButtonProps,
     growing,
     headerText,
     headerTextAlignCenter,
@@ -399,7 +408,7 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
       </List>
       <div slot="footer" className={classes.footer}>
         {mode === ListMode.MultiSelect && (
-          <Button onClick={handleConfirm} design={ButtonDesign.Emphasized}>
+          <Button {...confirmButtonProps} onClick={handleConfirm} design={ButtonDesign.Emphasized}>
             {confirmButtonText ?? i18nBundle.getText(SELECT)}
           </Button>
         )}