feat(Offcanvas): add responsive variations

Author: mrholek

packages/coreui-react/src/components/offcanvas/COffcanvas.tsx

@@ -36,6 +36,12 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * Generates modal using createPortal.
    */
   portal?: boolean
+  /**
+   * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+   *
+   * @since 4.6.0
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   /**
    * Allow body scrolling while offcanvas is open
    */
@@ -56,7 +62,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       onHide,
       onShow,
       placement,
-      portal = true,
+      portal = false,
+      responsive = true,
       scroll = false,
       visible = false,
       ...rest
@@ -86,26 +93,28 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       }
     }, [_visible])
 
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'showing'
+        : state === 'entered'
+        ? 'show'
+        : state === 'exiting'
+        ? 'show hiding'
+        : ''
+    }
+
     const _className = classNames(
-      'offcanvas',
       {
+        [`offcanvas${typeof responsive !== 'boolean' ? '-' + responsive : ''}`]: responsive,
         [`offcanvas-${placement}`]: placement,
-        show: _visible,
       },
       className,
     )
 
-    const transitionStyles = {
-      entering: { visibility: 'visible' },
-      entered: { visibility: 'visible' },
-      exiting: { visibility: 'visible' },
-      exited: { visibility: 'hidden' },
-    }
-
     const handleDismiss = () => {
       setVisible(false)
     }
-    
+
     const handleBackdropDismiss = () => {
       if (backdrop !== 'static') {
         setVisible(false)
@@ -125,9 +134,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       return (
         <>
           <div
-            className={_className}
+            className={classNames(_className, getTransitionClass(state))}
             role="dialog"
-            style={{ ...transitionStyles[state] }}
             tabIndex={-1}
             onKeyDown={handleKeyDown}
             {...rest}
@@ -187,6 +195,10 @@ COffcanvas.propTypes = {
   placement: PropTypes.oneOf<'start' | 'end' | 'top' | 'bottom'>(['start', 'end', 'top', 'bottom'])
     .isRequired,
   portal: PropTypes.bool,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
   scroll: PropTypes.bool,
   visible: PropTypes.bool,
 }

packages/docs/content/components/offcanvas.mdx

@@ -10,6 +10,7 @@ other_frameworks: offcanvas
 import { useState } from 'react'
 
 import {
+  CAlert,
   CButton,
   CCloseButton,
   CCallout,
@@ -26,7 +27,7 @@ import {
 Below is an offcanvas example that is shown by default (via `visible={true}`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
 
 ```jsx preview className="docs-example-offcanvas bg-light p-0"
-<COffcanvas backdrop={false} placement="start" portal={false} visible={true}>
+<COffcanvas backdrop={false} placement="start" visible={true}>
   <COffcanvasHeader>
     <COffcanvasTitle>Offcanvas</COffcanvasTitle>
     <CCloseButton className="text-reset" />
@@ -218,6 +219,54 @@ return (
 )
 ```
 
+## Responsive 
+
+Responsive offcanvas properties hide content outside the viewport from a specified breakpoint and down.
+Above that breakpoint, the contents within will behave as usual. 
+For example, `responsive="lg"` hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.
+
+export const ResponsiveExample = () => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      <CButton className="d-lg-none" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
+      <CAlert className="d-none d-lg-block" color="info">Resize your browser to show the responsive offcanvas toggle.</CAlert>
+      <COffcanvas placement="start" responsive="lg" visible={visible} onHide={() => setVisible(false)}>
+        <COffcanvasHeader>
+          <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
+          <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+        </COffcanvasHeader>
+        <COffcanvasBody>
+          <p>This is content within an <code>.offcanvas-lg</code></p>.
+        </COffcanvasBody>
+      </COffcanvas>
+    </>
+  )
+}
+
+<Example>
+  <ResponsiveExample />
+</Example>
+
+```jsx
+const [visible, setVisible] = useState(false)
+return (
+  <>
+    <CButton className="d-lg-none" onClick={() => setVisible(true)}>Toggle offcanvas</CButton>
+    <CAlert className="d-none d-lg-block" color="info">Resize your browser to show the responsive offcanvas toggle.</CAlert>
+    <COffcanvas backdrop="static" placement="start" visible={visible} onHide={() => setVisible(false)}>
+      <COffcanvasHeader>
+        <COffcanvasTitle>Responsive offcanvas</COffcanvasTitle>
+        <CCloseButton className="text-reset" onClick={() => setVisible(false)} />
+      </COffcanvasHeader>
+      <COffcanvasBody>
+        This is content within an <code>.offcanvas-lg</code>.
+      </COffcanvasBody>
+    </COffcanvas>
+  </>
+)
+```
+
 
 ## Placement