diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 7b295e5bf11..3db82bb54be 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -52,6 +52,8 @@ export interface ButtonProps extends React.HTMLProps, OUIAPro tabIndex?: number; /** Adds small styling to the button */ isSmall?: boolean; + /** Adds large styling to the button */ + isLarge?: boolean; } export const Button: React.FunctionComponent = ({ @@ -63,6 +65,7 @@ export const Button: React.FunctionComponent = ({ 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 = ({ isActive && styles.modifiers.active, isInline && variant === ButtonVariant.link && styles.modifiers.inline, isSmall && styles.modifiers.small, + isLarge && styles.modifiers.displayLg, className )} disabled={isButtonElement ? isDisabled : null} diff --git a/packages/react-core/src/components/Button/__tests__/Button.test.tsx b/packages/react-core/src/components/Button/__tests__/Button.test.tsx index 8f5cd0c2cde..172a1c27c57 100644 --- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx +++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx @@ -45,7 +45,11 @@ test('isAriaDisabled button', () => { }); test('isAriaDisabled link button', () => { - const view = mount(); + const view = mount( + + ); expect(view).toMatchSnapshot(); }); @@ -63,6 +67,11 @@ test('isSmall', () => { expect(view).toMatchSnapshot(); }); +test('isLarge', () => { + const view = mount(); + expect(view).toMatchSnapshot(); +}); + test('allows passing in a string as the component', () => { const component = 'a'; const view = mount( `; +exports[`isLarge 1`] = ` + + +`; + exports[`isSmall 1`] = ` {' '} + {' '} + {' '} + +

+ +); +``` diff --git a/packages/react-integration/cypress/integration/button.spec.ts b/packages/react-integration/cypress/integration/button.spec.ts index 3756abf222f..13b637f778c 100644 --- a/packages/react-integration/cypress/integration/button.spec.ts +++ b/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'); }); }); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx index 651156876ee..abb4f695177 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx @@ -114,6 +114,9 @@ export class ButtonDemo extends React.Component { +