Skip to content

Button - add favorite variant #11809

@mcoker

Description

@mcoker

Main core PR - patternfly/patternfly#7379
Animate between filled/unfilled icon PR - patternfly/patternfly#7492

TL;DR:

  • Adds .pf-m-favorite as the class that always needs to be on a favorite button
  • Adds .pf-m-favorited that toggles a .pf-m-favorite button between favorited/not-favorited
  • Inside of the button__icon container, adds 2 new elements that both need to be rendered at the same time. CSS hides/shows the correct icon.
    • button__icon-favorite - this will hold <OutlinedStarIcon>, for the non-favorited state
    • button__icon-favorited - this will hold <StarIcon>, for the favorited state

Toggling .pf-m-favorited sets the appropriate colors and swaps the visibility of the star and outlined star icons

@andrew-ronaldson @srambach are there any limitations to which kind of button this should apply to? Technically it could apply to any button, though there may be color contrast issues if the button doesn't have a transparent background - so all buttons except primary, warning, and danger. Or is this only intended to be used with plain buttons?

Metadata

Metadata

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions