• Dark Theme
• Light Theme
• Write docs in storybook

Now that we have more components we could do some housekeeping.
The way https://react.semantic-ui.com/ organizes their UI kit is pretty nice

Proposed organization:

Types (Docs for all the types we have)
    Colors
    ???

Elements (simplest components)
    Button
    Icon
    SlideToggle
    Label

Modules (comprised of multiple Clockface components)
    Input
    TextArea
    Alert
    ColorPicker
    TechnoSpinner (Includes SpinnerContainer)
    SparkleSpinner (Includes SpinnerContainer)

Families (a set of components intended to be used together)
    Form
    Panel
    Radio
    EmptyState
    Dropdown

Page Layout (navigation & page components)
    Nav + Page Layout
    Nav + Full-Width Page Layout
    
Utilities (helps achieve layout or functionality goals)
    ClickOutside
    ComponentSpacer
    Grid
    DapperScrollbars

Should work similarly to the backgroundColor prop in Panel except the default is undefined

• Dark Theme
• Light Theme
• Write docs in storybook

Rather than the current implementation we can use the react-spring library to handle this much more gracefully. https://www.react-spring.io/docs/hooks/use-transition

I tested this briefly in a branch and it works really nicely

Bring over Select List component that is used in the query builder and input/output bucket overlay

• Dark Theme
• Light Theme
• Write docs in storybook

• Dark Theme
• Light Theme
• Write docs in storybook

• Dark Theme
• Light Theme
• Write docs in storybook

I think this is a webpack thing

This is making InfluxDB snapshot tests and the react inspector tougher to use

• Dark Theme
• Light Theme
• Write docs in storybook

• Dark Theme
• Light Theme
• Write docs in storybook

• Dark Theme
• Light Theme
• Write docs in storybook

Some components use customClass and some use className

className is the desired standard

• Dark Theme
• Light Theme
• Write docs in storybook

EmptyStateText highlightedWords should respect spaces in original text string.

ClassNames passed to ComponentSpacer aren't applied to the rendered element.

• Dark Theme
• Light Theme
• Write docs in storybook

• Dark Theme
• Light Theme
• Write docs in storybook

Vertical scrollbar obscures content.

Will be needed to use Page components on the Dashboard page

When using a dropdown that is showing an icon rather than text, it doesnt look any different when disabled. There seems to be no indication that it is disabled other than when clicking on it the dropdown menu doesnt appear.

In the below screenshot, the autorefresh dropdown with the pause is disabled but the timerange dropdown is not.

Some refactoring might be needed in order to make these components work outside of InfluxDB

is throwing off layout of children

Instead of having to use <span className="icon checkmark" /> (for example) we can standardize this via single component. This will ensure that all icons use a <span/> tag and offers other consistency benefits.

This will also help with having Clockface be the only source of the icon font

Remove DropdownMenuColors to use defined Gradients instead.

• Dark Theme
• Light Theme
• Write docs in storybook

Not essential, but would be useful down the line to expose this

• Dark Theme
• Light Theme
• Write docs in storybook

• Dark Theme
• Light Theme
• Write docs in storybook