box-shadow() mixin allow 'null' and drop support 'none' with multiple args (#30394)

* Support 'null' and drop `none` with multiple args

* Output a warning when use 'none' with multiple arguments

* Add migration note

* Update migration.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
index 0726d4359a8f30eef0d0ca097a17994456343675..4172541f3fe5b539778a05ee99ec9e26616a7ca6 100644 (file)
--- a/scss/mixins/_box-shadow.scss
+++ b/scss/mixins/_box-shadow.scss
@@ -2,17 +2,15 @@
   @if $enable-shadows {
     $result: ();
 
-    @if (length($shadow) == 1) {
-      // We can pass `@include box-shadow(none);`
-      $result: $shadow;
-    } @else {
-      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
-      @for $i from 1 through length($shadow) {
-        @if nth($shadow, $i) != "none" {
-          $result: append($result, nth($shadow, $i), "comma");
-        }
+    @each $value in $shadow {
+      @if $value != null {
+        $result: append($result, $value, "comma");
+      }
+      @if $value == none and length($shadow) > 1 {
+        @warn "The keyword 'none' must be used as a single argument.";
       }
     }
+
     @if (length($result) > 0) {
       box-shadow: $result;
     }

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 75108d3ca7a2c7ebbc68636ee9779ee2291d85b0..afb320fae163ff703968e118a7ba8b50a94e7324 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -110,6 +110,7 @@ Changes to our source Sass files and compiled CSS.
 - The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes.
 - The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
 - The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
+- The `box-shadow()` mixin now better supports `none` and `null` with multiple arguments. Now you can pass multiple arguements with either value, and get the expected output. [See #30394](https://github.com/twbs/bootstrap/pull/30394).
 
 ### JavaScript