From c9d073b8c78aa4f2104ededfd1c2898215d9a201 Mon Sep 17 00:00:00 2001
From: David Bailey <techdavid@users.noreply.github.com>
Date: Fri, 25 Aug 2017 07:37:06 +0100
Subject: [PATCH 1/3] Adjust margin for sticky elements on modal

Previously white space was visible to the right of sticky elements due to right padding being added to the body. This fixes #23661.
---
 js/src/modal.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index d21a137fb6e3..831670497476 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -68,6 +68,7 @@ const Modal = (($) => {
     DATA_TOGGLE        : '[data-toggle="modal"]',
     DATA_DISMISS       : '[data-dismiss="modal"]',
     FIXED_CONTENT      : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
+    STICKY_CONTENT     : '.sticky-top',
     NAVBAR_TOGGLER     : '.navbar-toggler'
   }
 
@@ -441,6 +442,13 @@ const Modal = (($) => {
           $(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
         })
 
+        // Adjust sticky content margin
+        $(Selector.STICKY_CONTENT).each((index, element) => {
+          const actualMargin = $(element)[0].style.marginRight
+          const calculatedMargin = $(element).css('margin-right')
+          $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
+        })
+
         // Adjust navbar-toggler margin
         $(Selector.NAVBAR_TOGGLER).each((index, element) => {
           const actualMargin = $(element)[0].style.marginRight
@@ -464,8 +472,8 @@ const Modal = (($) => {
         }
       })
 
-      // Restore navbar-toggler margin
-      $(Selector.NAVBAR_TOGGLER).each((index, element) => {
+      // Restore sticky content and navbar-toggler margin
+      $(Selector.STICKY_CONTENT).add(Selector.NAVBAR_TOGGLER).each((index, element) => {
         const margin = $(element).data('margin-right')
         if (typeof margin !== 'undefined') {
           $(element).css('margin-right', margin).removeData('margin-right')

From 93c123e77ba0fcbcde8cb08fca2bcf7fcb45c7cf Mon Sep 17 00:00:00 2001
From: David Bailey <techdavid@users.noreply.github.com>
Date: Fri, 25 Aug 2017 10:31:35 +0100
Subject: [PATCH 2/3] Add unit tests for margin of sticky elements on modal

---
 js/tests/unit/modal.js | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 09c3524434dd..3b028dc1000f 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -433,6 +433,48 @@ $(function () {
       .bootstrapModal('show')
   })
 
+  QUnit.test('should adjust the inline margin of sticky elements when opening and restore when closing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
+    var originalPadding = $element.css('margin-right')
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        var currentPadding = $element.css('margin-right')
+        assert.strictEqual(currentPadding, originalPadding, 'sticky element margin should be reset after closing')
+        $element.remove()
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        var expectedPadding = parseFloat(originalPadding) - $(this).getScrollbarWidth() + 'px'
+        var currentPadding = $element.css('margin-right')
+        assert.strictEqual(currentPadding, expectedPadding, 'sticky element margin should be adjusted while opening')
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should store the original margin of sticky elements in data-margin-right before showing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
+    var originalPadding = '0px'
+    $element.css('margin-right', originalPadding)
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        assert.strictEqual(typeof $element.data('margin-right'), 'undefined', 'data-margin-right should be cleared after closing')
+        $element.remove()
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        assert.strictEqual($element.data('margin-right'), originalPadding, 'original sticky element margin should be stored in data-margin-right')
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
   QUnit.test('should adjust the inline margin of the navbar-toggler when opening and restore when closing', function (assert) {
     assert.expect(2)
     var done = assert.async()

From aaaa6a23c78f6ce21013c4a43cb3ab714ee21d5f Mon Sep 17 00:00:00 2001
From: David Bailey <techdavid@users.noreply.github.com>
Date: Fri, 25 Aug 2017 16:02:10 +0100
Subject: [PATCH 3/3] Use a template string instead of adding to the first
 selection

---
 js/src/modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index 831670497476..ab73230c8f7f 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -473,7 +473,7 @@ const Modal = (($) => {
       })
 
       // Restore sticky content and navbar-toggler margin
-      $(Selector.STICKY_CONTENT).add(Selector.NAVBAR_TOGGLER).each((index, element) => {
+      $(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`).each((index, element) => {
         const margin = $(element).data('margin-right')
         if (typeof margin !== 'undefined') {
           $(element).css('margin-right', margin).removeData('margin-right')