From 39601066991b24598cd63ae77e920522ce2a9f87 Mon Sep 17 00:00:00 2001
From: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>
Date: Tue, 21 Jul 2020 06:14:26 -0700
Subject: [PATCH] feat(Dropdown): Add Dropdown.ItemText component (#5315)

---
 src/Dropdown.tsx                              |  5 +++++
 src/NavDropdown.tsx                           |  2 ++
 test/DropdownItemSpec.js                      | 18 ++++++++++++++++++
 tests/simple-types-test.tsx                   |  2 ++
 www/src/examples/Dropdown/DropdownItemTags.js |  1 +
 www/src/pages/components/dropdowns.mdx        |  3 +++
 6 files changed, 31 insertions(+)

diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx
index 75b69a284b..ba4dfa0166 100644
--- a/src/Dropdown.tsx
+++ b/src/Dropdown.tsx
@@ -22,6 +22,9 @@ const DropdownHeader = createWithBsPrefix('dropdown-header', {
 const DropdownDivider = createWithBsPrefix('dropdown-divider', {
   defaultProps: { role: 'separator' },
 });
+const DropdownItemText = createWithBsPrefix('dropdown-item-text', {
+  Component: 'span',
+});
 
 export interface DropdownProps extends BsPrefixPropsWithChildren {
   drop?: 'up' | 'left' | 'right' | 'down';
@@ -42,6 +45,7 @@ type Dropdown = BsPrefixRefForwardingComponent<'div', DropdownProps> & {
   Toggle: typeof DropdownToggle;
   Menu: typeof DropdownMenu;
   Item: typeof DropdownItem;
+  ItemText: typeof DropdownItemText;
   Divider: typeof DropdownDivider;
   Header: typeof DropdownHeader;
 };
@@ -191,6 +195,7 @@ Dropdown.defaultProps = defaultProps;
 Dropdown.Divider = DropdownDivider;
 Dropdown.Header = DropdownHeader;
 Dropdown.Item = DropdownItem;
+Dropdown.ItemText = DropdownItemText;
 Dropdown.Menu = DropdownMenu;
 Dropdown.Toggle = DropdownToggle;
 
diff --git a/src/NavDropdown.tsx b/src/NavDropdown.tsx
index 61ce7a33fa..5977ec3672 100644
--- a/src/NavDropdown.tsx
+++ b/src/NavDropdown.tsx
@@ -21,6 +21,7 @@ export interface NavDropdownProps extends BsPrefixPropsWithChildren {
 
 type NavDropdown = BsPrefixRefForwardingComponent<'div', NavDropdownProps> & {
   Item: typeof Dropdown.Item;
+  ItemText: typeof Dropdown.ItemText;
   Divider: typeof Dropdown.Divider;
   Header: typeof Dropdown.Header;
 };
@@ -104,6 +105,7 @@ const NavDropdown: NavDropdown = (React.forwardRef(
 NavDropdown.displayName = 'NavDropdown';
 NavDropdown.propTypes = propTypes;
 NavDropdown.Item = Dropdown.Item;
+NavDropdown.ItemText = Dropdown.ItemText;
 NavDropdown.Divider = Dropdown.Divider;
 NavDropdown.Header = Dropdown.Header;
 
diff --git a/test/DropdownItemSpec.js b/test/DropdownItemSpec.js
index f6514d3bbb..672cb64a0d 100644
--- a/test/DropdownItemSpec.js
+++ b/test/DropdownItemSpec.js
@@ -38,6 +38,24 @@ describe('<Dropdown.Item>', () => {
     node.style.height.should.equal('100px');
   });
 
+  it('renders Dropdown.ItemText', () => {
+    mount(<Dropdown.ItemText>My text</Dropdown.ItemText>)
+      .assertSingle('span.dropdown-item-text')
+      .text()
+      .should.equal('My text');
+  });
+
+  it('renders Dropdown.ItemText className and style', () => {
+    const node = mount(
+      <Dropdown.ItemText className="foo bar" style={{ height: '100px' }}>
+        My text
+      </Dropdown.ItemText>,
+    ).getDOMNode();
+
+    node.className.should.match(/\bfoo bar dropdown-item-text\b/);
+    node.style.height.should.equal('100px');
+  });
+
   it('renders menu item link', (done) => {
     mount(
       <Dropdown.Item onKeyDown={() => done()} href="/herpa-derpa">
diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
index a1a9290b8a..718c63c445 100644
--- a/tests/simple-types-test.tsx
+++ b/tests/simple-types-test.tsx
@@ -330,6 +330,7 @@ const MegaComponent = () => (
         <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
         <Dropdown.Header as="div" bsPrefix="dropdownheader" style={style} />
         <Dropdown.Divider as="div" bsPrefix="dropdowndivider" style={style} />
+        <Dropdown.Divider as="div" bsPrefix="prefix" style={style} />
       </Dropdown.Menu>
     </Dropdown>
     <DropdownButton
@@ -751,6 +752,7 @@ const MegaComponent = () => (
         <NavDropdown.Item eventKey="4.3">Something else here</NavDropdown.Item>
         <NavDropdown.Divider />
         <NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
+        <NavDropdown.ItemText bsPrefix="prefix" as="div" />
       </NavDropdown>
     </Nav>
     <Navbar
diff --git a/www/src/examples/Dropdown/DropdownItemTags.js b/www/src/examples/Dropdown/DropdownItemTags.js
index bbc62a9a71..0b5c4c98a0 100644
--- a/www/src/examples/Dropdown/DropdownItemTags.js
+++ b/www/src/examples/Dropdown/DropdownItemTags.js
@@ -1,4 +1,5 @@
 <DropdownButton id="dropdown-item-button" title="Dropdown button">
+  <Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
   <Dropdown.Item as="button">Action</Dropdown.Item>
   <Dropdown.Item as="button">Another action</Dropdown.Item>
   <Dropdown.Item as="button">Something else</Dropdown.Item>
diff --git a/www/src/pages/components/dropdowns.mdx b/www/src/pages/components/dropdowns.mdx
index 00af81c2c2..c95e0b90c9 100644
--- a/www/src/pages/components/dropdowns.mdx
+++ b/www/src/pages/components/dropdowns.mdx
@@ -104,6 +104,9 @@ Historically dropdown menu contents had to be links, but that’s no
 longer the case with v4. Now you can optionally use
 `<button>` elements in your dropdowns instead of just `<a>`s.
 
+You can also create non-interactive dropdown items with `<Dropdown.ItemText>`.
+Feel free to style further with custom CSS or text utilities.
+
 <ReactPlayground codeText={DropdownItemTags} />
 
 ### Menu alignment