Add new interaction utilities and role attr to Reboot (#30562)

- Adds .user-select-* utils from v5
- Adds button role attribute util, one of the top requested features in our issues for adding pointer cursors
- Adds new docs page to demonstrate both
- Includes Sass list for customizing user select

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 5a9cef886270a708469e752752829edf0f80ae5c..5a52b58fc8924356ef53251f4c879dbd6e2b253e 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -333,6 +333,13 @@ select {
   text-transform: none; // Remove the inheritance of text transform in Firefox
 }
 
+// Set the cursor for non-`<button>` buttons
+//
+// Details at https://github.com/twbs/bootstrap/pull/30562
+[role="button"] {
+  cursor: pointer;
+}
+
 // Remove the inheritance of word-wrap in Safari.
 //
 // Details at https://github.com/twbs/bootstrap/issues/24990

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2fdf9eeb6454f98cfe10e13f9392316fe1a066c4..22fafe10cc3aa9530a655eefc965786395cf7420 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1138,6 +1138,7 @@ $pre-scrollable-max-height:         340px !default;
 $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
 $overflows: auto, hidden !default;
 $positions: static, relative, absolute, fixed, sticky !default;
+$user-selects: all, auto, none !default;
 
 
 // Printing

diff --git a/scss/utilities/_interactions.scss b/scss/utilities/_interactions.scss
new file mode 100644 (file)
index 0000000..cc75fc2
--- /dev/null
+++ b/scss/utilities/_interactions.scss
@@ -0,0 +1,5 @@
+// stylelint-disable declaration-no-important
+
+@each $value in $user-selects {
+  .user-select-#{$value} { user-select: $value !important; }
+}

diff --git a/site/_data/nav.yml b/site/_data/nav.yml
index 664be04dad1eef76342f88f8fe1e418bddaf2d8c..fb53efacd63a00656ee422467e5779aa97edc86e 100644 (file)
--- a/site/_data/nav.yml
+++ b/site/_data/nav.yml
@@ -64,6 +64,7 @@
     - title: Flex
     - title: Float
     - title: Image replacement
+    - title: Interactions
     - title: Overflow
     - title: Position
     - title: Screen readers

diff --git a/site/docs/4.4/content/reboot.md b/site/docs/4.4/content/reboot.md
index 362c0a980d66ecc9e31d0cd5113fd2839f9f2cc6..90f921b091df5dc1856238a0fdd14e2aa300dc00 100644 (file)
--- a/site/docs/4.4/content/reboot.md
+++ b/site/docs/4.4/content/reboot.md
@@ -298,6 +298,15 @@ These changes, and more, are demonstrated below.
   </fieldset>
 </form>
 
+### Pointers on buttons
+
+Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which gets it's own `cursor` change.
+
+{% capture example %}
+<span role="button">Non-button element button</span>
+{% endcapture %}
+{% include example.html content=example %}
+
 ## Misc elements
 
 ### Address

diff --git a/site/docs/4.4/utilities/interactions.md b/site/docs/4.4/utilities/interactions.md
new file mode 100644 (file)
index 0000000..25b6bac
--- /dev/null
+++ b/site/docs/4.4/utilities/interactions.md
@@ -0,0 +1,19 @@
+---
+layout: docs
+title: Interactions
+description: Utility classes that change how users interact with contents of a website.
+group: utilities
+---
+
+## Text selection
+
+Change the way in which the content is selected when the user interacts with it.
+
+{% capture example %}
+<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
+<p class="user-select-auto">This paragraph has the default select behavior.</p>
+<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
+{% endcapture %}
+{% include example.html content=example %}
+
+Customize the available classes by changing the `$user-selects` Sass list in `_variables.scss`.