feat(DropdownMenu): add-dark-prop

When true, adds the dropdown-menu-dark class to the DropdownMenu.
reactstrap · Oct 27, 2021 · 2e22d7b · 2e22d7b
1 parent 4fb7cdd
commit 2e22d7b
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 1 deletion.
diff --git 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 = {
     <DropdownItem divider/>
     <DropdownItem>Another Really Really Long Action (Really!)</DropdownItem>
   </DropdownMenu>
+</Dropdown>`}
+          </PrismCode>
+        </pre>
+        <SectionTitle>Dark dropdowns</SectionTitle>
+        <p>To opt into darker <code>DropdownMenu</code> to match a dark <code>Navbar</code>, add a <code>dark</code> prop to <code>DropdownMenu</code>.</p>
+        <div className="docs-example">
+          <div>
+            <UncontrolledDropdown>
+              <DropdownToggle caret>
+                Dropdown's menu is dark
+              </DropdownToggle>
+              <DropdownMenu dark>
+                <DropdownItem header>Header</DropdownItem>
+                <DropdownItem active>Active Action</DropdownItem>
+                <DropdownItem>Another Action</DropdownItem>
+              </DropdownMenu>
+            </UncontrolledDropdown>
+          </div>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+{`<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+  <DropdownToggle caret>
+    Dropdown's menu is dark
+  </DropdownToggle>
+  <DropdownMenu dark>
+    <DropdownItem header>Header</DropdownItem>
+    <DropdownItem active>Active Action</DropdownItem>
+    <DropdownItem>Another Action</DropdownItem>
+  </DropdownMenu>
 </Dropdown>`}
           </PrismCode>
         </pre>

diff --git 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
@@ -220,4 +220,29 @@ describe('DropdownMenu', () => {
     });
   })
 
+  it('should not have the class "dropdown-menu-dark" by default', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
+        <DropdownMenu>
+          <p>Keep it light</p>
+        </DropdownMenu>
+      </DropdownContext.Provider>
+    );
+
+    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(
+      <DropdownContext.Provider value={{ isOpen, direction, inNavbar }}>
+        <DropdownMenu dark>
+          <p>Let's go dark</p>
+        </DropdownMenu>
+      </DropdownContext.Provider>
+    );
+
+    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
@@ -5,6 +5,7 @@ import { CSSModule } from './index';
 export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
   tag?: React.ElementType;
+  dark?: boolean;
   right?: boolean;
   flip?: boolean;
   modifiers?: Popper.Modifiers;