feat(Dropdown): Add Dropdown.ItemText component (react-bootstrap#5315)

Author: kyletsang

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;
 

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;
 

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">

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

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>

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