From 023e85bf9961bbb156f6b8aaeff3d7776cc3132c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 12 Sep 2018 14:18:29 -0400 Subject: [PATCH 1/7] Add background to readOnly inputs fixes #1129 --- src/components/form/_mixins.scss | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index 6b06a27dab1..c93ba7ff6fa 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -9,7 +9,6 @@ } /** - * 1. Ensure the icon padding remains when in readOnly mode * 2. Account for inner box-shadow style border when in group * 3. Must supply both values to background-size or some browsers apply the single value to both directions */ @@ -45,16 +44,12 @@ @mixin euiFormControlWithIcon($isIconOptional: false, $side: "left") { @if ($isIconOptional) { @at-root { - #{&}--withIcon, - #{&}--withIcon[readOnly] /* 1 */ { + #{&}--withIcon { @include euiFormControlLayout__padding(1, $side); } } } @else { - &, - &[readOnly] /* 1 */ { - @include euiFormControlLayout__padding(1, $side); - } + @include euiFormControlLayout__padding(1, $side); } } @@ -124,10 +119,10 @@ @mixin euiFormControlReadOnlyStyle { cursor: default; - background: transparent; + // Use transparency since there is no border and in case form is on a non-white background + background: transparentize($euiColorLightShade, .88); border-color: transparent; box-shadow: none; - padding-left: 0; // line up text with label } /** From 9b276af57e52c57397a53e3b8d4b6eb5f05496bd Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 12 Sep 2018 17:10:24 -0400 Subject: [PATCH 2/7] Modal sizing fixes - Added `maxWidth` to confirm modal prop docs - Allowing confirm modals to grow - Adding TS def for `maxWidth` - Fixing responsive widths --- src/components/modal/_modal.scss | 6 +++--- src/components/modal/confirm_modal.js | 13 +++++++++++++ src/components/modal/index.d.ts | 8 ++++++++ 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 814a26b3624..27df3f2752c 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -30,8 +30,7 @@ } .euiModal--confirmation { - width: 450px; - min-width: auto; + min-width: 450px; } .euiModalHeader { @@ -100,7 +99,8 @@ @include euiBreakpoint('xs','s') { .euiModal { position: fixed; - width: calc(100vw + 2px); + width: calc(100vw + 2px) !important; + max-width: none !important; left: 0; right: 0; bottom: 0; diff --git a/src/components/modal/confirm_modal.js b/src/components/modal/confirm_modal.js index 78a406fcde1..a0329541823 100644 --- a/src/components/modal/confirm_modal.js +++ b/src/components/modal/confirm_modal.js @@ -129,6 +129,19 @@ EuiConfirmModal.propTypes = { className: PropTypes.string, defaultFocusedButton: PropTypes.oneOf(CONFIRM_MODAL_BUTTONS), buttonColor: PropTypes.string, + // For docs only, will get passed with ...rest + /** + * Sets the max-width of the modal. + * Set to `true` to use the default (`euiBreakpoints 'm'`), + * set to `false` to not restrict the width, + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. + */ + maxWidth: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.number, + PropTypes.string, + ]), }; EuiConfirmModal.defaultProps = { diff --git a/src/components/modal/index.d.ts b/src/components/modal/index.d.ts index d22610754e6..50c905554ae 100644 --- a/src/components/modal/index.d.ts +++ b/src/components/modal/index.d.ts @@ -11,6 +11,14 @@ declare module '@elastic/eui' { */ export interface EuiModalProps { onClose: () => void; + /** + * Sets the max-width of the modal, + * set to `true` to use the default size, + * set to `false` to not restrict the width, + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. + */ + maxWidth?: boolean | number | string; } export const EuiModal: SFC< From c2bf625b5b98f0fbb03ac30bedb1ab6cbe2fb997 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 12 Sep 2018 17:51:14 -0400 Subject: [PATCH 3/7] Tag icon fixes #1151 --- src-docs/src/views/icon/icons.js | 1 + .../icon/__snapshots__/icon.test.js.snap | 15 +++++++++++++++ src/components/icon/assets/tag.svg | 3 +++ src/components/icon/icon.js | 2 ++ src/components/icon/index.d.ts | 1 + 5 files changed, 22 insertions(+) create mode 100644 src/components/icon/assets/tag.svg diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js index 7313c7c0702..3747140d975 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -126,6 +126,7 @@ const iconTypes = [ 'string', 'temperature', 'tableOfContents', + 'tag', 'tear', 'trash', 'user', diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap index 3fae8cdcc3c..f15f6d2165e 100644 --- a/src/components/icon/__snapshots__/icon.test.js.snap +++ b/src/components/icon/__snapshots__/icon.test.js.snap @@ -5122,6 +5122,21 @@ exports[`EuiIcon props type tableOfContents is rendered 1`] = ` `; +exports[`EuiIcon props type tag is rendered 1`] = ` + + + +`; + exports[`EuiIcon props type tear is rendered 1`] = ` + + diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index bfd1325a8a8..15fc5f1a07b 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -186,6 +186,7 @@ import stopFilled from './assets/stop_filled.svg'; import storage from './assets/storage.svg'; import string from './assets/string.svg'; import tableOfContents from './assets/tableOfContents.svg'; +import tag from './assets/tag.svg'; import tear from './assets/tear.svg'; import temperature from './assets/temperature.svg'; import timelionApp from './assets/app_timelion.svg'; @@ -402,6 +403,7 @@ const typeToIconMap = { storage, string, tableOfContents, + tag, tear, temperature, timelionApp, diff --git a/src/components/icon/index.d.ts b/src/components/icon/index.d.ts index c1c5f33c9ed..fdf16640f79 100644 --- a/src/components/icon/index.d.ts +++ b/src/components/icon/index.d.ts @@ -190,6 +190,7 @@ declare module '@elastic/eui' { | 'storage' | 'string' | 'tableOfContents' + | 'tag' | 'tear' | 'temperature' | 'timelionApp' From aca9e59173362db970864da9af11a1a697833633 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 12 Sep 2018 18:13:15 -0400 Subject: [PATCH 4/7] Fixed bottom bar layout in IE fixes #983 --- src-docs/src/views/bottom_bar/bottom_bar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/bottom_bar/bottom_bar.js b/src-docs/src/views/bottom_bar/bottom_bar.js index a17afd0aae1..7ff71335f9f 100644 --- a/src-docs/src/views/bottom_bar/bottom_bar.js +++ b/src-docs/src/views/bottom_bar/bottom_bar.js @@ -40,20 +40,20 @@ export default class extends Component { - + Help - + Add user - + Discard - + Save From a8ab883557e5806d3af57c34f1a75f23767b0b22 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 12 Sep 2018 18:40:39 -0400 Subject: [PATCH 5/7] Preventing comments from SASS invisibles making their wayt into compiled css - And moving animations to a utiltiy file so they only get compiled once --- src/global_styling/mixins/_helpers.scss | 8 +--- src/global_styling/mixins/_states.scss | 19 +-------- src/global_styling/mixins/_typography.scss | 23 +++++----- src/global_styling/utility/_animations.scss | 42 +++++++++++++++++++ src/global_styling/utility/_index.scss | 1 + src/global_styling/variables/_animations.scss | 24 +---------- src/global_styling/variables/_z_index.scss | 19 ++++----- 7 files changed, 69 insertions(+), 67 deletions(-) create mode 100644 src/global_styling/utility/_animations.scss diff --git a/src/global_styling/mixins/_helpers.scss b/src/global_styling/mixins/_helpers.scss index d69b1de2737..4db88271a16 100644 --- a/src/global_styling/mixins/_helpers.scss +++ b/src/global_styling/mixins/_helpers.scss @@ -29,9 +29,7 @@ } } -/** - * Set scroll bar appearance on Chrome. - */ +// Set scroll bar appearance on Chrome. @mixin euiScrollBar { &::-webkit-scrollbar { width: 16px; @@ -51,9 +49,7 @@ } -/** - * Specifically target IE11, but not Edge. - */ +// Specifically target IE11, but not Edge. @mixin internetExplorerOnly { @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { @content; diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss index 1ff9d05c601..a826575554a 100644 --- a/src/global_styling/mixins/_states.scss +++ b/src/global_styling/mixins/_states.scss @@ -14,20 +14,5 @@ $euiFocusRingSizeLarge: 4px; } } -@keyframes focusRingAnimate { - 0% { - box-shadow: 0 0 0 6px $euiFocusRingAnimStartColor; - } - 100% { - box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor; - } -} - -@keyframes focusRingAnimateLarge { - 0% { - box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor; - } - 100% { - box-shadow: 0 0 0 $euiFocusRingSizeLarge $euiFocusRingColor; - } -} +// Keyframe animation declarations can be found in +// utility/animations.scss diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index 471989c7101..61b0b306b74 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -85,18 +85,17 @@ font-weight: $euiFontWeightLight; // always apply light weight to x-large type } -/** - * Text truncation - * - * Prevent text from wrapping onto multiple lines, and truncate with an - * ellipsis. - * - * 1. Ensure that the node has a maximum width after which truncation can - * occur. - * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor - * nodes. - */ - @mixin euiTextTruncate { +// Text truncation +// +// Prevent text from wrapping onto multiple lines, and truncate with an +// ellipsis. +// +// 1. Ensure that the node has a maximum width after which truncation can +// occur. +// 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor +// nodes. + +@mixin euiTextTruncate { max-width: 100%; /* 1 */ overflow: hidden !important; text-overflow: ellipsis !important; diff --git a/src/global_styling/utility/_animations.scss b/src/global_styling/utility/_animations.scss new file mode 100644 index 00000000000..86aecbf57ff --- /dev/null +++ b/src/global_styling/utility/_animations.scss @@ -0,0 +1,42 @@ +// Animations as utility so they don't get duplicated in compiled CSS + +@keyframes euiAnimFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes euiGrow { + 0% { + opacity: 0; + } + 1% { + opacity: 0; + transform: scale(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes focusRingAnimate { + 0% { + box-shadow: 0 0 0 6px $euiFocusRingAnimStartColor; + } + 100% { + box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor; + } +} + +@keyframes focusRingAnimateLarge { + 0% { + box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor; + } + 100% { + box-shadow: 0 0 0 $euiFocusRingSizeLarge $euiFocusRingColor; + } +} diff --git a/src/global_styling/utility/_index.scss b/src/global_styling/utility/_index.scss index 0be3e98b1e7..657a6bbcdf1 100644 --- a/src/global_styling/utility/_index.scss +++ b/src/global_styling/utility/_index.scss @@ -1 +1,2 @@ +@import 'animations'; @import 'utility'; diff --git a/src/global_styling/variables/_animations.scss b/src/global_styling/variables/_animations.scss index 389c90f74ce..d0d000d7ca9 100644 --- a/src/global_styling/variables/_animations.scss +++ b/src/global_styling/variables/_animations.scss @@ -9,25 +9,5 @@ $euiAnimSpeedNormal: 250ms !default; $euiAnimSpeedSlow: 350ms !default; $euiAnimSpeedExtraSlow: 500ms !default; -@keyframes euiAnimFadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes euiGrow { - 0% { - opacity: 0; - } - 1% { - opacity: 0; - transform: scale(0); - } - 100% { - opacity: 1; - transform: scale(1); - } -} +// Keyframe animation declarations can be found in +// utility/animations.scss diff --git a/src/global_styling/variables/_z_index.scss b/src/global_styling/variables/_z_index.scss index bbb6cc48577..dcbac034763 100644 --- a/src/global_styling/variables/_z_index.scss +++ b/src/global_styling/variables/_z_index.scss @@ -1,18 +1,17 @@ // Z-Index -/* -Remember that z-index is relative to parent and based on the stacking context. -z-indexs only compete against other z-indexs when they exist as children of -that shared parent. +// Remember that z-index is relative to parent and based on the stacking context. +// z-indexs only compete against other z-indexs when they exist as children of +// that shared parent. -That means a popover with a settings of 2, will still show above a modal -with a setting of 100, if it is within that modal and not besides it. +// That means a popover with a settings of 2, will still show above a modal +// with a setting of 100, if it is within that modal and not besides it. -Generaly that means it's a good idea to consider things added to this file -as competitive only as siblings. +// Generaly that means it's a good idea to consider things added to this file +// as competitive only as siblings. + +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -*/ $euiZLevel0: 0; $euiZLevel1: 1000; From 61e05593d1969c51dbf633726df163538393995d Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 12 Sep 2018 19:05:20 -0400 Subject: [PATCH 6/7] changelog --- CHANGELOG.md | 8 +++++++- src/components/form/_mixins.scss | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c8f5fcef708..17cba60e8b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `4.0.0`. +- Added `tag` icon ([#1188](https://github.com/elastic/eui/pull/1188)) + +**Bug fixes** + +- Added background to `readOnly` inputs ([#1188](https://github.com/elastic/eui/pull/1188)) +- Fixed some modal default and responsive sizing ([#1188](https://github.com/elastic/eui/pull/1188)) + ## [`4.0.0`](https://github.com/elastic/eui/tree/v4.0.0) diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index c93ba7ff6fa..ab657928dc6 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -120,7 +120,7 @@ @mixin euiFormControlReadOnlyStyle { cursor: default; // Use transparency since there is no border and in case form is on a non-white background - background: transparentize($euiColorLightShade, .88); + background: transparentize(lightOrDarkTheme($euiColorLightShade, #000), .88); border-color: transparent; box-shadow: none; } From 47d43476ba7c2be8fe04b4589d438f3a0e313ad2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 12 Sep 2018 19:16:52 -0400 Subject: [PATCH 7/7] Using `$euiFormMaxWidth` as confirm modal min-width --- src/components/modal/_modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 27df3f2752c..49d3a2ac7f4 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -30,7 +30,7 @@ } .euiModal--confirmation { - min-width: 450px; + min-width: $euiFormMaxWidth; } .euiModalHeader {