Add 'no-underline' mixin and modifier class for links

[36degrees]

Related component

Add 'no-underline' mixin and modifier class for links.

Context

With the new link styles and hover states being introduced in #2183, there's a little extra complexity where underlines are removed from links.

This is because users will often achieve this by setting text-decoration: none, like this:

.app-link-without-underline:link {
  text-decoration: none;
}

.app-link-without-underline:hover {
  text-decoration: underline;
}

(For example, we've done this ourselves for links in the Design System that do not have underlines)

Because text-decoration is a shorthand property, setting it to none sets all unspecified values back to their initial value. This means that text-decoration-thickness gets set back to auto and as a result when hovered the underline that appears is not thicker like it is on other links – at least for browsers that include text-decoration-thickness in the shorthand property, which I think is every browser that supports text-decoration-thickness except Safari.

Instead, we need to just set the 'longhand' text-decoration-line property – and then also take care of the focus style:

.app-link-without-underline:link {
  text-decoration-line: none;
}

.app-link-without-underline:hover {
  text-decoration-line: underline;
}

.app-link-without-underline:focus {
  text-decoration: none;
}

EDIT: ^ that approach doesn't work in IE11, but instead we can do:

  &:not(:hover):not(:active) {
    text-decoration: none;
  }

Given this is quite nuanced, it would make sense to provide a mixin and a modifier class that handles this for the user. We should also document the new class with an example in the Design System – probably under 'Links without underlines'.

Alternatives

We could rely on users implementing this themselves, but it seems likely for example ensuring the correct underline thickness and ensuring the focus state are correct might be missed.