feat(Button): add focus outline offset - #7708

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

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

@kmcfaul there will be tokens for focus outlines coming next quarter probably, so the manual size you have works for now.

Just poking around for a little bit, the titles in this card demo no longer show well (before and after below) due to an overflow issue. We can try and address these, but there will probably be issues like this that pop up considering how common the button in all kinds of layouts.

@lboehling this moves the focus outline 2px outside of the button component. WDYT? Given the upcoming focus state changes, is the recommendation still to move the outline outside of the button? #6428 (comment)

Just poking around for a little bit, the titles in this card demo no longer show well (before and after below) due to an overflow issue. We can try and address these, but there will probably be issues like this that pop up considering how common the button in all kinds of layouts.

@lboehling this moves the focus outline 2px outside of the button component. WDYT? Given the upcoming focus state changes, is the recommendation still to move the outline outside of the button? #6428 (comment)

The most recent token update pulled in focus-ring specific design tokens! --pf-t--global--focus-ring--position--offset is set to 2px 👍

There are also global tokens now added for focus-ring--width & focus-ring--color too if we wanted to use those.

@logonoff in #7420, you added overflow: auto; to .pf-v6-c-card__title-text. That's causing an issue with hiding overflow on the title element. Do you remember why that was needed for that fix? I don't see it in the catalog view PR that the fix came from, and AFAIK that isn't needed to break long strings of text using overflow-wrap.

If @logonoff can confirm that style isn't needed, @kmcfaul do you mind also removing overflow: auto from __title-text?

That should fix the outline focus outline being cut off in my comment above.

If @logonoff can confirm that style isn't needed, @kmcfaul do you mind also removing overflow: auto from __title-text?

I don't remember why we needed overflow: auto for that fix, what I can say though is that without the overflow: auto style, the bug still appears to be fixed for regular cards:

However during testing I noticed that the issue still appears for actionable/selectable cards (the card become scrollable instead of wrapping):

But this bug still occurs even with overflow: auto, so I think it's safe to remove 😸

🎉 This PR is included in version 6.3.0-prerelease.50 🎉

The release is available on:

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

Your semantic-release bot 📦🚀