feat(Button): added circle variant

[thatblindgeye]

Closes #7913

The small variant paired with circle buttons looks like it breaks the small styling and it would also break the large/CTA styling, let me know if we would want small and/or large + circle to have decreased/increased padding respectively

[patternfly-build]

Preview: https://pf-pr-7922.surge.sh

A11y report: https://pf-pr-7922-a11y.surge.sh

[mcoker]

These buttons also need larger icons. We used --pf-t--global--icon--size--font--lg (18px) in the POC. That may be difficult to do using standard spacers and managing to maintain the same size (37x37) unless there is some trick?

A couple of ways I can think of doing it off the top of my head:

• You could scale the __icon element so it's 18px (~1.2857142857). That isn't the best because it has the potential to distort the icon, but it isn't a large scale so IMO it's fine and that would be easy since it won't change the button shape. I'd probably do this.
• You can try adjusting the font-size, then manipulating line-height to match the default/14px line-height to get the height in check, then adjust --pf-v6-c-button--MinWidth so that's based off of the default/14px size, too. This will probably create vertical alignment issues when buttons are side by side (just siblings - not in a flex layout).
• You could opt out of padding on the button and just make the width/height 37px based off of the default button padding and font-size and everything (like width: (padding-top) + (padding-bottom) + 1lh), then use flex or grid on the button to center the icon element and change the font-size of the icon element. I wouldn't do this, it seems fragile, but it's an option.

[thatblindgeye]

@mcoker went the scale route for now, using 1.29 just to keep the value short and it's the closest to 18px (0.06 over, vs 1.28 scale being 0.08 under).

[mcoker]

I don't think --compact is the right padding to use for the inline variants. While it gives you the correct spacer, it may not forever if we update the compact spacer to be something else.

Since the min-width will always make these buttons a square, I might just leave the inline spacers off? Or have them reference the top/bottom spacers? I would probably just remove them since the min-width's role is to make it at least a square.

[mcoker]

💪🤖👍

[patternfly-build]

🎉 This PR is included in version 6.5.0-prerelease.6 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