fix(Offcanvas): use placement prop rather than direction prop (#2511

)
reactstrap · Apr 29, 2022 · e47569b · e47569b
1 parent 1179b87
commit e47569b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/Offcanvas.js b/src/Offcanvas.js
@@ -29,7 +29,7 @@ const propTypes = {
   className: PropTypes.string,
   container: targetPropType,
   cssModule: PropTypes.object,
-  direction: PropTypes.oneOf(['start', 'end', 'bottom', 'top', 'left', 'right']),
+  placement: PropTypes.oneOf(['start', 'end', 'bottom', 'top']),
   fade: PropTypes.bool,
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func,]),
   isOpen: PropTypes.bool,
@@ -54,7 +54,7 @@ const propsToOmit = Object.keys(propTypes);
 const defaultProps = {
   isOpen: false,
   autoFocus: true,
-  direction: 'start',
+  placement: 'start',
   scrollable: false,
   role: 'dialog',
   backdrop: true,
@@ -336,7 +336,7 @@ class Offcanvas extends React.Component {
 
   render() {
     const {
-      direction,
+      placement,
       unmountOnClose
     } = this.props;
 
@@ -410,7 +410,7 @@ class Offcanvas extends React.Component {
             onExited={this.onClosed}
             cssModule={cssModule}
             className={mapToCssModules(classNames('offcanvas', className,
-              `offcanvas-${direction}`
+              `offcanvas-${placement}`
             ), cssModule)}
             innerRef={(c) => {
               this._dialog = c;

diff --git a/src/__tests__/Offcanvas.spec.js b/src/__tests__/Offcanvas.spec.js
@@ -161,10 +161,10 @@ describe('Offcanvas', () => {
     wrapper.unmount();
   });
 
-  it('should render with the class "offcanvas-${direction}" when direction is passed', () => {
+  it('should render with the class "offcanvas-${placement}" when placement is passed', () => {
     isOpen = true;
     const wrapper = mount(
-      <Offcanvas isOpen={isOpen} toggle={toggle} direction="top">
+      <Offcanvas isOpen={isOpen} toggle={toggle} placement="top">
         Yo!
       </Offcanvas>
     );

diff --git a/stories/examples/Offcanvas.js b/stories/examples/Offcanvas.js
@@ -34,7 +34,7 @@ Example.args = {
 };
 
 Example.argTypes = {
-  direction: {
+  placement: {
     control: { type: 'select' },
     options: ['top', 'start', 'end', 'bottom']
   },

diff --git a/types/lib/Offcanvas.d.ts b/types/lib/Offcanvas.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CSSModule } from './utils';
 import { FadeProps } from './Fade';
 
-export type Placement = 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top';
+export type Placement = 'start' | 'end' | 'bottom' | 'top';
 
 export interface OffcanvasProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;