feat(Button): add cta/large modifier

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

@@ -52,6 +52,8 @@ export interface ButtonProps extends React.HTMLProps<HTMLButtonElement>, OUIAPro
   tabIndex?: number;
   /** Adds small styling to the button */
   isSmall?: boolean;
+  /** Adds large styling to the button */
+  isLarge?: boolean;
 }
 
 export const Button: React.FunctionComponent<ButtonProps> = ({
@@ -63,6 +65,7 @@ export const Button: React.FunctionComponent<ButtonProps> = ({
   isDisabled = false,
   isAriaDisabled = false,
   isSmall = false,
+  isLarge = false,
   inoperableEvents = ['onClick', 'onKeyPress'],
   isInline = false,
   type = ButtonType.button,
@@ -118,6 +121,7 @@ export const Button: React.FunctionComponent<ButtonProps> = ({
         isActive && styles.modifiers.active,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         isSmall && styles.modifiers.small,
+        isLarge && styles.modifiers.displayLg,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

packages/react-core/src/components/Button/__tests__/Button.test.tsx

@@ -45,7 +45,11 @@ test('isAriaDisabled button', () => {
 });
 
 test('isAriaDisabled link button', () => {
-  const view = mount(<Button isAriaDisabled component="a">Disabled yet focusable button</Button>);
+  const view = mount(
+    <Button isAriaDisabled component="a">
+      Disabled yet focusable button
+    </Button>
+  );
   expect(view).toMatchSnapshot();
 });
 
@@ -63,6 +67,11 @@ test('isSmall', () => {
   expect(view).toMatchSnapshot();
 });
 
+test('isLarge', () => {
+  const view = mount(<Button isLarge>Large Button</Button>);
+  expect(view).toMatchSnapshot();
+});
+
 test('allows passing in a string as the component', () => {
   const component = 'a';
   const view = mount(<Button component={component} />);

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

@@ -9,7 +9,7 @@ exports[`aria-disabled is set to true and tabIndex to -1 if component is not a b
     aria-disabled={true}
     aria-label={null}
     className="pf-c-button pf-m-primary pf-m-disabled"
-    data-ouia-component-id={17}
+    data-ouia-component-id={18}
     data-ouia-component-type="PF4/Button"
     data-ouia-safe={true}
     disabled={null}
@@ -167,6 +167,25 @@ exports[`isInline 1`] = `
 </Button>
 `;
 
+exports[`isLarge 1`] = `
+<Button
+  isLarge={true}
+>
+  <button
+    aria-disabled={false}
+    aria-label={null}
+    className="pf-c-button pf-m-primary pf-m-display-lg"
+    data-ouia-component-id={15}
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe={true}
+    disabled={false}
+    type="button"
+  >
+    Large Button
+  </button>
+</Button>
+`;
+
 exports[`isSmall 1`] = `
 <Button
   isSmall={true}

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

@@ -6,7 +6,7 @@ propComponents: ['Button']
 ouia: true
 ---
 
-import { TimesIcon, PlusCircleIcon, ExternalLinkSquareAltIcon, CopyIcon } from '@patternfly/react-icons';
+import { TimesIcon, PlusCircleIcon, ExternalLinkSquareAltIcon, CopyIcon, ArrowRightIcon } from '@patternfly/react-icons';
 
 ## Examples
 
@@ -191,3 +191,20 @@ ButtonSmallVariants = () => (
   </React.Fragment>
 );
 ```
+
+### Call to action
+```js
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { ArrowRightIcon } from '@patternfly/react-icons';
+
+ButtonCTAVariants = () => (
+  <React.Fragment>
+    <Button variant="primary" isLarge>Call to action</Button>{' '}
+    <Button variant="secondary" isLarge>Call to action</Button>{' '}
+    <Button variant="tertiary" isLarge>Call to action</Button>{' '}
+    <Button variant="link" isLarge>Call to action <ArrowRightIcon/></Button>
+    <br /><br />
+  </React.Fragment>
+);
+```

packages/react-integration/cypress/integration/button.spec.ts

@@ -15,6 +15,7 @@ describe('Button Demo Test', () => {
       cy.get('.pf-c-button[id="normal-btn-6"]').should('have.class', 'pf-m-plain');
       cy.get('.pf-c-button[id="normal-btn-7"]').should('have.class', 'pf-m-control');
       cy.get('.pf-c-button[id="normal-btn-12"]').should('have.class', 'pf-m-small');
+      cy.get('.pf-c-button[id="normal-btn-13"]').should('have.class', 'pf-m-display-lg');
     });
   });
 

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

@@ -114,6 +114,9 @@ export class ButtonDemo extends React.Component<ButtonProps, ButtonDemoState> {
         <Button {...this.normalButton} id="normal-btn-12" isSmall>
           Small button
         </Button>
+        <Button {...this.normalButton} id="normal-btn-13" isLarge>
+          Large button
+        </Button>
 
         <Button
           id="aria-disabled-btn-1"