From: Mark Otto <markd.otto@gmail.com>
Date: Mon, 11 May 2020 17:57:29 +0000 (-0700)
Subject: Add new interaction utilities and role attr to Reboot (#30562)
X-Git-Tag: v4.5.0~26
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5d10e4a58ec46fb3c50a47640d0532e3de8923e9;p=thirdparty%2Fbootstrap.git

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 5a9cef8862..5a52b58fc8 100644
--- 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 2fdf9eeb64..22fafe10cc 100644
--- 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
index 0000000000..cc75fc21b7
--- /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 664be04dad..fb53efacd6 100644
--- 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 362c0a980d..90f921b091 100644
--- 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
index 0000000000..25b6baca25
--- /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`.