From bf39bb3ac3d2aef4687b3cd4762015d5f218e2bc Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Thu, 27 Oct 2016 16:13:17 -0600 Subject: [PATCH 1/2] Rename `.active` to `.show` --- docs/components/alerts.md | 6 +++--- docs/components/collapse.md | 8 +++---- docs/components/dropdowns.md | 8 +++---- js/src/alert.js | 8 +++---- js/src/collapse.js | 16 +++++++------- js/src/dropdown.js | 12 +++++------ js/src/modal.js | 10 ++++----- js/src/popover.js | 6 +++--- js/src/tooltip.js | 28 ++++++++++++------------ js/tests/unit/alert.js | 6 +++--- js/tests/unit/collapse.js | 32 ++++++++++++++-------------- js/tests/unit/dropdown.js | 34 ++++++++++++++--------------- js/tests/unit/popover.js | 2 +- js/tests/unit/tooltip.js | 40 +++++++++++++++++------------------ js/tests/visual/alert.html | 6 +++--- js/tests/visual/collapse.html | 2 +- js/tests/visual/modal.html | 2 +- scss/_animation.scss | 8 +++---- scss/_dropdown.scss | 2 +- scss/_modal.scss | 4 ++-- scss/_tooltip.scss | 2 +- 21 files changed, 121 insertions(+), 121 deletions(-) diff --git a/docs/components/alerts.md b/docs/components/alerts.md index b1ac0d8452..da72e322e5 100644 --- 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 ` @@ -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 0ece9e453d..5b34301182 100644 --- 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. -
+
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.
@@ -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 3e9948b3d8..d26de6eefa 100644 --- 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 ` @@ -36,7 +36,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. And with `` elements: {% example html %} -
+
@@ -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 ` @@ -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 8e55249501..884a5dec88 100644 --- 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 1e4730ff73..ad88159936 100644 --- 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 8b2164aa9a..97bba1c763 100644 --- 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 70bb68e42a..94abd19f49 100644 --- 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 a08ed4de93..33bc9e48c4 100644 --- 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 dc291a72ca..3fa5ecab44 100644 --- 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 9548c3318c..e078082c3c 100644 --- 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 = '
' + var alertHTML = '
' + '×' + '

Holy guacamole! Best check yo self, you\'re not looking too good.

' + '
' @@ -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 = '
' + var alertHTML = '
' + '×' + '

Holy guacamole! Best check yo self, you\'re not looking too good.

' + '
' diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index 7db69e2cf8..7139304338 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -48,7 +48,7 @@ $(function () { assert.expect(2) var $el = $('
').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 () { '
', '
', '
', - '
', + '
', '
', '
' ].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 = $('
').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 = $('').appendTo('#qunit-fixture') - $('
') + $('
') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.ok($target.hasClass('collapsed'), 'target has collapsed class') @@ -185,7 +185,7 @@ $(function () { var $target = $('').appendTo('#qunit-fixture') var $alt = $('').appendTo('#qunit-fixture') - $('
') + $('
') .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 = $('
') + var $test = $('
') .appendTo('#qunit-fixture') .on('hide.bs.collapse', function () { assert.ok(false) @@ -244,7 +244,7 @@ $(function () { assert.expect(1) var done = assert.async() - $('
') + $('
') .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 = $('').appendTo($groups.eq(0)) - $('
').appendTo($groups.eq(0)) + $('
').appendTo($groups.eq(0)) var $target2 = $('').appendTo($groups.eq(0)) - $('
').appendTo($groups.eq(0)) + $('
').appendTo($groups.eq(0)) var $target2 = $('').appendTo('#qunit-fixture') - $('
') + $('
') .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 = $('').appendTo('#qunit-fixture') var $alt = $('').appendTo('#qunit-fixture') - $('
') + $('
') .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 = $('').appendTo($groups.eq(0)) - $('
').appendTo($groups.eq(0)) + $('
').appendTo($groups.eq(0)) var $target2 = $('').appendTo('#qunit-fixture') - $('
') + $('
') .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 7e8ecae4ea..53455c2a62 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -59,7 +59,7 @@ $(function () { + '' 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 () { + '' 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 = '
    ' + '
  • ' @@ -146,7 +146,7 @@ $(function () { + '
' 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 () { + '' 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 = '
    ' + '
  • ' @@ -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 = '
      ' + '
    • Menu 1
      • ' @@ -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 4667d9e9a7..5452def585 100644 --- 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 ea95118a44..1e59f0958f 100644 --- 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 4b003efd8d..f99c2d2424 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -11,14 +11,14 @@

      Alert Bootstrap Visual Test

      -
    -
    +

    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    @@ -390,11 +390,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) ### Fade effect -To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in` to make the initial content visible. +To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible. {% highlight html %}
    -
    ...
    +
    ...
    ...
    ...
    ...
    diff --git a/js/src/tab.js b/js/src/tab.js index e7e8f550f0..c7e5fbfbe9 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -37,7 +37,7 @@ const Tab = (($) => { DROPDOWN_MENU : 'dropdown-menu', ACTIVE : 'active', FADE : 'fade', - IN : 'in' + SHOW : 'show' } const Selector = { @@ -173,7 +173,7 @@ const Tab = (($) => { } if (active) { - $(active).removeClass(ClassName.IN) + $(active).removeClass(ClassName.SHOW) } } @@ -197,7 +197,7 @@ const Tab = (($) => { if (isTransitioning) { Util.reflow(element) - $(element).addClass(ClassName.IN) + $(element).addClass(ClassName.SHOW) } else { $(element).removeClass(ClassName.FADE) }