Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new link utilities, icon link helper, and update colored link helpers #37762

Merged
merged 15 commits into from
Jan 4, 2023

Conversation

mdo
Copy link
Member

@mdo mdo commented Dec 29, 2022

Fun update for links in Bootstrap with a few new changes across the project...

New .icon-link helper

This allows you to immediately pair any Bootstrap Icon with a hyperlink and have it spaced, aligned, and styled properly. Includes support for icons before or after the text, and includes a basic hover state. There's opportunity for future hover states here, too. Might make more sense as a component?

CleanShot 2022-12-29 at 12 57 29@2x

Color links are now built with CSS variables

Instead of resetting the color property, we reset the --bs-link-color-rgb values. I've also added a new text-decoration-color property to these helpers that defaults to the current link color in rgb form with --bs-link-underline-opacity as the alpha layer (defaulting to 1). This leads me to the next update...

Introducing several new link utilities

To help modify icon links, colored links, and even regular links, we have new .link-opacity-* to change the alpha transparency, .link-offset-* to change the distance of the underline, .link-underline-* to change the underline color, and .link-underline-opacity-*to change the underline alpha transparency. The link opacity and link underline opacity utilities also have a predefined:hover` variant as well.

CleanShot 2022-12-29 at 12 57 57@2x

CleanShot 2022-12-29 at 12 58 11@2x

CleanShot 2022-12-29 at 12 58 18@2x

CleanShot 2022-12-29 at 12 58 23@2x

CleanShot 2022-12-29 at 12 58 30@2x


As a result, this also removes some other custom .icon-link instances from the features snippet example and homepage.

Live preview

@patrickhlauke
Copy link
Member

For the icon links:

  • suggest doubling up the "Style on hover" to also apply on focus or :focus-visible
  • i'd add a an info/accessibility callout that pretty much replicates what it says on https://icons.getbootstrap.com/#accessibility - and for the examples you have so far, probably safest to add an aria-hidden="true" on the <svg>

@patrickhlauke
Copy link
Member

For the link utilities:

Copy link
Member

@patrickhlauke patrickhlauke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See accessibility-related comments

@mdo
Copy link
Member Author

mdo commented Jan 3, 2023

All done, thanks @patrickhlauke! Just pushed an update to address all that.

site/content/docs/5.3/utilities/link.md Outdated Show resolved Hide resolved
site/content/docs/5.3/helpers/icon-link.md Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants