Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Animation: Masthead - Hamburger & Settings icon buttons (React) #11370

Copy link
Copy link
@andrew-ronaldson

Description

@andrew-ronaldson
Issue body actions

Follow up to Design patternfly/patternfly-design#1298
and Core patternfly/patternfly#6601

Core PR is patternfly/patternfly#7260

Notable things:

  • Settings

    • Same thing for button and menu-toggle - adds .pf-v6-c-button.pf-m-settings and .pf-v6-c-menu-toggle.pf-m-settings
    • The animation is just hover/focus, so no further react work needed outside of adding the variants
    • Both take the standard <CogIcon />, which I think we should ship with the variant unless it's overridden. The icon rotates on hover, and the rotation is tuned for <CogIcon />
  • Hamburger

    • Adds .pf-v6-c-button.pf-m-hamburger with .pf-m-expand and .pf-m-collapse variants that enable the arrow and set the arrow direction.
    • Requires a unique SVG with classes and things-n-stuff that differ from what react-icons can deliver currently. The current plan to get that icon in react-icons is to extend createIcon to support the things-n-stuff needed via react-icons - extend createIcon for multi-path & add hamburger icon #11858
    • We probably need some kind of opt-in for <PageToggleButton /> that enables the new fancy button & icon. Core handles all of the arrow/direction stuff for the page toggle, so no need to do anything other than drop in the hamburger button.

Metadata

Metadata

Assignees

Projects

Status

Done
Show more project fields

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    Morty Proxy This is a proxified and sanitized view of the page, visit original site.