Rename `.active` to `.show`

diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index b1ac0d84526d4fec61bc148fbc7096b9775763bd..da72e322e519c5fea7f1a855f71dce38ae74e713 100644 (file)
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -73,12 +73,12 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
 - Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
 - On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
-- To animate alerts when dismissing them, be sure to add the `.fade` and `.active` classes.
+- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
 
 You can see this in action with a live demo:
 
 {% example html %}
-<div class="alert alert-warning alert-dismissible fade active" role="alert">
+<div class="alert alert-warning alert-dismissible fade show" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
@@ -111,7 +111,7 @@ Note that closing an alert will remove it from the DOM.
 | Method | Description |
 | --- | --- |
 | `$().alert()` | Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) |
-| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed. |
+| `$().alert('close')` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
 
 {% highlight js %}$(".alert").alert('close'){% endhighlight %}
 

diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index 0ece9e453dd1aba4b7e61544f301a1130b2574c7..5b3430118209ea011005eb250f6a798ede93a955 100644 (file)
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -18,7 +18,7 @@ Click the buttons below to show and hide another element via class changes:
 
 - `.collapse` hides content
 - `.collapsing` is applied during transitions
-- `.collapse.active` shows content
+- `.collapse.show` shows content
 
 You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
 
@@ -53,7 +53,7 @@ Extend the default collapse behavior to create an accordion.
       </h5>
     </div>
 
-    <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
+    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
       <div class="card-block">
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
@@ -101,14 +101,14 @@ Additionally, if your control element is targeting a single collapsible element
 The collapse plugin utilizes a few classes to handle the heavy lifting:
 
 - `.collapse` hides the content
-- `.collapse.active` shows the content
+- `.collapse.show` shows the content
 - `.collapsing` is added when the transition starts, and removed when it finishes
 
 These classes can be found in `_animation.scss`.
 
 ### Via data attributes
 
-Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `active`.
+Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`.
 
 To add accordion-like group management to a collapsible control, add the data attribute `data-parent="#selector"`. Refer to the demo to see this in action.
 

diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index 3e9948b3d863dc60e45ef1d31156e06a62daf7ea..d26de6eefaec2409571279e2c0a6d9c4a879e7c0 100644 (file)
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -21,7 +21,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.
 Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
 
 {% example html %}
-<div class="dropdown active">
+<div class="dropdown show">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown button
   </button>
@@ -36,7 +36,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
 And with `<a>` elements:
 
 {% example html %}
-<div class="dropdown active">
+<div class="dropdown show">
   <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown link
   </a>
@@ -407,7 +407,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
 
 {% example html %}
-<div class="dropdown active">
+<div class="dropdown show">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown
   </button>
@@ -480,7 +480,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
 
 ## Usage
 
-Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.active` class on the parent list item.
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item.
 
 On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
 

