fix(dropdown): several rendering fixes (#1164)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Dec 28, 2022 · b080e66 · b080e66
1 parent 3352d21
commit b080e66
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 125 deletions.
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -71,7 +71,7 @@ const Default = {
   autoClose: true,
   boundary: 'clippingParents',
   display: 'dynamic',
-  offset: [0, 2],
+  offset: [0, 0], // Boosted mod
   popperConfig: null,
   reference: 'toggle'
 }

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -20,6 +20,12 @@
   > .btn.active {
     z-index: 1;
   }
+
+  // Boosted mod
+  &:focus-within {
+    z-index: 1;
+  }
+  // End mod
 }
 
 // Optional: Group multiple button groups together for a toolbar
@@ -74,88 +80,50 @@
 
 .dropdown-toggle-split {
   min-width: $dropdown-padding-x * 2 + $caret-width * 2; // Boosted mod
-  padding-right: subtract($dropdown-padding-x, $border-width);
-  padding-left: subtract($dropdown-padding-x, $border-width);
-  border-color: $black;
+  padding-right: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
+  padding-left: subtract($dropdown-padding-x, $btn-border-width); // Boosted mod
+  border-color: currentcolor; // Boosted mod
 
   // Boosted mod
-  &:not(:hover):not(:focus):not(:active) {
-    border-left-color: transparent;
-
-    &.btn-inverse {
-      color: $white;
-      background-color: $black;
-      border-color: $white;
+  .btn-group:not(.dropstart) &,
+  .dropstart & ~ .btn {
+    &:not(:hover):not(:focus):not(:active) {
+      border-left-color: transparent;
 
       &::before {
-        background-color: $black;
+        position: absolute;
+        top: -$btn-border-width;
+        bottom: -$btn-border-width;
+        left: -$btn-border-width;
+        width: $btn-border-width;
+        color: inherit;
+        content: "";
+        background:
+          linear-gradient(
+            currentcolor $btn-border-width,
+            transparent $btn-border-width,
+            transparent map-get($spacers, 1),
+            currentcolor map-get($spacers, 1),
+            currentcolor subtract(100%, map-get($spacers, 1)),
+            transparent subtract(100%, map-get($spacers, 1)),
+            transparent subtract(100%, $btn-border-width),
+            currentcolor subtract(100%, $btn-border-width)
+          );
       }
     }
   }
 
-  // TODO: we should avoid using !important and find a better selector
-  &:active,
-  &.active {
-    border-left: $border-width solid $black !important; // stylelint-disable-line declaration-no-important
-
-    &.btn-inverse {
-      border-left: $border-width solid $primary !important; // stylelint-disable-line declaration-no-important
-    }
-  }
-
-  &:not(:focus):not(:active) {
-    &::before {
-      position: absolute;
-      top: -$border-width;
-      bottom: -$border-width;
-      left: -$border-width;
-      width: $border-width;
-      color: $black;
-      content: "";
-      background:
-        linear-gradient(
-          currentcolor $border-width,
-          transparent $border-width,
-          transparent $border-width * 2.5,
-          currentcolor $border-width * 2.5,
-          currentcolor subtract(100%, $border-width * 2.5),
-          transparent subtract(100%, $border-width * 2.5),
-          transparent subtract(100%, $border-width),
-          currentcolor subtract(100%, $border-width)
-        );
-    }
-
-    &.btn-inverse::before {
-      color: $white;
-    }
-  }
-
   .btn:active + &,
-  .btn.active + & {
+  .btn.active + &,
+  &:active + * + .btn,
+  &.active + * + .btn {
     border-color: $primary;
-
-    &:focus {
-      border-color: $black;
-    }
-  }
-
-  .btn:disabled + &,
-  .btn.disabled + & {
-    border-color: $gray-500;
-
-    &::before {
-      color: $gray-500;
-    }
   }
 
   .btn-group.show > &:not(:focus):not(:active)::before {
     color: $primary;
     background-color: currentcolor;
   }
-
-  .dropstart > &:not(:hover):not(:focus):not(:active) {
-    border-left-color: $black;
-  }
   // End mod
 
   &::after,

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -9,46 +9,22 @@
 }
 
 .dropdown-toggle {
-  // scss-docs-start dropdown-toggle-css-vars
-  --#{$prefix}dropdown-toggle-padding-x: #{$dropdown-padding-x}; // Boosted mod
-  --#{$prefix}dropdown-toggle-color: #{$dropdown-color}; // Boosted mod
-  --#{$prefix}dropdown-toggle-bg: #{$dropdown-bg}; // Boosted mod
-  --#{$prefix}dropdown-toggle-border-color: #{$dropdown-border-color}; // Boosted mod
-  // scss-docs-end dropdown-toggle-css-vars
+  --#{$prefix}btn-padding-x: #{$dropdown-padding-x}; // Boosted mod
 
-  // Boosted mod
-  padding-right: var(--#{$prefix}dropdown-toggle-padding-x);
-  padding-left: var(--#{$prefix}dropdown-toggle-padding-x);
-  color: var(--#{$prefix}dropdown-toggle-color);
   white-space: nowrap;
-  background-color: var(--#{$prefix}dropdown-toggle-bg);
-  border-color: var(--#{$prefix}dropdown-toggle-border-color);
-
-  .bg-dark &:not(.dropdown-toggle-split),
-  .navbar-dark &:not(.dropdown-toggle-split) {
-    // scss-docs-start dropdown-toggle-dark-variant-css-vars
-    --#{$prefix}dropdown-toggle-color: #{$dropdown-bg}; // Boosted mod
-    --#{$prefix}dropdown-toggle-bg: #{$dropdown-color}; // Boosted mod
-    --#{$prefix}dropdown-toggle-border-color: #{$gray-700}; // Boosted mod
-    --#{$prefix}dropdown-toggle-border-hover-color: #{$dropdown-link-hover-color}; // Boosted mod
-    // scss-docs-end dropdown-toggle-dark-variant-css-vars
+  // Generate the caret automatically
+  @include caret();
 
-    color: var(--#{$prefix}dropdown-toggle-color);
-    background-color: var(--#{$prefix}dropdown-toggle-bg);
-    border-color: var(--#{$prefix}dropdown-toggle-border-color);
+  // Boosted mod
+  // TODO: should probably be a `.btn-*` class
+  &:not(.dropdown-toggle-split) {
+    @include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $white, $dropdown-border-color, $black, $white, $black, $black, $dropdown-bg, $gray-500, $gray-500);
 
-    &:hover {
-      border-color: var(--#{$prefix}dropdown-toggle-border-hover-color);
+    &.btn-inverse {
+      @include button-variant($black, $gray-700, $white, $black, $gray-700, $white, $black, $white, $white, transparent, $gray-700, $gray-700);
     }
   }
-
-  .btn-group &:not(.btn-inverse) {
-    border-color: var(--#{$prefix}dropdown-toggle-color);
-  }
   // End mod
-
-  // Generate the caret automatically
-  @include caret();
 }
 
 // The dropdown menu
@@ -60,6 +36,7 @@
   --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
   --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
   @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+  --#{$prefix}dropdown-line-height: #{$dropdown-line-height}; // Boosted mod
   --#{$prefix}dropdown-color: #{$dropdown-color};
   --#{$prefix}dropdown-bg: #{$dropdown-bg};
   --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
@@ -90,6 +67,7 @@
   padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-y);
   margin: 0; // Override default margin of ul
   @include font-size(var(--#{$prefix}dropdown-font-size));
+  line-height: var(--#{$prefix}dropdown-line-height); // Boosted mod
   color: var(--#{$prefix}dropdown-color);
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
@@ -206,7 +184,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x) add(var(--#{$prefix}dropdown-item-padding-y), .125rem); // Boosted mod
   clear: both;
   font-weight: var(--#{$prefix}dropdown-item-font-weight); // Boosted mod
   color: var(--#{$prefix}dropdown-link-color);

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1378,8 +1378,9 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
 $dropdown-min-width:                10rem !default;
 $dropdown-padding-x:                $spacer * .5 !default;
 $dropdown-padding-y:                0 !default;
-$dropdown-spacer:                   $border-width * -1 !default;
+$dropdown-spacer:                   0 !default;
 $dropdown-font-size:                $font-size-base !default;
+$dropdown-line-height:              $line-height-base !default; // Boosted mod
 $dropdown-color:                    var(--#{$prefix}body-color) !default;
 $dropdown-bg:                       $white !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
@@ -1391,8 +1392,8 @@ $dropdown-divider-margin-y:         $spacer * .25 !default;
 $dropdown-box-shadow:               $box-shadow !default;
 
 $dropdown-link-color:               $black !default; // Boosted mod
-$dropdown-link-hover-color:         $white !default; // Boosted mod
-$dropdown-link-hover-bg:            $black !default; // Boosted mod
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            $gray-500 !default; // Boosted mod
 
 $dropdown-link-active-color:        color-contrast($component-active-color) !default; // Boosted mod
 $dropdown-link-active-bg:           $component-active-color !default;  // Boosted mod
@@ -1417,8 +1418,8 @@ $dropdown-dark-border-color:        $gray-700 !default; // Boosted mod
 $dropdown-dark-divider-bg:          $dropdown-dark-border-color !default; // Boosted mod
 $dropdown-dark-box-shadow:          null !default;
 $dropdown-dark-link-color:          $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color:    $black !default; // Boosted mod
-$dropdown-dark-link-hover-bg:       $white !default; // Boosted mod
+$dropdown-dark-link-hover-color:    $white !default;
+$dropdown-dark-link-hover-bg:       $gray-700 !default; // Boosted mod
 $dropdown-dark-link-active-color:   $black !default; // Boosted mod
 $dropdown-dark-link-active-bg:      $white !default; // Boosted mod
 $dropdown-dark-link-disabled-color: $gray-700 !default; // Boosted mod

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
@@ -30,17 +30,28 @@
   .dropdown-menu {
     --#{$prefix}dropdown-min-width: 12rem;
     // Boosted mod: background-color is already good
-    @include rfs(.875rem, --#{$prefix}dropdown-font-size);
+    @include rfs($font-size-sm, --#{$prefix}dropdown-font-size); // Boosted mod
+    --#{$prefix}dropdown-line-height: #{$line-height-sm}; // Boosted mod
+    --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y + .0625rem}; // Boosted mod
     // Boosted mod: no box-shadow
   }
 
+  // Boosted mod: Use mask instead of background + ::after
   .dropdown-item.current {
-    font-weight: $font-weight-bold; // Boosted mod
-    background-image: escape-svg($dropdown-active-icon);
-    background-repeat: no-repeat;
-    background-position: right $dropdown-item-padding-x top .75rem; // Boosted mod
-    background-size: .75rem .75rem;
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: .75rem;
+      right: $dropdown-item-padding-x;
+      width: .75rem;
+      height: .75rem;
+      content: "";
+      background-color: currentcolor;
+      mask: escape-svg($dropdown-active-icon) no-repeat 50% / .75rem;
+    }
   }
+  // End mod
 
   // Boosted mod: Specificity
   .navbar-nav.flex-row {

diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md
@@ -900,14 +900,6 @@ Customization through CSS variables can be seen on the `.dropdown-menu-dark` cla
 
 {{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
 
-Dropdowns also use local CSS variables on `.dropdown-toggle` for enhanced real-time customization.
-
-{{< scss-docs name="dropdown-toggle-css-vars" file="scss/_dropdown.scss" >}}
-
-Customization through CSS variables can be seen on the `.dropdown-toggle` dark variant where we override specific values.
-
-{{< scss-docs name="dropdown-toggle-dark-variant-css-vars" file="scss/_dropdown.scss" >}}
-
 ### Sass variables
 
 Variables for all dropdowns:

diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md
@@ -67,7 +67,7 @@ Here's an example of all the sub-components included in a responsive dark-themed
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown
           </a>
-          <ul class="dropdown-menu">
+          <ul class="dropdown-menu dropdown-menu-dark">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><hr class="dropdown-divider"></li>
@@ -217,7 +217,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Dropdown link
           </a>
-          <ul class="dropdown-menu">
+          <ul class="dropdown-menu dropdown-menu-dark">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -480,7 +480,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Link
           </a>
-          <ul class="dropdown-menu">
+          <ul class="dropdown-menu dropdown-menu-dark">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><hr class="dropdown-divider"></li>

diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md
@@ -40,6 +40,13 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
       ```
     </details>
 
+- **Dropdowns**
+  - <span class="badge bg-warning">Warning</span> Dropdown menus y offset has slightly changed from 2px to 0. Please reflect this modification into your websites by changing each `data-bs-offset` or by adding them if needed and set it to 0.
+  ```diff
+  - <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,y">
+  + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,0">
+  ```
+
 - **Footer**
   - <span class="badge bg-warning">Warning</span> Each footer accordion now uses an `aria-labelledby` attribute to be consistent with our accordion component. Please reflect these modifications into your websites.
     <details class="mb-2">
@@ -114,9 +121,21 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
 
 ### CSS and Sass variables
 
+- <details class="mb-2">
+    <summary><span class="badge bg-danger">Breaking</span> Dropped CSS variables:</summary>
+    <ul>
+      <li><code>--bs-dropdown-toggle-bg</code></li>
+      <li><code>--bs-dropdown-toggle-border-color</code></li>
+      <li><code>--bs-dropdown-toggle-color</code></li>
+      <li><code>--bs-dropdown-toggle-hover-border-color</code></li>
+      <li><code>--bs-dropdown-toggle-padding-x</code></li>
+    </ul>
+  </details>
+
 - <details class="mb-2">
     <summary><span class="badge bg-success">New</span> CSS variables:</summary>
     <ul>
+      <li><code>--bs-dropdown-line-height</code></li>
       <li><code>--bs-table-accent-bg</code></li>
       <li><code>--bs-table-striped-bg</code></li>
       <li><code>--bs-table-striped-color</code></li>

diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
@@ -10,11 +10,11 @@
   {{- $versions_link = printf "%s/" $page_slug -}}
 {{- end }}
 
-<li class="nav-item dropdown mb-0 d-flex align-items-center">
+<li class="nav-item dropdown d-flex">
   <a href="#" class="nav-link dropdown-toggle gap-1 mx-0 bg-transparent" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
     <span class="d-lg-none" aria-hidden="true">Boosted</span><span class="visually-hidden">Boosted&nbsp;</span> v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
   </a>
-  <ul class="dropdown-menu dropdown-menu-end position-absolute">
+  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark position-absolute">
     <li><h6 class="dropdown-header">v5 releases</h6></li>
     <li>
       <a class="dropdown-item current" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">