Merge pull request #20982 from Johann-S/fix19344

Fix #19344 - Use a single class name for opened/expanded/shown state of widgets

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 `.in` classes.
+- To animate alerts when dismissing them, be sure to add the `.fade` and `.active` classes.
 
 You can see this in action with a live demo:
 
 {% example html %}
-<div class="alert alert-warning alert-dismissible fade in" role="alert">
+<div class="alert alert-warning alert-dismissible fade active" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>

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.in` shows content
+- `.collapse.active` 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 in" role="tabpanel" aria-labelledby="headingOne">
+    <div id="collapseOne" class="collapse active" 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.in` shows the content
+- `.collapse.active` 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 `in`.
+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`.
 
 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.
 

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 open">
+<div class="dropdown active">
   <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 open">
+<div class="dropdown active">
   <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 open">
+<div class="dropdown active">
   <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 `.open` class on the parent list item.
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.active` 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.**
 

js/src/alert.js

@@ -36,9 +36,9 @@ const Alert = (($) => {
   }
 
   const ClassName = {
-    ALERT : 'alert',
-    FADE  : 'fade',
-    IN    : 'in'
+    ALERT  : 'alert',
+    FADE   : 'fade',
+    ACTIVE : 'active'
   }
 
 
@@ -108,7 +108,7 @@ const Alert = (($) => {
     }
 
     _removeElement(element) {
-      $(element).removeClass(ClassName.IN)
+      $(element).removeClass(ClassName.ACTIVE)
 
       if (!Util.supportsTransitionEnd() ||
           !$(element).hasClass(ClassName.FADE)) {

js/src/collapse.js

@@ -44,7 +44,7 @@ const Collapse = (($) => {
   }
 
   const ClassName = {
-    IN         : 'in',
+    ACTIVE     : 'active',
     COLLAPSE   : 'collapse',
     COLLAPSING : 'collapsing',
     COLLAPSED  : 'collapsed'
@@ -56,7 +56,7 @@ const Collapse = (($) => {
   }
 
   const Selector = {
-    ACTIVES     : '.card > .in, .card > .collapsing',
+    ACTIVES     : '.card > .active, .card > .collapsing',
     DATA_TOGGLE : '[data-toggle="collapse"]'
   }
 
@@ -104,7 +104,7 @@ const Collapse = (($) => {
     // public
 
     toggle() {
-      if ($(this._element).hasClass(ClassName.IN)) {
+      if ($(this._element).hasClass(ClassName.ACTIVE)) {
         this.hide()
       } else {
         this.show()
@@ -113,7 +113,7 @@ const Collapse = (($) => {
 
     show() {
       if (this._isTransitioning ||
-        $(this._element).hasClass(ClassName.IN)) {
+        $(this._element).hasClass(ClassName.ACTIVE)) {
         return
       }
 
@@ -168,7 +168,7 @@ const Collapse = (($) => {
         $(this._element)
           .removeClass(ClassName.COLLAPSING)
           .addClass(ClassName.COLLAPSE)
-          .addClass(ClassName.IN)
+          .addClass(ClassName.ACTIVE)
 
         this._element.style[dimension] = ''
 
@@ -194,7 +194,7 @@ const Collapse = (($) => {
 
     hide() {
       if (this._isTransitioning ||
-        !$(this._element).hasClass(ClassName.IN)) {
+        !$(this._element).hasClass(ClassName.ACTIVE)) {
         return
       }
 
@@ -215,7 +215,7 @@ const Collapse = (($) => {
       $(this._element)
         .addClass(ClassName.COLLAPSING)
         .removeClass(ClassName.COLLAPSE)
-        .removeClass(ClassName.IN)
+        .removeClass(ClassName.ACTIVE)
 
       this._element.setAttribute('aria-expanded', false)
 
@@ -293,7 +293,7 @@ const Collapse = (($) => {
 
     _addAriaAndCollapsedClass(element, triggerArray) {
       if (element) {
-        let isOpen = $(element).hasClass(ClassName.IN)
+        let isOpen = $(element).hasClass(ClassName.ACTIVE)
         element.setAttribute('aria-expanded', isOpen)
 
         if (triggerArray.length) {

js/src/dropdown.js

@@ -41,7 +41,7 @@ const Dropdown = (($) => {
   const ClassName = {
     BACKDROP : 'dropdown-backdrop',
     DISABLED : 'disabled',
-    OPEN     : 'open'
+    ACTIVE   : 'active'
   }
 
   const Selector = {
@@ -86,7 +86,7 @@ const Dropdown = (($) => {
       }
 
       let parent   = Dropdown._getParentFromElement(this)
-      let isActive = $(parent).hasClass(ClassName.OPEN)
+      let isActive = $(parent).hasClass(ClassName.ACTIVE)
 
       Dropdown._clearMenus()
 
@@ -116,7 +116,7 @@ const Dropdown = (($) => {
       this.focus()
       this.setAttribute('aria-expanded', 'true')
 
-      $(parent).toggleClass(ClassName.OPEN)
+      $(parent).toggleClass(ClassName.ACTIVE)
       $(parent).trigger($.Event(Event.SHOWN, relatedTarget))
 
       return false
@@ -171,7 +171,7 @@ const Dropdown = (($) => {
         let parent        = Dropdown._getParentFromElement(toggles[i])
         let relatedTarget = { relatedTarget : toggles[i] }
 
-        if (!$(parent).hasClass(ClassName.OPEN)) {
+        if (!$(parent).hasClass(ClassName.ACTIVE)) {
           continue
         }
 
@@ -190,7 +190,7 @@ const Dropdown = (($) => {
         toggles[i].setAttribute('aria-expanded', 'false')
 
         $(parent)
-          .removeClass(ClassName.OPEN)
+          .removeClass(ClassName.ACTIVE)
           .trigger($.Event(Event.HIDDEN, relatedTarget))
       }
     }
@@ -220,7 +220,7 @@ const Dropdown = (($) => {
       }
 
       let parent   = Dropdown._getParentFromElement(this)
-      let isActive = $(parent).hasClass(ClassName.OPEN)
+      let isActive = $(parent).hasClass(ClassName.ACTIVE)
 
       if ((!isActive && event.which !== ESCAPE_KEYCODE) ||
            (isActive && event.which === ESCAPE_KEYCODE)) {

js/src/modal.js

@@ -60,7 +60,7 @@ const Modal = (($) => {
     BACKDROP           : 'modal-backdrop',
     OPEN               : 'modal-open',
     FADE               : 'fade',
-    IN                 : 'in'
+    ACTIVE             : 'active'
   }
 
   const Selector = {
@@ -169,7 +169,7 @@ const Modal = (($) => {
 
       $(document).off(Event.FOCUSIN)
 
-      $(this._element).removeClass(ClassName.IN)
+      $(this._element).removeClass(ClassName.ACTIVE)
 
       $(this._element).off(Event.CLICK_DISMISS)
       $(this._dialog).off(Event.MOUSEDOWN_DISMISS)
@@ -231,7 +231,7 @@ const Modal = (($) => {
         Util.reflow(this._element)
       }
 
-      $(this._element).addClass(ClassName.IN)
+      $(this._element).addClass(ClassName.ACTIVE)
 
       if (this._config.focus) {
         this._enforceFocus()
@@ -343,7 +343,7 @@ const Modal = (($) => {
           Util.reflow(this._backdrop)
         }
 
-        $(this._backdrop).addClass(ClassName.IN)
+        $(this._backdrop).addClass(ClassName.ACTIVE)
 
         if (!callback) {
           return
@@ -359,7 +359,7 @@ const Modal = (($) => {
           .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
 
       } else if (!this._isShown && this._backdrop) {
-        $(this._backdrop).removeClass(ClassName.IN)
+        $(this._backdrop).removeClass(ClassName.ACTIVE)
 
         let callbackRemove = () => {
           this._removeBackdrop()

js/src/popover.js

@@ -37,8 +37,8 @@ const Popover = (($) => {
   })
 
   const ClassName = {
-    FADE : 'fade',
-    IN  : 'in'
+    FADE   : 'fade',
+    ACTIVE : 'active'
   }
 
   const Selector = {
@@ -119,7 +119,7 @@ const Popover = (($) => {
 
       $tip
         .removeClass(ClassName.FADE)
-        .removeClass(ClassName.IN)
+        .removeClass(ClassName.ACTIVE)
 
       this.cleanupTether()
     }

js/src/tooltip.js

@@ -70,8 +70,8 @@ const Tooltip = (($) => {
   }
 
   const HoverState = {
-    IN  : 'in',
-    OUT : 'out'
+    ACTIVE : 'active',
+    OUT    : 'out'
   }
 
   const Event = {
@@ -88,8 +88,8 @@ const Tooltip = (($) => {
   }
 
   const ClassName = {
-    FADE : 'fade',
-    IN   : 'in'
+    FADE   : 'fade',
+    ACTIVE : 'active'
   }
 
   const Selector = {
@@ -205,7 +205,7 @@ const Tooltip = (($) => {
 
       } else {
 
-        if ($(this.getTipElement()).hasClass(ClassName.IN)) {
+        if ($(this.getTipElement()).hasClass(ClassName.ACTIVE)) {
           this._leave(null, this)
           return
         }
@@ -291,7 +291,7 @@ const Tooltip = (($) => {
         Util.reflow(tip)
         this._tether.position()
 
-        $(tip).addClass(ClassName.IN)
+        $(tip).addClass(ClassName.ACTIVE)
 
         let complete = () => {
           let prevHoverState = this._hoverState
@@ -319,7 +319,7 @@ const Tooltip = (($) => {
       let tip       = this.getTipElement()
       let hideEvent = $.Event(this.constructor.Event.HIDE)
       let complete  = () => {
-        if (this._hoverState !== HoverState.IN && tip.parentNode) {
+        if (this._hoverState !== HoverState.ACTIVE && tip.parentNode) {
           tip.parentNode.removeChild(tip)
         }
 
@@ -338,7 +338,7 @@ const Tooltip = (($) => {
         return
       }
 
-      $(tip).removeClass(ClassName.IN)
+      $(tip).removeClass(ClassName.ACTIVE)
 
       if (Util.supportsTransitionEnd() &&
          ($(this.tip).hasClass(ClassName.FADE))) {
@@ -372,7 +372,7 @@ const Tooltip = (($) => {
 
       $tip
         .removeClass(ClassName.FADE)
-        .removeClass(ClassName.IN)
+        .removeClass(ClassName.ACTIVE)
 
       this.cleanupTether()
     }
@@ -492,23 +492,23 @@ const Tooltip = (($) => {
         ] = true
       }
 
-      if ($(context.getTipElement()).hasClass(ClassName.IN) ||
-         (context._hoverState === HoverState.IN)) {
-        context._hoverState = HoverState.IN
+      if ($(context.getTipElement()).hasClass(ClassName.ACTIVE) ||
+         (context._hoverState === HoverState.ACTIVE)) {
+        context._hoverState = HoverState.ACTIVE
         return
       }
 
       clearTimeout(context._timeout)
 
-      context._hoverState = HoverState.IN
+      context._hoverState = HoverState.ACTIVE
 
       if (!context.config.delay || !context.config.delay.show) {
         context.show()
         return
       }
 
       context._timeout = setTimeout(() => {
-        if (context._hoverState === HoverState.IN) {
+        if (context._hoverState === HoverState.ACTIVE) {
           context.show()
         }
       }, context.config.delay.show)