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 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 19c5161b2ca..71559b79a16 100644 --- a/src/components/progress/_progress.scss +++ b/src/components/progress/_progress.scss @@ -1,15 +1,31 @@ +.euiProgress { + position: relative; + overflow: hidden; + background-color: $euiColorLightShade; +} + +// 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; + } +} + // 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 { - width: 100%; - appearance: none; - border: none; - vertical-align: middle; - position: relative; - overflow: hidden; - background-color: $euiColorLightShade; +.euiProgress--native { + display: block; + width: 100%; + appearance: none; + border: none; &::-webkit-progress-bar { background-color: $euiColorLightShade; @@ -22,87 +38,80 @@ &::-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; + } +} - // 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} { + &.euiProgress--native { + &::-webkit-progress-value { + background-color: $color; + } + &::-moz-progress-bar { + 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; - } + &.euiProgress--indeterminate { + &:before { + background-color: $color; + } } + } +} - // Progress bars can be set to fixed or absolute. - &.euiProgress--fixed, &.euiProgress--absolute { - top: 0; - left: 0; - right: 0; - background-color: transparent; +// Progress bars can be set to fixed or absolute. +.euiProgress--fixed { + position: fixed; +} - &::-webkit-progress-bar { - background-color: transparent; - } - } +.euiProgress--absolute { + position: absolute; +} - &.euiProgress--fixed { - position: fixed; - } +.euiProgress--fixed, +.euiProgress--absolute { + top: 0; + left: 0; + right: 0; + background-color: transparent; - &.euiProgress--absolute { - position: absolute; + &.euiProgress--native { + &::-webkit-progress-bar { + background-color: transparent; } - /** - * 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; - } + &::-moz-progress-bar { + background-color: transparent; } + } } @keyframes euiProgress { 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}
+ ); };