Mention pointer-events usage

MartijnCuppens · MartijnCuppens · commit 836d06d65538 · 2019-08-29T21:18:33.000+02:00
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
@@ -28,18 +28,6 @@
     }
   }
 
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    color: color-yiq($background);
-    background-color: $background;
-    border-color: $border;
-    // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
-  }
-
   &:active,
   &.active,
   .show > &.dropdown-toggle {
@@ -59,6 +47,17 @@
       }
     }
   }
+
+  &.disabled,
+  &:disabled {
+    color: color-yiq($background);
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
 }
 
 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
@@ -76,12 +75,6 @@
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }
 
-  &.disabled,
-  &:disabled {
-    color: $color;
-    background-color: transparent;
-  }
-
   &:active,
   &.active,
   .show > &.dropdown-toggle {
@@ -98,6 +91,12 @@
       }
     }
   }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
 }
 
 // Button sizes
diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md
@@ -82,7 +82,7 @@ Buttons will appear pressed (with a darker background, darker border, and inset
 
 ## Disabled state
 
-Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.
+Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
 
 {{< example >}}
 <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
diff --git a/site/content/docs/4.3/components/close-icon.md b/site/content/docs/4.3/components/close-icon.md
@@ -5,10 +5,14 @@ description: Use a generic close icon for dismissing content like modals and ale
 group: components
 ---
 
-**Be sure to include text for screen readers**, as we've done with `aria-label`.
+**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
 
 {{< example >}}
 <button type="button" class="close" aria-label="Close">
   <span aria-hidden="true">&times;</span>
 </button>
+
+<button type="button" class="close" disabled aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+</button>
 {{< /example >}}
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
@@ -86,6 +86,10 @@ Changes to Reboot, typography, tables, and more.
 
 ## Components
 
+### Disabled states
+
+- Disabled states of the buttons, close button, pagination link & form range now have `pointer-events: none` added. This simplifies our codebase and makes it easier to override active states in CSS. [#29296](https://github.com/twbs/bootstrap/pull/29296).
+
 ### Alerts
 
 - **Todo:** Remove auto-darkening of `<hr>` elements in `.alert-*` class variants. `<hr>`s use `rgba()` for their color, so these should naturally blend anyway.

Original file line number	Diff line number	Diff line change
`@@ -28,18 +28,6 @@`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
`31`		`- // Disabled comes first so active can properly restyle`
`32`		`- &.disabled,`
`33`		`- &:disabled {`
`34`		`- color: color-yiq($background);`
`35`		`- background-color: $background;`
`36`		`- border-color: $border;`
`37`		`- // Remove CSS gradients if they're enabled`
`38`		`- @if $enable-gradients {`
`39`		`- background-image: none;`
`40`		`- }`
`41`		`- }`
`42`		`-`
`43`	`31`	`&:active,`
`44`	`32`	`&.active,`
`45`	`33`	`.show > &.dropdown-toggle {`
`@@ -59,6 +47,17 @@`
`59`	`47`	`}`
`60`	`48`	`}`
`61`	`49`	`}`
	`50`	`+`
	`51`	`+ &.disabled,`
	`52`	`+ &:disabled {`
	`53`	`+ color: color-yiq($background);`
	`54`	`+ background-color: $background;`
	`55`	`+ border-color: $border;`
	`56`	`+ // Remove CSS gradients if they're enabled`
	`57`	`+ @if $enable-gradients {`
	`58`	`+ background-image: none;`
	`59`	`+ }`
	`60`	`+ }`
`62`	`61`	`}`
`63`	`62`
`64`	`63`	`@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {`
`@@ -76,12 +75,6 @@`
`76`	`75`	`box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);`
`77`	`76`	`}`
`78`	`77`
`79`		`- &.disabled,`
`80`		`- &:disabled {`
`81`		`- color: $color;`
`82`		`- background-color: transparent;`
`83`		`- }`
`84`		`-`
`85`	`78`	`&:active,`
`86`	`79`	`&.active,`
`87`	`80`	`.show > &.dropdown-toggle {`
`@@ -98,6 +91,12 @@`
`98`	`91`	`}`
`99`	`92`	`}`
`100`	`93`	`}`
	`94`	`+`
	`95`	`+ &.disabled,`
	`96`	`+ &:disabled {`
	`97`	`+ color: $color;`
	`98`	`+ background-color: transparent;`
	`99`	`+ }`
`101`	`100`	`}`
`102`	`101`
`103`	`102`	`// Button sizes`