Add horizontal collapse (#896)

* Add horizontal collapse

* Add file to pass linter

Co-authored-by: Tom Begley <[email protected]>

Author: glsdown

docs/components_page/components/collapse.md

@@ -9,6 +9,12 @@ The `Collapse` component can be used to show and hide content in your apps. Simp
 
 {{example:components/collapse/simple.py:collapse}}
 
+## Horizontal collapse
+
+To change the animation to appear horizontally instead of vertically, set `dimension='width'` instead. When using this animation, you should use dimensions on the objects inside the `Collapse` as below.
+
+{{example:components/collapse/horizontal.py:collapse}}
+
 ## Multiple targets
 
 You can write arbitrarily complex callbacks to control the behaviour of your `Collapse` components. This example has a single button controlling multiple `Collapse` components, as well as multiple buttons sharing control of a single `Collapse` component.

docs/components_page/components/collapse/horizontal.py

@@ -0,0 +1,40 @@
+import dash_bootstrap_components as dbc
+from dash import Input, Output, State, html
+
+collapse = html.Div(
+    [
+        dbc.Button(
+            "Open collapse",
+            id="horizontal-collapse-button",
+            className="mb-3",
+            color="primary",
+            n_clicks=0,
+        ),
+        html.Div(
+            dbc.Collapse(
+                dbc.Card(
+                    dbc.CardBody(
+                        "This content appeared horizontally due to the "
+                        "`dimension` attribute"
+                    ),
+                    style={"width": "400px"},
+                ),
+                id="horizontal-collapse",
+                is_open=False,
+                dimension="width",
+            ),
+            style={"minHeight": "100px"},
+        ),
+    ]
+)
+
+
+@app.callback(
+    Output("horizontal-collapse", "is_open"),
+    [Input("horizontal-collapse-button", "n_clicks")],
+    [State("horizontal-collapse", "is_open")],
+)
+def toggle_collapse(n, is_open):
+    if n:
+        return not is_open
+    return is_open

setup.cfg

@@ -10,6 +10,7 @@ exclude =
     docs/components_page/components/button_group/radios.py,
     docs/components_page/components/carousel/callback.py,
     docs/components_page/components/collapse/accordion.py,
+    docs/components_page/components/collapse/horizontal.py
     docs/components_page/components/collapse/multiple.py,
     docs/components_page/components/collapse/simple.py,
     docs/components_page/components/dropdown/menu_items.py,

src/components/collapse/Collapse.js

@@ -37,6 +37,8 @@ const Collapse = React.forwardRef((props, ref) => {
   );
 });
 
+Collapse.defaultProps = {dimension: 'height'};
+
 Collapse.propTypes = {
   /**
    * The ID of this component, used to identify dash components
@@ -100,7 +102,13 @@ Collapse.propTypes = {
      * Holds the name of the component that is loading
      */
     component_name: PropTypes.string
-  })
+  }),
+
+  /**
+   * The dimension used when collapsing e.g. height will collapse vertically,
+   * whilst width will collapse horizontally
+   */
+  dimension: PropTypes.oneOf(['height', 'width'])
 };
 
 export default Collapse;

src/components/collapse/__tests__/Collapse.test.js

@@ -50,4 +50,28 @@ describe('Collapse', () => {
       null
     );
   });
+
+  test('default dimension is height', () => {
+    const {
+      container: {firstChild: collapse}
+    } = render(
+      <Collapse>
+        <div>Some collapse content</div>
+      </Collapse>
+    );
+
+    expect(collapse).not.toHaveClass('collapse-horizontal');
+  });
+
+  test('dimension changes the way the collapse is animated', () => {
+    const {
+      container: {firstChild: collapse}
+    } = render(
+      <Collapse dimension="width">
+        <div>Some collapse content</div>
+      </Collapse>
+    );
+
+    expect(collapse).toHaveClass('collapse-horizontal');
+  });
 });