From f16f170a49e0cd98e1a1779f4efc42fb2a6c6e94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Wed, 29 Nov 2017 13:13:23 -0300 Subject: [PATCH 1/4] progressbar as display block --- src/components/progress/_progress.scss | 134 ++++++++++++------------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss index 19c5161b2ca..959a675d90f 100644 --- a/src/components/progress/_progress.scss +++ b/src/components/progress/_progress.scss @@ -3,13 +3,14 @@ // dealing with cross-browser progress bars. .euiProgress { - width: 100%; - appearance: none; - border: none; + display: block; + width: 100%; + appearance: none; + border: none; vertical-align: middle; - position: relative; - overflow: hidden; - background-color: $euiColorLightShade; + position: relative; + overflow: hidden; + background-color: $euiColorLightShade; &::-webkit-progress-bar { background-color: $euiColorLightShade; @@ -23,86 +24,85 @@ transition: width $euiAnimSpeedNormal linear; } - // Progress bars come in different colors. - $euiProgressColors: ( - primary: $euiColorPrimary, - secondary: $euiColorSecondary, - warning: $euiColorWarning, - danger: $euiColorDanger, - accent: $euiColorAccent, - subdued: $euiColorMediumShade, - ); - - @each $name, $color in $euiProgressColors { - &.euiProgress--#{$name} { - - &::-webkit-progress-value { - background-color: $color; - } - - &::-moz-progress-bar { - background-color: $color; - } - - &.euiProgress--indeterminate { - &:before { - background-color: $color; - } - } + // Progress bars come in different colors. + $euiProgressColors: ( + primary: $euiColorPrimary, + secondary: $euiColorSecondary, + warning: $euiColorWarning, + danger: $euiColorDanger, + accent: $euiColorAccent, + subdued: $euiColorMediumShade, + ); + + @each $name, $color in $euiProgressColors { + &.euiProgress--#{$name} { + &::-webkit-progress-value { + background-color: $color; + } + + &::-moz-progress-bar { + background-color: $color; + } + + &.euiProgress--indeterminate { + &:before { + background-color: $color; } + } } + } - // Progress bars come in different sizes. - $euiProgressSizes: ( - xs: $euiSizeXS / 2, - s: $euiSizeXS, - m: $euiSizeS, - l: $euiSize, - ); - - @each $name, $size in $euiProgressSizes { - &.euiProgress--#{$name} { - height: $size; - } + // Progress bars come in different sizes. + $euiProgressSizes: ( + xs: $euiSizeXS / 2, + s: $euiSizeXS, + m: $euiSizeS, + l: $euiSize, + ); + + @each $name, $size in $euiProgressSizes { + &.euiProgress--#{$name} { + height: $size; } + } - // Progress bars can be set to fixed or absolute. + // Progress bars can be set to fixed or absolute. &.euiProgress--fixed, &.euiProgress--absolute { - top: 0; - left: 0; - right: 0; - background-color: transparent; + top: 0; + left: 0; + right: 0; + background-color: transparent; - &::-webkit-progress-bar { - background-color: transparent; - } + &::-webkit-progress-bar { + background-color: transparent; } + } &.euiProgress--fixed { - position: fixed; - } + position: fixed; + } &.euiProgress--absolute { - position: absolute; - } + position: absolute; + } - /** + /** * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, * we apply this style to a
instead of a element. * See https://css-tricks.com/html5-progress-element/ for more info. */ - &.euiProgress--indeterminate { - &:before { - position: absolute; - content: ""; - width: 100%; - top: 0; - bottom: 0; - left: 0; - transform: scaleX(0) translateX(0%); + &.euiProgress--indeterminate { + &:before { + position: absolute; + content: ""; + width: 100%; + top: 0; + bottom: 0; + left: 0; + transform: scaleX(0) translateX(0%); animation: euiProgress 1s $euiAnimSlightResistance infinite; - } } + } } @keyframes euiProgress { From a1693b846cf1432bbd5f4fba8153eacf3785b434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Wed, 29 Nov 2017 13:18:47 -0300 Subject: [PATCH 2/4] cleanup changelog --- CHANGELOG.md | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d7c93ea15a..56beccc9196 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,17 +1,17 @@ # [`master`](https://github.com/elastic/eui/tree/master) -- 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) +- Added `EuiHealth` components for status checks [(#158)](https://github.com/elastic/eui/pull/158) +- Cleaned up styling for checkboxes, switches, and radios [(#158)](https://github.com/elastic/eui/pull/158) +- Form `disabled` states are now more consistant [(#158)](https://github.com/elastic/eui/pull/158) +- Page and title padding adjusted to be more compact [(#158)](https://github.com/elastic/eui/pull/158) +- Table spacing is now smaller [(#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) +- Added icons to match Kibana's app directory [(#162)](https://github.com/elastic/eui/pull/162) **Bug fixes** -- Fixes bug where screen-reader-only styles weren't being imported. - +- Fixed bug where screen-reader styles weren't being imported [(#103)](https://github.com/elastic/eui/pull/103) +- Fixed a bug where `` wasn't being rendered under `block` display [(#166)](https://github.com/elastic/eui/pull/166) # [`0.0.3`](https://github.com/elastic/eui/tree/v0.0.3) @@ -20,17 +20,18 @@ - Add `isLoading` prop to form inputs to allow for a loading state [(#150)](https://github.com/elastic/eui/pull/150) **Breaking** -- `` now accepts a tree data structure via the `items` prop. [(#141)](https://github.com/elastic/eui/pull/141) -- ``, ``, and `` have been removed from the public API. [(#141)](https://github.com/elastic/eui/pull/141) + +- `` now accepts a tree data structure via the `items` prop [(#141)](https://github.com/elastic/eui/pull/141) +- ``, ``, and `` have been removed from the public API [(#141)](https://github.com/elastic/eui/pull/141) # [`0.0.2`](https://github.com/elastic/eui/tree/v0.0.2) -- Changed the hover states of `` to look more like links. [(#135)](https://github.com/elastic/eui/pull/135) +- Changed the hover states of `` to look more like links [(#135)](https://github.com/elastic/eui/pull/135) - `` now wraps ``, so it can do everything `` could, but inline [(#138)](https://github.com/elastic/eui/pull/138) - Added `transparentBackground` prop to `` [(#138)](https://github.com/elastic/eui/pull/138) - `` now uses the `light` theme by default [(#138)](https://github.com/elastic/eui/pull/138) -- `` generates its own unique `id` prop if none is provided. [(#130)](https://github.com/elastic/eui/pull/130) -- `` associates help text and errors with the field element via ARIA attributes. [(#130)](https://github.com/elastic/eui/pull/130) +- `` generates its own unique `id` prop if none is provided [(#130)](https://github.com/elastic/eui/pull/130) +- `` associates help text and errors with the field element via ARIA attributes [(#130)](https://github.com/elastic/eui/pull/130) # [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release From 9d9fcd6891c10faac7eb6b393805ead8f6632a45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Wed, 29 Nov 2017 13:54:54 -0300 Subject: [PATCH 3/4] cleanup and reduce class nesting --- .../__snapshots__/progress.test.js.snap | 12 +- src/components/progress/_progress.scss | 166 +++++++++--------- src/components/progress/progress.js | 36 ++-- 3 files changed, 103 insertions(+), 111 deletions(-) diff --git a/src/components/progress/__snapshots__/progress.test.js.snap b/src/components/progress/__snapshots__/progress.test.js.snap index ccf0c4e98af..411e20a2ea9 100644 --- a/src/components/progress/__snapshots__/progress.test.js.snap +++ b/src/components/progress/__snapshots__/progress.test.js.snap @@ -1,11 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiProgress is rendered 1`] = ` -
-
-
+
`; diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss index 959a675d90f..5f2c61788d3 100644 --- a/src/components/progress/_progress.scss +++ b/src/components/progress/_progress.scss @@ -1,107 +1,109 @@ -// https://css-tricks.com/html5-progress-element/ -// Good resource if you need to work in here. There's some gotchas with -// dealing with cross-browser progress bars. - .euiProgress { - display: block; - width: 100%; - appearance: none; - border: none; - vertical-align: middle; position: relative; overflow: hidden; background-color: $euiColorLightShade; +} - &::-webkit-progress-bar { - background-color: $euiColorLightShade; - } - - &::-webkit-progress-value { - transition: width $euiAnimSpeedNormal linear; - } - - &::-moz-progress-bar { - transition: width $euiAnimSpeedNormal linear; - } +// Progress bars come in different colors. +$euiProgressColors: ( + primary: $euiColorPrimary, + secondary: $euiColorSecondary, + warning: $euiColorWarning, + danger: $euiColorDanger, + accent: $euiColorAccent, + subdued: $euiColorMediumShade, +); + +@each $name, $color in $euiProgressColors { + .euiProgress--#{$name} { + &::-webkit-progress-value { + background-color: $color; + } - // Progress bars come in different colors. - $euiProgressColors: ( - primary: $euiColorPrimary, - secondary: $euiColorSecondary, - warning: $euiColorWarning, - danger: $euiColorDanger, - accent: $euiColorAccent, - subdued: $euiColorMediumShade, - ); - - @each $name, $color in $euiProgressColors { - &.euiProgress--#{$name} { - &::-webkit-progress-value { - background-color: $color; - } + &::-moz-progress-bar { + background-color: $color; + } - &::-moz-progress-bar { + &.euiProgress--indeterminate { + &:before { background-color: $color; } - - &.euiProgress--indeterminate { - &:before { - background-color: $color; - } - } } } +} - // Progress bars come in different sizes. - $euiProgressSizes: ( - xs: $euiSizeXS / 2, - s: $euiSizeXS, - m: $euiSizeS, - l: $euiSize, - ); - - @each $name, $size in $euiProgressSizes { - &.euiProgress--#{$name} { - height: $size; - } +// Progress bars come in different sizes. +$euiProgressSizes: ( + xs: $euiSizeXS / 2, + s: $euiSizeXS, + m: $euiSizeS, + l: $euiSize, +); + +@each $name, $size in $euiProgressSizes { + .euiProgress--#{$name} { + height: $size; } +} - // Progress bars can be set to fixed or absolute. - &.euiProgress--fixed, &.euiProgress--absolute { - top: 0; - left: 0; - right: 0; +// Progress bars can be set to fixed or absolute. +.euiProgress--fixed, +.euiProgress--absolute { + top: 0; + left: 0; + right: 0; + background-color: transparent; + + &::-webkit-progress-bar { background-color: transparent; + } +} - &::-webkit-progress-bar { - background-color: transparent; - } +.euiProgress--fixed { + position: fixed; +} + +.euiProgress--absolute { + position: absolute; +} + +// https://css-tricks.com/html5-progress-element/ +// Good resource if you need to work in here. There's some gotchas with +// dealing with cross-browser progress bars. +.euiProgress--native { + display: block; + width: 100%; + appearance: none; + border: none; + + &::-webkit-progress-bar { + background-color: $euiColorLightShade; } - &.euiProgress--fixed { - position: fixed; + &::-webkit-progress-value { + transition: width $euiAnimSpeedNormal linear; } - &.euiProgress--absolute { - position: absolute; + &::-moz-progress-bar { + transition: width $euiAnimSpeedNormal linear; } +} - /** - * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, - * we apply this style to a
instead of a element. - * See https://css-tricks.com/html5-progress-element/ for more info. - */ - &.euiProgress--indeterminate { - &:before { - position: absolute; - content: ""; - width: 100%; - top: 0; - bottom: 0; - left: 0; - transform: scaleX(0) translateX(0%); - animation: euiProgress 1s $euiAnimSlightResistance infinite; - } +/** + * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue, + * we apply this style to a
instead of a element. + * See https://css-tricks.com/html5-progress-element/ for more info. + */ +.euiProgress--indeterminate { + &:before { + position: absolute; + content: ""; + width: 100%; + top: 0; + bottom: 0; + left: 0; + transform: scaleX(0) translateX(0%); + animation: euiProgress 1s $euiAnimSlightResistance infinite; } } diff --git a/src/components/progress/progress.js b/src/components/progress/progress.js index 2c44c5027cc..840d1cce4d4 100644 --- a/src/components/progress/progress.js +++ b/src/components/progress/progress.js @@ -38,40 +38,32 @@ export const EuiProgress = ({ position, ...rest }) => { + const indeterminate = max === null; const classes = classNames( 'euiProgress', { - 'euiProgress--indeterminate': max === null, + 'euiProgress--indeterminate': indeterminate, + 'euiProgress--native': !indeterminate }, sizeToClassNameMap[size], colorToClassNameMap[color], positionsToClassNameMap[position], - className + className, ); - // Because of a FireFox issue with animation, indeterminate progress needs to use a div. - // See https://css-tricks.com/html5-progress-element/. - let progressType = null; - if (max) { - progressType = ( - - ); - } else { - progressType = ( -
- ); + // Because of a Firefox animation issue, indeterminate progress needs to use a
. + // See https://css-tricks.com/html5-progress-element/ + if (indeterminate) { + return
; } return ( -
{progressType}
+ ); }; From 74c6d05f2cda2dc1b74759a1ac5808652fcf7412 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Bevacqua?= Date: Wed, 29 Nov 2017 15:33:30 -0300 Subject: [PATCH 4/4] Fixes for @dsnider --- src/components/progress/_progress.scss | 105 +++++++++++++------------ 1 file changed, 56 insertions(+), 49 deletions(-) diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss index 5f2c61788d3..71559b79a16 100644 --- a/src/components/progress/_progress.scss +++ b/src/components/progress/_progress.scss @@ -4,34 +4,6 @@ background-color: $euiColorLightShade; } -// Progress bars come in different colors. -$euiProgressColors: ( - primary: $euiColorPrimary, - secondary: $euiColorSecondary, - warning: $euiColorWarning, - danger: $euiColorDanger, - accent: $euiColorAccent, - subdued: $euiColorMediumShade, -); - -@each $name, $color in $euiProgressColors { - .euiProgress--#{$name} { - &::-webkit-progress-value { - background-color: $color; - } - - &::-moz-progress-bar { - background-color: $color; - } - - &.euiProgress--indeterminate { - &:before { - background-color: $color; - } - } - } -} - // Progress bars come in different sizes. $euiProgressSizes: ( xs: $euiSizeXS / 2, @@ -46,27 +18,6 @@ $euiProgressSizes: ( } } -// Progress bars can be set to fixed or absolute. -.euiProgress--fixed, -.euiProgress--absolute { - top: 0; - left: 0; - right: 0; - background-color: transparent; - - &::-webkit-progress-bar { - background-color: transparent; - } -} - -.euiProgress--fixed { - position: fixed; -} - -.euiProgress--absolute { - position: absolute; -} - // https://css-tricks.com/html5-progress-element/ // Good resource if you need to work in here. There's some gotchas with // dealing with cross-browser progress bars. @@ -107,6 +58,62 @@ $euiProgressSizes: ( } } +// Progress bars come in different colors. +$euiProgressColors: ( + primary: $euiColorPrimary, + secondary: $euiColorSecondary, + warning: $euiColorWarning, + danger: $euiColorDanger, + accent: $euiColorAccent, + subdued: $euiColorMediumShade, +); + +@each $name, $color in $euiProgressColors { + .euiProgress--#{$name} { + &.euiProgress--native { + &::-webkit-progress-value { + background-color: $color; + } + &::-moz-progress-bar { + background-color: $color; + } + } + + &.euiProgress--indeterminate { + &:before { + background-color: $color; + } + } + } +} + +// Progress bars can be set to fixed or absolute. +.euiProgress--fixed { + position: fixed; +} + +.euiProgress--absolute { + position: absolute; +} + +.euiProgress--fixed, +.euiProgress--absolute { + top: 0; + left: 0; + right: 0; + background-color: transparent; + + &.euiProgress--native { + &::-webkit-progress-bar { + background-color: transparent; + } + + &::-moz-progress-bar { + background-color: transparent; + } + } +} + @keyframes euiProgress { 0% { transform: scaleX(1) translateX(-100%);