fix(modal): default action alignment to left

packages/react-core/src/components/Modal/Modal.tsx

@@ -26,8 +26,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement> {
   footer?: React.ReactNode;
   /** Action buttons to add to the standard Modal Footer, ignored if `footer` is given */
   actions?: any;
-  /** Flag to indicate that the Footer content is left aligned */
-  isFooterLeftAligned?: boolean;
+  /** Flag to indicate that the Footer content is right aligned */
+  isFooterRightAligned?: boolean;
   /** A callback for when the close button is clicked */
   onClose?: () => void;
   /** Default width of the Modal. */
@@ -63,7 +63,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
     showClose: true,
     modalContentAriaDescribedById: '',
     actions: [] as any[],
-    isFooterLeftAligned: false,
+    isFooterRightAligned: false,
     onClose: () => undefined as any,
     variant: 'default',
     appendTo: (typeof document !== 'undefined' && document.body) || null
@@ -145,7 +145,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { appendTo, ...props } = this.props;
+    const { appendTo, modalContentAriaDescribedById, ...props } = this.props;
     const { container } = this.state;
 
     if (!canUseDOM || !container) {
@@ -157,7 +157,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         {...props}
         title={this.props.title}
         id={this.id}
-        modalBoxAriaDescribedById={this.props.modalContentAriaDescribedById}
+        modalBoxAriaDescribedById={modalContentAriaDescribedById}
       />,
       container
     );

packages/react-core/src/components/Modal/ModalBoxFooter.tsx

@@ -7,17 +7,17 @@ export interface ModalBoxFooterProps {
   children?: React.ReactNode;
   /** Additional classes added to the Footer */
   className?: string;
-  /** Flag to align buttons to the left */
-  isLeftAligned?: boolean;
+  /** Flag to align buttons to the right */
+  isRightAligned?: boolean;
 }
 
 export const ModalBoxFooter: React.FunctionComponent<ModalBoxFooterProps> = ({
   children = null,
   className = '',
-  isLeftAligned = false,
+  isRightAligned = false,
   ...props
 }: ModalBoxFooterProps) => (
-  <div {...props} className={css(styles.modalBoxFooter, isLeftAligned && styles.modifiers.alignLeft, className)}>
+  <div {...props} className={css(styles.modalBoxFooter, !isRightAligned && styles.modifiers.alignLeft, className)}>
     {children}
   </div>
 );

packages/react-core/src/components/Modal/ModalContent.tsx

@@ -38,7 +38,7 @@ export interface ModalContentProps {
   /** Action buttons to add to the standard Modal Footer, ignored if `footer` is given */
   actions?: any;
   /** Flag to indicate that the Footer content is left aligned */
-  isFooterLeftAligned?: boolean;
+  isFooterRightAligned?: boolean;
   /** A callback for when the close button is clicked */
   onClose?: () => void;
   /** Id to use for Modal Box descriptor */
@@ -60,7 +60,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   showClose = true,
   footer = null,
   actions = [],
-  isFooterLeftAligned = false,
+  isFooterRightAligned = false,
   onClose = () => undefined as any,
   variant = 'default',
   width = -1,
@@ -80,9 +80,9 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   );
 
   const modalBoxFooter = footer ? (
-    <ModalBoxFooter isLeftAligned={isFooterLeftAligned}>{footer}</ModalBoxFooter>
+    <ModalBoxFooter isRightAligned={isFooterRightAligned}>{footer}</ModalBoxFooter>
   ) : (
-    actions.length > 0 && <ModalBoxFooter isLeftAligned={isFooterLeftAligned}>{actions}</ModalBoxFooter>
+    actions.length > 0 && <ModalBoxFooter isRightAligned={isFooterRightAligned}>{actions}</ModalBoxFooter>
   );
   const boxStyle = width === -1 ? {} : { width };
   const modalBox = (

packages/react-core/src/components/Modal/__tests__/Generated/Modal.test.tsx

@@ -17,14 +17,12 @@ it('Modal should match snapshot (auto-generated)', () => {
       title={'string'}
       hideTitle={false}
       showClose={true}
-      ariaDescribedById={"''"}
       footer={<div>ReactNode</div>}
       actions={[]}
-      isFooterLeftAligned={false}
+      isFooterRightAligned={false}
       onClose={() => undefined as any}
       width={1}
-      isLarge={false}
-      isSmall={false}
+      variant={'large'}
       appendTo={(typeof document !== 'undefined' && document.body) || null}
       disableFocusTrap={true}
     />

packages/react-core/src/components/Modal/__tests__/Generated/ModalContent.test.tsx

@@ -12,8 +12,7 @@ it('ModalContent should match snapshot (auto-generated)', () => {
     <ModalContent
       children={<div>ReactNode</div>}
       className={"''"}
-      isLarge={false}
-      isSmall={false}
+      variant={'large'}
       isOpen={false}
       header={null}
       title={'string'}
@@ -22,9 +21,8 @@ it('ModalContent should match snapshot (auto-generated)', () => {
       width={-1}
       footer={null}
       actions={[]}
-      isFooterLeftAligned={false}
+      isFooterRightAligned={false}
       onClose={() => undefined as any}
-      ariaDescribedById={"''"}
       id={"''"}
       disableFocusTrap={false}
     />

packages/react-core/src/components/Modal/__tests__/Generated/__snapshots__/Modal.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`Modal should match snapshot (auto-generated) 1`] = `
 >
   <ModalContent
     actions={Array []}
-    ariaDescribedById="''"
     className="''"
     disableFocusTrap={true}
     footer={
@@ -21,16 +20,13 @@ exports[`Modal should match snapshot (auto-generated) 1`] = `
     }
     hideTitle={false}
     id="pf-modal-0"
-    isFooterLeftAligned={false}
-    isLarge={false}
+    isFooterRightAligned={false}
     isOpen={false}
-    isSmall={false}
     modalBoxAriaDescribedById=""
-    modalContentAriaDescribedById=""
     onClose={[Function]}
     showClose={true}
     title="string"
-    variant="default"
+    variant="large"
     width={1}
   >
     <div>

packages/react-core/src/components/Modal/__tests__/Generated/__snapshots__/ModalBoxFooter.test.tsx.snap

@@ -2,7 +2,8 @@
 
 exports[`ModalBoxFooter should match snapshot (auto-generated) 1`] = `
 <div
-  className="pf-c-modal-box__footer ''"
+  className="pf-c-modal-box__footer pf-m-align-left ''"
+  isLeftAligned={false}
 >
   ReactNode
 </div>

packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxFooter.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ModalBoxFooter Test 1`] = `
 <div
-  className="pf-c-modal-box__footer test-box-footer-class"
+  className="pf-c-modal-box__footer pf-m-align-left test-box-footer-class"
 >
   This is a ModalBox Footer
 </div>

packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -155,7 +155,7 @@ exports[`Modal Content Test with footer 1`] = `
         This is a ModalBox header
       </ModalBoxBody>
       <ModalBoxFooter
-        isLeftAligned={false}
+        isRightAligned={false}
       >
         Testing
       </ModalBoxFooter>
@@ -200,7 +200,7 @@ exports[`Modal Content Test with onclose 1`] = `
         This is a ModalBox header
       </ModalBoxBody>
       <ModalBoxFooter
-        isLeftAligned={false}
+        isRightAligned={false}
       >
         Testing footer
       </ModalBoxFooter>
@@ -284,7 +284,7 @@ exports[`Modal Test with custom footer 1`] = `
         This is a ModalBox header
       </ModalBoxBody>
       <ModalBoxFooter
-        isLeftAligned={false}
+        isRightAligned={false}
       >
         <span
           id="test-custom-footer"
@@ -335,7 +335,7 @@ exports[`Modal Test with custom header 1`] = `
         This is a ModalBox header
       </ModalBoxBody>
       <ModalBoxFooter
-        isLeftAligned={false}
+        isRightAligned={false}
       >
         Testing footer
       </ModalBoxFooter>

packages/react-core/src/components/Modal/examples/Modal.md

@@ -5,7 +5,6 @@ cssPrefix: 'pf-c-modal-box'
 typescript: true
 propComponents:
   ['Modal', 'ModalBox', 'ModalBoxBody', 'ModalBoxCloseButton', 'ModalBoxFooter', 'ModalBoxHeader', 'ModalContent']
-optIn: In a future breaking-change release, the modal footer buttons will default to be left aligned. You can opt into this now by setting the Modal isFooterLeftAligned prop to true.
 ---
 
 import { Modal, ModalVariant, TitleSizes, Button, Title } from '@patternfly/react-core';
@@ -50,7 +49,6 @@ class SimpleModal extends React.Component {
               Cancel
             </Button>
           ]}
-          isFooterLeftAligned
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -102,7 +100,6 @@ class SimpleModal extends React.Component {
               Cancel
             </Button>
           ]}
-          isFooterLeftAligned
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -154,7 +151,6 @@ class SmallModal extends React.Component {
               Cancel
             </Button>
           ]}
-          isFooterLeftAligned
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -206,7 +202,6 @@ class LargeModal extends React.Component {
               Cancel
             </Button>
           ]}
-          isFooterLeftAligned
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -258,7 +253,6 @@ class WidthModal extends React.Component {
               Cancel
             </Button>
           ]}
-          isFooterLeftAligned
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -274,7 +268,7 @@ class WidthModal extends React.Component {
 
 ```js title=Custom-header-and-footer
 import React from 'react';
-import { Modal, ModalVariant, Button, Title } from '@patternfly/react-core';
+import { Modal, ModalVariant, Button, Title, TitleSizes } from '@patternfly/react-core';
 import { WarningTriangleIcon } from '@patternfly/react-icons';
 
 class CustomHeaderFooter extends React.Component {
@@ -303,7 +297,7 @@ class CustomHeaderFooter extends React.Component {
     );
 
     const footer = (
-      <Title headingLevel="h4" size={TitleSizes.sm}>
+      <Title headingLevel="h4" size={TitleSizes.md}>
         <WarningTriangleIcon />
         <span className="pf-u-pl-sm">Custom modal footer.</span>
       </Title>
@@ -319,10 +313,9 @@ class CustomHeaderFooter extends React.Component {
           isOpen={isModalOpen}
           header={header}
           title="custom header example"
-          modalContentAriaDescribedBy="custom-header-example"
+          modalContentAriaDescribedById="custom-header-example"
           onClose={this.handleModalToggle}
           footer={footer}
-          isFooterLeftAligned
         >
           <span id="custom-header-example">
             When static text describing the modal is available, it can be wrapped with an ID referring to the modal's
@@ -372,10 +365,9 @@ class NoHeader extends React.Component {
           hideTitle={true}
           title="no header example"
           showClose={true}
-          modalContentAriaDescribedBy="no-header-example"
+          modalContentAriaDescribedById="no-header-example"
           onClose={this.handleModalToggle}
           footer={footer}
-          isFooterLeftAligned
         >
           <span id="no-header-example">
             When static text describing the modal is available, it can be wrapped with an ID referring to the modal's

packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx

@@ -85,7 +85,6 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
             Confirm
           </Button>
         ]}
-        isFooterLeftAligned
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -114,7 +113,6 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
             Confirm
           </Button>
         ]}
-        isFooterLeftAligned
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo