diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js index 697595728..3762dfe5d 100644 --- a/docs/lib/Components/DropdownsPage.js +++ b/docs/lib/Components/DropdownsPage.js @@ -9,7 +9,8 @@ import { Dropdown, DropdownToggle, DropdownItem, - DropdownMenu } from 'reactstrap'; + DropdownMenu, + UncontrolledDropdown } from 'reactstrap'; import SectionTitle from '../UI/SectionTitle'; import DropdownExample from '../examples/Dropdown'; import DropdownSizingExample from '../examples/DropdownSizing'; @@ -92,6 +93,7 @@ DropdownToggle.propTypes = { DropdownMenu.propTypes = { tag: PropTypes.string, children: PropTypes.node.isRequired, + dark: PropTypes.bool, right: PropTypes.bool, flip: PropTypes.bool, // default: true, className: PropTypes.string, @@ -153,6 +155,36 @@ DropdownItem.propTypes = { Another Really Really Long Action (Really!) +`} + + + Dark dropdowns +

To opt into darker DropdownMenu to match a dark Navbar, add a dark prop to DropdownMenu.

+
+
+ + + Dropdown's menu is dark + + + Header + Active Action + Another Action + + +
+
+
+          
+{`
+  
+    Dropdown's menu is dark
+  
+  
+    Header
+    Active Action
+    Another Action
+  
 `}
           
         
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js index 053300357..8948b35d9 100644 --- a/src/DropdownMenu.js +++ b/src/DropdownMenu.js @@ -9,6 +9,7 @@ import { mapToCssModules, tagPropType, targetPropType, getTarget } from './utils const propTypes = { tag: tagPropType, children: PropTypes.node.isRequired, + dark: PropTypes.bool, right: PropTypes.bool, flip: PropTypes.bool, modifiers: PropTypes.object, @@ -46,6 +47,7 @@ class DropdownMenu extends React.Component { const { className, cssModule, + dark, right, tag, flip, @@ -60,6 +62,7 @@ class DropdownMenu extends React.Component { className, 'dropdown-menu', { + 'dropdown-menu-dark': dark, 'dropdown-menu-right': right, show: this.context.isOpen, } diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js index d7eb23671..f1b356dce 100644 --- a/src/__tests__/DropdownMenu.spec.js +++ b/src/__tests__/DropdownMenu.spec.js @@ -220,4 +220,29 @@ describe('DropdownMenu', () => { }); }) + it('should not have the class "dropdown-menu-dark" by default', () => { + isOpen = true; + const wrapper = mount( + + +

Keep it light

+
+
+ ); + + expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-dark')).toBe(false); + }); + + it('should have the class "dropdown-menu-dark" when dark is true', () => { + isOpen = true; + const wrapper = mount( + + +

Let's go dark

+
+
+ ); + + expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-dark')).toBe(true); + }); }); diff --git a/types/lib/DropdownMenu.d.ts b/types/lib/DropdownMenu.d.ts index dd5091367..df650e98a 100644 --- a/types/lib/DropdownMenu.d.ts +++ b/types/lib/DropdownMenu.d.ts @@ -5,6 +5,7 @@ import { CSSModule } from './index'; export interface DropdownMenuProps extends React.HTMLAttributes { [key: string]: any; tag?: React.ElementType; + dark?: boolean; right?: boolean; flip?: boolean; modifiers?: Popper.Modifiers;