From 217d84d6b25c44ea9791e4ca760a35e46f2e0653 Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Thu, 4 Feb 2021 01:07:25 +0530
Subject: [PATCH] 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                            |  2 +-
 js/src/popover.js                             |  1 +
 scss/_dropdown.scss                           | 27 ++++++++++++++-----
 scss/_popover.scss                            | 12 ---------
 site/content/docs/5.0/components/dropdowns.md |  2 +-
 site/content/docs/5.0/components/popovers.md  |  2 +-
 6 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 66ff8cc4fc..8fdf455801 100644
--- 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 b5a788961c..4c672b5189 100644
--- 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 594c063990..f659ddc77e 100644
--- 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 3778f6ff76..a55555e2e9 100644
--- 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 37c3a74c11..9782175837 100644
--- 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 ddfc6c130a..3fac255267 100644
--- 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>