Merge branch 'v4-dev' into modal-sizes

dist/css/bootstrap-flex.css

@@ -3336,7 +3336,7 @@ tbody.collapse.active {
 .dropdown-item:focus, .dropdown-item:hover {
   color: #1d1e1f;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover {
@@ -4572,7 +4572,7 @@ tbody.collapse.active {
 .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -4582,7 +4582,7 @@ tbody.collapse.active {
 
 .card-footer {
   padding: 0.75rem 1.25rem;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5509,7 +5509,7 @@ base::-moz-progress-bar,
 .list-group-item-action:focus, .list-group-item-action:hover {
   color: #555;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .list-group-item-success {

dist/css/bootstrap.css

@@ -3083,7 +3083,7 @@ tbody.collapse.active {
 .dropdown-item:focus, .dropdown-item:hover {
   color: #1d1e1f;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover {
@@ -4290,7 +4290,7 @@ tbody.collapse.active {
 .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -4306,7 +4306,7 @@ tbody.collapse.active {
 
 .card-footer {
   padding: 0.75rem 1.25rem;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5206,7 +5206,7 @@ base::-moz-progress-bar,
 .list-group-item-action:focus, .list-group-item-action:hover {
   color: #555;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .list-group-item-success {

dist/js/bootstrap.js

@@ -2089,7 +2089,7 @@ var Modal = function ($) {
 
     var config = $(target).data(DATA_KEY) ? 'toggle' : $.extend({}, $(target).data(), $(this).data());
 
-    if (this.tagName === 'A') {
+    if (this.tagName === 'A' || this.tagName === 'AREA') {
       event.preventDefault();
     }
 

docs/dist/css/bootstrap-flex.css

@@ -3336,7 +3336,7 @@ tbody.collapse.active {
 .dropdown-item:focus, .dropdown-item:hover {
   color: #1d1e1f;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover {
@@ -4572,7 +4572,7 @@ tbody.collapse.active {
 .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -4582,7 +4582,7 @@ tbody.collapse.active {
 
 .card-footer {
   padding: 0.75rem 1.25rem;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5509,7 +5509,7 @@ base::-moz-progress-bar,
 .list-group-item-action:focus, .list-group-item-action:hover {
   color: #555;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .list-group-item-success {

docs/dist/css/bootstrap.css

@@ -3083,7 +3083,7 @@ tbody.collapse.active {
 .dropdown-item:focus, .dropdown-item:hover {
   color: #1d1e1f;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover {
@@ -4290,7 +4290,7 @@ tbody.collapse.active {
 .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -4306,7 +4306,7 @@ tbody.collapse.active {
 
 .card-footer {
   padding: 0.75rem 1.25rem;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5206,7 +5206,7 @@ base::-moz-progress-bar,
 .list-group-item-action:focus, .list-group-item-action:hover {
   color: #555;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background-color: #f7f7f9;
 }
 
 .list-group-item-success {

docs/dist/js/bootstrap.js

@@ -2089,7 +2089,7 @@ var Modal = function ($) {
 
     var config = $(target).data(DATA_KEY) ? 'toggle' : $.extend({}, $(target).data(), $(this).data());
 
-    if (this.tagName === 'A') {
+    if (this.tagName === 'A' || this.tagName === 'AREA') {
       event.preventDefault();
     }
 

js/dist/modal.js

@@ -483,7 +483,7 @@ var Modal = function ($) {
 
     var config = $(target).data(DATA_KEY) ? 'toggle' : $.extend({}, $(target).data(), $(this).data());
 
-    if (this.tagName === 'A') {
+    if (this.tagName === 'A' || this.tagName === 'AREA') {
       event.preventDefault();
     }
 

js/src/dropdown.js

@@ -239,7 +239,7 @@ const Dropdown = (($) => {
         return
       }
 
-      let items = $(parent).find(Selector.VISIBLE_ITEMS).get()
+      const items = $(parent).find(Selector.VISIBLE_ITEMS).get()
 
       if (!items.length) {
         return

js/src/modal.js

@@ -489,7 +489,7 @@ const Modal = (($) => {
     const config = $(target).data(DATA_KEY) ?
       'toggle' : $.extend({}, $(target).data(), $(this).data())
 
-    if (this.tagName === 'A') {
+    if (this.tagName === 'A' || this.tagName === 'AREA') {
       event.preventDefault()
     }
 

js/tests/unit/modal.js

@@ -454,4 +454,26 @@ $(function () {
       })
       .bootstrapModal('show')
   })
+
+  QUnit.test('should not follow link in area tag', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    $('<map><area id="test" shape="default" data-toggle="modal" data-target="#modal-test" href="demo.html"/></map>')
+      .appendTo('#qunit-fixture')
+
+    $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
+      .appendTo('#qunit-fixture')
+
+    $('#test')
+      .on('click.bs.modal.data-api', function (event) {
+        assert.notOk(event.isDefaultPrevented(), 'navigating to href will happen')
+
+        setTimeout(function () {
+          assert.ok(event.isDefaultPrevented(), 'model shown instead of navigating to href')
+          done()
+        }, 1)
+      })
+      .trigger('click')
+  })
 })

scss/_variables.scss

@@ -532,7 +532,7 @@ $dropdown-box-shadow:            0 .5rem 1rem rgba(0,0,0,.175) !default;
 
 $dropdown-link-color:            $gray-dark !default;
 $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
-$dropdown-link-hover-bg:         #f5f5f5 !default;
+$dropdown-link-hover-bg:         $gray-lightest !default;
 
 $dropdown-link-active-color:     $component-active-color !default;
 $dropdown-link-active-bg:        $component-active-bg !default;
@@ -677,7 +677,7 @@ $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
 $card-border-color:        rgba(0,0,0,.125) !default;
 $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default;
-$card-cap-bg:              #f5f5f5 !default;
+$card-cap-bg:              $gray-lightest !default;
 $card-bg:                  #fff !default;
 
 $card-link-hover-color:    #fff !default;
@@ -825,7 +825,7 @@ $list-group-border-color:       rgba(0,0,0,.125) !default;
 $list-group-border-width:       $border-width !default;
 $list-group-border-radius:      $border-radius !default;
 
-$list-group-hover-bg:           #f5f5f5 !default;
+$list-group-hover-bg:           $gray-lightest !default;
 $list-group-active-color:       $component-active-color !default;
 $list-group-active-bg:          $component-active-bg !default;
 $list-group-active-border:      $list-group-active-bg !default;
@@ -916,12 +916,12 @@ $code-font-size:              90% !default;
 $code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
 $code-color:                  #bd4147 !default;
-$code-bg:                     #f7f7f9 !default;
+$code-bg:                     $gray-lightest !default;
 
 $kbd-color:                   #fff !default;
 $kbd-bg:                      #333 !default;
 
-$pre-bg:                      #f7f7f9 !default;
+$pre-bg:                      $gray-lightest !default;
 $pre-color:                   $gray-dark !default;
 $pre-border-color:            #ccc !default;
 $pre-scrollable-max-height:   340px !default;