RFC: Dropdown header and divider shorthands

https://react.semantic-ui.com/modules/dropdown#dropdown-example-header

I wanna use Dropdown.Header and Dropdown.Divider in search or multiple dropdown, but it’s currently not supported. So I suppose we should extend shorthand props to support it. But it can be done in many ways so it’s better to consider different options.

Header

I think the header shorthand is pretty straitforward

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [
  { content: 'Important', header: { icon: 'tags', content: 'Filter by tag' } },
  { content: 'Announcement' },
  { content: 'Discussion' }
]

// <Dropdown.Header icon='tags' content='Filter by tag' />
// <Dropdown.Item>Important</Dropdown.Item>
// <Dropdown.Item>Announcement</Dropdown.Item>
// <Dropdown.Item>Discussion</Dropdown.Item>

const DropdownExampleHeader = () => (
  <Dropdown text='Filter' icon='filter' floating labeled button className='icon' options={options} />
)

export default DropdownExampleHeader

Divider

I think it should be implemented by using divider shorthand with position as shorthand value. Possible positions will be 'top' | 'bottom' | 'both'.

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [
  { content: 'Important' },
  { content: 'Announcement', divider: 'top' },
  { content: 'Discussion' }
]

// <Dropdown.Item>Important</Dropdown.Item>
// <Dropdown.Divider />
// <Dropdown.Item>Announcement</Dropdown.Item>
// <Dropdown.Item>Discussion</Dropdown.Item>

const DropdownExampleDivider = () => (
<Dropdown text='Filter' icon='filter' floating labeled button className='icon' options={options} />
)

export default DropdownExampleDivider

[levithomason]

Thank you for starting this RFC. In addition to the linked #889, it is also closely related to #1365 (submenu’s and nested dropdown menu’s).

I’d propose that we standardize on the component key to define which component the props are for. This would apply to any shorthand. Updating the example Dropdowns you provided above:

Header

const options = [
  { component: Dropdown.Header, icon: 'tags', content: 'Filter by tag' },
  { content: 'Important' },
  { content: 'Announcement' },
  { content: 'Discussion' }
]

// <Dropdown.Header icon='tags' content='Filter by tag' />
// <Dropdown.Item>Important</Dropdown.Item>
// <Dropdown.Item>Announcement</Dropdown.Item>
// <Dropdown.Item>Discussion</Dropdown.Item>

Divider

const options = [
  { content: 'Important' },
  { component: Dropdown.Divider },
  { content: 'Announcement' },
  { content: 'Discussion' }
]

// <Dropdown.Item>Important</Dropdown.Item>
// <Dropdown.Divider />
// <Dropdown.Item>Announcement</Dropdown.Item>
// <Dropdown.Item>Discussion</Dropdown.Item>

[DreierF]

What seems to do the trick after #4029 is to define headers and dividers as follows within the dropdown options:

const options = [
  {
    key: "header1",
    children: () => <Dropdown.Header content="Header" />,
    disabled: true
  },
  {
    key: "divider1",
    children: () => <Dropdown.Divider />,
    disabled: true
  },
  {
    key: "key1",
    value: "value1",
    text: "value1"
  },
...
];