patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

Menu toggle - better support for avatar as icon

Open mcoker opened this issue 1 year ago • 3 comments

For v6, menu toggles with avatars should use a small avatar size and maintain the standard "form control" height (same height as buttons, text inputs, other menu toggles, etc). However, when a small avatar is passed as the icon of a menu toggle, the toggle is too tall. To address this, we added the modifier class .pf-m-avatar for .pf-v6-c-menu-toggle__icon in core, which corrects the menu toggle height. Technically it just allows for an oversized icon to be passed to a menu toggle without changing the menu toggle's height.

Looks like there are a couple of updates to make around this:

  • When an avatar is used, add .pf-m-avatar to .pf-v6-c-menu-toggle__icon. I suspect this would be best as a prop that a user passes to their <MenuToggle />?
  • Update the menu toggle w/ avatar examples and any menu toggles in mastheads in demos/examples.

mcoker avatar Jan 27 '25 22:01 mcoker