This supersedes elastic/kibana-ui-framework#28 (see PR for original discussion).

To view these new components, run npm run uiFramework:start and visit localhost:8080.

CC @uboness @alt74

New components

• Icon
• Link
• Button
• TextInput
• CheckBox
• Table
• ControlledTable
• ToolBar
• ToolBarFooter

Outstanding components

• Dropdown

Changes from design

• Button interactive states. I found the hover and active states didn't contrast enough to make the "click" feel satisfying and visceral. As a user, you really want to feel like your click is doing something. So I added very subtle box-shadows to the Buttons in the hover state, and inset the shadows in the active state. I think this feels especially satisfying for the basic Buttons.
• Link interactive states. The original Link hover and active colors looked almost like black on white, which made it look like regular text. This could lead to confusion for a user who hovers over a link only for it to "disappear". I changed these colors to be the same blue as the regular Link color, and added an underline on hover. This leverages the common anchor tag convention of showing an underline, and makes the hover state more noticeable.

Suggested explorations

• Table lines. I find the 2px thick lines in the Table tend to overpower the content a bit, and also make it the Table feel like it's geared for ages 4-7. I think we can play with changing it to 1px, or maybe just reducing the thickness of the lines between each row to 1px. If we do the latter, then we would be expanding our visual language -- a 2px line indicates a container, and a 1px line indicates a separator within a container. I think this could come in handy as we need to find more ways to group and separate content. (Screenshot below)
• ToolBar size. I think the size of the ToolBar causes it to overpower the Table a bit -- we want the Table to have more prominence since it's surfacing content. I think we can solve this by making the ToolBar shorter, and using less padding. This has the extra benefit of helping it visually match the ToolBarFooter's dimensions. (Screenshot below)
• Form layout and elements. We need more Form explorations, e.g. form groups, tooltips, footer, help text, error messages, success feedback.
• Tag legibility. I see a couple problems with the Tags in the Table. The white text on pastel background is really hard for me to read, especially on the orange. As mentioned before, they also look way too much like buttons... can we do some exploration into alternatives @alt74? I added some examples from other apps below.
• Icon legibility. In the design, the Icons are reverse against a colored background. I find them more legible and less attention-demanding when they're treated as regular Icons. I found the yellow used in the warning icon to be too low-contrast against white so I made it slightly orange and increased the saturation. We could probably play with this some more.

Table lines and ToolBar size

Tags

Here are some examples of tags on other sites:

GMail

Trello

Pinterest

GitHub

I see some commonalities across these:

• Their visual appearance is distinct from buttons, to avoid confusion.
• They have a distinct visual appearance to clearly identify them as "Tags".
• They tend to have a smaller font size than the regular font size.

We could explore a number of directions for making our tags more distinct:

• Borders
• Square corners instead of rounded
• Highly rounded corners instead of slightly 4px rounded corners
• A small stripe or dot of color instead of coloring the whole tag
• Smaller text
• Bolder text