Link helpers & use utility API for all utilities

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index ca57c9babb34dbf3ba9d064dc131bb66146d479d..06d931449fc6fa94d713446223d5708a3f10a6f0 100644 (file)
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -1,7 +1,8 @@
 @import "helpers/background";
 @import "helpers/clearfix";
+@import "helpers/colored-links";
 @import "helpers/embed";
 @import "helpers/position";
 @import "helpers/screenreaders";
 @import "helpers/stretched-link";
-@import "helpers/text";
+@import "helpers/text-truncation";

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index aac26155feddac5ab15222ca97cf29ea18306a09..b4b0ee763415aaf03ed1f1fe56465cc0689a1f4a 100644 (file)
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -14,7 +14,6 @@
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/reset-text";
-@import "mixins/text-emphasis";
 @import "mixins/text-truncate";
 
 // Utilities

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 35a67d3fd38f9fd53047597a4d2bc22f4b967b5b..823000c035bb6343c0bfdcfd754beb7b301d6c9b 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -91,6 +91,21 @@ $utilities: map-merge(
         auto: auto
       )
     ),
+    "max-width": (
+      property: max-width,
+      class: mw,
+      values: (100: 100%)
+    ),
+    "viewport-width": (
+      property: width,
+      class: vw,
+      values: (100: 100vw)
+    ),
+    "min-viewport-width": (
+      property: min-width,
+      class: min-vw,
+      values: (100: 100vw)
+    ),
     "height": (
       property: height,
       class: h,
@@ -102,6 +117,21 @@ $utilities: map-merge(
         auto: auto
       )
     ),
+    "max-height": (
+      property: max-height,
+      class: mh,
+      values: (100: 100%)
+    ),
+    "viewport-height": (
+      property: height,
+      class: vh,
+      values: (100: 100vh)
+    ),
+    "min-viewport-height": (
+      property: min-height,
+      class: min-vh,
+      values: (100: 100vh)
+    ),
     // Flex utilities
     "flex": (
       responsive: true,
@@ -352,13 +382,16 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
-      values: (
-        white: $white,
-        body: $body-color,
-        muted: $text-muted,
-        black-50: rgba($black, .5),
-        white-50: rgba($white, .5),
-        reset: inherit,
+      values: map-merge(
+        $theme-colors,
+        (
+          white: $white,
+          body: $body-color,
+          muted: $text-muted,
+          black-50: rgba($black, .5),
+          white-50: rgba($white, .5),
+          reset: inherit,
+        )
       )
     ),
     "background-color": (
@@ -431,6 +464,14 @@ $utilities: map-merge(
       class: rounded-left,
       values: (null: $border-radius)
     ),
+    "visibility": (
+      property: visibility,
+      class: null,
+      values: (
+        visible: visible,
+        invisible: hidden,
+      )
+    )
   ),
   $utilities
 );

diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss
index 031897ff0d7e5aee3fafb16b17a92fae3e0316c4..8fc81b9dd48df1211e8d78e2d1a63b6d296f778b 100644 (file)
--- a/scss/bootstrap-utilities.scss
+++ b/scss/bootstrap-utilities.scss
@@ -16,6 +16,3 @@
 // Utilities
 
 @import "utilities/api";
-@import "utilities/sizing";
-@import "utilities/text";
-@import "utilities/visibility";

diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 84745b5d19ee1eb89839e6e1f70d5568fda09078..7138211c48d47ceb1ae6a14c026bf233f0d08966 100644 (file)
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -52,6 +52,3 @@
 // Utilities
 
 @import "utilities/api";
-@import "utilities/sizing";
-@import "utilities/text";
-@import "utilities/visibility";

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
new file mode 100644 (file)
index 0000000..4eea8d3
--- /dev/null
+++ b/scss/helpers/_colored-links.scss
@@ -0,0 +1,12 @@
+@each $color, $value in $theme-colors {
+  .link-#{$color} {
+    color: $value;
+
+    @if $emphasized-link-hover-darken-percentage != 0 {
+      &:hover,
+      &:focus {
+        color: darken($value, $emphasized-link-hover-darken-percentage);
+      }
+    }
+  }
+}

diff --git a/scss/helpers/_text.scss b/scss/helpers/_text-truncation.scss
similarity index 73%
rename from scss/helpers/_text.scss
rename to scss/helpers/_text-truncation.scss
index 3c2dbbd1d0736f959be55801c3bbd2c42fc22ba5..6421dac9a85271cba3f65b5e7116c7fd907b9e72 100644 (file)
--- a/scss/helpers/_text.scss
+++ b/scss/helpers/_text-truncation.scss
@@ -1,5 +1,5 @@
 //
-// Text
+// Text truncation
 //
 
 .text-truncate {

diff --git a/scss/mixins/_text-emphasis.scss b/scss/mixins/_text-emphasis.scss
deleted file mode 100644 (file)
index 4c68bae..0000000
--- a/scss/mixins/_text-emphasis.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Typography
-
-@mixin text-emphasis-variant($parent, $color) {
-  #{$parent} {
-    color: $color !important;
-  }
-  @if $emphasized-link-hover-darken-percentage != 0 {
-    a#{$parent} {
-      &:hover,
-      &:focus {
-        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
-      }
-    }
-  }
-}

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index b5901a7dd7446d36bba9e9a296acf399bf1bbd72..4604ef537ab2867f5f2f0a4159e15310920ef8f5 100644 (file)
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -17,11 +17,13 @@
     }
 
     // Use custom class if present
