v5: Underline links

[mdo]

This PR changes the $link-text-decoration from none to underline to help improve link discovery. It also includes a fix to the docs sidebar to override that for our desired look. I've kind of missed underlines on our links throughout the docs at least, so this feels like a win-win to me.

With the work done in #30262, this also doesn't affect any existing Bootstrap component. All the components you'd expect will nullify the underline thanks to the changes from that PR.

Fixes #15304.

---

Let me know your thoughts @patrickhlauke and @twbs/css-review.

Preview: https://deploy-preview-30389--twbs-bootstrap.netlify.com/

[MartijnCuppens]

The hover text-decorations covered in https://github.com/twbs/bootstrap/pull/30262/files can now be nullified if $link-hover-decoration == null

[XhmikosR]

Should we remove the effect for ToC links?

Generally I can't tell if I like it or not, I guess it takes some time to evaluate this since I was used to no underline.

[MartijnCuppens]

Should we remove the effect for ToC links?

They are going to rethemed anyway: #30354

Generally I can't tell if I like it or not, I guess it takes some time to evaluate this since I was used to no underline.

You'll get used to it. It's way clearer for visually impared people.

[patrickhlauke]

from a cursory glance on the netlify preview...i like it (but yes should be rethemed/suppressed for the TOCs)

[ysds]

I agree with @XhmikosR, but anyway, we have time before the official v5 release, so let's go ahead with this and get feedback from users.

[mdo]

Updated this the other day so it's ready to go I think.

[XhmikosR]

I think we should wait a bit on this. For example, I see text-muted has no visual difference when focusing or hovering. Not sure if it's intentional. Also, there might be more such cases.

[MartijnCuppens]

I've pushed some changes I mentioned in #30389 (comment).

I see text-muted has no visual difference when focusing or hovering.

text-muted shouldn't have a hover state, the colored links should be used for this.

We might need to revisit the color change of hovered links later, since they are always darkened. See

bootstrap/scss/helpers/_colored-links.scss

Line 8 in 81223ee

color: darken($value, $emphasized-link-hover-darken-percentage);

[XhmikosR]

text-muted shouldn't have a hover state, the colored links should be used for this.

We need to fix this in our docs then. I find it wrong that in the homepage, where we use text-muted, there's no focus/hover style.

[patrickhlauke]

I find it wrong that in the homepage, where we use text-muted, there's no focus/hover style.

for focus, we at least have the default outline though, just to clarify.

[patrickhlauke]

not checked all possible variations/edge cases, but this looks good to me from looking over the deploy preview

[XhmikosR]

for focus, we at least have the default outline though, just to clarify.

True, TBH I didn't even notice it :P

Anyway, I'm not blocking the patch :)

[MartijnCuppens]

I'll open a new PR to tackle the hover color of the link on the homepage, we can merge this if all checks succeed (see #30427)

[patrickhlauke]

I'll open a new PR to tackle the hover color of the link on the homepage

be good to check that various situations (are there any more, beyond .text-muted?) are also covered in general

(ah, looking at that PR, i see in THIS case we added .text-muted directly to the link. fair enough, for that the fix is correct there. but yes fundamentally we should probably look at more explicit hover styles for runs of text that is set to .text-muted - and anything similar - that contain links)