Merge pull request #199 from mapbox/disabled-state-modal-actions

Support disabled state in modal actions

CHANGELOG.md

@@ -3,6 +3,9 @@ Changelog
 
 ## HEAD
 
+- Support `disabled` option in modal actions. [#199](https://github.com/mapbox/mr-ui/pull/199)
+
+
 ## 2.0.0
 
 - [fix] added new styling for ControlToggleGroup component that is consistent with actual usage.

src/components/modal/modal-actions.test.tsx

@@ -94,6 +94,30 @@ describe('ModalActions', () => {
       fireEvent.click(actions[2]);
       expect(mockedTertiaryCallback).toHaveBeenCalledTimes(1);
     });
+
+    test('disabled callbacks', () => {
+      const mockedPrimaryCallback = jest.fn();
+      const mockedSecondaryCallback = jest.fn();
+      const mockedTertiaryCallback = jest.fn();
+      render(
+        <ModalActions
+          primaryAction={{ text: 'Okay', disabled: true, callback: mockedPrimaryCallback }}
+          secondaryAction={{ text: 'Cancel', disabled: true, callback: mockedSecondaryCallback }}
+          tertiaryAction={{ text: 'Exit', disabled: true, callback: mockedTertiaryCallback }}
+        />
+      );
+
+      const actions = screen.queryAllByRole('button');
+
+      fireEvent.click(actions[0]);
+      expect(mockedPrimaryCallback).not.toHaveBeenCalled();
+
+      fireEvent.click(actions[1]);
+      expect(mockedSecondaryCallback).not.toHaveBeenCalled();
+
+      fireEvent.click(actions[2]);
+      expect(mockedTertiaryCallback).not.toHaveBeenCalled();
+    });
   });
 
   describe('primary and tertiary', () => {

src/components/modal/modal-actions.tsx

@@ -7,14 +7,17 @@ interface Props {
     text: string;
     callback: () => void;
     destructive?: boolean;
+    disabled?: boolean;
   },
   secondaryAction?: {
     text: string;
     callback: () => void;
+    disabled?: boolean;
   },
   tertiaryAction?: {
     text: string;
     callback: () => void;
+    disabled?: boolean;
   }
 }
 
@@ -34,6 +37,7 @@ export default function ModalActions({
           variant="secondary"
           size="medium"
           onClick={secondaryAction.callback}
+          disabled={secondaryAction.disabled}
           data-test="secondary-modal-action"
           passthroughProps={{ 'aria-label': secondaryAction.text }}
         >
@@ -58,6 +62,7 @@ export default function ModalActions({
           aria-label={tertiaryAction.text}
           variant="tertiary"
           onClick={tertiaryAction.callback}
+          disabled={tertiaryAction.disabled}
           data-test="tertiary-modal-action"
         >
           {tertiaryAction.text}
@@ -77,6 +82,7 @@ export default function ModalActions({
           variant={primaryButtonVariant}
           size="medium"
           onClick={primaryAction.callback}
+          disabled={primaryAction.disabled}
           data-test="primary-modal-action"
           passthroughProps={{
             tabIndex: 0,
@@ -96,14 +102,17 @@ ModalActions.propTypes = {
   primaryAction: PropTypes.shape({
     text: PropTypes.string.isRequired,
     callback: PropTypes.func.isRequired,
-    destructive: PropTypes.bool
+    destructive: PropTypes.bool,
+    disabled: PropTypes.bool
   }).isRequired,
   secondaryAction: PropTypes.shape({
     text: PropTypes.string.isRequired,
-    callback: PropTypes.func.isRequired
+    callback: PropTypes.func.isRequired,
+    disabled: PropTypes.bool
   }),
   tertiaryAction: PropTypes.shape({
     text: PropTypes.string.isRequired,
-    callback: PropTypes.func.isRequired
+    callback: PropTypes.func.isRequired,
+    disabled: PropTypes.bool
   })
 };

src/components/modal/modal.tsx

@@ -20,14 +20,17 @@ interface Props {
     text: string;
     callback: () => void;
     destructive?: boolean;
+    disabled?: boolean;
   },
   secondaryAction?: {
     text: string;
     callback: () => void;
+    disabled?: boolean;
   },
   tertiaryAction?: {
     text: string;
     callback: () => void;
+    disabled?: boolean;
   }
 }
 
@@ -181,9 +184,8 @@ Modal.propTypes = {
    */
   onExit: PropTypes.func,
   /**
-   * A function that should the primary application node, which should be
-   * `aria-hidden` when the modal is open. By default, returns
-   * `document.getElementById('app')`.
+   * Modal container size. Options are `small`, `large`, or `auto`. If `auto`
+   * is provided, a width is not specified.
    */
   size: PropTypes.oneOf(['small', 'large', 'auto']),
   /**