feat(Collapse): add horizontal animation (react-bootstrap#5993)

* fix: changed .modal-backdrop to .offcanvas-backdrop

* Removed modalBsPrefix in Offcanvas

* feat: Added Horizontal Collapse

* Added width transition to Collapse API

Author: nsi319

src/Collapse.tsx

@@ -117,9 +117,6 @@ const propTypes = {
   /**
    * The dimension used when collapsing, or a function that returns the
    * dimension
-   *
-   * _Note: Bootstrap only partially supports 'width'!
-   * You will need to supply your own CSS animation for the `.width` CSS class._
    */
   dimension: PropTypes.oneOfType([
     PropTypes.oneOf(['height', 'width']),
@@ -245,7 +242,7 @@ const Collapse = React.forwardRef<Transition<any>, CollapseProps>(
               className,
               children.props.className,
               collapseStyles[state],
-              computedDimension === 'width' && 'width',
+              computedDimension === 'width' && 'collapse-horizontal',
             ),
           })
         }

test/CollapseSpec.js

@@ -203,14 +203,14 @@ describe('<Collapse>', () => {
       assert.ok(node.className.indexOf('width') === -1);
     });
 
-    it('Should have width in class', () => {
+    it('Should have collapse-horizontal in class', () => {
       function dimension() {
         return 'width';
       }
 
       wrapper.setProps({ dimension });
       let node = wrapper.getDOMNode();
-      assert.ok(node.className.indexOf('width') !== -1);
+      assert.ok(node.className.indexOf('collapse-horizontal') !== -1);
     });
   });
 

www/src/examples/CollapseHorizontal.js

@@ -0,0 +1,28 @@
+function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        onClick={() => setOpen(!open)}
+        aria-controls="example-collapse-text"
+        aria-expanded={open}
+      >
+        click
+      </Button>
+      <div style={{minHeight: '150px'}}>
+        <Collapse in={open} dimension="width">
+          <div id="example-collapse-text">
+            <Card body style={{width: '400px'}}>
+                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
+                terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
+                labore wes anderson cred nesciunt sapiente ea proident.
+            </Card>
+          </div>
+        </Collapse>
+      </div>
+    </>
+  );
+}
+
+render(<Example />);

www/src/pages/utilities/transitions.mdx

@@ -5,6 +5,7 @@ import ComponentApi from '../../components/ComponentApi';
 import ReactPlayground from '../../components/ReactPlayground';
 
 import Collapse from '../../examples/Collapse';
+import CollapseHorizontal from '../../examples/CollapseHorizontal'
 import Fade from '../../examples/Fade';
 
 # Transitions
@@ -19,6 +20,8 @@ as well as portable for using in other libraries.  All React-bootstrap component
 
 ## Collapse
 
+### Basic Example
+
 Add a collapse toggle animation to an element or component.
 
 <Callout title="Smooth animations">
@@ -32,6 +35,21 @@ Add a collapse toggle animation to an element or component.
 
 <ReactPlayground codeText={Collapse} />
 
+### Horizontal
+
+Add a collapse toggle animation to an element or component to transition the width instead of height.
+
+<Callout title="Smooth animations">
+  If you're noticing choppy animations, and the component that's being
+  collapsed has non-zero margin or padding, try wrapping the contents of
+  your <code>{'<Collapse>'}</code> inside a node with no margin or
+  padding, like the <code>{'<div>'}</code> in the example below. This will
+  allow the height to be computed properly, so the animation can proceed
+  smoothly.
+</Callout>
+
+<ReactPlayground codeText={CollapseHorizontal} />
+
 ## Fade
 
 Add a fade animation to a child element or component.