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 = {
To opt into darker DropdownMenu
to match a dark Navbar
, add a dark
prop to DropdownMenu
.
+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( ++{` + `}+ Dropdown's menu is dark + ++ Header +Active Action +Another Action +
Keep it light
+Let's go dark
+