Skip to content

PageToggleButton - using isHamburgerButton prop logs console error #11949

@jenny-s51

Description

@jenny-s51

Describe the problem

When the PageToggleButton is used with isHamburgerButton, it logs this console.error message:

Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content.

This happens because PageToggleButton uses the Button component internally and correctly passes the isHamburger prop, but doesn't pass isExpanded with it.

PageToggleButton already manages the expanded state using isSidebarOpen so we just need to internally map that state with isExpanded.

How do you reproduce the problem?

See https://www.patternfly.org/components/page/ and open the dev console to see the console errors.

Expected behavior

No console error when using PageToggleButton with isHamburgerButton.

Component should handle its internal state correctly by mapping isSidebarOpen to the Button's isExpanded prop.

Consumer should not be required to pass isExpanded to PageToggleButton since we already have isSidebarOpen to handle this.

Proposed Fix

Just add this line here:
isExpanded={sidebarOpen}

Is this issue blocking you?
List the workaround if there is one.

Blocking 6.3.0 upgrade in RHOAI Dashboard: opendatahub-io/odh-dashboard#4435

Screenshots
If applicable, add screenshots to help explain the issue.

Image

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?
RHOAI 2.24

Any other information?
None

Metadata

Metadata

Assignees

Type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions