diff --git a/packages/react-core/package.json b/packages/react-core/package.json index d26c696fda1..4b83bf814f9 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.8.1" }, "devDependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.3", + "@patternfly/patternfly": "6.5.0-prerelease.9", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.0" diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index dbd8c50c6bb..86b40f66826 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -107,6 +107,8 @@ export interface ButtonProps extends Omit, 'r isHamburger?: boolean; /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */ hamburgerVariant?: 'expand' | 'collapse'; + /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */ + isCircle?: boolean; /** @hide Forwarded ref */ innerRef?: React.Ref; /** Adds count number to button */ @@ -131,6 +133,7 @@ const ButtonBase: React.FunctionComponent = ({ isSettings, isHamburger, hamburgerVariant, + isCircle, spinnerAriaValueText, spinnerAriaLabelledBy, spinnerAriaLabel, @@ -261,6 +264,7 @@ const ButtonBase: React.FunctionComponent = ({ variant === ButtonVariant.stateful && styles.modifiers[state], size === ButtonSize.sm && styles.modifiers.small, size === ButtonSize.lg && styles.modifiers.displayLg, + isCircle && styles.modifiers.circle, 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 e7b2a50c7c5..2c6ec2bf4a6 100644 --- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx +++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx @@ -214,6 +214,11 @@ test(`Renders without class ${styles.modifiers.progress} when isLoading = false expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.progress); }); +test(`Renders with class ${styles.modifiers.circle} when isCircle is true`, () => { + render(); + expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle); +}); + test(`Renders custom icon with class ${styles.modifiers.inProgress} when isLoading = true and icon is present`, () => { render(