diff --git a/js/src/alert.js b/js/src/alert.js
index 8e55249501739455a220fb2fca7fa2067525ea0c..884a5dec886412e7cf506fad170d14840fa685b7 100644 (file)
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -36,9 +36,9 @@ const Alert = (($) => {
   }
 
   const ClassName = {
-    ALERT  : 'alert',
-    FADE   : 'fade',
-    ACTIVE : 'active'
+    ALERT : 'alert',
+    FADE  : 'fade',
+    SHOW  : 'show'
   }
 
 
@@ -108,7 +108,7 @@ const Alert = (($) => {
     }
 
     _removeElement(element) {
-      $(element).removeClass(ClassName.ACTIVE)
+      $(element).removeClass(ClassName.SHOW)
 
       if (!Util.supportsTransitionEnd() ||
           !$(element).hasClass(ClassName.FADE)) {

diff --git a/js/src/collapse.js b/js/src/collapse.js
index 1e4730ff7333b7d2f83de5aa070766947ef73d4a..ad8815993607c5b1c4708db20f2e368d86399b6c 100644 (file)
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -44,7 +44,7 @@ const Collapse = (($) => {
   }
 
   const ClassName = {
-    ACTIVE     : 'active',
+    SHOW       : 'show',
     COLLAPSE   : 'collapse',
     COLLAPSING : 'collapsing',
     COLLAPSED  : 'collapsed'
@@ -56,7 +56,7 @@ const Collapse = (($) => {
   }
 
   const Selector = {
-    ACTIVES     : '.card > .active, .card > .collapsing',
+    ACTIVES     : '.card > .show, .card > .collapsing',
     DATA_TOGGLE : '[data-toggle="collapse"]'
   }
 
@@ -104,7 +104,7 @@ const Collapse = (($) => {
     // public
 
     toggle() {
-      if ($(this._element).hasClass(ClassName.ACTIVE)) {
+      if ($(this._element).hasClass(ClassName.SHOW)) {
         this.hide()
       } else {
         this.show()
@@ -116,7 +116,7 @@ const Collapse = (($) => {
         throw new Error('Collapse is transitioning')
       }
 
-      if ($(this._element).hasClass(ClassName.ACTIVE)) {
+      if ($(this._element).hasClass(ClassName.SHOW)) {
         return
       }
 
@@ -171,7 +171,7 @@ const Collapse = (($) => {
         $(this._element)
           .removeClass(ClassName.COLLAPSING)
           .addClass(ClassName.COLLAPSE)
-          .addClass(ClassName.ACTIVE)
+          .addClass(ClassName.SHOW)
 
         this._element.style[dimension] = ''
 
@@ -200,7 +200,7 @@ const Collapse = (($) => {
         throw new Error('Collapse is transitioning')
       }
 
-      if (!$(this._element).hasClass(ClassName.ACTIVE)) {
+      if (!$(this._element).hasClass(ClassName.SHOW)) {
         return
       }
 
@@ -221,7 +221,7 @@ const Collapse = (($) => {
       $(this._element)
         .addClass(ClassName.COLLAPSING)
         .removeClass(ClassName.COLLAPSE)
-        .removeClass(ClassName.ACTIVE)
+        .removeClass(ClassName.SHOW)
 
       this._element.setAttribute('aria-expanded', false)
 
@@ -299,7 +299,7 @@ const Collapse = (($) => {
 
     _addAriaAndCollapsedClass(element, triggerArray) {
       if (element) {
-        const isOpen = $(element).hasClass(ClassName.ACTIVE)
+        const isOpen = $(element).hasClass(ClassName.SHOW)
         element.setAttribute('aria-expanded', isOpen)
 
         if (triggerArray.length) {

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 8b2164aa9a16d01a19a335fe86cfc85aedc5f58b..97bba1c76399f78f743097ed9237232558b839e3 100644 (file)
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -41,7 +41,7 @@ const Dropdown = (($) => {
   const ClassName = {
     BACKDROP : 'dropdown-backdrop',
     DISABLED : 'disabled',
-    ACTIVE   : 'active'
+    SHOW     : 'show'
   }
 
   const Selector = {
@@ -86,7 +86,7 @@ const Dropdown = (($) => {
       }
 
       const parent   = Dropdown._getParentFromElement(this)
-      const isActive = $(parent).hasClass(ClassName.ACTIVE)
+      const isActive = $(parent).hasClass(ClassName.SHOW)
 
       Dropdown._clearMenus()
 
@@ -118,7 +118,7 @@ const Dropdown = (($) => {
       this.focus()
       this.setAttribute('aria-expanded', true)
 
-      $(parent).toggleClass(ClassName.ACTIVE)
+      $(parent).toggleClass(ClassName.SHOW)
       $(parent).trigger($.Event(Event.SHOWN, relatedTarget))
 
       return false
@@ -176,7 +176,7 @@ const Dropdown = (($) => {
           relatedTarget : toggles[i]
         }
 
-        if (!$(parent).hasClass(ClassName.ACTIVE)) {
+        if (!$(parent).hasClass(ClassName.SHOW)) {
           continue
         }
 
@@ -195,7 +195,7 @@ const Dropdown = (($) => {
         toggles[i].setAttribute('aria-expanded', 'false')
 
         $(parent)
-          .removeClass(ClassName.ACTIVE)
+          .removeClass(ClassName.SHOW)
           .trigger($.Event(Event.HIDDEN, relatedTarget))
       }
     }
@@ -225,7 +225,7 @@ const Dropdown = (($) => {
       }
 
       const parent   = Dropdown._getParentFromElement(this)
-      const isActive = $(parent).hasClass(ClassName.ACTIVE)
+      const isActive = $(parent).hasClass(ClassName.SHOW)
 
       if (!isActive && event.which !== ESCAPE_KEYCODE ||
            isActive && event.which === ESCAPE_KEYCODE) {

diff --git a/js/src/modal.js b/js/src/modal.js
index 70bb68e42a29c675bed7e51a2369127c733955f6..94abd19f4990b08cf9705cb6f91aeec0fccbb52b 100644 (file)
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -60,7 +60,7 @@ const Modal = (($) => {
     BACKDROP           : 'modal-backdrop',
     OPEN               : 'modal-open',
     FADE               : 'fade',
-    ACTIVE             : 'active'
+    SHOW               : 'show'
   }
 
   const Selector = {
@@ -185,7 +185,7 @@ const Modal = (($) => {
 
       $(document).off(Event.FOCUSIN)
 
-      $(this._element).removeClass(ClassName.ACTIVE)
+      $(this._element).removeClass(ClassName.SHOW)
 
       $(this._element).off(Event.CLICK_DISMISS)
       $(this._dialog).off(Event.MOUSEDOWN_DISMISS)
@@ -242,7 +242,7 @@ const Modal = (($) => {
         Util.reflow(this._element)
       }
 
-      $(this._element).addClass(ClassName.ACTIVE)
+      $(this._element).addClass(ClassName.SHOW)
 
       if (this._config.focus) {
         this._enforceFocus()
@@ -356,7 +356,7 @@ const Modal = (($) => {
           Util.reflow(this._backdrop)
         }
 
-        $(this._backdrop).addClass(ClassName.ACTIVE)
+        $(this._backdrop).addClass(ClassName.SHOW)
 
         if (!callback) {
           return
@@ -372,7 +372,7 @@ const Modal = (($) => {
           .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
 
       } else if (!this._isShown && this._backdrop) {
-        $(this._backdrop).removeClass(ClassName.ACTIVE)
+        $(this._backdrop).removeClass(ClassName.SHOW)
 
         const callbackRemove = () => {
           this._removeBackdrop()

diff --git a/js/src/popover.js b/js/src/popover.js
index a08ed4de93cbfd32c9469e6c20f3ef9178023999..33bc9e48c43907d90871f7f096462c964000334a 100644 (file)
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -37,8 +37,8 @@ const Popover = (($) => {
   })
 
   const ClassName = {
-    FADE   : 'fade',
-    ACTIVE : 'active'
+    FADE : 'fade',
+    SHOW : 'show'
   }
 
   const Selector = {
@@ -117,7 +117,7 @@ const Popover = (($) => {
       this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
       this.setElementContent($tip.find(Selector.CONTENT), this._getContent())
 
-      $tip.removeClass(`${ClassName.FADE} ${ClassName.ACTIVE}`)
+      $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
 
       this.cleanupTether()
     }

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index dc291a72ca98e6b6161daaa6eb3493729426e459..3fa5ecab44d7ef14b7eaaaa09611b038bcba2082 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -72,8 +72,8 @@ const Tooltip = (($) => {
   }
 
   const HoverState = {
-    ACTIVE : 'active',
-    OUT    : 'out'
+    SHOW : 'show',
+    OUT  : 'out'
   }
 
   const Event = {
@@ -90,8 +90,8 @@ const Tooltip = (($) => {
   }
 
   const ClassName = {
-    FADE   : 'fade',
-    ACTIVE : 'active'
+    FADE : 'fade',
+    SHOW : 'show'
   }
 
   const Selector = {
@@ -208,7 +208,7 @@ const Tooltip = (($) => {
 
       } else {
 
-        if ($(this.getTipElement()).hasClass(ClassName.ACTIVE)) {
+        if ($(this.getTipElement()).hasClass(ClassName.SHOW)) {
           this._leave(null, this)
           return
         }
@@ -303,7 +303,7 @@ const Tooltip = (($) => {
         Util.reflow(tip)
         this._tether.position()
 
-        $(tip).addClass(ClassName.ACTIVE)
+        $(tip).addClass(ClassName.SHOW)
 
         const complete = () => {
           const prevHoverState = this._hoverState
@@ -336,7 +336,7 @@ const Tooltip = (($) => {
         throw new Error('Tooltip is transitioning')
       }
       const complete  = () => {
-        if (this._hoverState !== HoverState.ACTIVE && tip.parentNode) {
+        if (this._hoverState !== HoverState.SHOW && tip.parentNode) {
           tip.parentNode.removeChild(tip)
         }
 
@@ -356,7 +356,7 @@ const Tooltip = (($) => {
         return
       }
 
-      $(tip).removeClass(ClassName.ACTIVE)
+      $(tip).removeClass(ClassName.SHOW)
 
       if (Util.supportsTransitionEnd() &&
           $(this.tip).hasClass(ClassName.FADE)) {
@@ -388,7 +388,7 @@ const Tooltip = (($) => {
 
       this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle())
 
-      $tip.removeClass(`${ClassName.FADE} ${ClassName.ACTIVE}`)
+      $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
 
       this.cleanupTether()
     }
@@ -513,15 +513,15 @@ const Tooltip = (($) => {
         ] = true
       }
 
-      if ($(context.getTipElement()).hasClass(ClassName.ACTIVE) ||
-         context._hoverState === HoverState.ACTIVE) {
-        context._hoverState = HoverState.ACTIVE
+      if ($(context.getTipElement()).hasClass(ClassName.SHOW) ||
+         context._hoverState === HoverState.SHOW) {
+        context._hoverState = HoverState.SHOW
         return
       }
 
       clearTimeout(context._timeout)
 
-      context._hoverState = HoverState.ACTIVE
+      context._hoverState = HoverState.SHOW
 
       if (!context.config.delay || !context.config.delay.show) {
         context.show()
@@ -529,7 +529,7 @@ const Tooltip = (($) => {
       }
 
       context._timeout = setTimeout(() => {
-        if (context._hoverState === HoverState.ACTIVE) {
+        if (context._hoverState === HoverState.SHOW) {
           context.show()
         }
       }, context.config.delay.show)

diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js
index 9548c3318c33ea337c093d7052aeb225b768abf7..e078082c3c87e36c0d6e802308d08a91599f8d0d 100644 (file)
--- a/js/tests/unit/alert.js
+++ b/js/tests/unit/alert.js
@@ -34,7 +34,7 @@ $(function () {
 
   QUnit.test('should fade element out on clicking .close', function (assert) {
     assert.expect(1)
-    var alertHTML = '<div class="alert alert-danger fade active">'
+    var alertHTML = '<div class="alert alert-danger fade show">'
         + '<a class="close" href="#" data-dismiss="alert">×</a>'
         + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
         + '</div>'
@@ -43,12 +43,12 @@ $(function () {
 
     $alert.find('.close').trigger('click')
 
-    assert.strictEqual($alert.hasClass('active'), false, 'remove .active class on .close click')
+    assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
   })
 
   QUnit.test('should remove element when clicking .close', function (assert) {
     assert.expect(2)
-    var alertHTML = '<div class="alert alert-danger fade active">'
+    var alertHTML = '<div class="alert alert-danger fade show">'
         + '<a class="close" href="#" data-dismiss="alert">×</a>'
         + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
         + '</div>'

diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index 7db69e2cf883fd4516d449c233f54a6791eb8f84..7139304338a0d64c2ef652679484a0afdb7fda66 100644 (file)
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -48,7 +48,7 @@ $(function () {
     assert.expect(2)
     var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
 
-    assert.ok($el.hasClass('active'), 'has class "active"')
+    assert.ok($el.hasClass('show'), 'has class "show"')
     assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
   })
 
@@ -62,7 +62,7 @@ $(function () {
       '</div>',
       '<div class="panel-group" id="accordion2">',
       '<div class="panel">',
-      '<div id="collapse2" class="collapse active"/>',
+      '<div id="collapse2" class="collapse show"/>',
       '</div>',
       '</div>'
     ].join('')
@@ -71,15 +71,15 @@ $(function () {
     var $el2 = $('#collapse2')
     $el1.bootstrapCollapse('show')
 
-    assert.ok($el1.hasClass('active'))
-    assert.ok($el2.hasClass('active'))
+    assert.ok($el1.hasClass('show'))
+    assert.ok($el2.hasClass('show'))
   })
 
   QUnit.test('should hide a collapsed element', function (assert) {
     assert.expect(1)
     var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
 
-    assert.ok(!$el.hasClass('active'), 'does not have class "active"')
+    assert.ok(!$el.hasClass('show'), 'does not have class "show"')
   })
 
   QUnit.test('should not fire shown when show is prevented', function (assert) {
@@ -150,7 +150,7 @@ $(function () {
 
     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -185,7 +185,7 @@ $(function () {
     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
     var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -200,7 +200,7 @@ $(function () {
     assert.expect(0)
     var done = assert.async()
 
-    var $test = $('<div id="test1" class="active"/>')
+    var $test = $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hide.bs.collapse', function () {
         assert.ok(false)
@@ -244,7 +244,7 @@ $(function () {
     assert.expect(1)
     var done = assert.async()
 
-    $('<div class="collapse active"></div>')
+    $('<div class="collapse show"></div>')
       .appendTo('#qunit-fixture')
       .on('hide.bs.collapse', function () {
         assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called')
@@ -267,7 +267,7 @@ $(function () {
 
     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="active"/>').appendTo($groups.eq(0))
+    $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
 
     var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
 
@@ -301,7 +301,7 @@ $(function () {
 
     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="active"/>').appendTo($groups.eq(0))
+    $('<div id="body1" class="show"/>').appendTo($groups.eq(0))
 
     var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
 
@@ -344,7 +344,7 @@ $(function () {
 
     var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -379,7 +379,7 @@ $(function () {
     var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
     var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -403,7 +403,7 @@ $(function () {
 
     var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" aria-expanded="true" class="active"/>').appendTo($groups.eq(0))
+    $('<div id="body1" aria-expanded="true" class="show"/>').appendTo($groups.eq(0))
 
     var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion" class="collapsed" />').appendTo($groups.eq(1))
 
@@ -449,7 +449,7 @@ $(function () {
     $target2.trigger('click')
 
     $body2
-      .toggleClass('active collapsing')
+      .toggleClass('show collapsing')
       .data('bs.collapse')._isTransitioning = 1
 
     $target1.trigger('click')
@@ -466,7 +466,7 @@ $(function () {
 
     var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="active"/>')
+    $('<div id="test1" class="show"/>')
       .appendTo('#qunit-fixture')
       .on('hidden.bs.collapse', function () {
         assert.ok($target.hasClass('collapsed'))

diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index 7e8ecae4ead99fc6eef2c27c8cb0b8c57a3d17d7..53455c2a62df357f7aeb920f42f03088c13850fe 100644 (file)
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -59,7 +59,7 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
   QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
@@ -128,10 +128,10 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
-  QUnit.test('should add class active to menu if clicked', function (assert) {
+  QUnit.test('should add class show to menu if clicked', function (assert) {
     assert.expect(1)
     var dropdownHTML = '<ul class="tabs">'
         + '<li class="dropdown">'
@@ -146,7 +146,7 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
   QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
@@ -164,11 +164,11 @@ $(function () {
         + '</ul>'
     var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
 
-    assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
   })
 
 
-  QUnit.test('should remove "active" class if body is clicked', function (assert) {
+  QUnit.test('should remove "show" class if body is clicked', function (assert) {
     assert.expect(2)
     var dropdownHTML = '<ul class="tabs">'
         + '<li class="dropdown">'
@@ -187,12 +187,12 @@ $(function () {
       .bootstrapDropdown()
       .trigger('click')
 
-    assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
+    assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
     $(document.body).trigger('click')
-    assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class removed')
+    assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
   })
 
-  QUnit.test('should remove "active" class if body is clicked, with multiple dropdowns', function (assert) {
+  QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
     assert.expect(7)
     var dropdownHTML = '<ul class="nav">'
         + '<li><a href="#menu1">Menu 1</a></li>'
@@ -217,16 +217,16 @@ $(function () {
     assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
 
     $first.trigger('click')
-    assert.strictEqual($first.parents('.active').length, 1, '"active" class added on click')
-    assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
+    assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
+    assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
     $(document.body).trigger('click')
-    assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
+    assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
 
     $last.trigger('click')
-    assert.strictEqual($last.parent('.active').length, 1, '"active" class added on click')
-    assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
+    assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
+    assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown')
     $(document.body).trigger('click')
-    assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
+    assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed')
   })
 
   QUnit.test('should fire show and hide event', function (assert) {
@@ -411,7 +411,7 @@ $(function () {
 
     $('#textField').trigger('click')
 
-    assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
+    assert.ok($dropdown.parent('.btn-group').hasClass('show'), 'dropdown menu is shown')
   })
 
   QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
@@ -430,6 +430,6 @@ $(function () {
 
     $('#textArea').trigger('click')
 
-    assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
+    assert.ok($dropdown.parent('.btn-group').hasClass('show'), 'dropdown menu is shown')
   })
 })

diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 4667d9e9a7614e1540738c1b1b4426b3d7e5588d..5452def585d0a393799cec87a9bf5d4073465e8d 100644 (file)
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -229,7 +229,7 @@ $(function () {
     $popover.bootstrapPopover('show')
     $popover.bootstrapPopover('dispose')
 
-    assert.ok(!$popover.hasClass('active'), 'popover is hidden')
+    assert.ok(!$popover.hasClass('show'), 'popover is hidden')
     assert.ok(!$popover.data('popover'), 'popover does not have data')
     assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
     assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index ea95118a443abd46f4762ba9511af7ac39f6b25f..1e59f0958fd5657b188d667cdd17e36e17d9c822 100644 (file)
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -111,7 +111,7 @@ $(function () {
 
     assert
       .ok($('.tooltip')
-      .is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.active'), 'has correct classes applied')
+      .is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.show'), 'has correct classes applied')
 
     $tooltip.bootstrapTooltip('hide')
 
@@ -306,7 +306,7 @@ $(function () {
     $tooltip.bootstrapTooltip('show')
     $tooltip.bootstrapTooltip('dispose')
 
-    assert.ok(!$tooltip.hasClass('active'), 'tooltip is hidden')
+    assert.ok(!$tooltip.hasClass('show'), 'tooltip is hidden')
     assert.ok(!$._data($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
     assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip still has click.foo')
     assert.ok(!$._data($tooltip[0], 'events').mouseover && !$._data($tooltip[0], 'events').mouseout, 'tooltip does not have hover events')
@@ -335,7 +335,7 @@ $(function () {
       .bootstrapTooltip({ trigger: 'manual' })
       .bootstrapTooltip('toggle')
 
-    assert.ok($('.tooltip').is('.fade.active'), 'tooltip is faded active')
+    assert.ok($('.tooltip').is('.fade.show'), 'tooltip is faded active')
   })
 
   QUnit.test('should hide previously shown tooltip when toggle is called on tooltip', function (assert) {
@@ -346,7 +346,7 @@ $(function () {
       .bootstrapTooltip('show')
 
     $('.tooltip').bootstrapTooltip('toggle')
-    assert.ok($('.tooltip').not('.fade.active'), 'tooltip was faded out')
+    assert.ok($('.tooltip').not('.fade.show'), 'tooltip was faded out')
   })
 
   QUnit.test('should place tooltips inside body when container is body', function (assert) {
@@ -502,11 +502,11 @@ $(function () {
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip is not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip is not faded active')
     }, 100)
 
     setTimeout(function () {
-      assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip is faded active')
+      assert.ok($('.tooltip').is('.fade.show'), '200ms: tooltip is faded active')
       done()
     }, 200)
 
@@ -522,12 +522,12 @@ $(function () {
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '200ms: tooltip not faded active')
       done()
     }, 200)
 
@@ -543,16 +543,16 @@ $(function () {
       .bootstrapTooltip({ delay: { show: 0, hide: 150 } })
 
     setTimeout(function () {
-      assert.ok($('.tooltip').is('.fade.active'), '1ms: tooltip faded active')
+      assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
       $tooltip.trigger('mouseout')
 
       setTimeout(function () {
-        assert.ok($('.tooltip').is('.fade.active'), '100ms: tooltip still faded active')
+        assert.ok($('.tooltip').is('.fade.show'), '100ms: tooltip still faded active')
         $tooltip.trigger('mouseenter')
       }, 100)
 
       setTimeout(function () {
-        assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip still faded active')
+        assert.ok($('.tooltip').is('.fade.show'), '200ms: tooltip still faded active')
         done()
       }, 200)
     }, 0)
@@ -569,12 +569,12 @@ $(function () {
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '200ms: tooltip not faded active')
       done()
     }, 200)
 
@@ -590,12 +590,12 @@ $(function () {
       .bootstrapTooltip({ delay: { show: 150, hide: 0 } })
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      assert.ok(!$('.tooltip').is('.fade.active'), '250ms: tooltip not faded active')
+      assert.ok(!$('.tooltip').is('.fade.show'), '250ms: tooltip not faded active')
       done()
     }, 250)
 
@@ -611,16 +611,16 @@ $(function () {
       .bootstrapTooltip({ delay: { show: 0, hide: 150 } })
 
     setTimeout(function () {
-      assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '1ms: tooltip faded active')
+      assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active')
 
       $tooltip.trigger('mouseout')
 
       setTimeout(function () {
-        assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '100ms: tooltip still faded active')
+        assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '100ms: tooltip still faded active')
       }, 100)
 
       setTimeout(function () {
-        assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.active'), '200ms: tooltip removed')
+        assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.show'), '200ms: tooltip removed')
         done()
       }, 200)
 
@@ -726,7 +726,7 @@ $(function () {
     assert.ok(obj._hoverState === 'out', 'the tooltip hoverState should be set to "out"')
 
     $('#tt-outer').trigger('mouseenter')
-    assert.ok(obj._hoverState === 'active', 'the tooltip hoverState should be set to "active"')
+    assert.ok(obj._hoverState === 'show', 'the tooltip hoverState should be set to "show"')
 
     assert.strictEqual(currentUid, $('#tt-content').text())
   })
@@ -788,7 +788,7 @@ $(function () {
     var tooltip = $el.data('bs.tooltip')
     var $tooltip = $(tooltip.getTipElement())
 
-    function showingTooltip() { return $tooltip.hasClass('active') || tooltip._hoverState === 'active' }
+    function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' }
 
     var tests = [
         ['mouseenter', 'mouseleave'],

diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 4b003efd8d6f6ed42bed3beabd958fa8462604fc..f99c2d24244d8a28fac31c462d48c56747588ac4 100644 (file)
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -11,14 +11,14 @@
     <div class="container">
       <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
-      <div class="alert alert-warning alert-dismissible fade active" role="alert">
+      <div class="alert alert-warning alert-dismissible fade show" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade active" role="alert">
+      <div class="alert alert-danger alert-dismissible fade show" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
@@ -31,7 +31,7 @@
         </p>
       </div>
 
-      <div class="alert alert-danger alert-dismissible fade active" role="alert">
+      <div class="alert alert-danger alert-dismissible fade show" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>

diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 973d3c5ee65e71e2d68c9b3c6b7b1afdb26a3c82..47ac06fd23e24733a437d691232522b0b1ca3dbb 100644 (file)
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -21,7 +21,7 @@
             </h5>
           </div>
 
-          <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
+          <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
             <div class="card-block">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 69d3923506e8a2a873b1c5c7be9438d85e45e8e3..361bf6b87a99030be3cc6fdedeb51b08b11f5489 100644 (file)
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -65,7 +65,7 @@
                     </h5>
                   </div>
 
-                  <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
+                  <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                     <div class="card-block">
                       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                     </div>

diff --git a/scss/_animation.scss b/scss/_animation.scss
index 2586bf2d169a517a3a099895590a8f23c145605b..31ecf7479cd67c780b2e670720802f01ca3fbd36 100644 (file)
--- a/scss/_animation.scss
+++ b/scss/_animation.scss
@@ -3,26 +3,26 @@
 
   @include transition(opacity .15s linear);
 
-  &.active {
+  &.show {
     opacity: 1;
   }
 }
 
 .collapse {
   display: none;
-  &.active {
+  &.show {
     display: block;
   }
 }
 
 tr {
-  &.collapse.active {
+  &.collapse.show {
     display: table-row;
   }
 }
 
 tbody {
-  &.collapse.active {
+  &.collapse.show {
     display: table-row-group;
   }
 }

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index b287e203768f37c8f8ae80efdd6024b186c215c2..1f37acef29261acf2b55993c5ca18ca6b49bf74d 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -111,7 +111,7 @@
 }
 
 // Open state for the dropdown
-.active {
+.show {
   // Show the menu
   > .dropdown-menu {
     display: block;

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 85aef719b6386e137b202cc7c21505a8628d82d1..b6aea7ac03addd14e997b4928ecfbc5dd0825152 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -31,7 +31,7 @@
     @include transition(transform .3s ease-out);
     transform: translate(0, -25%);
   }
-  &.active .modal-dialog { transform: translate(0, 0); }
+  &.show .modal-dialog { transform: translate(0, 0); }
 }
 .modal-open .modal {
   overflow-x: hidden;
@@ -69,7 +69,7 @@
 
   // Fade for backdrop
   &.fade { opacity: 0; }
-  &.active { opacity: $modal-backdrop-opacity; }
+  &.show { opacity: $modal-backdrop-opacity; }
 }
 
 // Modal header

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index abfa9bdb51544f682bb9a7ef799d140b76422612..24e198d464e2907d1817ddd0975b046652cbb92b 100644 (file)
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -11,7 +11,7 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.active { opacity: $tooltip-opacity; }
+  &.show { opacity: $tooltip-opacity; }
 
   &.tooltip-top,
   &.bs-tether-element-attached-bottom {