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>

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',

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">' +

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

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;

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>

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>