Health component, table cleanup, form cleanup #158
Conversation
|
Love the new disabled styles, great job team |
|
@bevacqua @cjcenizal Can I get a review on this when you have a chance. It's all mostly stylistic other than the health component. |
| box-shadow: | ||
| 0 4px 4px -2px rgba(0, 0, 0, 0.1), | ||
| 0 0 0 1px rgba(0,0,0,0.16), | ||
| inset 0 0 0 0 $euiColorEmptyShade, | ||
| 0 0 0 1px transparentize($euiColorFullShade, .84), |
There was a problem hiding this comment.
Why is transparentize not also percentage-based like tintOrShade?
There was a problem hiding this comment.
Box shadow needs to fade. It's a gradual overlay.
|
I've been thinking of patterns as guidelines on how to put different components together into a UI which could work as part of a sandbox, but isn't large/comprehensive enough to be its own sandbox. For example, placement of submit buttons within different types of forms or different page layouts. Here are some examples taken from https://vmware.github.io/clarity/documentation. We could do stuff like this, but fully interactive with actual components:
|
snide
force-pushed
the
cleanup/health_and_tables
branch
from
d70ff81
to
9bcb19b
Compare
Closes #107 #64 #136 #94 #99 #151
Partially addresses #111
Summary
This is a cleanup PR that fixes some lingering style issues in our forms, tables and dark mode. It also adds some new icons and a "health" component.
Adds
EuiHealthcomponentAfter talking with Adrian, we decided it best to only use colored dots for health / status checks. Icons don't read on their own and are too bulky to be repeatable. Since color alone won't work for color blindness, the text is needed.
Cleanup of checkboxes, switches and radios
After a couple talks with @cjcenizal and the other designers we went with the primary color as the on state for these, which is more readable. Along with that I pulled in some suggestions from CJ on focus states. It's not perfect and there's room for improvement (especially in focus) but is a progressive change for readability.
Page / title padding lowered
After a long discussion with just about everyone, we decided to lower the whitespace around our page titles and layouts. This helps some of our empty areas not feel as empty while still allowing us to retain the title hierarchy needed.
Compression of tables, more detailed examples
Because of the spacing changes above it also made sense to change our spacing in tables as well. I went ahead and bumped the paddings down and made the font smaller in a couple places. With new table sizing, it meant that I had to bump
inListon checkbox to an actual smaller checkbox.Dark mode forms cleanup up
Dark mode forms had bordering issues. I went ahead and replaced the hard coded values here and made them more resilient to theming.
Disabled states cleaned up
I fixed some bugs and issues with disabled state forms. Generally they are darker now and have better indications for checkboxes, radios and groups.