Themed link focus state

[MartijnCuppens]

Fixes #27135.

This PR includes:

• Themed focus state for linked badges (with transiton like the .btns)
• Selector improvement (a.badge instead of .badge[href]) (See Selector improvement linked badge #27219)

Before:

After:

Demo:
https://codepen.io/MartijnCuppens/pen/MqKMZv

[ysds]

My hope is this true opposite. I even want Bootstrap to remove the current hovering background color changes. In other words, I want simpler CSS, since labeling component basically requires more color variations. In some cases, service provider does not decide the color, but the user freely sets the color. e.g:

I'm worried that bootstrap away from flexible design system by adding complex CSS to badges.

[alecpl]

I agree, clickable badges are just buttons. Bootstrap went too far with badges. I also would use badges with my custom colors. Maybe this should be reconsidered.

The focus outline on the Light badge is not visible here.

[ysds]

You can see my opinion in #27149.

[MartijnCuppens]

I understand the concerns, I even didn't knew it was possible to use badges as links until I saw them in the docs. It might indeed be a good idea to remove them in the next major Bootstrap release because of the limited added value. But now that linked badges are available in v4, I think we should keep consistency between the bootstrap components and fix the focus outline.

That being said, if we decide not to apply these themed focus styles, the selector improvement is definitely something we should implement.

@andresgalante, what are your thoughts on this?

[andresgalante]

Hi @MartijnCuppens, I think you have a point about consistency, and I agree with @alecpl, a clickable badge should be a btn.

@patrickhlauke what do you think about changing the focus ring on badges?

@mdo what do you think about rolling down the badge links features in next versions?

+1 for the selector change, if you want, open a new PR with that change so we can track different discussions in different places.

[mdo]

Was going to say we should nix this, but I think the focus improvement is actually a functional improvement for end users. Previously we discussed removing some badge functionality for v5, but I'm fine adding this until that release. Other badge changes will likely be paused though.

[mdo]

Going to hold for v4.2.1 btw.