Remove the initial margin from dropdown/popover in favor of Popper (#32524)

* Remove the margin from dropdown in favor of Popper

- Set the default margin to 0 for dropdowns (To remove the Popper's  warning)
- Set the required offset in dropdown's defaults

* Remove the margin from the popover component

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 66ff8cc4fcf78b26d4881072a74956106c9ec800..8fdf455801ed12327a94a3d4175f842ccbc39be1 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -72,7 +72,7 @@ const PLACEMENT_RIGHT = isRTL ? 'left-start' : 'right-start'
 const PLACEMENT_LEFT = isRTL ? 'right-start' : 'left-start'
 
 const Default = {
-  offset: [0, 0],
+  offset: [0, 2],
   flip: true,
   boundary: 'clippingParents',
   reference: 'toggle',

diff --git a/js/src/popover.js b/js/src/popover.js
index b5a788961cd596a5b84aee8ff326c60c34cbd73d..4c672b51892e022a2333132fbfb6646e877742ec 100644 (file)
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -25,6 +25,7 @@ const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 const Default = {
   ...Tooltip.Default,
   placement: 'right',
+  offset: [0, 8],
   trigger: 'click',
   content: '',
   template: '<div class="popover" role="tooltip">' +

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 594c0639905405b55e2851420ebc84a098cbcc74..f659ddc77e920bec5d301802a91d2084836103d7 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -22,7 +22,7 @@
   display: none; // none by default, but block on "open" of the menu
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y $dropdown-padding-x;
-  margin: $dropdown-spacer 0 0; // override default ul
+  margin: 0; // Override default margin of ul
   @include font-size($dropdown-font-size);
   color: $dropdown-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -68,8 +68,11 @@
   .dropdown-menu {
     top: auto;
     bottom: 100%;
-    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
+
+    &.show:not([data-popper-placement]) {
+      margin-top: 0;
+      margin-bottom: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -82,8 +85,11 @@
     top: 0;
     right: auto;
     left: 100%;
-    margin-top: 0;
-    margin-left: $dropdown-spacer;
+
+    &.show:not([data-popper-placement]) {
+      margin-top: 0;
+      margin-left: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -99,8 +105,11 @@
     top: 0;
     right: 100%;
     left: auto;
-    margin-top: 0;
-    margin-right: $dropdown-spacer;
+
+    &.show:not([data-popper-placement]) {
+      margin-top: 0;
+      margin-right: $dropdown-spacer;
+    }
   }
 
   .dropdown-toggle {
@@ -174,6 +183,10 @@
 
 .dropdown-menu.show {
   display: block;
+
+  &:not([data-popper-placement]) {
+    margin-top: $dropdown-spacer;
+  }
 }
 
 // Dropdown section headers

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 3778f6ff76ac2cac4536a97120382629788c9cf4..a55555e2e9210791d7b7e706c161055229d1aa18 100644 (file)
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -35,9 +35,6 @@
 }
 
 .bs-popover-top {
-  // Overrule margin set by popper.js
-  margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     bottom: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -56,9 +53,6 @@
 }
 
 .bs-popover-end {
-  // Overrule margin set by popper.js
-  margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     left: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;
@@ -79,9 +73,6 @@
 }
 
 .bs-popover-bottom {
-  // Overrule margin set by popper.js
-  margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     top: subtract(-$popover-arrow-height, $popover-border-width);
 
@@ -112,9 +103,6 @@
 }
 
 .bs-popover-start {
-  // Overrule margin set by popper.js
-  margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
-
   > .popover-arrow {
     right: subtract(-$popover-arrow-height, $popover-border-width);
     width: $popover-arrow-height;

diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 37c3a74c11baf14528eb80013238fb368f4a920b..97821758371995fb6f913fbc2a2b0cfe67ab5cec 100644 (file)
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -899,7 +899,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     <tr>
       <td><code>offset</code></td>
       <td>array | string | function</td>
-      <td><code>[0, 0]</code></td>
+      <td><code>[0, 2]</code></td>
       <td>
         <p>Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p>
         <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p>

diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index ddfc6c130afe902329657056d1931712bfd87afe..3fac255267981ce4922eacf8b058cf6566391774 100644 (file)
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -270,7 +270,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
     <tr>
       <td><code>offset</code></td>
       <td>array | string | function</td>
-      <td><code>[0, 0]</code></td>
+      <td><code>[0, 8]</code></td>
       <td>
         <p>Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p>
         <p>When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p>