diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7593821872c..5dad1562844 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.6.0-prerelease.49", + "@patternfly/patternfly": "6.6.0-prerelease.50", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.3" diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 46d903f15a0..0936d552439 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -99,7 +99,7 @@ export interface ButtonProps extends Omit, 'r tabIndex?: number; /** Adds danger styling to secondary or link button variants */ isDanger?: boolean; - /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. */ + /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. Applies additional expanded styling when isDocked is true. */ isExpanded?: boolean; /** Flag indicating the button is a settings button. This will override the icon property. */ isSettings?: boolean; @@ -111,8 +111,6 @@ export interface ButtonProps extends Omit, 'r isCircle?: boolean; /** @beta Flag indicating the button is a docked variant button. For use in docked navigation. */ isDocked?: boolean; - /** @beta Flag indicating the docked button should display text. Only applies when isDocked is true. */ - isTextExpanded?: boolean; /** @hide Forwarded ref */ innerRef?: React.Ref; /** Adds count number to button */ @@ -139,7 +137,6 @@ const ButtonBase: React.FunctionComponent = ({ hamburgerVariant, isCircle, isDocked = false, - isTextExpanded = false, spinnerAriaValueText, spinnerAriaLabelledBy, spinnerAriaLabel, @@ -272,7 +269,7 @@ const ButtonBase: React.FunctionComponent = ({ size === ButtonSize.lg && styles.modifiers.displayLg, isCircle && styles.modifiers.circle, isDocked && styles.modifiers.docked, - isDocked && isTextExpanded && styles.modifiers.textExpanded, + isDocked && isExpanded && styles.modifiers.expanded, 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 94c3f8bf5f8..d82f27b00aa 100644 --- a/packages/react-core/src/components/Button/__tests__/Button.test.tsx +++ b/packages/react-core/src/components/Button/__tests__/Button.test.tsx @@ -566,34 +566,23 @@ describe('Dock variant', () => { expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.docked); }); - test(`Renders with class ${styles.modifiers.textExpanded} when isTextExpanded = true and isDocked = true`, () => { + test(`Renders with class ${styles.modifiers.expanded} when isExpanded = true and isDocked = true`, () => { render( - ); - expect(screen.getByRole('button')).toHaveClass(styles.modifiers.textExpanded); + expect(screen.getByRole('button')).toHaveClass(styles.modifiers.expanded); }); - test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded is not passed`, () => { + test(`Does not render with class ${styles.modifiers.expanded} when isExpanded is not passed`, () => { render(); - expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded); + expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded); }); - test(`Does not render with class ${styles.modifiers.textExpanded} when isTextExpanded = true but isDocked is not passed`, () => { - render(); - expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.textExpanded); - }); - - test(`Renders with both ${styles.modifiers.docked} and ${styles.modifiers.textExpanded} when both props are true`, () => { - render( - - ); - const button = screen.getByRole('button'); - expect(button).toHaveClass(styles.modifiers.docked); - expect(button).toHaveClass(styles.modifiers.textExpanded); + test(`Does not render with class ${styles.modifiers.expanded} when isExpanded = true but isDocked is not passed`, () => { + render(); + expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.expanded); }); }); 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 eb99ad0e5ec..93099d8a596 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 @@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = ` @@ -464,7 +447,7 @@ export const CompassDockDemo: React.FunctionComponent = () => { )} - {isDockTextExpanded || isDockExpanded ? ( + {isDockExpanded ? ( { masthead={mobileMasthead} dock={dockContent} isDockExpanded={isDockExpanded} - isDockExpandableExpanded={isDockExpandableExpanded} - isDockTextExpanded={isDockTextExpanded} + isDockOverlay={isDockOverlay} main={mainContent} backgroundSrcDark="/assets/images/pf-background.svg" backgroundSrcLight="/assets/images/pf-background.svg" diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md index f4ef0ec3185..68999f2013e 100644 --- a/packages/react-core/src/demos/Nav.md +++ b/packages/react-core/src/demos/Nav.md @@ -87,15 +87,15 @@ To save space in the UI, you can use docked navigation to replace text-labeled n This demo includes the following features: -1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the mobile overlay with `isDockExpanded` and the desktop label visibility with `isDockTextExpanded`. +1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the expanded state of the dock with `isDockExpanded` and the set whether the dock is an overlay with `isDockOverlay`. The expanded docked nav is automatically an overlay in mobile. 2. Two separate [masthead](/components/masthead) components: - **Horizontal mobile masthead**: Shown on small viewports using `display={{ default: 'inline' }}`, with a hamburger menu toggle button, brand logo, and action buttons that should be immediately visible to users. - **Vertical docked masthead**: Uses `variant="docked"` to create a thinner navigation sidebar with a hamburger menu toggle button, nav items, and action buttons. -3. A [navigation](/components/navigation) component with `variant="docked"` and multiple `` components that must include both icons and text labels. To control text visibility, `isTextExpanded={isDockTextExpanded}` is passed to the `