Create the components list for Jeremy

[kaievns]

Jeremy needs an initial list of components that will be the library so he could start sketching them up

[kaievns]

so we need several sections of those

form elements

• [ ] text input (with an autocompletion option)
• [ ] textarea
• [ ] dropdown select
• [ ] multiple options select
• [ ] checkbox
• [ ] radio box
• [ ] switch (a pretty checkbox)
• [ ] file upload
• [ ] tags editor
• [ ] regular slider
• [ ] range slider
• [ ] date, time and date-time pickers

all of those must be uniformly designed blocks, along with styles for labels, help texts and inline error messages. also all of the inputs must have distinct styles for "focused" and "disabled" states.

in addition to those, we also might going to need styles for fieldset/legend blocks to group form elements.

Buttons

I guess the standard list of button styles:

• [ ] default
• [ ] primary
• [ ] danger
• [ ] warning
• [ ] info
• [ ] empty (without a body)

all buttons should be able to take a spinner or an icon

also, in addition to the normal buttons, we need a set of corresponding FABs

"focused" and "disabled" states are a must have.

also worth noticing that buttons might end up in wacky contexts like H1, NAV and stuff. we need to make sure that they look sensible in those as well.

Typography

This is not exactly a component but never the less important i reckon. This should have at least three sections to it:

• [ ] display font (for pretty splashes)
• [ ] header font for all sorts of headers
• [ ] body font for the rest of the fonts

this should set up type faces, font sizes, line heights, letter spaces etc. if things like line heights, etc will be contextual and content size aware (like between a desktop and a mobile phone screen), this is a good moment to raise those

Icon set

Again, not really a component, but we need a proper, designer blessed icon set for the UI kit

Navigation Elements

There are multiple components in here

• [ ] the standard top navigation bar
• [ ] a material UI style right side tool bar
• [ ] side bar sub-navigation menu
• [ ] inline dropdown menus
• [ ] pagination
• [ ] breadcrumbs

the top bar and right-side tool bar should be able to take action buttons, FABs, dropdown menus, etc. Also we need to think through how this will look like on mobile devices. both of those must collapse either into a sandwitch + dropdown menu, or full fledged slide-in side menus.

The top bar should also have a thought through idea of how to present the currently authenticated user. This, again, should include both desktop and mobile versions.

Tables

We need a proper stock style for table views, rows, headers, zebras, that sort of stuff

Modals

Your normal modal dialog things. We need to think through the header/body/footer situations, how action buttons will look like, how embedded forms will look like.

Also we need to think through a mobile strategy for those. Modals on compact devices should probably take the entire screen like native modal views, or something like that.

Misc Components

• [ ] badges
• [ ] cards (blocks or wells)
• [ ] tags (chips)
• [ ] spinners (compact and long ones)
• [ ] generic drop-down menu
• [ ] avatar picture
• [ ] regular responsive picture

Layout Components

We need a bunch of prefabed layout components as well. those are basically about grid consistency, sizing, paddings and such:

• [ ] main area header/body/footer split. this includes responsive break points, content sizing and such
• [ ] sidebars. again correct default sizing and paddings
• [ ] basic grid. columns sizing and paddings

[jeremyomeara]

Working on all of this now. Had some good information just now from Nikolay about what he needs so we'll proceed with the visual elements and go from there.