From 741798459178b825f53cedaa54c33326a81b8564 Mon Sep 17 00:00:00 2001 From: Gary Thomas Date: Wed, 27 Jan 2021 14:58:42 -0800 Subject: [PATCH] feat(bs5): Convert Dropdown & DropdownMenu to RTL 'left' & 'right' to 'start' & 'end' --- docs/lib/Components/ButtonDropdownPage.js | 10 +++++----- docs/lib/Components/DropdownsPage.js | 16 ++++++++-------- src/Dropdown.js | 2 +- src/DropdownContext.js | 2 +- src/DropdownMenu.js | 12 ++++++------ src/__tests__/Dropdown.spec.js | 8 ++++---- src/__tests__/DropdownMenu.spec.js | 16 ++++++++-------- types/lib/Dropdown.d.ts | 2 +- 8 files changed, 34 insertions(+), 34 deletions(-) diff --git a/docs/lib/Components/ButtonDropdownPage.js b/docs/lib/Components/ButtonDropdownPage.js index c492f5601..952631ea8 100644 --- a/docs/lib/Components/ButtonDropdownPage.js +++ b/docs/lib/Components/ButtonDropdownPage.js @@ -48,7 +48,7 @@ export default class ButtonDropdownPage extends React.Component { {`ButtonDropdown.propTypes = { disabled: PropTypes.bool, - direction: PropTypes.oneOf(['up', 'down', 'left', 'right']), + direction: PropTypes.oneOf(['up', 'down', 'start', 'end']), group: PropTypes.bool, isOpen: PropTypes.bool, tag: PropTypes.string, @@ -206,7 +206,7 @@ export default function Example () => { {' '} - { this.setState({ btnDropleft: !this.state.btnDropleft }); }}> + { this.setState({ btnDropleft: !this.state.btnDropleft }); }}> Dropleft @@ -216,7 +216,7 @@ export default function Example () => { {' '} - { this.setState({ btnDropright: !this.state.btnDropright }); }}> + { this.setState({ btnDropright: !this.state.btnDropright }); }}> Dropright @@ -239,7 +239,7 @@ export default function Example () => { - { this.setState({ btnDropleft: !this.state.btnDropleft }); }}> + { this.setState({ btnDropleft: !this.state.btnDropleft }); }}> Dropleft @@ -249,7 +249,7 @@ export default function Example () => { - { this.setState({ btnDropright: !this.state.btnDropright }); }}> + { this.setState({ btnDropright: !this.state.btnDropright }); }}> Dropright diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js index 11ed090b7..98ac097f6 100644 --- a/docs/lib/Components/DropdownsPage.js +++ b/docs/lib/Components/DropdownsPage.js @@ -63,7 +63,7 @@ export default class DropdownPage extends React.Component { a11y: PropTypes.bool, // defaults to true. Set to false to enable more bootstrap like tabbing behavior className: PropTypes.string, disabled: PropTypes.bool, - direction: PropTypes.oneOf(['up', 'down', 'left', 'right']), + direction: PropTypes.oneOf(['up', 'down', 'start', 'end']), group: PropTypes.bool, isOpen: PropTypes.bool, // For Dropdown usage inside a Nav @@ -94,7 +94,7 @@ DropdownMenu.propTypes = { tag: PropTypes.string, children: PropTypes.node.isRequired, dark: PropTypes.bool, - right: PropTypes.bool, + end: PropTypes.bool, flip: PropTypes.bool, // default: true, className: PropTypes.string, cssModule: PropTypes.object, @@ -132,7 +132,7 @@ DropdownItem.propTypes = { Dropdown's menu is right-aligned - + Header Action Another Action @@ -148,7 +148,7 @@ DropdownItem.propTypes = { Dropdown's menu is right-aligned - + Header Action Another Action @@ -293,7 +293,7 @@ DropdownItem.propTypes = { - { this.setState({ ddDropleft: !this.state.ddDropleft }); }}> + { this.setState({ ddDropleft: !this.state.ddDropleft }); }}> Dropleft @@ -304,7 +304,7 @@ DropdownItem.propTypes = { - { this.setState({ ddDropright: !this.state.ddDropright }); }}> + { this.setState({ ddDropright: !this.state.ddDropright }); }}> Dropright @@ -328,7 +328,7 @@ DropdownItem.propTypes = { - { this.setState({ btnDropleft: !this.state.btnDropleft }); }}> + { this.setState({ btnDropleft: !this.state.btnDropleft }); }}> Dropleft @@ -338,7 +338,7 @@ DropdownItem.propTypes = { - { this.setState({ btnDropright: !this.state.btnDropright }); }}> + { this.setState({ btnDropright: !this.state.btnDropright }); }}> Dropright diff --git a/src/Dropdown.js b/src/Dropdown.js index ed5424eaa..113ab291e 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -11,7 +11,7 @@ import { mapToCssModules, omit, keyCodes, tagPropType } from './utils'; const propTypes = { a11y: PropTypes.bool, disabled: PropTypes.bool, - direction: PropTypes.oneOf(['up', 'down', 'left', 'right']), + direction: PropTypes.oneOf(['up', 'down', 'start', 'end']), group: PropTypes.bool, isOpen: PropTypes.bool, nav: PropTypes.bool, diff --git a/src/DropdownContext.js b/src/DropdownContext.js index 8426a24cd..dc5602b16 100644 --- a/src/DropdownContext.js +++ b/src/DropdownContext.js @@ -5,7 +5,7 @@ import React from 'react'; * { * toggle: PropTypes.func.isRequired, * isOpen: PropTypes.bool.isRequired, - * direction: PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired, + * direction: PropTypes.oneOf(['up', 'down', 'start', 'end']).isRequired, * inNavbar: PropTypes.bool.isRequired, * disabled: PropTypes.bool * } diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js index 89235e341..e46df8852 100644 --- a/src/DropdownMenu.js +++ b/src/DropdownMenu.js @@ -10,7 +10,7 @@ const propTypes = { tag: tagPropType, children: PropTypes.node.isRequired, dark: PropTypes.bool, - right: PropTypes.bool, + end: PropTypes.bool, flip: PropTypes.bool, modifiers: PropTypes.array, className: PropTypes.string, @@ -28,8 +28,8 @@ const defaultProps = { const directionPositionMap = { up: 'top', - left: 'left', - right: 'right', + start: 'left', + end: 'right', down: 'bottom', }; @@ -47,7 +47,7 @@ class DropdownMenu extends React.Component { className, cssModule, dark, - right, + end, tag, flip, modifiers, @@ -62,7 +62,7 @@ class DropdownMenu extends React.Component { 'dropdown-menu', { 'dropdown-menu-dark': dark, - 'dropdown-menu-right': right, + 'dropdown-menu-end': end, show: this.context.isOpen, } ), cssModule); @@ -72,7 +72,7 @@ class DropdownMenu extends React.Component { if (persist || (this.context.isOpen && !this.context.inNavbar)) { const position1 = directionPositionMap[this.context.direction] || 'bottom'; - const position2 = right ? 'end' : 'start'; + const position2 = end ? 'end' : 'start'; const poperPlacement = `${position1}-${position2}`; const poperModifiers = [ ...modifiers, diff --git a/src/__tests__/Dropdown.spec.js b/src/__tests__/Dropdown.spec.js index 27bb38bee..47397fa62 100644 --- a/src/__tests__/Dropdown.spec.js +++ b/src/__tests__/Dropdown.spec.js @@ -1108,12 +1108,12 @@ describe('Dropdown', () => { it('should render with correct class when direction is set', () => { const dropup = shallow(); - const dropleft = shallow(); - const dropright = shallow(); + const dropleft = shallow(); + const dropright = shallow(); expect(dropup.childAt(0).childAt(0).hasClass('dropup')).toBe(true); - expect(dropleft.childAt(0).childAt(0).hasClass('dropleft')).toBe(true); - expect(dropright.childAt(0).childAt(0).hasClass('dropright')).toBe(true); + expect(dropleft.childAt(0).childAt(0).hasClass('dropstart')).toBe(true); + expect(dropright.childAt(0).childAt(0).hasClass('dropend')).toBe(true); }); describe('menuRole prop', () => { diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js index 065998dbf..8b5774f98 100644 --- a/src/__tests__/DropdownMenu.spec.js +++ b/src/__tests__/DropdownMenu.spec.js @@ -65,18 +65,18 @@ describe('DropdownMenu', () => { ); - expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-right')).toBe(false); + expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-end')).toBe(false); }); it('should render right aligned menus', () => { isOpen = true; const wrapper = mount( - Ello world + Ello world ); - expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-right')).toBe(true); + expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-end')).toBe(true); }); it('should render down when direction is unknown on the context', () => { @@ -114,9 +114,9 @@ describe('DropdownMenu', () => { expect(wrapper.find(Popper).prop('placement')).toBe('top-start'); }); - it('should render left when direction is "left" on the context', () => { + it('should render left when direction is "start" on the context', () => { isOpen = true; - direction = 'left'; + direction = 'start'; const wrapper = mount( Ello world @@ -126,9 +126,9 @@ describe('DropdownMenu', () => { expect(wrapper.find(Popper).prop('placement')).toBe('left-start'); }); - it('should render right when direction is "right" on the context', () => { + it('should render right when direction is "end" on the context', () => { isOpen = true; - direction = 'right'; + direction = 'end'; const wrapper = mount( Ello world @@ -176,7 +176,7 @@ describe('DropdownMenu', () => { it('should not render Popper when isOpen is false', () => { const wrapper = mount( - Ello world + Ello world ); diff --git a/types/lib/Dropdown.d.ts b/types/lib/Dropdown.d.ts index dcb09ec75..de871fba7 100644 --- a/types/lib/Dropdown.d.ts +++ b/types/lib/Dropdown.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { CSSModule } from './index'; -export type Direction = 'up' | 'down' | 'left' | 'right'; +export type Direction = 'up' | 'down' | 'start' | 'end'; export interface DropdownProps extends React.HTMLAttributes { [key: string]: any;