-    $property-class: map-get($utility, class);
-    $property-class: if($property-class, $property-class, nth($properties, 1));
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+
+    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (eg. with shadow class)
-    $property-class-modifier: if($key, "-" + $key, "");
+    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
     .#{$property-class + $infix + $property-class-modifier} {
       @each $property in $properties {

diff --git a/scss/utilities/_sizing.scss b/scss/utilities/_sizing.scss
deleted file mode 100644 (file)
index cc34621..0000000
--- a/scss/utilities/_sizing.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// stylelint-disable declaration-no-important
-
-.mw-100 { max-width: 100% !important; }
-.mh-100 { max-height: 100% !important; }
-
-// Viewport additional helpers
-
-.min-vw-100 { min-width: 100vw !important; }
-.min-vh-100 { min-height: 100vh !important; }
-
-.vw-100 { width: 100vw !important; }
-.vh-100 { height: 100vh !important; }

diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
deleted file mode 100644 (file)
index ba775ee..0000000
--- a/scss/utilities/_text.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// Text
-//
-
-@each $color, $value in $theme-colors {
-  @include text-emphasis-variant(".text-#{$color}", $value);
-}

diff --git a/scss/utilities/_visibility.scss b/scss/utilities/_visibility.scss
deleted file mode 100644 (file)
index 7756c3b..0000000
--- a/scss/utilities/_visibility.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// stylelint-disable declaration-no-important
-
-//
-// Visibility utilities
-//
-
-.visible {
-  visibility: visible !important;
-}
-
-.invisible {
-  visibility: hidden !important;
-}

diff --git a/site/content/docs/4.3/helpers/colored-links.md b/site/content/docs/4.3/helpers/colored-links.md
new file mode 100644 (file)
index 0000000..f75cae4
--- /dev/null
+++ b/site/content/docs/4.3/helpers/colored-links.md
@@ -0,0 +1,17 @@
+---
+layout: docs
+title: Colored links
+description: Colored links with hover states
+group: helpers
+toc: false
+---
+
+You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state.
+
+{{< example >}}
+{{< colored-links.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a>
+{{- end -}}
+{{< /colored-links.inline >}}
+{{< /example >}}

diff --git a/site/content/docs/4.3/helpers/text-truncation.md b/site/content/docs/4.3/helpers/text-truncation.md
index 466bb1c460753306d0da5f27d843c676aa23ddee..a92a171fd15cb755d57327b0f642acbdbfe5ba98 100644 (file)
--- a/site/content/docs/4.3/helpers/text-truncation.md
+++ b/site/content/docs/4.3/helpers/text-truncation.md
@@ -3,11 +3,9 @@ layout: docs
 title: Text truncation
 description: Truncate long strings of text with an ellipsis.
 group: helpers
-toc: true
+toc: false
 ---
 
-## Text truncation
-
 For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
 
 {{< example >}}

diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index b530421b6816b8adb6700ca7863dab35da460277..c550b69b7e47e88aa5b3c09ede3484ef37f01a48 100644 (file)
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -60,6 +60,7 @@ Changes to Reboot, typography, tables, and more.
 - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
 - Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
 - Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
+- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
 
 ## Forms
 

diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/4.3/utilities/colors.md
index 13b204d41f021e40b1e301b1ce8af520f7342791..62a35b059ca584db743b6acbd3ebdfd53e99c742 100644 (file)
--- a/site/content/docs/4.3/utilities/colors.md
+++ b/site/content/docs/4.3/utilities/colors.md
@@ -8,6 +8,8 @@ toc: true
 
 ## Color
 
+Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
+
 {{< example >}}
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -21,18 +23,6 @@ toc: true
 <p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
 
-Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` and `.text-muted` class has no additional link styling beyond underline.**
-
-{{< example >}}
-{{< colors.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<p><a href="#" class="text-{{ .name }}{{ if eq .name "light" }} bg-dark{{ end }}">{{ .name | title }} link</a></p>
-{{- end -}}
-{{< /colors.inline >}}
-<p><a href="#" class="text-muted">Muted link</a></p>
-<p><a href="#" class="text-white bg-dark">White link</a></p>
-{{< /example >}}
-
 ## Background color
 
 Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.

diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 205b95d7a35b231667135fe71fcd78388dd85f2d..a09fdbd506f202e9e16d0de15ee0d806d5ad9e23 100644 (file)
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -67,11 +67,12 @@
 - title: Helpers
   pages:
     - title: Clearfix
+    - title: Colored links
     - title: Embed
     - title: Position
     - title: Screen readers
     - title: Stretched link
-    # - title: Text
+    - title: Text truncation
 
 - title: Utilities
   pages:

diff --git a/site/static/docs/4.3/assets/scss/_subnav.scss b/site/static/docs/4.3/assets/scss/_subnav.scss
index b82107ee97e75f7df848cef7eca7f5161b9d9eff..0ba1f11ae74a93ab5ecf2aec232b25cdeccc91b1 100644 (file)
--- a/site/static/docs/4.3/assets/scss/_subnav.scss
+++ b/site/static/docs/4.3/assets/scss/_subnav.scss
@@ -49,14 +49,3 @@
   line-height: 1;
   color: $gray-900;
 }
-
-.link-dark {
-  font-weight: 500;
-  color: $dark;
-
-  &:hover,
-  &:focus {
-    color: $blue;
-    text-decoration: none;
-  }
-}