Render <EuiProgress> as display block (#166)

* progressbar as display block * cleanup changelog * cleanup and reduce class nesting * Fixes for @dsnider
elastic · Nov 29, 2017 · 96a7deb · 96a7deb
1 parent fa95f40
commit 96a7deb
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 122 deletions.
diff --git 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 `<progress>` 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**
-- `<EuiSideNav>` now accepts a tree data structure via the `items` prop. [(#141)](https://github.com/elastic/eui/pull/141)
-- `<EuiSideNavGroup>`, `<EuiSideNavItem>`, and `<EuiSideNavTitle>` have been removed from the public API. [(#141)](https://github.com/elastic/eui/pull/141)
+
+- `<EuiSideNav>` now accepts a tree data structure via the `items` prop [(#141)](https://github.com/elastic/eui/pull/141)
+- `<EuiSideNavGroup>`, `<EuiSideNavItem>`, and `<EuiSideNavTitle>` 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 `<EuiButtonEmpty>` to look more like links. [(#135)](https://github.com/elastic/eui/pull/135)
+- Changed the hover states of `<EuiButtonEmpty>` to look more like links [(#135)](https://github.com/elastic/eui/pull/135)
 - `<EuiCode>` now wraps `<EuiCodeBlock>`, so it can do everything `<EuiCodeBlock>` could, but inline [(#138)](https://github.com/elastic/eui/pull/138)
 - Added `transparentBackground` prop to `<EuiCodeBlock>` [(#138)](https://github.com/elastic/eui/pull/138)
 - `<EuiCodeBlock>` now uses the `light` theme by default [(#138)](https://github.com/elastic/eui/pull/138)
-- `<EuiFormRow>` generates its own unique `id` prop if none is provided. [(#130)](https://github.com/elastic/eui/pull/130)
-- `<EuiFormRow>` associates help text and errors with the field element via ARIA attributes. [(#130)](https://github.com/elastic/eui/pull/130)
+- `<EuiFormRow>` generates its own unique `id` prop if none is provided [(#130)](https://github.com/elastic/eui/pull/130)
+- `<EuiFormRow>` 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
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiProgress is rendered 1`] = `
-<div>
-  <div
-    aria-label="aria-label"
-    class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--secondary testClass1 testClass2"
-    data-test-subj="test subject string"
-  />
-</div>
+<div
+  aria-label="aria-label"
+  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--secondary testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
 `;
diff --git 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 <div> instead of a <progress> 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 <div> instead of a <progress> 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
@@ -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 = (
-      <progress
-        value={value}
-        max={max}
-        className={classes}
-        {...rest}
-      />
-    );
-  } else {
-    progressType = (
-      <div
-        className={classes}
-        {...rest}
-      />
-    );
+  // Because of a Firefox animation issue, indeterminate progress needs to use a <div>.
+  // See https://css-tricks.com/html5-progress-element/
+  if (indeterminate) {
+    return <div className={classes} {...rest} />;
   }
 
   return (
-    <div>{progressType}</div>
+    <progress
+      className={classes}
+      value={value}
+      max={max}
+      {...rest}
+    />
   );
 };