feat(Modal): implement support for 3 button modals (#7775)

* refactor(modal): unnest selectors and reduce specificity

* feat(Modal): support 3 button modals

* feat(ComposedModal): support 3 button modals

* chore: update snapshots

* fix(modal): align button text to start in 3 button modals

* docs(Modal): update type

* docs(Modal): update secondaryButtons definition

* fix(Modal): allow nodes in secondary button text

* test(Modal): add secondaryButtons test

* test(ComposedModal): add secondaryButtons test

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: emyarod

packages/components/src/components/modal/_modal.scss

@@ -302,21 +302,25 @@
 
   .#{$prefix}--modal-footer {
     display: flex;
-
     grid-row: -1/-1;
     grid-column: 1/-1;
     justify-content: flex-end;
-    height: 4rem;
+    height: rem(64px);
     margin-top: auto;
+  }
 
-    button.#{$prefix}--btn {
-      flex: 0 1 50%;
-      max-width: none;
-      height: 4rem;
-      margin: 0;
-      padding-top: $spacing-05;
-      padding-bottom: $spacing-07;
-    }
+  .#{$prefix}--modal-footer .#{$prefix}--btn {
+    flex: 0 1 50%;
+    max-width: none;
+    height: rem(64px);
+    margin: 0;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07;
+  }
+
+  .#{$prefix}--modal-footer--three-button .#{$prefix}--btn {
+    flex: 0 1 25%;
+    align-items: flex-start;
   }
 
   .#{$prefix}--modal-footer button.#{$prefix}--btn:focus {

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -811,6 +811,7 @@ Map {
       "secondaryButtonText": Object {
         "type": "string",
       },
+      "secondaryButtons": [Function],
       "secondaryClassName": Object {
         "type": "string",
       },
@@ -3295,6 +3296,7 @@ Map {
       "secondaryButtonText": Object {
         "type": "node",
       },
+      "secondaryButtons": [Function],
       "selectorPrimaryFocus": Object {
         "type": "string",
       },

packages/react/src/components/ComposedModal/ComposedModal-story.js

@@ -8,7 +8,14 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import {
+  boolean,
+  object,
+  optionsKnob as options,
+  select,
+  text,
+  withKnobs,
+} from '@storybook/addon-knobs';
 import ComposedModal, {
   ModalHeader,
   ModalBody,
@@ -28,14 +35,17 @@ const sizes = {
 };
 
 const buttons = {
-  'None (0)': 0,
-  'One (1)': 1,
-  'Two (2)': 2,
+  'None (0)': '0',
+  'One (1)': '1',
+  'Two (2)': '2',
+  'Three (3)': '3',
 };
 
 const props = {
   composedModal: ({ titleOnly } = {}) => ({
-    numberOfButtons: select('Number of Buttons', buttons, 2),
+    numberOfButtons: options('Number of Buttons', buttons, '2', {
+      display: 'inline-radio',
+    }),
     open: boolean('Open (open in <ComposedModal>)', true),
     onKeyDown: action('onKeyDown'),
     selectorPrimaryFocus: text(
@@ -72,6 +82,35 @@ const props = {
     'aria-label': text('ARIA label for content', 'Example modal content'),
   }),
   modalFooter: (numberOfButtons) => {
+    const secondaryButtons = () => {
+      switch (numberOfButtons) {
+        case '2':
+          return {
+            secondaryButtonText: text(
+              'Secondary button text (secondaryButtonText in <ModalFooter>)',
+              'Secondary button'
+            ),
+          };
+        case '3':
+          return {
+            secondaryButtons: object(
+              'Secondary button config array (secondaryButtons)',
+              [
+                {
+                  buttonText: 'Keep both',
+                  onClick: action('onClick'),
+                },
+                {
+                  buttonText: 'Rename',
+                  onClick: action('onClick'),
+                },
+              ]
+            ),
+          };
+        default:
+          return null;
+      }
+    };
     return {
       danger: boolean('Primary button danger (danger)', false),
       primaryButtonText: text(
@@ -82,13 +121,7 @@ const props = {
         'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
         false
       ),
-      secondaryButtonText:
-        numberOfButtons === 2
-          ? text(
-              'Secondary button text (secondaryButtonText in <ModalFooter>)',
-              'Secondary button'
-            )
-          : null,
+      ...secondaryButtons(numberOfButtons),
       onRequestClose: action('onRequestClose'),
       onRequestSubmit: action('onRequestSubmit'),
     };

packages/react/src/components/ComposedModal/ComposedModal-test.js

@@ -13,6 +13,7 @@ import ComposedModal, {
   ModalBody,
   ModalFooter,
 } from '../ComposedModal';
+import InlineLoading from '../InlineLoading';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
@@ -97,16 +98,28 @@ describe('<ModalFooter />', () => {
     });
   });
 
-  describe('Should render buttons only if appropriate prop passed in in', () => {
+  describe('Should render buttons only if appropriate prop passed in', () => {
     const wrapper = shallow(
       <ModalFooter className="extra-class">
         <p>Test</p>
       </ModalFooter>
     );
 
     const primaryWrapper = shallow(<ModalFooter primaryButtonText="test" />);
-    const secondaryWrapper = shallow(
-      <ModalFooter secondaryButtonText="test" />
+    const secondaryWrapper = mount(<ModalFooter secondaryButtonText="test" />);
+    const multipleSecondaryWrapper = mount(
+      <ModalFooter
+        secondaryButtons={[
+          {
+            buttonText: <InlineLoading />,
+            onClick: jest.fn(),
+          },
+          {
+            buttonText: 'Cancel',
+            onClick: jest.fn(),
+          },
+        ]}
+      />
     );
 
     it('does not render primary button if no primary text', () => {
@@ -128,15 +141,36 @@ describe('<ModalFooter />', () => {
       expect(buttonComponent.exists()).toBe(true);
       expect(buttonComponent.props().kind).toBe('secondary');
     });
+
+    it('correctly renders multiple secondary buttons', () => {
+      const buttonComponents = multipleSecondaryWrapper.find(Button);
+      expect(buttonComponents.length).toEqual(2);
+      expect(buttonComponents.at(0).props().kind).toBe('secondary');
+      expect(buttonComponents.at(1).props().kind).toBe('secondary');
+    });
   });
 
   describe('Should render the appropriate buttons when `danger` prop is true', () => {
     const primaryWrapper = shallow(
       <ModalFooter primaryButtonText="test" danger />
     );
-    const secondaryWrapper = shallow(
+    const secondaryWrapper = mount(
       <ModalFooter secondaryButtonText="test" danger />
     );
+    const multipleSecondaryWrapper = mount(
+      <ModalFooter
+        secondaryButtons={[
+          {
+            buttonText: <InlineLoading />,
+            onClick: jest.fn(),
+          },
+          {
+            buttonText: 'Cancel',
+            onClick: jest.fn(),
+          },
+        ]}
+      />
+    );
 
     it('renders danger button if primary text && danger', () => {
       const buttonComponent = primaryWrapper.find(Button);
@@ -149,6 +183,13 @@ describe('<ModalFooter />', () => {
       expect(buttonComponent.exists()).toBe(true);
       expect(buttonComponent.prop('kind')).toBe('secondary');
     });
+
+    it('correctly renders multiple secondary buttons', () => {
+      const buttonComponents = multipleSecondaryWrapper.find(Button);
+      expect(buttonComponents.length).toEqual(2);
+      expect(buttonComponents.at(0).props().kind).toBe('secondary');
+      expect(buttonComponents.at(1).props().kind).toBe('secondary');
+    });
   });
 });
 

packages/react/src/components/ComposedModal/ComposedModal.js

@@ -563,6 +563,42 @@ export class ModalFooter extends Component {
      */
     secondaryButtonText: PropTypes.string,
 
+    /**
+     * Specify an array of config objects for secondary buttons
+     * (`Array<{
+     *   buttonText: string,
+     *   onClick: function,
+     * }>`).
+     */
+    secondaryButtons: (props, propName, componentName) => {
+      if (props.secondaryButtons) {
+        if (
+          !Array.isArray(props.secondaryButtons) ||
+          props.secondaryButtons.length !== 2
+        ) {
+          return new Error(
+            `${propName} needs to be an array of two button config objects`
+          );
+        }
+
+        const shape = {
+          buttonText: PropTypes.node,
+          onClick: PropTypes.func,
+        };
+
+        props[propName].forEach((secondaryButton) => {
+          PropTypes.checkPropTypes(
+            shape,
+            secondaryButton,
+            propName,
+            componentName
+          );
+        });
+      }
+
+      return null;
+    },
+
     /**
      * Specify a custom className to be applied to the secondary button
      */
@@ -583,6 +619,7 @@ export class ModalFooter extends Component {
     const {
       className,
       primaryClassName,
+      secondaryButtons,
       secondaryClassName,
       secondaryButtonText,
       primaryButtonText,
@@ -599,6 +636,8 @@ export class ModalFooter extends Component {
     const footerClass = classNames({
       [`${prefix}--modal-footer`]: true,
       [className]: className,
+      [`${prefix}--modal-footer--three-button`]:
+        Array.isArray(secondaryButtons) && secondaryButtons.length === 2,
     });
 
     const primaryClass = classNames({
@@ -609,17 +648,36 @@ export class ModalFooter extends Component {
       [secondaryClassName]: secondaryClassName,
     });
 
-    return (
-      <ButtonSet className={footerClass} {...other}>
-        {secondaryButtonText && (
+    const SecondaryButtonSet = () => {
+      if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
+        return secondaryButtons.map(
+          ({ buttonText, onClick: onButtonClick }, i) => (
+            <Button
+              key={`${buttonText}-${i}`}
+              className={secondaryClass}
+              kind="secondary"
+              onClick={onButtonClick || this.handleRequestClose}>
+              {buttonText}
+            </Button>
+          )
+        );
+      }
+      if (secondaryButtonText) {
+        return (
           <Button
             className={secondaryClass}
             onClick={this.handleRequestClose}
             kind="secondary">
             {secondaryButtonText}
           </Button>
-        )}
+        );
+      }
+      return null;
+    };
 
+    return (
+      <ButtonSet className={footerClass} {...other}>
+        <SecondaryButtonSet />
         {primaryButtonText && (
           <Button
             onClick={onRequestSubmit}