From 948820619267977ab946ddb10fc4358c27bd20d5 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 15 Nov 2017 19:56:06 -0800 Subject: [PATCH 01/12] tables, badges cleanup --- src-docs/src/views/badge/badge_with_icon.js | 34 +++++++-- src-docs/src/views/icon/icons.js | 3 + src-docs/src/views/table/compressed.js | 15 ++-- src-docs/src/views/table/table.js | 71 ++++++++++++------- .../badge/__snapshots__/badge.test.js.snap | 4 +- src/components/badge/_badge.scss | 27 ++++--- src/components/badge/badge.js | 20 ++++-- .../button/button_icon/_button_icon.scss | 7 +- .../button/button_icon/button_icon.js | 1 + .../icon/__snapshots__/icon.test.js.snap | 39 ++++++++++ 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 | 6 ++ src/components/table/_index.scss | 7 +- src/components/table/_table.scss | 8 ++- 16 files changed, 197 insertions(+), 64 deletions(-) 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/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js index c815493616a..d6f5822a588 100644 --- a/src-docs/src/views/badge/badge_with_icon.js +++ b/src-docs/src/views/badge/badge_with_icon.js @@ -2,18 +2,44 @@ import React from 'react'; import { EuiBadge, + EuiSpacer, } from '../../../../src/components'; export default () => (
- - Primary + + OK    - - Secondary + + Warning + +    + + + Danger + + +    + + + Right side + + + + + + +    + + + +    + + +
); 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/table/compressed.js b/src-docs/src/views/table/compressed.js index ab12572ad61..5484e50614b 100644 --- a/src-docs/src/views/table/compressed.js +++ b/src-docs/src/views/table/compressed.js @@ -3,6 +3,7 @@ import React, { } from 'react'; import { + EuiBadge, EuiCheckbox, EuiIcon, EuiLink, @@ -36,7 +37,7 @@ export default class extends Component { 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, + health: OK, }, { id: 1, title: { @@ -45,7 +46,7 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', - magnitude: 1, + health: Warning, }, { id: 2, title: { @@ -54,7 +55,7 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)', - magnitude: 10, + health: Warning, }, { id: 3, title: { @@ -63,7 +64,7 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 16 2016 12:56:15 GMT-0800 (PST)', - magnitude: 100, + health: Danger, }, { id: 4, title: { @@ -72,7 +73,7 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 13 2016 12:56:15 GMT-0800 (PST)', - magnitude: 1000, + health: OK, }]; this.columns = [{ @@ -94,8 +95,8 @@ export default class extends Component { label: 'Date created', alignment: LEFT_ALIGNMENT, }, { - id: 'magnitude', - label: 'Orders of magnitude', + id: 'health', + label: 'Health', alignment: RIGHT_ALIGNMENT, }]; } diff --git a/src-docs/src/views/table/table.js b/src-docs/src/views/table/table.js index 322196b549b..3be7cffde3f 100644 --- a/src-docs/src/views/table/table.js +++ b/src-docs/src/views/table/table.js @@ -3,6 +3,7 @@ import React, { } from 'react'; import { + EuiBadge, EuiButton, EuiButtonIcon, EuiCheckbox, @@ -45,8 +46,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 06 2016', magnitude: 1, + health: OK, }, { id: 1, title: { @@ -54,8 +56,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: OK, }, { id: 2, title: { @@ -63,8 +66,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)', + dateCreated: 'Tue Dec 28 2016', magnitude: 10, + health: Warning, }, { id: 3, title: { @@ -72,8 +76,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: OK, }, { id: 4, title: { @@ -81,8 +86,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 +96,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: OK, }, { id: 6, title: { @@ -99,8 +106,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 +116,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 +126,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 +136,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: OK, }, { id: 10, title: { @@ -135,8 +146,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 +156,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 +166,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: OK, }, { id: 13, title: { @@ -162,8 +176,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 +199,18 @@ 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', - alignment: LEFT_ALIGNMENT, - width: '60px', - cellProvider: cell => , }, { id: 'dateCreated', label: 'Date created', @@ -206,12 +221,17 @@ export default class extends Component { label: 'Orders of magnitude', alignment: RIGHT_ALIGNMENT, isSortable: true, + }, { + id: 'health', + label: 'Health', + alignment: RIGHT_ALIGNMENT, + isSortable: true, }, { id: 'actions', - label: 'Actions', + label: '', alignment: RIGHT_ALIGNMENT, isActionsPopover: true, - width: '100px', + width: '32px', }]; } @@ -358,15 +378,14 @@ 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" > - - + /> `; diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index 05c8e542bc5..c3a75bc923a 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -3,20 +3,22 @@ line-height: $euiSizeL; display: inline-block; text-decoration: none; - border: solid 1px transparent; - border-radius: $euiSizeL; - padding: 0 $euiSizeS; + border-radius: $euiBorderRadius; + padding: 0 $euiSizeXS; background-color: transparent; white-space: nowrap; vertical-align: middle; + border: $euiBorderThin; + border-color: transparent; .euiBadge__content { display: flex; align-items: center; + min-height: $euiSizeL; } - .euiBadge__icon { - margin-right: $euiSizeXS; + .euiBadge__icon + * { + margin-left: $euiSizeXS; } &.euiBadge--iconRight .euiBadge__content { @@ -26,13 +28,22 @@ margin-left: $euiSizeXS; margin-right: 0; } + + .euiBadge__icon + * { + margin-left: 0; + margin-right: $euiSizeXS; + } + } + + &.euiBadge--padded { + padding: 0 $euiSizeS; } } // Modifier naming and colors. $badgeTypes: ( - default: $euiColorLightShade, + default: $euiColorMediumShade, primary: $euiColorPrimary, secondary: $euiColorSecondary, warning: $euiColorWarning, @@ -42,7 +53,7 @@ $badgeTypes: ( @each $name, $color in $badgeTypes { .euiBadge--#{$name} { - border-color: $color; - background-color: transparentize($color, .9); + background-color: tintOrShade($color, 90%, 70%); + border-color: tintOrShade($color, 70%, 70%); } } diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js index 680c3a4ffaa..12e03d3287e 100644 --- a/src/components/badge/badge.js +++ b/src/components/badge/badge.js @@ -28,18 +28,32 @@ export const ICON_SIDES = Object.keys(iconSideToClassNameMap); export const EuiBadge = ({ children, color, iconType, iconSide, className, ...rest }) => { const classes = classNames( 'euiBadge', + { + 'euiBadge--padded': children, + }, colorToClassNameMap[color], iconSideToClassNameMap[iconSide], className ); - let optionalIcon = null; + let optionalIcon; if (iconType) { optionalIcon = ( ); } + {/* The extra span applies margin */} + let optionalChildren; + if (children) { + optionalChildren = ( + + {children} + + ); + + } + return (
{optionalIcon} - - {children} - + {optionalChildren}
); diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss index 265721095a7..30ea1ded2df 100644 --- a/src/components/button/button_icon/_button_icon.scss +++ b/src/components/button/button_icon/_button_icon.scss @@ -4,8 +4,9 @@ border-color: transparent; background-color: transparent; box-shadow: none; - height: $euiSizeXL; - width: $euiSizeXL; + height: $euiSizeL; + width: $euiSizeL; + border-radius: $euiBorderRadius; // Account for border. .euiButtonIcon__icon { @@ -29,6 +30,7 @@ $buttonTypes: ( danger: $euiColorDanger, disabled: tintOrShade($euiTextColor, 70%, 80%), ghost: $euiColorGhost, + text: $euiTextColor, ); // Create button modifiders based upon the map. @@ -41,7 +43,6 @@ $buttonTypes: ( } &:hover, &:focus { - background-color: transparentize($color, .9); @if ($name == 'disabled') { cursor: not-allowed; diff --git a/src/components/button/button_icon/button_icon.js b/src/components/button/button_icon/button_icon.js index 98281bb69d6..dbffc1df706 100644 --- a/src/components/button/button_icon/button_icon.js +++ b/src/components/button/button_icon/button_icon.js @@ -27,6 +27,7 @@ const colorToClassNameMap = { danger: 'euiButtonIcon--danger', disabled: 'euiButtonIcon--disabled', ghost: 'euiButtonIcon--ghost', + text: 'euiButtonIcon--text', }; export const COLORS = Object.keys(colorToClassNameMap); 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..e85ac2c8281 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); diff --git a/src/components/table/_index.scss b/src/components/table/_index.scss index 45ded1439af..d9d34fa7613 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: $euiSizeL + $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..41efe7b7db3 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; } } @@ -103,7 +105,7 @@ .euiTableCellContent { display: flex; align-items: center; /* 1 */ - padding: $euiTableCellPadding; /* 2 */ + padding: $euiSizeS; /* 2 */ } .euiTableCellContent__text { From ebb8822e11d90214f4f0966db6bd14affea5e5c9 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 15 Nov 2017 20:26:15 -0800 Subject: [PATCH 02/12] more coloring and table layouts --- src-docs/src/views/kibana/watches.js | 8 ++++++++ src/components/badge/_badge.scss | 2 +- src/components/header/_header_popover.scss | 5 ++--- src/components/page/_page.scss | 4 ++-- src/components/page/page_header/_page_header.scss | 4 ++-- src/global_styling/variables/_colors.scss | 2 +- 6 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/kibana/watches.js b/src-docs/src/views/kibana/watches.js index 8e3e3f5397d..7bed8b97707 100644 --- a/src-docs/src/views/kibana/watches.js +++ b/src-docs/src/views/kibana/watches.js @@ -18,6 +18,7 @@ import { EuiPopover, EuiSpacer, EuiText, + EuiTitle, } from '../../../../src/components'; import { @@ -121,6 +122,13 @@ export default class extends Component { renderPage() { return ( + + + +

Management

+ + + diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index c3a75bc923a..4662605ef59 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -3,7 +3,7 @@ line-height: $euiSizeL; display: inline-block; text-decoration: none; - border-radius: $euiBorderRadius; + border-radius: $euiSizeL; padding: 0 $euiSizeXS; background-color: transparent; white-space: nowrap; 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/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/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index f72fe1a201a..004978cbd4a 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -31,7 +31,7 @@ $euiColorPrimary: #0079a5 !default; $euiColorSecondary: #00A69B !default; $euiColorAccent: #DD0A73 !default; -$euiColorHighlight: #FFFF00 !default; +$euiColorHighlight: #FFFBF1 !default; $euiColorGhost: #FFF !default; // Status From cedb02d9a13e40982441f562dd06b4619342d910 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 16 Nov 2017 15:02:47 -0800 Subject: [PATCH 03/12] more styling for tables --- src-docs/src/services/routes/routes.js | 6 +++ src-docs/src/views/badge/badge_with_icon.js | 12 ------ src-docs/src/views/health/health.js | 25 ++++++++++++ src-docs/src/views/health/health_example.js | 38 ++++++++++++++++++ src-docs/src/views/table/compressed.js | 12 +----- src-docs/src/views/table/table.js | 43 +++++++++++---------- src/components/badge/_badge.scss | 9 ++--- 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 ++ src/components/icon/_icon.scss | 4 ++ src/components/icon/icon.js | 1 + src/components/index.js | 4 ++ src/components/index.scss | 1 + src/global_styling/variables/_colors.scss | 1 + 17 files changed, 169 insertions(+), 50 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/_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 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/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js index d6f5822a588..7a96be20e60 100644 --- a/src-docs/src/views/badge/badge_with_icon.js +++ b/src-docs/src/views/badge/badge_with_icon.js @@ -29,17 +29,5 @@ export default () => ( Right side - - - - -    - - - -    - - - ); diff --git a/src-docs/src/views/health/health.js b/src-docs/src/views/health/health.js new file mode 100644 index 00000000000..3f17188332b --- /dev/null +++ b/src-docs/src/views/health/health.js @@ -0,0 +1,25 @@ +import React from 'react'; + +import { + EuiHealth, +} 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..8e9c2bfed8c --- /dev/null +++ b/src-docs/src/views/health/health_example.js @@ -0,0 +1,38 @@ +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 => ( + + + Description needed: how to use the Health component. +

+ } + demo={} + /> + +); diff --git a/src-docs/src/views/table/compressed.js b/src-docs/src/views/table/compressed.js index 5484e50614b..3fa17aa52d3 100644 --- a/src-docs/src/views/table/compressed.js +++ b/src-docs/src/views/table/compressed.js @@ -3,7 +3,6 @@ import React, { } from 'react'; import { - EuiBadge, EuiCheckbox, EuiIcon, EuiLink, @@ -36,8 +35,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)', - health: OK, + dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', }, { id: 1, title: { @@ -46,7 +44,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 01 2016 12:56:15 GMT-0800 (PST)', - health: Warning, }, { id: 2, title: { @@ -55,7 +52,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 28 2016 12:56:15 GMT-0800 (PST)', - health: Warning, }, { id: 3, title: { @@ -64,7 +60,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 16 2016 12:56:15 GMT-0800 (PST)', - health: Danger, }, { id: 4, title: { @@ -73,7 +68,6 @@ export default class extends Component { }, type: 'user', dateCreated: 'Tue Dec 13 2016 12:56:15 GMT-0800 (PST)', - health: OK, }]; this.columns = [{ @@ -94,10 +88,6 @@ export default class extends Component { id: 'dateCreated', label: 'Date created', alignment: LEFT_ALIGNMENT, - }, { - id: 'health', - label: 'Health', - alignment: RIGHT_ALIGNMENT, }]; } diff --git a/src-docs/src/views/table/table.js b/src-docs/src/views/table/table.js index 3be7cffde3f..c9ed58aef24 100644 --- a/src-docs/src/views/table/table.js +++ b/src-docs/src/views/table/table.js @@ -4,6 +4,7 @@ import React, { import { EuiBadge, + EuiHealth, EuiButton, EuiButtonIcon, EuiCheckbox, @@ -46,9 +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', + dateCreated: 'Tue Dec 28 2016', magnitude: 1, - health: OK, + health: Healthy, }, { id: 1, title: { @@ -58,7 +59,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 01 2016', magnitude: 1, - health: OK, + health: Healthy, }, { id: 2, title: { @@ -66,9 +67,9 @@ export default class extends Component { isLink: true, }, type: 'user', - dateCreated: 'Tue Dec 28 2016', + dateCreated: Tue Dec 01 2016   New!, magnitude: 10, - health: Warning, + health: Warning, }, { id: 3, title: { @@ -78,7 +79,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 16 2016', magnitude: 100, - health: OK, + health: Healthy, }, { id: 4, title: { @@ -88,7 +89,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 13 2016', magnitude: 1000, - health: Warning, + health: Warning, }, { id: 5, title: { @@ -98,7 +99,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: OK, + health: Healthy, }, { id: 6, title: { @@ -108,7 +109,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Danger, + health: Danger, }, { id: 7, title: { @@ -118,7 +119,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Warning, + health: Warning, }, { id: 8, title: { @@ -128,7 +129,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Warning, + health: Warning, }, { id: 9, title: { @@ -138,7 +139,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: OK, + health: Healthy, }, { id: 10, title: { @@ -148,7 +149,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Danger, + health: Danger, }, { id: 11, title: { @@ -158,7 +159,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Warning, + health: Warning, }, { id: 12, title: { @@ -168,7 +169,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: OK, + health: Healthy, }, { id: 13, title: { @@ -178,7 +179,7 @@ export default class extends Component { type: 'user', dateCreated: 'Tue Dec 11 2016', magnitude: 10000, - health: Danger, + health: Danger, }]; this.sortableProperties = new SortableProperties([{ @@ -211,6 +212,11 @@ export default class extends Component { label: 'Title', alignment: LEFT_ALIGNMENT, isSortable: true, + }, { + id: 'health', + label: 'Health', + alignment: LEFT_ALIGNMENT, + isSortable: true, }, { id: 'dateCreated', label: 'Date created', @@ -221,11 +227,6 @@ export default class extends Component { label: 'Orders of magnitude', alignment: RIGHT_ALIGNMENT, isSortable: true, - }, { - id: 'health', - label: 'Health', - alignment: RIGHT_ALIGNMENT, - isSortable: true, }, { id: 'actions', label: '', diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index 4662605ef59..9ebce716be5 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -3,13 +3,10 @@ line-height: $euiSizeL; display: inline-block; text-decoration: none; - border-radius: $euiSizeL; padding: 0 $euiSizeXS; - background-color: transparent; white-space: nowrap; vertical-align: middle; - border: $euiBorderThin; - border-color: transparent; + border-radius: $euiBorderRadius; .euiBadge__content { display: flex; @@ -53,7 +50,7 @@ $badgeTypes: ( @each $name, $color in $badgeTypes { .euiBadge--#{$name} { - background-color: tintOrShade($color, 90%, 70%); - border-color: tintOrShade($color, 70%, 70%); + color: $euiColorEmptyShade; + background-color: $color; } } 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..8759e478741 --- /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/_icon.scss b/src/components/icon/_icon.scss index 77a0f20b60e..d9326ecce62 100644 --- a/src/components/icon/_icon.scss +++ b/src/components/icon/_icon.scss @@ -25,6 +25,10 @@ fill: $euiColorSecondary; } +.euiIcon--success { + fill: $euiColorSuccess; +} + .euiIcon--accent { fill: $euiColorAccent; } diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index e85ac2c8281..4c3bbfb69e1 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -188,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/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 004978cbd4a..4efe236c7f2 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -35,6 +35,7 @@ $euiColorHighlight: #FFFBF1 !default; $euiColorGhost: #FFF !default; // Status +$euiColorSuccess: $euiColorSecondary !default; $euiColorDanger: #A30000 !default; $euiColorWarning: #E5830E !default; From 39ec0f69d4a120836e8d83f94b07e6305a9299e4 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 17 Nov 2017 12:00:54 -0800 Subject: [PATCH 04/12] styling forms similar to cj's recommendations --- src-docs/src/views/table/table.js | 1 - .../badge/__snapshots__/badge.test.js.snap | 4 +- src/components/badge/_badge.scss | 26 ++++-------- src/components/badge/badge.js | 20 ++------- src/components/form/checkbox/_checkbox.scss | 33 +++++++++------ src/components/form/radio/_radio.scss | 41 ++++++++++++++----- src/components/form/switch/_switch.scss | 16 +++++--- .../health/__snapshots__/health.test.js.snap | 31 ++++++++++++++ src/components/table/_index.scss | 2 +- src/components/table/_table.scss | 4 -- 10 files changed, 109 insertions(+), 69 deletions(-) create mode 100644 src/components/health/__snapshots__/health.test.js.snap diff --git a/src-docs/src/views/table/table.js b/src-docs/src/views/table/table.js index c9ed58aef24..d18d4a15fb4 100644 --- a/src-docs/src/views/table/table.js +++ b/src-docs/src/views/table/table.js @@ -216,7 +216,6 @@ export default class extends Component { id: 'health', label: 'Health', alignment: LEFT_ALIGNMENT, - isSortable: true, }, { id: 'dateCreated', label: 'Date created', diff --git a/src/components/badge/__snapshots__/badge.test.js.snap b/src/components/badge/__snapshots__/badge.test.js.snap index 16a7109822a..8c2a6a3d391 100644 --- a/src/components/badge/__snapshots__/badge.test.js.snap +++ b/src/components/badge/__snapshots__/badge.test.js.snap @@ -8,6 +8,8 @@ exports[`EuiBadge is rendered 1`] = ` > + > + + `; diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index 9ebce716be5..05c8e542bc5 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -3,19 +3,20 @@ line-height: $euiSizeL; display: inline-block; text-decoration: none; - padding: 0 $euiSizeXS; + border: solid 1px transparent; + border-radius: $euiSizeL; + padding: 0 $euiSizeS; + background-color: transparent; white-space: nowrap; vertical-align: middle; - border-radius: $euiBorderRadius; .euiBadge__content { display: flex; align-items: center; - min-height: $euiSizeL; } - .euiBadge__icon + * { - margin-left: $euiSizeXS; + .euiBadge__icon { + margin-right: $euiSizeXS; } &.euiBadge--iconRight .euiBadge__content { @@ -25,22 +26,13 @@ margin-left: $euiSizeXS; margin-right: 0; } - - .euiBadge__icon + * { - margin-left: 0; - margin-right: $euiSizeXS; - } - } - - &.euiBadge--padded { - padding: 0 $euiSizeS; } } // Modifier naming and colors. $badgeTypes: ( - default: $euiColorMediumShade, + default: $euiColorLightShade, primary: $euiColorPrimary, secondary: $euiColorSecondary, warning: $euiColorWarning, @@ -50,7 +42,7 @@ $badgeTypes: ( @each $name, $color in $badgeTypes { .euiBadge--#{$name} { - color: $euiColorEmptyShade; - background-color: $color; + border-color: $color; + background-color: transparentize($color, .9); } } diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js index 12e03d3287e..680c3a4ffaa 100644 --- a/src/components/badge/badge.js +++ b/src/components/badge/badge.js @@ -28,32 +28,18 @@ export const ICON_SIDES = Object.keys(iconSideToClassNameMap); export const EuiBadge = ({ children, color, iconType, iconSide, className, ...rest }) => { const classes = classNames( 'euiBadge', - { - 'euiBadge--padded': children, - }, colorToClassNameMap[color], iconSideToClassNameMap[iconSide], className ); - let optionalIcon; + let optionalIcon = null; if (iconType) { optionalIcon = ( ); } - {/* The extra span applies margin */} - let optionalChildren; - if (children) { - optionalChildren = ( - - {children} - - ); - - } - return (
{optionalIcon} - {optionalChildren} + + {children} +
); diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index 3533d937d03..fa3a1a9623e 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,8 +30,13 @@ &: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; + } + + &:focus:checked ~.euiCheckbox__square { + border-color: darken($euiColorPrimary, 10%); } &:disabled ~ .euiCheckbox__square { @@ -47,6 +56,7 @@ border: $euiBorderThin; background: $euiFormBackgroundColor; z-index: 0; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } .euiCheckbox__check { @@ -65,19 +75,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..64a4ad39dfb 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -3,7 +3,7 @@ min-height: $euiSizeL; /** - * 1. Float above the visual radio and match its dimension, so that when users try to click it + * 1. Float above the visual checkbox and match its dimension, so that when users try to click it * they actually click this input. */ .euiRadio__input { @@ -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,20 @@ &:focus ~ .euiRadio__circle, &:active:not(:disabled) ~ .euiRadio__circle { - background-color: $euiFocusBackgroundColor; border-color: $euiColorPrimary; + border-width: $euiSizeXS / 2; } - &:disabled { + &:focus:checked ~.euiRadio__circle { + border-color: darken($euiColorPrimary, 10%) + } - ~ .euiRadio__circle { - background-color: $euiColorLightestShade; - } + &:disabled ~ .euiRadio__circle { + background-color: $euiColorLightestShade; - ~ .euiRadio__label { - cursor: not-allowed; - } + } + &:disabled ~ .euiRadio__label { + cursor: not-allowed; } } @@ -46,7 +51,7 @@ position: absolute; height: $euiSizeL; width: $euiSizeL; - border-radius: 50%; + border-radius: $euiSizeL; border: $euiBorderThin; background: $euiFormBackgroundColor; z-index: 0; @@ -66,4 +71,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/switch/_switch.scss b/src/components/form/switch/_switch.scss index 751c0386371..6910e5123c9 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; } /** @@ -105,10 +104,17 @@ 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/health/__snapshots__/health.test.js.snap b/src/components/health/__snapshots__/health.test.js.snap new file mode 100644 index 00000000000..b2acb2a9617 --- /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/table/_index.scss b/src/components/table/_index.scss index d9d34fa7613..94cb0820040 100644 --- a/src/components/table/_index.scss +++ b/src/components/table/_index.scss @@ -7,7 +7,7 @@ } @mixin euiTableCellCheckbox { - width: $euiSizeL + $euiSizeS; + width: $euiSize + $euiSizeS; vertical-align: middle; .euiTableCellContent { diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 41efe7b7db3..97c2209b62b 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -52,10 +52,6 @@ fill: $euiColorPrimary; } } - - &:focus { - background: $euiFocusBackgroundColor; - } } .euiTableSortIcon { From fe63d2bd95199c7105ac78185717481d8e54883d Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 17 Nov 2017 12:09:33 -0800 Subject: [PATCH 05/12] fix disabled states --- src/components/form/checkbox/_checkbox.scss | 10 ++++++---- src/components/form/radio/_radio.scss | 16 ++++++++++------ 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index fa3a1a9623e..e57dd505dc6 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -39,13 +39,15 @@ border-color: darken($euiColorPrimary, 10%); } - &:disabled ~ .euiCheckbox__square { - background-color: $euiColorLightestShade; - - } + &:disabled, &:disabled ~ .euiCheckbox__label { cursor: not-allowed; } + + &:disabled:not(:checked) ~ .euiCheckbox__square { + background-color: $euiColorLightestShade; + + } } .euiCheckbox__square { diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index 64a4ad39dfb..0f1df230b38 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -3,7 +3,7 @@ min-height: $euiSizeL; /** - * 1. Float above the visual checkbox and match its dimension, so that when users try to click it + * 1. Float above the visual radio and match its dimension, so that when users try to click it * they actually click this input. */ .euiRadio__input { @@ -30,21 +30,24 @@ &:focus ~ .euiRadio__circle, &:active:not(:disabled) ~ .euiRadio__circle { + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); border-color: $euiColorPrimary; border-width: $euiSizeXS / 2; } &:focus:checked ~.euiRadio__circle { - border-color: darken($euiColorPrimary, 10%) + border-color: darken($euiColorPrimary, 10%); } - &:disabled ~ .euiRadio__circle { - background-color: $euiColorLightestShade; - - } + &:disabled, &:disabled ~ .euiRadio__label { cursor: not-allowed; } + + &:disabled:not(:checked) ~ .euiRadio__circle { + background-color: $euiColorLightestShade; + + } } .euiRadio__circle { @@ -55,6 +58,7 @@ border: $euiBorderThin; background: $euiFormBackgroundColor; z-index: 0; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } .euiRadio__check { From 411862c9aa3cf6eea43193e9bb6b4a9168d44d81 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 17 Nov 2017 13:25:01 -0800 Subject: [PATCH 06/12] more cleanup --- src-docs/src/views/badge/badge_with_icon.js | 22 ++++--------------- src-docs/src/views/flex/flex_gutter.js | 9 ++++++++ src-docs/src/views/health/health.js | 7 ++++++ src-docs/src/views/health/health_example.js | 5 ++++- src/components/flex/_flex_group.scss | 4 ++++ src/components/flex/flex_group.js | 1 + src/components/form/checkbox/_checkbox.scss | 8 +++++-- src/components/form/radio/_radio.scss | 5 +++++ .../health/__snapshots__/health.test.js.snap | 2 +- src/components/health/health.js | 2 +- 10 files changed, 42 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/badge/badge_with_icon.js b/src-docs/src/views/badge/badge_with_icon.js index 7a96be20e60..c815493616a 100644 --- a/src-docs/src/views/badge/badge_with_icon.js +++ b/src-docs/src/views/badge/badge_with_icon.js @@ -2,32 +2,18 @@ import React from 'react'; import { EuiBadge, - EuiSpacer, } from '../../../../src/components'; export default () => (
- - OK + + Primary    - - Warning + + Secondary - -    - - - Danger - - -    - - - Right side - -
); 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/health/health.js b/src-docs/src/views/health/health.js index 3f17188332b..348888e0d77 100644 --- a/src-docs/src/views/health/health.js +++ b/src-docs/src/views/health/health.js @@ -2,6 +2,7 @@ import React from 'react'; import { EuiHealth, + EuiSpacer, } from '../../../../src/components'; export default () => ( @@ -10,14 +11,20 @@ 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 index 8e9c2bfed8c..3c0f7f654ff 100644 --- a/src-docs/src/views/health/health_example.js +++ b/src-docs/src/views/health/health_example.js @@ -29,7 +29,10 @@ export default props => ( }]} text={

- Description needed: how to use the Health component. + 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/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss index fd1db17deaf..9169d76db88 100644 --- a/src/components/flex/_flex_group.scss +++ b/src/components/flex/_flex_group.scss @@ -8,6 +8,10 @@ } // Gutter Sizes + &.euiFlexGroup--gutterExtraSmall > .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/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index e57dd505dc6..ae302e50070 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -43,10 +43,14 @@ &:disabled ~ .euiCheckbox__label { cursor: not-allowed; } - + + &:disabled:checked ~ .euiCheckbox__square { + background-color: $euiColorMediumShade; + border-color: $euiColorMediumShade; + } + &:disabled:not(:checked) ~ .euiCheckbox__square { background-color: $euiColorLightestShade; - } } diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index 0f1df230b38..37e8b8800d6 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -44,6 +44,11 @@ cursor: not-allowed; } + &:disabled:checked ~ .euiRadio__circle { + background-color: $euiColorMediumShade; + border-color: $euiColorMediumShade; + } + &:disabled:not(:checked) ~ .euiRadio__circle { background-color: $euiColorLightestShade; diff --git a/src/components/health/__snapshots__/health.test.js.snap b/src/components/health/__snapshots__/health.test.js.snap index b2acb2a9617..fb241402766 100644 --- a/src/components/health/__snapshots__/health.test.js.snap +++ b/src/components/health/__snapshots__/health.test.js.snap @@ -7,7 +7,7 @@ exports[`EuiHealth is rendered 1`] = ` data-test-subj="test subject string" >
- + From eb8d583878c5115136cf9b6ed27a65a33b3a36ae Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 17 Nov 2017 13:44:23 -0800 Subject: [PATCH 07/12] better disabled states --- src-docs/src/views/form/disabled.js | 1 + src/components/form/_index.scss | 2 +- src/components/form/checkbox/_checkbox.scss | 4 ++-- src/components/form/radio/_radio.scss | 4 ++-- src/components/form/switch/_switch.scss | 4 ++++ 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/form/disabled.js b/src-docs/src/views/form/disabled.js index 79c464e42aa..0fc85db282e 100644 --- a/src-docs/src/views/form/disabled.js +++ b/src-docs/src/views/form/disabled.js @@ -144,6 +144,7 @@ export default class extends Component { label="Switch control" checked={this.state.isSwitchChecked} onChange={this.onSwitchChange} + checked disabled /> diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index c198a457abe..6b07efd764e 100644 --- a/src/components/form/_index.scss +++ b/src/components/form/_index.scss @@ -75,7 +75,7 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); &:disabled { cursor: not-allowed; - background: $euiColorLightestShade; + background: darken($euiColorLightestShade, 2%); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); } } diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index ae302e50070..1cf4ee3ace3 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -45,8 +45,8 @@ } &:disabled:checked ~ .euiCheckbox__square { - background-color: $euiColorMediumShade; - border-color: $euiColorMediumShade; + background-color: $euiColorLightShade; + border-color: $euiColorLightShade; } &:disabled:not(:checked) ~ .euiCheckbox__square { diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index 37e8b8800d6..4b1c8b2a455 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -45,8 +45,8 @@ } &:disabled:checked ~ .euiRadio__circle { - background-color: $euiColorMediumShade; - border-color: $euiColorMediumShade; + background-color: $euiColorLightShade; + border-color: $euiColorLightShade; } &:disabled:not(:checked) ~ .euiRadio__circle { diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 6910e5123c9..48008996e53 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -99,6 +99,10 @@ 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); From dce96a14f1073903e4ff909aab9ee7808575d9c0 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 17 Nov 2017 13:49:26 -0800 Subject: [PATCH 08/12] fix range disabled state --- src/components/form/range/_range.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) 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 { From ec0d4b5feae5c70455bafca9dac234460e30bba3 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 17 Nov 2017 14:08:00 -0800 Subject: [PATCH 09/12] fix dark coloring --- src/components/form/_index.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index 6b07efd764e..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: darken($euiColorLightestShade, 2%); - box-shadow: 0 0 0 1px rgba(0,0,0,0.08); + box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92); } } From 25338fd62b1243ddc58da84eba1af9b5ca86f920 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 17 Nov 2017 15:09:50 -0800 Subject: [PATCH 10/12] fix page break --- src-docs/src/views/form/disabled.js | 1 - src-docs/src/views/kibana/watches.js | 2 ++ src-docs/src/views/table/compressed.js | 1 - 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/form/disabled.js b/src-docs/src/views/form/disabled.js index 0fc85db282e..75a6eb248fb 100644 --- a/src-docs/src/views/form/disabled.js +++ b/src-docs/src/views/form/disabled.js @@ -142,7 +142,6 @@ export default class extends Component { Date: Mon, 20 Nov 2017 08:12:26 -0800 Subject: [PATCH 11/12] fix linter error --- src-docs/src/views/table/table.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/table/table.js b/src-docs/src/views/table/table.js index d18d4a15fb4..555c36e7003 100644 --- a/src-docs/src/views/table/table.js +++ b/src-docs/src/views/table/table.js @@ -388,7 +388,6 @@ export default class extends Component { anchorPosition="leftCenter" > Date: Tue, 21 Nov 2017 15:12:57 -0800 Subject: [PATCH 12/12] changelog updated --- CHANGELOG.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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)