Release v10.3.3

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change history for stripes-components
 
+## [10.3.3](https://github.com/folio-org/stripes-components/tree/v10.3.3) (2022-12-04)
+[Full Changelog](https://github.com/folio-org/stripes-components/compare/v10.3.1...v10.3.2)
+
+* After click submit button disable the confirmation button in Confirmation modal component. Refs STCOM-1058.
+
 ## [10.3.2](https://github.com/folio-org/stripes-components/tree/v10.3.2) (2022-11-23)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v10.3.0...v10.3.1)
 

lib/ConfirmationModal/ConfirmationModal.js

@@ -21,6 +21,7 @@ const propTypes = {
   confirmLabel: PropTypes.node,
   heading: PropTypes.node.isRequired,
   id: PropTypes.string,
+  isConfirmButtonDisabled: PropTypes.bool,
   message: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
@@ -34,6 +35,7 @@ const defaultProps = {
   bodyTag: 'p',
   buttonStyle: 'primary',
   cancelButtonStyle: 'default',
+  isConfirmButtonDisabled: false,
 };
 
 const ConfirmationModal = (props) => {
@@ -46,6 +48,7 @@ const ConfirmationModal = (props) => {
     bodyTag: Element,
     onCancel,
     ariaLabel, // deprecated
+    isConfirmButtonDisabled,
   } = props;
 
   const footer = (
@@ -56,6 +59,7 @@ const ConfirmationModal = (props) => {
         id={`clickable-${testId}-confirm`}
         onClick={props.onConfirm}
         ref={footerPrimary}
+        disabled={isConfirmButtonDisabled}
       >
         {confirmLabel}
       </Button>

lib/ConfirmationModal/readme.md

@@ -46,3 +46,4 @@ confirmLabel | string | String to render on the Submit action. | "Submit" |
 onConfirm | func | Callback fired when the Submit button is clicked |  | ✔
 onCancel | func | Callback fired when the Cancel button is clicked |  | ✔
 bodyTag | string | String to set the HTML tag used to wrap the modal message | "p" |
+isConfirmButtonDisabled | bool | Boolean reflecting confirm button's enabled/disabled status | false |

lib/ConfirmationModal/tests/ConfirmationModal-test.js

@@ -14,6 +14,7 @@ const html = Bigtest.HTML;
 const ConfirmButton = Button.extend('confirm button')
   .filters({
     focused: el => document.activeElement === el,
+    disabled: el => el.disabled,
   });
 
 describe('ConfirmationModal', () => {
@@ -49,6 +50,27 @@ describe('ConfirmationModal', () => {
 
   it('focus is on the primary button', () => ConfirmButton(confirmLabel).is({ focused: true }));
 
+  describe('when confirm button is disabled', () => {
+    beforeEach(async () => {
+      await mountWithContext(
+        <ConfirmationModal
+          open
+          id="confirmation-modal-test"
+          heading={heading}
+          message={message}
+          bodyTag="div"
+          isConfirmButtonDisabled
+          onConfirm={() => { confirmed = true; }}
+          onCancel={() => { cancelled = true; }}
+          cancelLabel={cancelLabel}
+          confirmLabel={confirmLabel}
+        />
+      );
+    });
+
+    it('The confirm button should have disabled attribute', () => ConfirmButton(confirmLabel).has({ disabled: true }));
+  });
+
   describe('When clicking the confirm button', () => {
     beforeEach(async () => {
       await confirmationModal.confirm();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-components",
-  "version": "10.3.2",
+  "version": "10.3.3",
   "description": "Component library for building Stripes applications.",
   "license": "Apache-2.0",
   "repository": "folio-org/stripes-components",