Refactor Dropdowns #125
Refactor Dropdowns #125
Conversation
| return emptyText | ||
| } | ||
|
|
||
| private get menuOptions(): JSX.Element[] { |
There was a problem hiding this comment.
Should this be its own component?
There was a problem hiding this comment.
Normally I'd say yes but in this case I like having the "composed" components as a single file
| const {className} = this.props | ||
|
|
||
| return classnames('dropdown', { | ||
| className: className, |
There was a problem hiding this comment.
| className: className, | |
| className, |
There was a problem hiding this comment.
Ah looks like I have to do [${className}]: className because that coerces className to be of type string. classnames does not like that className is of type string | undefined. This might be a larger change since all clockface components handle className this way.
I created an issue for this: #128
| } | ||
|
|
||
| export class DropdownDivider extends Component<Props> { | ||
| public static defaultProps = { | ||
| testID: 'dropdown--divider', | ||
| testID: 'dropdown-divider', | ||
| } |
| className={classnames('dropdown--divider', {line: !text})} | ||
| className={classnames('dropdown-divider', { | ||
| line: !text, | ||
| [`${className}`]: className, |
There was a problem hiding this comment.
| [`${className}`]: className, | |
| [className]: className, |
|
|
||
| if (checkbox) { | ||
| if (type === DropdownItemType.Checkbox) { |
There was a problem hiding this comment.
Yup yup good call
| const {theme} = this.props | ||
|
|
||
| switch (theme) { | ||
| case DropdownMenuTheme.Malachite: |
There was a problem hiding this comment.
I feel like this would be a good constant to extract where a theme enum key's a thumb colors object
There was a problem hiding this comment.
These menu "themes" might not live that much longer as we eventually plan to use the Gradients enum instead
Closes #126
Overview
Dropdowns have been broken down into a set of components that are indepenent of each other and only worry about individual aspects of the dropdown's behavior. Rather than a super customizable
Dropdowncomponent we have exposed all the inner workings to be customized directly. In pursuit of theFamily / Composedpattern found in some other Clockface components the Dropdown family is now completely transparent and composable. This unfortunately is a breaking change to Dropdowns and will cause some tech debt.Changes
Dropdownhas 2 render props (Button and Menu) and only handles opening/closing the dropdownDropdownno longer cares about what its children areDropdownMenuinto own componentDropdownMenuColors-->DropdownMenuThemeDropdownItemhas atypeprop which controls appearance when selected and can beNone | Dot | CheckboxDropdownItemhasselectedandonClickrequiredDropdownno longer passes down any props or functions toDropdownItemsso they must be manually wired upDropdownButtoncan be whatever you wantSelectDropdownthat behaves like the HTML Select component as a composed variation of the DropdownMultiSelectDropdownas another composed variation of DropdownDropdownLinkItemfor using<a>or<Link>as dropdown itemsFuture Work
#127
#61