diff --git a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx index aba7a806b29..635f36d8524 100644 --- a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx +++ b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx @@ -98,7 +98,7 @@ export const AccordionBordered: React.FunctionComponent = () => { Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros. - diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index e3013421b37..7cfdb8fe470 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -22,6 +22,12 @@ export enum ButtonType { reset = 'reset' } +export enum ButtonSize { + default = 'default', + sm = 'sm', + lg = 'lg' +} + export interface BadgeCountObject { /** Adds styling to the badge to indicate it has been read */ isRead?: boolean; @@ -31,7 +37,7 @@ export interface BadgeCountObject { className?: string; } -export interface ButtonProps extends Omit, 'ref'>, OUIAProps { +export interface ButtonProps extends Omit, 'ref' | 'size'>, OUIAProps { /** Content rendered inside the button */ children?: React.ReactNode; /** Additional classes added to the button */ @@ -58,6 +64,8 @@ export interface ButtonProps extends Omit, 'r inoperableEvents?: string[]; /** Adds inline styling to a link button */ isInline?: boolean; + /** Adds styling which affects the size of the button */ + size?: 'default' | 'sm' | 'lg'; /** Sets button type */ type?: 'button' | 'submit' | 'reset'; /** Adds button variant styles */ @@ -70,10 +78,6 @@ export interface ButtonProps extends Omit, 'r icon?: React.ReactNode | null; /** Sets the button tabindex. */ tabIndex?: number; - /** Adds small styling to the button */ - isSmall?: boolean; - /** Adds large styling to the button */ - isLarge?: boolean; /** Adds danger styling to secondary or link button variants */ isDanger?: boolean; /** Forwarded ref */ @@ -99,8 +103,7 @@ const ButtonBase: React.FunctionComponent = ({ spinnerAriaValueText, spinnerAriaLabelledBy, spinnerAriaLabel, - isSmall = false, - isLarge = false, + size = ButtonSize.default, inoperableEvents = ['onClick', 'onKeyPress'], isInline = false, type = ButtonType.button, @@ -157,8 +160,8 @@ const ButtonBase: React.FunctionComponent = ({ isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger, isLoading !== null && children !== null && styles.modifiers.progress, isLoading && styles.modifiers.inProgress, - isSmall && styles.modifiers.small, - isLarge && styles.modifiers.displayLg, + size === ButtonSize.sm && styles.modifiers.small, + size === ButtonSize.lg && 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 b8d19a3472e..7625dd1890c 100644 --- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx +++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx @@ -84,13 +84,13 @@ describe('Button', () => { expect(asFragment()).toMatchSnapshot(); }); - test('isSmall', () => { - const { asFragment } = render(); + test('size small', () => { + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); - test('isLarge', () => { - const { asFragment } = render(); + test('size large', () => { + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 29332d1d569..e21b606d3ca 100644 --- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -152,21 +152,6 @@ exports[`Button isInline 1`] = ` `; -exports[`Button isLarge 1`] = ` - - - -`; - exports[`Button isLoading 1`] = ` - -`; - exports[`Button link button 1`] = ` + +`; + +exports[`Button size small 1`] = ` + + + +`; + exports[`Button tertiary button 1`] = ` {' '} - {' '} - {' '} -
diff --git a/packages/react-core/src/components/Button/examples/ButtonSmall.tsx b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx index 9e32fe99e65..b4a1d30c048 100644 --- a/packages/react-core/src/components/Button/examples/ButtonSmall.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx @@ -3,19 +3,19 @@ import { Button } from '@patternfly/react-core'; export const ButtonSmall: React.FunctionComponent = () => ( - {' '} - {' '} - {' '} - {' '} -
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 43367da1580..1c7e6db4336 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 @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, ButtonProps, Tooltip } from '@patternfly/react-core'; +import { Button, ButtonProps, ButtonSize, Tooltip } from '@patternfly/react-core'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import '@patternfly/react-styles/css/utilities/Spacing/spacing.css'; @@ -121,10 +121,10 @@ export class ButtonDemo extends React.Component { Aria-disabled with tooltip - -