[v5] Warnings and invalid CSS properties with enabled shadows but set to none

Operating System: Windows 10 Browser: Version 87.0.4280.88 (Official Build) (64-bit)

Compiling the Bootstrap v5.0.0beta1 with enabled shadows, but setting some of variables to none produces warnings followed by setting invalid CSS properties (Example: box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), none;).

Compiler warnings:

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9   box-shadow()
    node_modules\bootstrap\scss\forms\_form-control.scss 40:7  @import
    node_modules\bootstrap\scss\_forms.scss 3:9                @import
    resources\sass\app.scss 23:9                               root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\_buttons.scss 40:7            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\mixins\_buttons.scss 37:7     button-variant()
    node_modules\bootstrap\scss\_buttons.scss 60:5            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\mixins\_buttons.scss 57:9     button-variant()
    node_modules\bootstrap\scss\_buttons.scss 60:5            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\mixins\_buttons.scss 107:9    button-outline-variant()
    node_modules\bootstrap\scss\_buttons.scss 66:5            @import
    resources\sass\app.scss 24:9                              root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9   box-shadow()   
    node_modules\bootstrap\scss\forms\_form-control.scss 40:7  @import        
    node_modules\bootstrap\scss\_forms.scss 3:9                @import        
    resources\sass\app.scss 23:9                               root stylesheet

WARNING: The keyword 'none' must be used as a single argument.
    node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9  box-shadow()
    node_modules\bootstrap\scss\forms\_form-select.scss 30:7  @import     
    node_modules\bootstrap\scss\_forms.scss 4:9               @import     
    resources\sass\app.scss 23:9                              root stylesheet

Then we have tried to detect any of calls to the mixin by doing the following search:

Searching 79 files for "@include box-shadow("

bootstrapv5\node_modules\bootstrap\scss\_button-group.scss:
  101:   @include box-shadow($btn-active-box-shadow);
  105:     @include box-shadow(none);

bootstrapv5\node_modules\bootstrap\scss\_buttons.scss:
   37:     @include box-shadow($btn-active-box-shadow);
   40:       @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
   49:     @include box-shadow(none);

bootstrapv5\node_modules\bootstrap\scss\_dropdown.scss:
   34:   @include box-shadow($dropdown-box-shadow);
  201:   @include box-shadow($dropdown-dark-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\_images.scss:
   19:   @include box-shadow($thumbnail-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\_modal.scss:
   90:   @include box-shadow($modal-content-box-shadow-xs);
  188:     @include box-shadow($modal-content-box-shadow-sm-up);

bootstrapv5\node_modules\bootstrap\scss\_popover.scss:
   18:   @include box-shadow($popover-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\_progress.scss:
   15:   @include box-shadow($progress-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\forms\_form-control.scss:
   22:   @include box-shadow($input-box-shadow);
   40:       @include box-shadow($input-box-shadow, $input-focus-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\forms\_form-range.scss:
   34:     @include box-shadow($form-range-thumb-box-shadow);
   51:     @include box-shadow($form-range-track-box-shadow);
   60:     @include box-shadow($form-range-thumb-box-shadow);
   77:     @include box-shadow($form-range-track-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\forms\_form-select.scss:
   23:   @include box-shadow($form-select-box-shadow);
   30:       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);

bootstrapv5\node_modules\bootstrap\scss\mixins\_buttons.scss:
   23:   @include box-shadow($btn-box-shadow);
   37:       @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
   57:         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
  107:         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));

24 matches across 11 files

From the results, we can see the following variables can not be set to none:

$input-box-shadow: none;
$input-focus-box-shadow: none;

$btn-box-shadow: none;
$btn-focus-box-shadow: none;
$btn-active-box-shadow: none;

$form-select-box-shadow: none;
$form-select-focus-box-shadow: none;

Please, can you confirm the same behavior?

[TomONeill]

There is a change in behaviour though between none and null. none makes sure you’ll not see it again, but causes invalid css. null makes it so that the :active:focus css with box-shadow is still rendered.

I understand that we should be using null, but I feel like the mentioned behaviour shouldn’t be the case. Can you shed some light on that, @ffoodd?

Maybe introduce variables $input-active-focus-box-shadow and $btn-active-focus-box-shadow?

[voltaek]

I can see what you’re saying about not knowing what value to set them to when attempting to disable them. I think the core issue here is that - as far as I can tell - the variables you mentioned all relate to form element interaction and were never designed to be fully disabled. Doing so would cause interacting with form elements to be confusing due to a lack of feedback when interacting with them since the framework has no built-in “fallback” feedback in place.

I think the best way to alleviate this would be some comments near the variable definitions to warn to not disable them, or at least if they are disabled that a custom replacement is required in order to not negatively affect form element interactions.