From 40bae9f96595f0d8d2dd216b51fe3d351b2ffc10 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 20 Feb 2018 12:56:10 -0500 Subject: [PATCH 01/11] Added more icons - eye & eyeClosed - grab - heatmap - vector --- src-docs/src/views/icon/icons.js | 9 ++- .../icon/__snapshots__/icon.test.js.snap | 72 +++++++++++++++++++ src/components/icon/assets/eye.svg | 3 + src/components/icon/assets/eye_closed.svg | 3 + src/components/icon/assets/grab.svg | 3 + src/components/icon/assets/heatmap.svg | 3 + src/components/icon/assets/vector.svg | 3 + src/components/icon/icon.js | 22 ++++-- 8 files changed, 110 insertions(+), 8 deletions(-) create mode 100644 src/components/icon/assets/eye.svg create mode 100644 src/components/icon/assets/eye_closed.svg create mode 100644 src/components/icon/assets/grab.svg create mode 100644 src/components/icon/assets/heatmap.svg create mode 100644 src/components/icon/assets/vector.svg diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js index ce283abecca..8faaf980401 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -38,15 +38,19 @@ const iconTypes = [ 'exit', 'expand', 'exportAction', + 'eye', + 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'fullScreen', 'gear', + 'grab', 'grid', + 'heatmap', 'help', - 'importAction', 'iInCircle', + 'importAction', 'indexClose', 'indexEdit', 'indexFlush', @@ -61,8 +65,8 @@ const iconTypes = [ 'logstashFilter', 'logstashIf', 'logstashInput', - 'logstashQueue', 'logstashOutput', + 'logstashQueue', 'mapMarker', 'merge', 'minusInCircle', @@ -92,6 +96,7 @@ const iconTypes = [ 'tear', 'trash', 'user', + 'vector', 'wrench', ]; diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap index 80dbe17b27c..e638820dcd8 100644 --- a/src/components/icon/__snapshots__/icon.test.js.snap +++ b/src/components/icon/__snapshots__/icon.test.js.snap @@ -1224,6 +1224,34 @@ exports[`EuiIcon renders type exportAction 1`] = ` `; +exports[`EuiIcon renders type eye 1`] = ` + + + +`; + +exports[`EuiIcon renders type eyeClosed 1`] = ` + + + +`; + exports[`EuiIcon renders type faceHappy 1`] = ` `; +exports[`EuiIcon renders type grab 1`] = ` + + + +`; + exports[`EuiIcon renders type graphApp 1`] = ` `; +exports[`EuiIcon renders type heatmap 1`] = ` + + + +`; + exports[`EuiIcon renders type help 1`] = ` `; +exports[`EuiIcon renders type vector 1`] = ` + + + +`; + exports[`EuiIcon renders type visualizeApp 1`] = ` + + diff --git a/src/components/icon/assets/eye_closed.svg b/src/components/icon/assets/eye_closed.svg new file mode 100644 index 00000000000..236f6079a0f --- /dev/null +++ b/src/components/icon/assets/eye_closed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/grab.svg b/src/components/icon/assets/grab.svg new file mode 100644 index 00000000000..4193857ec18 --- /dev/null +++ b/src/components/icon/assets/grab.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/heatmap.svg b/src/components/icon/assets/heatmap.svg new file mode 100644 index 00000000000..0f6bf2d14a0 --- /dev/null +++ b/src/components/icon/assets/heatmap.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/vector.svg b/src/components/icon/assets/vector.svg new file mode 100644 index 00000000000..57ddb3fd9c1 --- /dev/null +++ b/src/components/icon/assets/vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index 85737677f13..8da2be6d215 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -43,23 +43,27 @@ import empty from './assets/empty.svg'; import exit from './assets/exit.svg'; import expand from './assets/expand.svg'; import exportAction from './assets/export.svg'; +import eye from './assets/eye.svg'; +import eyeClosed from './assets/eye_closed.svg'; import faceHappy from './assets/face_happy.svg'; import faceNeutral from './assets/faceNeutral.svg'; import faceSad from './assets/face_sad.svg'; import fullScreen from './assets/full_screen.svg'; import gear from './assets/gear.svg'; +import grab from './assets/grab.svg'; import graphApp from './assets/app_graph.svg'; import grid from './assets/grid.svg'; import grokApp from './assets/app_grok.svg'; +import heatmap from './assets/heatmap.svg'; import help from './assets/help.svg'; -import importAction from './assets/import.svg'; import iInCircle from './assets/iInCircle.svg'; -import indexPatternApp from './assets/app_index_pattern.svg'; +import importAction from './assets/import.svg'; import indexClose from './assets/index_close.svg'; import indexEdit from './assets/index_edit.svg'; import indexFlush from './assets/index_flush.svg'; import indexMapping from './assets/index_mapping.svg'; import indexOpen from './assets/index_open.svg'; +import indexPatternApp from './assets/app_index_pattern.svg'; import indexSettings from './assets/index_settings.svg'; import invert from './assets/invert.svg'; import link from './assets/link.svg'; @@ -87,8 +91,8 @@ import logoXpack from './assets/logo_xpack.svg'; import logstashFilter from './assets/logstash_filter.svg'; import logstashIf from './assets/logstash_if.svg'; import logstashInput from './assets/logstash_input.svg'; -import logstashQueue from './assets/logstash_queue.svg'; import logstashOutput from './assets/logstash_output.svg'; +import logstashQueue from './assets/logstash_queue.svg'; import machineLearningApp from './assets/app_ml.svg'; import managementApp from './assets/app_management.svg'; import mapMarker from './assets/map_marker.svg'; @@ -129,6 +133,7 @@ import trash from './assets/trash.svg'; import upgradeAssistantApp from './assets/app_upgrade_assistant.svg'; import user from './assets/user.svg'; import usersRolesApp from './assets/app_users_roles.svg'; +import vector from './assets/vector.svg'; import visualizeApp from './assets/app_visualize.svg'; import watchesApp from './assets/app_watches.svg'; import wrench from './assets/wrench.svg'; @@ -175,24 +180,28 @@ const typeToIconMap = { exit, expand, exportAction, + eyeClosed, + eye, faceHappy, faceNeutral, faceSad, fullScreen, gear, + grab, graphApp, grid, grokApp, + heatmap, help, - importAction, iInCircle, + importAction, indexClose, indexEdit, indexFlush, indexMapping, indexOpen, - indexSettings, indexPatternApp, + indexSettings, invert, link, list, @@ -219,8 +228,8 @@ const typeToIconMap = { logstashFilter, logstashIf, logstashInput, - logstashQueue, logstashOutput, + logstashQueue, machineLearningApp, managementApp, mapMarker, @@ -261,6 +270,7 @@ const typeToIconMap = { upgradeAssistantApp, user, usersRolesApp, + vector, visualizeApp, watchesApp, wrench, From 72b06f51121dec0ca527f62331e1e9c4cb087191 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 20 Feb 2018 13:17:18 -0500 Subject: [PATCH 02/11] Adding to reset.scss - Default button to text align left - No margins for
--- src/components/panel/_mixins.scss | 1 - src/global_styling/reset/_reset.scss | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss index 4cb7dc41d8d..dc5592442b6 100644 --- a/src/components/panel/_mixins.scss +++ b/src/components/panel/_mixins.scss @@ -22,7 +22,6 @@ // in case of button wrapper which inherently is inline-block and no width display: block; width: 100%; - text-align: left; // transition the shadow @include euiSlightShadow; diff --git a/src/global_styling/reset/_reset.scss b/src/global_styling/reset/_reset.scss index f0778fecc51..c7bac483417 100644 --- a/src/global_styling/reset/_reset.scss +++ b/src/global_styling/reset/_reset.scss @@ -99,6 +99,7 @@ button { color: inherit; font-size: inherit; border-radius: 0; + text-align: left; &:hover { cursor: pointer; @@ -123,3 +124,7 @@ table { border-collapse: collapse; border-spacing: 0; } + +hr { + margin: 0; +} From 6015edf0253cb95ea8836a087771d813a3da27a9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 20 Feb 2018 14:57:13 -0500 Subject: [PATCH 03/11] Fix text-overflow on buttons --- .../button/__snapshots__/button.test.js.snap | 56 ++++++++++++++----- src/components/button/_button.scss | 5 ++ src/components/button/_index.scss | 2 - src/components/button/button.js | 4 +- .../__snapshots__/confirm_modal.test.js.snap | 4 +- src/components/popover/_popover.scss | 1 + 6 files changed, 53 insertions(+), 19 deletions(-) diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap index ce9827cec03..6b8973973b6 100644 --- a/src/components/button/__snapshots__/button.test.js.snap +++ b/src/components/button/__snapshots__/button.test.js.snap @@ -10,7 +10,9 @@ exports[`EuiButton is rendered 1`] = ` - + Content @@ -25,7 +27,9 @@ exports[`EuiButton props color danger is rendered 1`] = ` - + `; @@ -38,7 +42,9 @@ exports[`EuiButton props color ghost is rendered 1`] = ` - + `; @@ -51,7 +57,9 @@ exports[`EuiButton props color primary is rendered 1`] = ` - + `; @@ -64,7 +72,9 @@ exports[`EuiButton props color secondary is rendered 1`] = ` - + `; @@ -77,7 +87,9 @@ exports[`EuiButton props color warning is rendered 1`] = ` - + `; @@ -90,7 +102,9 @@ exports[`EuiButton props fill is rendered 1`] = ` - + `; @@ -105,7 +119,9 @@ exports[`EuiButton props href secures the rel attribute when the target is _blan - + `; @@ -137,7 +153,9 @@ exports[`EuiButton props iconSide left is rendered 1`] = ` /> - + Content @@ -171,7 +189,9 @@ exports[`EuiButton props iconSide right is rendered 1`] = ` /> - + Content @@ -205,7 +225,9 @@ exports[`EuiButton props iconType is rendered 1`] = ` /> - + `; @@ -219,7 +241,9 @@ exports[`EuiButton props isDisabled is rendered 1`] = ` - + `; @@ -232,7 +256,9 @@ exports[`EuiButton props size l is rendered 1`] = ` - + `; @@ -245,7 +271,9 @@ exports[`EuiButton props size s is rendered 1`] = ` - + `; diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index c5c0c2a8a6e..515d1464c4f 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -12,6 +12,11 @@ padding: 0 ($euiSize - $euiSizeXS); } + .euiButton__text { + text-overflow: ellipsis; + overflow: hidden; + } + &.euiButton--small { height: $euiButtonHeightSmall; } diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss index b32af3561e1..2ca6583132f 100644 --- a/src/components/button/_index.scss +++ b/src/components/button/_index.scss @@ -14,8 +14,6 @@ $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 80%); transition: all $euiAnimSpeedNormal $euiAnimSlightBounce; white-space: nowrap; max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; vertical-align: middle; &:hover:not(:disabled) { diff --git a/src/components/button/button.js b/src/components/button/button.js index c9e64ae4b3c..2cfb31312cd 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -91,7 +91,7 @@ export const EuiButton = ({ > {buttonIcon} - {children} + {children} ); @@ -106,7 +106,7 @@ export const EuiButton = ({ > {buttonIcon} - {children} + {children} ); diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap index ced02802dc3..63ed149ac6e 100644 --- a/src/components/modal/__snapshots__/confirm_modal.test.js.snap +++ b/src/components/modal/__snapshots__/confirm_modal.test.js.snap @@ -54,7 +54,9 @@ exports[`renders EuiConfirmModal 1`] = ` - + Confirm Button Text diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index bda365e01a8..ff92f348e59 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -8,6 +8,7 @@ display: inline-block; position: relative; vertical-align: middle; + max-width: 100%; // Open state happens on the wrapper and applies to the panel. &.euiPopover-isOpen { From c8afdd0b22d8c780bfd70d425d35f797f8d90806 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 20 Feb 2018 14:59:06 -0500 Subject: [PATCH 04/11] Square for indeterminate checkbox --- src/components/form/_index.scss | 9 +++++++-- src/components/form/checkbox/_checkbox.scss | 2 +- src/global_styling/mixins/_icons.scss | 10 +++++++++- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index 26d2c68cf25..d87144eddbe 100644 --- a/src/components/form/_index.scss +++ b/src/components/form/_index.scss @@ -130,14 +130,19 @@ $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 4 @mixin euiCustomControl--selected($type: null){ border-color: $euiColorPrimary; background-color: $euiColorPrimary; - @include euiIconBackground($type, $euiColorEmptyShade); + + @if $type != null { + @include euiIconBackground($type, $euiColorEmptyShade); + } } @mixin euiCustomControl--disabled($type: null){ border-color: $euiColorLightShade; background-color: $euiColorLightShade; - @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor); box-shadow: none; + @if $type != null { + @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor); + } } @mixin euiCustomControl--focused(){ diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index 9e8859f5810..5efe72a7476 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -30,7 +30,7 @@ &:indeterminate { + .euiCheckbox__square { - @include euiCustomControl--selected($type: 'dot'); + @include euiCustomControl--selected($type: 'square'); } } diff --git a/src/global_styling/mixins/_icons.scss b/src/global_styling/mixins/_icons.scss index 2fe199ef744..114fe66ba03 100644 --- a/src/global_styling/mixins/_icons.scss +++ b/src/global_styling/mixins/_icons.scss @@ -1,8 +1,16 @@ // For using icons as background images (data-uri) @mixin euiIconBackground($type, $color: $euiColorEmptyShade) { - @if $type == 'check' { + @if variable-exists(type) == false { + @error "A $type:string must be provided to @mixin euiIconBackground()."; + } @else if type-of($color) != color { + @warn "The second parameter must be a valid color type -- got $color:#{type-of($color)} = #{$color}."; + } @else if $type == 'check' { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='#{hexToRGB($color)}' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E"); } @else if $type == 'dot' { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='#{hexToRGB($color)}' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E"); + } @else if $type == 'square' { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Crect width='6' height='6' fill='#{hexToRGB($color)}' fill-rule='evenodd'/%3E%3C/svg%3E"); + } @else { + @error "The $type of #{$type} cannot be found."; } } From a47242512c9ce6996189eff471d2665dfe8bc1db Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 20 Feb 2018 15:21:15 -0500 Subject: [PATCH 05/11] #418 Add `isLoading` prop to `EuiButton` --- src-docs/src/views/button/button_example.js | 21 ++++++++++++++ src-docs/src/views/button/button_loading.js | 29 +++++++++++++++++++ .../button/__snapshots__/button.test.js.snap | 19 ++++++++++++ src/components/button/_button.scss | 1 - src/components/button/button.js | 19 +++++++++++- src/components/button/button.test.js | 11 +++++++ 6 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 src-docs/src/views/button/button_loading.js diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index 497aea00b95..ba826d0fe5c 100644 --- a/src-docs/src/views/button/button_example.js +++ b/src-docs/src/views/button/button_example.js @@ -41,6 +41,10 @@ import ButtonAsLink from './button_as_link'; const buttonAsLinkSource = require('!!raw-loader!./button_as_link'); const buttonAsLinkHtml = renderToHtml(ButtonAsLink); +import ButtonLoading from './button_loading'; +const buttonLoadingSource = require('!!raw-loader!./button_loading'); +const buttonLoadingHtml = renderToHtml(ButtonLoading); + export const ButtonExample = { title: 'Button', sections: [{ @@ -87,6 +91,23 @@ export const ButtonExample = {

), demo: , + }, { + title: 'Loading state', + source: [{ + type: GuideSectionTypes.JS, + code: buttonLoadingSource, + }, { + type: GuideSectionTypes.HTML, + code: buttonLoadingHtml, + }], + text: ( +

+ Setting the isLoading prop to true will add the loading spinner or + swap the existing icon for the loading spinner and set the button to disabled. It is good + practice to also rename the button to "Loading…". +

+ ), + demo: , }, { title: 'ButtonEmpty', source: [{ diff --git a/src-docs/src/views/button/button_loading.js b/src-docs/src/views/button/button_loading.js new file mode 100644 index 00000000000..83de570f791 --- /dev/null +++ b/src-docs/src/views/button/button_loading.js @@ -0,0 +1,29 @@ +import React from 'react'; + +import { + EuiButton, + EuiFlexGroup, + EuiFlexItem +} from '../../../../src/components'; + +export default () => ( + + + + Loading… + + + + + + Loading… + + + + + + Loading… + + + +); diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap index 6b8973973b6..fe85728bc98 100644 --- a/src/components/button/__snapshots__/button.test.js.snap +++ b/src/components/button/__snapshots__/button.test.js.snap @@ -248,6 +248,25 @@ exports[`EuiButton props isDisabled is rendered 1`] = ` `; +exports[`EuiButton props isLoading is rendered 1`] = ` + +`; + exports[`EuiButton props size l is rendered 1`] = `