From e2b2235dc654a376553cd9e5aff9ac617be22fae Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Tue, 21 Nov 2017 15:39:35 -0800 Subject: [PATCH] Health component, table cleanup, form cleanup (#158) - Adds `EuiHealth` components for status checks. - Visual cleanup of checkboxes, switches and radios. - Form disabled states are much more consistant. - Page / title padding adjusted to be more compact. - Table spacing compressed visually. - Dark theme forms now have better contrast with their borders. - New app icons added to match Kibana's app directory. --- CHANGELOG.md | 9 ++- src-docs/src/services/routes/routes.js | 6 ++ src-docs/src/views/flex/flex_gutter.js | 9 +++ src-docs/src/views/form/disabled.js | 2 +- src-docs/src/views/health/health.js | 32 +++++++++ src-docs/src/views/health/health_example.js | 41 +++++++++++ src-docs/src/views/icon/icons.js | 3 + src-docs/src/views/kibana/watches.js | 10 +++ src-docs/src/views/table/compressed.js | 12 +--- src-docs/src/views/table/table.js | 68 ++++++++++++------- .../button/button_icon/_button_icon.scss | 7 +- .../button/button_icon/button_icon.js | 1 + src/components/flex/_flex_group.scss | 4 ++ src/components/flex/flex_group.js | 1 + src/components/form/_index.scss | 14 ++-- src/components/form/checkbox/_checkbox.scss | 45 +++++++----- src/components/form/radio/_radio.scss | 48 ++++++++++--- src/components/form/range/_range.scss | 15 ++++ src/components/form/switch/_switch.scss | 20 ++++-- src/components/header/_header_popover.scss | 5 +- .../health/__snapshots__/health.test.js.snap | 31 +++++++++ src/components/health/_health.scss | 4 ++ src/components/health/_index.scss | 1 + src/components/health/health.js | 39 +++++++++++ src/components/health/health.test.js | 16 +++++ src/components/health/index.js | 3 + .../icon/__snapshots__/icon.test.js.snap | 39 +++++++++++ src/components/icon/_icon.scss | 4 ++ src/components/icon/assets/alert.svg | 7 ++ .../icon/assets/question_in_circle.svg | 6 ++ src/components/icon/assets/wrench.svg | 6 ++ src/components/icon/icon.js | 7 ++ src/components/index.js | 4 ++ src/components/index.scss | 1 + src/components/page/_page.scss | 4 +- .../page/page_header/_page_header.scss | 4 +- src/components/table/_index.scss | 7 +- src/components/table/_table.scss | 12 ++-- src/global_styling/variables/_colors.scss | 3 +- 39 files changed, 450 insertions(+), 100 deletions(-) create mode 100644 src-docs/src/views/health/health.js create mode 100644 src-docs/src/views/health/health_example.js create mode 100644 src/components/health/__snapshots__/health.test.js.snap create mode 100644 src/components/health/_health.scss create mode 100644 src/components/health/_index.scss create mode 100644 src/components/health/health.js create mode 100644 src/components/health/health.test.js create mode 100644 src/components/health/index.js create mode 100644 src/components/icon/assets/alert.svg create mode 100644 src/components/icon/assets/question_in_circle.svg create mode 100644 src/components/icon/assets/wrench.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index cbbd0dba3a7..58f7ef24f44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,13 @@ # [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `0.0.3`. +- Adds `EuiHealth` components for status checks. [(#158)](https://github.com/elastic/eui/pull/158) +- Visual cleanup of checkboxes, switches and radios. [(#158)](https://github.com/elastic/eui/pull/158) +- Form disabled states are much more consistant. [(#158)](https://github.com/elastic/eui/pull/158) +- Page / title padding adjusted to be more compact. [(#158)](https://github.com/elastic/eui/pull/158) +- Table spacing compressed visually. [(#158)](https://github.com/elastic/eui/pull/158) +- Dark theme forms now have better contrast with their borders. [(#158)](https://github.com/elastic/eui/pull/158) +- New app icons added to match Kibana's app directory. [(#162)](https://github.com/elastic/eui/pull/162) + # [`0.0.3`](https://github.com/elastic/eui/tree/v0.0.3) diff --git a/src-docs/src/services/routes/routes.js b/src-docs/src/services/routes/routes.js index d2ce0f017ea..c32aae074da 100644 --- a/src-docs/src/services/routes/routes.js +++ b/src-docs/src/services/routes/routes.js @@ -50,6 +50,9 @@ import IconExample import HeaderExample from '../../views/header/header_example'; +import HealthExample + from '../../views/health/health_example'; + import HorizontalRuleExample from '../../views/horizontal_rule/horizontal_rule_example'; @@ -155,6 +158,9 @@ const components = [{ }, { name: 'Header', component: HeaderExample, +}, { + name: 'Health', + component: HealthExample, }, { name: 'HorizontalRule', component: HorizontalRuleExample, diff --git a/src-docs/src/views/flex/flex_gutter.js b/src-docs/src/views/flex/flex_gutter.js index 6554c5599e7..27035f34bd3 100644 --- a/src-docs/src/views/flex/flex_gutter.js +++ b/src-docs/src/views/flex/flex_gutter.js @@ -17,6 +17,15 @@ export default () => ( + + Extra small + Extra small + Extra small + Extra small + + + + Small Small diff --git a/src-docs/src/views/form/disabled.js b/src-docs/src/views/form/disabled.js index 79c464e42aa..75a6eb248fb 100644 --- a/src-docs/src/views/form/disabled.js +++ b/src-docs/src/views/form/disabled.js @@ -142,8 +142,8 @@ export default class extends Component { diff --git a/src-docs/src/views/health/health.js b/src-docs/src/views/health/health.js new file mode 100644 index 00000000000..348888e0d77 --- /dev/null +++ b/src-docs/src/views/health/health.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { + EuiHealth, + EuiSpacer, +} from '../../../../src/components'; + +export default () => ( +
+ + Unknown + + + + + + Healthy + + + + + + Warning + + + + + + Failure + +
+); diff --git a/src-docs/src/views/health/health_example.js b/src-docs/src/views/health/health_example.js new file mode 100644 index 00000000000..3c0f7f654ff --- /dev/null +++ b/src-docs/src/views/health/health_example.js @@ -0,0 +1,41 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuidePage, + GuideSection, + GuideSectionTypes, +} from '../../components'; + +import { + EuiCode, +} from '../../../../src/components'; + +import Health from './health'; +const healthSource = require('!!raw-loader!./health'); +const healthHtml = renderToHtml(Health); + +export default props => ( + + + The Health component should be used when showing comparitive + health of listed objects (like servers, nodes, indexes..etc). Because icons are + vague and bulky and color alone does not work, we think color plus text provides + a recognizable, lightweight combo that works in most situations. +

+ } + demo={} + /> + +); diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js index 732f8b56220..c8d35f031d6 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -9,6 +9,7 @@ import { } from '../../../../src/components'; const iconTypes = [ + 'alert', 'apps', 'arrowDown', 'arrowLeft', @@ -47,6 +48,7 @@ const iconTypes = [ 'pencil', 'pin', 'plusInCircle', + 'questionInCircle', 'search', 'shard', 'share', @@ -56,6 +58,7 @@ const iconTypes = [ 'tear', 'trash', 'user', + 'wrench', ]; export default () => ( diff --git a/src-docs/src/views/kibana/watches.js b/src-docs/src/views/kibana/watches.js index 8e3e3f5397d..85590fb500b 100644 --- a/src-docs/src/views/kibana/watches.js +++ b/src-docs/src/views/kibana/watches.js @@ -11,6 +11,8 @@ import { EuiPage, EuiPageBody, EuiPageContent, + EuiPageHeader, + EuiPageHeaderSection, EuiPageContentBody, EuiPageContentHeader, EuiPageContentHeaderSection, @@ -18,6 +20,7 @@ import { EuiPopover, EuiSpacer, EuiText, + EuiTitle, } from '../../../../src/components'; import { @@ -121,6 +124,13 @@ export default class extends Component { renderPage() { return ( + + + +

Management

+ + + diff --git a/src-docs/src/views/table/compressed.js b/src-docs/src/views/table/compressed.js index ab12572ad61..59e19767f1f 100644 --- a/src-docs/src/views/table/compressed.js +++ b/src-docs/src/views/table/compressed.js @@ -18,7 +18,6 @@ import { import { LEFT_ALIGNMENT, - RIGHT_ALIGNMENT, } from '../../../../src/services'; export default class extends Component { @@ -35,8 +34,7 @@ export default class extends Component { id: 0, title: 'A very long line which will wrap on narrower screens and NOT become truncated using an ellipsis', type: 'user', - dateCreated: 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', - magnitude: 1, + dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', }, { id: 1, title: { @@ -45,7 +43,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', - magnitude: 1, }, { id: 2, title: { @@ -54,7 +51,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)', - magnitude: 10, }, { id: 3, title: { @@ -63,7 +59,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 16 2016 12:56:15 GMT-0800 (PST)', - magnitude: 100, }, { id: 4, title: { @@ -72,7 +67,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 13 2016 12:56:15 GMT-0800 (PST)', - magnitude: 1000, }]; this.columns = [{ @@ -93,10 +87,6 @@ export default class extends Component { id: 'dateCreated', label: 'Date created', alignment: LEFT_ALIGNMENT, - }, { - id: 'magnitude', - label: 'Orders of magnitude', - alignment: RIGHT_ALIGNMENT, }]; } diff --git a/src-docs/src/views/table/table.js b/src-docs/src/views/table/table.js index 322196b549b..555c36e7003 100644 --- a/src-docs/src/views/table/table.js +++ b/src-docs/src/views/table/table.js @@ -3,6 +3,8 @@ import React, { } from 'react'; import { + EuiBadge, + EuiHealth, EuiButton, EuiButtonIcon, EuiCheckbox, @@ -45,8 +47,9 @@ export default class extends Component { id: 0, title: 'A very long line which will wrap on narrower screens and NOT become truncated and replaced by an ellipsis', type: 'user', - dateCreated: 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 28 2016', magnitude: 1, + health: Healthy, }, { id: 1, title: { @@ -54,8 +57,9 @@ export default class extends Component { truncateText: true, }, type: 'user', - dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 01 2016', magnitude: 1, + health: Healthy, }, { id: 2, title: { @@ -63,8 +67,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)', + dateCreated: Tue Dec 01 2016   New!, magnitude: 10, + health: Warning, }, { id: 3, title: { @@ -72,8 +77,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 16 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 16 2016', magnitude: 100, + health: Healthy, }, { id: 4, title: { @@ -81,8 +87,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 13 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 13 2016', magnitude: 1000, + health: Warning, }, { id: 5, title: { @@ -90,8 +97,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Healthy, }, { id: 6, title: { @@ -99,8 +107,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Danger, }, { id: 7, title: { @@ -108,8 +117,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Warning, }, { id: 8, title: { @@ -117,8 +127,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Warning, }, { id: 9, title: { @@ -126,8 +137,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Healthy, }, { id: 10, title: { @@ -135,8 +147,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Danger, }, { id: 11, title: { @@ -144,8 +157,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Warning, }, { id: 12, title: { @@ -153,8 +167,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Healthy, }, { id: 13, title: { @@ -162,8 +177,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 11 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 11 2016', magnitude: 10000, + health: Danger, }]; this.sortableProperties = new SortableProperties([{ @@ -184,18 +200,22 @@ export default class extends Component { id: 'checkbox', isCheckbox: true, textOnly: false, - width: '20px', + width: '24px', + }, { + id: 'type', + label: '', + alignment: LEFT_ALIGNMENT, + width: '24px', + cellProvider: cell => , }, { id: 'title', label: 'Title', alignment: LEFT_ALIGNMENT, isSortable: true, }, { - id: 'type', - label: 'Type', + id: 'health', + label: 'Health', alignment: LEFT_ALIGNMENT, - width: '60px', - cellProvider: cell => , }, { id: 'dateCreated', label: 'Date created', @@ -208,10 +228,10 @@ export default class extends Component { isSortable: true, }, { id: 'actions', - label: 'Actions', + label: '', alignment: RIGHT_ALIGNMENT, isActionsPopover: true, - width: '100px', + width: '32px', }]; } @@ -358,18 +378,16 @@ export default class extends Component { aria-label="Actions" iconType="gear" size="s" - color="primary" + color="text" onClick={() => this.togglePopover(item.id)} /> )} isOpen={this.isPopoverOpen(item.id)} closePopover={() => this.closePopover(item.id)} panelPaddingSize="none" - withTitle - anchorPosition="downRight" + anchorPosition="leftCenter" > .euiFlexItem + .euiFlexItem { + margin-left: $euiSizeXS; + } + &.euiFlexGroup--gutterSmall > .euiFlexItem + .euiFlexItem { margin-left: $euiSizeS; } diff --git a/src/components/flex/flex_group.js b/src/components/flex/flex_group.js index 86176149fe2..6ac5341e783 100644 --- a/src/components/flex/flex_group.js +++ b/src/components/flex/flex_group.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; const gutterSizeToClassNameMap = { none: null, + xs: 'euiFlexGroup--gutterExtraSmall', s: 'euiFlexGroup--gutterSmall', m: 'euiFlexGroup--gutterMedium', l: 'euiFlexGroup--gutterLarge', diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index c198a457abe..224d29b7043 100644 --- a/src/components/form/_index.scss +++ b/src/components/form/_index.scss @@ -47,7 +47,7 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); background: $euiFormBackgroundColor; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(0,0,0,0.08), + 0 0 0 1px transparentize($euiColorFullShade, .92), inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor; transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in; border-radius: 0; @@ -59,24 +59,24 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); &:invalid { /* 1 */ box-shadow: 0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(0,0,0,0.16), + 0 0 0 1px transparentize($euiColorFullShade, .84), inset 0 0 0 0 $euiColorEmptyShade, inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger; } &:focus { /* 1 */ - background: $euiColorEmptyShade; + background: tintOrShade($euiColorEmptyShade, 0%, 20%); 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), + inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%), inset 0 -2px 0 0 $euiColorPrimary; } &:disabled { cursor: not-allowed; - background: $euiColorLightestShade; - box-shadow: 0 0 0 1px rgba(0,0,0,0.08); + background: darken($euiColorLightestShade, 2%); + box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92); } } diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index 3533d937d03..1cf4ee3ace3 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -16,8 +16,12 @@ cursor: pointer; &:checked ~ .euiCheckbox__square { + background: $euiColorPrimary; + border-color: $euiColorPrimary; + .euiCheckbox__check { - background-color: $euiTextColor; + border-color: $euiColorPrimary; + background-color: $euiColorEmptyShade; // This path is relative to ~/src-docs/postcss.config.js, which uses // the postcss-line-svg plugin. mask: svg-load('../src/components/icon/assets/check.svg') center center no-repeat; @@ -26,17 +30,28 @@ &:focus ~ .euiCheckbox__square, &:active:not(:disabled) ~ .euiCheckbox__square { - background-color: $euiFocusBackgroundColor; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); border-color: $euiColorPrimary; + border-width: $euiSizeXS / 2; } - &:disabled ~ .euiCheckbox__square { - background-color: $euiColorLightestShade; - + &:focus:checked ~.euiCheckbox__square { + border-color: darken($euiColorPrimary, 10%); } + + &:disabled, &:disabled ~ .euiCheckbox__label { cursor: not-allowed; } + + &:disabled:checked ~ .euiCheckbox__square { + background-color: $euiColorLightShade; + border-color: $euiColorLightShade; + } + + &:disabled:not(:checked) ~ .euiCheckbox__square { + background-color: $euiColorLightestShade; + } } .euiCheckbox__square { @@ -47,6 +62,7 @@ border: $euiBorderThin; background: $euiFormBackgroundColor; z-index: 0; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } .euiCheckbox__check { @@ -65,19 +81,16 @@ } &.euiCheckbox--inList { - .euiCheckbox__input { - &:checked ~ .euiCheckbox__square { - background: $euiColorPrimary; - border-color: $euiColorPrimary; + min-height: $euiSize; - .euiCheckbox__check { - background-color: $euiColorEmptyShade; - } - } + .euiCheckbox__square { + height: $euiSize; + width: $euiSize; + } - &:focus:checked ~.euiCheckbox__square { - background: tintOrShade($euiColorPrimary, 20%, 20%); - } + .euiCheckbox__input { + height: $euiSize; + width: $euiSize; } } } diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index b8e6b4614e6..4b1c8b2a455 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -16,8 +16,12 @@ cursor: pointer; &:checked ~ .euiRadio__circle { + background: $euiColorPrimary; + border-color: $euiColorPrimary; + .euiRadio__check { - background-color: $euiTextColor; + border-color: $euiColorPrimary; + background-color: $euiColorEmptyShade; // This path is relative to ~/src-docs/postcss.config.js, which uses // the postcss-line-svg plugin. mask: svg-load('../src/components/icon/assets/check.svg') center center no-repeat; @@ -26,19 +30,28 @@ &:focus ~ .euiRadio__circle, &:active:not(:disabled) ~ .euiRadio__circle { - background-color: $euiFocusBackgroundColor; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); border-color: $euiColorPrimary; + border-width: $euiSizeXS / 2; } - &:disabled { + &:focus:checked ~.euiRadio__circle { + border-color: darken($euiColorPrimary, 10%); + } - ~ .euiRadio__circle { - background-color: $euiColorLightestShade; - } + &:disabled, + &:disabled ~ .euiRadio__label { + cursor: not-allowed; + } + + &:disabled:checked ~ .euiRadio__circle { + background-color: $euiColorLightShade; + border-color: $euiColorLightShade; + } + + &:disabled:not(:checked) ~ .euiRadio__circle { + background-color: $euiColorLightestShade; - ~ .euiRadio__label { - cursor: not-allowed; - } } } @@ -46,10 +59,11 @@ position: absolute; height: $euiSizeL; width: $euiSizeL; - border-radius: 50%; + border-radius: $euiSizeL; border: $euiBorderThin; background: $euiFormBackgroundColor; z-index: 0; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } .euiRadio__check { @@ -66,4 +80,18 @@ font-size: $euiFontSizeS; cursor: pointer; } + + &.euiRadio--inList { + min-height: $euiSize; + + .euiRadio__circle { + height: $euiSize; + width: $euiSize; + } + + .euiRadio__input { + height: $euiSize; + width: $euiSize; + } + } } diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index 47fee71c50d..729e1fb209c 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -20,6 +20,21 @@ &:disabled { cursor: not-allowed; + + &::-webkit-slider-thumb { + border-color: $euiColorLightShade; + } + + &::-moz-range-thumb { + border-color: $euiColorLightShade; + } + + &::-ms-thumb { + border-color: $euiColorLightShade; + } + &::-webkit-slider-runnable-track { + background-color: $euiColorLightShade; + } } &:focus { diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 751c0386371..48008996e53 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -21,11 +21,10 @@ } .euiSwitch__input:focus + .euiSwitch__body { - background: $euiColorEmptyShade; .euiSwitch__thumb { border-color: $euiColorPrimary; - background-color: $euiColorPrimary; + border-width: $euiSizeXS / 2; } } @@ -33,8 +32,8 @@ pointer-events: none; width: $euiSwitchWidth; height: $euiSwitchHeight; - background: $euiFormBackgroundColor; - box-shadow: inset 0 0 0 1px $euiBorderColor; + background-color: $euiColorPrimary; + box-shadow: none; display: inline-block; position: relative; border-radius: $euiSwitchHeight; @@ -77,7 +76,7 @@ .euiSwitch__icon--checked { right: auto; left: -$euiSizeS; - fill: $euiTextColor; + fill: $euiColorEmptyShade; } /** @@ -100,15 +99,26 @@ cursor: not-allowed; } + .euiSwitch__input:checked:disabled ~ .euiSwitch__body { + background: $euiColorLightShade; + } + .euiSwitch__input:disabled ~ .euiSwitch__body { background: $euiColorLightestShade; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } + .euiSwitch__input:checked:focus + .euiSwitch__body .euiSwitch__thumb { + border-color: darken($euiColorPrimary, 10%) + } + /** * When input is not checked, we shift around the positioning of sibling/child selectors. */ .euiSwitch__input:not(:checked) ~ .euiSwitch__body { + background-color: $euiFormBackgroundColor; + box-shadow: inset 0 0 0 1px $euiBorderColor; + .euiSwitch__thumb { left: 0; } diff --git a/src/components/header/_header_popover.scss b/src/components/header/_header_popover.scss index b3ca655ce04..ed49b30add3 100644 --- a/src/components/header/_header_popover.scss +++ b/src/components/header/_header_popover.scss @@ -1,8 +1,7 @@ /** * 1. Override KeyPadMenu. - * 2. Override popover default. */ .euiHeaderPopover { - top: calc(100% - #{$euiSizeS}) !important; /* 1 */ - border-radius: $euiBorderRadius 0 $euiBorderRadius $euiBorderRadius !important; /* 2 */ + top: 100% !important; /* 1 */ + width: $euiSize * 20; } diff --git a/src/components/health/__snapshots__/health.test.js.snap b/src/components/health/__snapshots__/health.test.js.snap new file mode 100644 index 00000000000..fb241402766 --- /dev/null +++ b/src/components/health/__snapshots__/health.test.js.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiHealth is rendered 1`] = ` +
+
+
+ + + dot icon + + + +
+
+
+
+`; diff --git a/src/components/health/_health.scss b/src/components/health/_health.scss new file mode 100644 index 00000000000..f3a9444d8e2 --- /dev/null +++ b/src/components/health/_health.scss @@ -0,0 +1,4 @@ +.euiHealth { + @include euiFontSizeS; + display: inline-block; +} diff --git a/src/components/health/_index.scss b/src/components/health/_index.scss new file mode 100644 index 00000000000..f993ef872e8 --- /dev/null +++ b/src/components/health/_index.scss @@ -0,0 +1 @@ +@import 'health'; diff --git a/src/components/health/health.js b/src/components/health/health.js new file mode 100644 index 00000000000..a849772edb0 --- /dev/null +++ b/src/components/health/health.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiIcon, + EuiFlexGroup, + EuiFlexItem, +} from '../../components'; + +export const EuiHealth = ({ + children, + className, + color, + ...rest, +}) => { + const classes = classNames('euiHealth', className); + + return ( +
+ + + + + + {children} + + +
+ ); +}; + +EuiHealth.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/health/health.test.js b/src/components/health/health.test.js new file mode 100644 index 00000000000..fab79b84a76 --- /dev/null +++ b/src/components/health/health.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiHealth } from './health'; + +describe('EuiHealth', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/health/index.js b/src/components/health/index.js new file mode 100644 index 00000000000..f925b2c8801 --- /dev/null +++ b/src/components/health/index.js @@ -0,0 +1,3 @@ +export { + EuiHealth, +} from './health'; diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap index 02234f748e3..1fe8321e477 100644 --- a/src/components/icon/__snapshots__/icon.test.js.snap +++ b/src/components/icon/__snapshots__/icon.test.js.snap @@ -106,6 +106,19 @@ exports[`EuiIcon renders type advancedSettingsApp 1`] = ` `; +exports[`EuiIcon renders type alert 1`] = ` + + + alert icon + + + +`; + exports[`EuiIcon renders type apmApp 1`] = ` `; +exports[`EuiIcon renders type questionInCircle 1`] = ` + + + question in circle icon + + + +`; + exports[`EuiIcon renders type reportingApp 1`] = ` `; +exports[`EuiIcon renders type wrench 1`] = ` + + + wrench icon + + + +`; + exports[`EuiIcon title defaults to a humanized version of the type 1`] = ` + + + + + + diff --git a/src/components/icon/assets/question_in_circle.svg b/src/components/icon/assets/question_in_circle.svg new file mode 100644 index 00000000000..0c55d080daa --- /dev/null +++ b/src/components/icon/assets/question_in_circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/icon/assets/wrench.svg b/src/components/icon/assets/wrench.svg new file mode 100644 index 00000000000..394a1106cb5 --- /dev/null +++ b/src/components/icon/assets/wrench.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index 70ef1c24c92..4c3bbfb69e1 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import './assets/alert.svg'; import './assets/app_add_data.svg'; import './assets/app_advanced_settings.svg'; import './assets/app_apm.svg'; @@ -75,6 +76,7 @@ import './assets/node.svg'; import './assets/pencil.svg'; import './assets/pin.svg'; import './assets/plus_in_circle.svg'; +import './assets/question_in_circle.svg'; import './assets/search.svg'; import './assets/shard.svg'; import './assets/share.svg'; @@ -84,6 +86,7 @@ import './assets/star_empty.svg'; import './assets/tear.svg'; import './assets/trash.svg'; import './assets/user.svg'; +import './assets/wrench.svg'; const humanizeCamelCase = str => ( // Put spaces between words in camel-cased strings. @@ -91,6 +94,7 @@ const humanizeCamelCase = str => ( ); const typeToIconMap = { + alert: 'alert', addDataApp: 'app_add_data', advancedSettingsApp: 'app_advanced_settings', apmApp: 'app_apm', @@ -155,6 +159,7 @@ const typeToIconMap = { pin: 'pin', pipelineApp: 'app_pipeline', plusInCircle: 'plus_in_circle', + questionInCircle: 'question_in_circle', reportingApp: 'app_reporting', savedObjectsApp: 'app_saved_objects', search: 'search', @@ -174,6 +179,7 @@ const typeToIconMap = { user: 'user', visualizeApp: 'app_visualize', watchesApp: 'app_watches', + wrench: 'wrench', }; export const TYPES = Object.keys(typeToIconMap); @@ -182,6 +188,7 @@ const colorToClassMap = { default: null, primary: 'euiIcon--primary', secondary: 'euiIcon--secondary', + success: 'euiIcon--success', accent: 'euiIcon--accent', warning: 'euiIcon--warning', danger: 'euiIcon--danger', diff --git a/src/components/index.js b/src/components/index.js index 9241a750f9a..83933152c29 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -91,6 +91,10 @@ export { EuiHeaderSectionItemButton, } from './header'; +export { + EuiHealth, +} from './health'; + export { EuiHorizontalRule, } from './horizontal_rule'; diff --git a/src/components/index.scss b/src/components/index.scss index 7aa221c8096..1d1b6da0ffc 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -14,6 +14,7 @@ @import 'flex/index'; @import 'form/index'; @import 'header/index'; +@import 'health/index'; @import 'horizontal_rule/index'; @import 'icon/index'; @import 'key_pad_menu/index'; diff --git a/src/components/page/_page.scss b/src/components/page/_page.scss index ebebe6f3301..2133cca18a0 100644 --- a/src/components/page/_page.scss +++ b/src/components/page/_page.scss @@ -1,9 +1,9 @@ .euiPage { - padding: $euiSizeL; + padding: $euiSize; } @include screenXSmall { .euiPage { - padding: $euiSizeL 0; + padding: $euiSize 0; } } diff --git a/src/components/page/page_header/_page_header.scss b/src/components/page/page_header/_page_header.scss index 302cc2484e4..048d586b4d3 100644 --- a/src/components/page/page_header/_page_header.scss +++ b/src/components/page/page_header/_page_header.scss @@ -1,5 +1,5 @@ .euiPageHeader { - margin-bottom: $euiSizeL; + margin-bottom: $euiSize; display: flex; flex-direction: row; justify-content: space-between; @@ -9,7 +9,7 @@ @include screenXSmall { .euiPageHeader { flex-direction: column; - padding: 0 $euiSizeL; + padding: 0 $euiSize; margin-bottom: 0; } } diff --git a/src/components/table/_index.scss b/src/components/table/_index.scss index 45ded1439af..94cb0820040 100644 --- a/src/components/table/_index.scss +++ b/src/components/table/_index.scss @@ -1,6 +1,3 @@ -$euiTableCellPadding: $euiSizeM; -$euiTableCellPaddingCompressed: $euiSizeS; - /** * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed. */ @@ -10,13 +7,11 @@ $euiTableCellPaddingCompressed: $euiSizeS; } @mixin euiTableCellCheckbox { - width: $euiSizeL + $euiTableCellPadding; + width: $euiSize + $euiSizeS; vertical-align: middle; .euiTableCellContent { padding-right: 0; - padding-top: 0; - padding-bottom: 0; } } diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 8814b8168d1..97c2209b62b 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -13,11 +13,13 @@ .euiTable--compressed { .euiTableCellContent { - padding: $euiTableCellPaddingCompressed; + padding: $euiSizeXS; + @include euiFontSizeXS; + } .euiTableHeaderButton:focus { - outline: solid $euiTableCellPaddingCompressed $euiFocusBackgroundColor; + outline: solid $euiSizeXS $euiFocusBackgroundColor; } } @@ -50,10 +52,6 @@ fill: $euiColorPrimary; } } - - &:focus { - background: $euiFocusBackgroundColor; - } } .euiTableSortIcon { @@ -103,7 +101,7 @@ .euiTableCellContent { display: flex; align-items: center; /* 1 */ - padding: $euiTableCellPadding; /* 2 */ + padding: $euiSizeS; /* 2 */ } .euiTableCellContent__text { diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index f72fe1a201a..4efe236c7f2 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -31,10 +31,11 @@ $euiColorPrimary: #0079a5 !default; $euiColorSecondary: #00A69B !default; $euiColorAccent: #DD0A73 !default; -$euiColorHighlight: #FFFF00 !default; +$euiColorHighlight: #FFFBF1 !default; $euiColorGhost: #FFF !default; // Status +$euiColorSuccess: $euiColorSecondary !default; $euiColorDanger: #A30000 !default; $euiColorWarning: #E5830E !default;