Update horizontal collapse class to .collapse-horizontal

twbs · Jun 23, 2021 · 3026c26 · 3026c26
1 parent c1e54df
commit 3026c26
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 53 deletions.
diff --git a/js/dist/collapse.js b/js/dist/collapse.js
diff --git a/js/dist/collapse.js.map b/js/dist/collapse.js.map
diff --git a/js/dist/scrollspy.js b/js/dist/scrollspy.js
diff --git a/js/dist/scrollspy.js.map b/js/dist/scrollspy.js.map
diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -50,6 +50,7 @@ const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_COLLAPSE = 'collapse'
 const CLASS_NAME_COLLAPSING = 'collapsing'
 const CLASS_NAME_COLLAPSED = 'collapsed'
+const CLASS_NAME_WIDTH = 'collapse-horizontal'
 
 const WIDTH = 'width'
 const HEIGHT = 'height'
@@ -266,7 +267,7 @@ class Collapse extends BaseComponent {
   }
 
   _getDimension() {
-    return this._element.classList.contains(WIDTH) ? WIDTH : HEIGHT
+    return this._element.classList.contains(CLASS_NAME_WIDTH) ? WIDTH : HEIGHT
   }
 
   _getParent() {

diff --git a/scss/_transitions.scss b/scss/_transitions.scss
@@ -18,7 +18,7 @@
   overflow: hidden;
   @include transition($transition-collapse);
 
-  &.width {
+  &.collapse-horizontal {
     width: 0;
     height: auto;
     @include transition($transition-collapse-width);

diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
@@ -42,7 +42,7 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil
 
 ## Horizontal
 
-The collapse plugin also supports horizontal collapsing. Add the `.width` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element.
+The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element.
 
 {{< callout info >}}
 Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**
@@ -55,7 +55,7 @@ Please note that while the example below has a `min-height` set to avoid excessi
   </button>
 </p>
 <div style="min-height: 120px;">
-  <div class="collapse width" id="collapseWidthExample">
+  <div class="collapse collapse-horizontal" id="collapseWidthExample">
     <div class="card card-body" style="width: 300px;">
       This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
     </div>