address PR feedback

elastic · Aug 29, 2018 · a4e9593 · a4e9593
1 parent a44309e
commit a4e9593
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 39 deletions.
diff --git a/src-docs/src/views/stat/stat_colors.js b/src-docs/src/views/stat/stat_colors.js
@@ -12,15 +12,14 @@ export default () => (
       <EuiFlexItem>
         <EuiStat
           title="1"
-          description="Full color"
-          titleColor="full"
+          description="Default color"
         />
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiStat
           title="10"
-          description="Dark color"
-          titleColor="dark"
+          description="Subdued color"
+          titleColor="subdued"
         />
       </EuiFlexItem>
       <EuiFlexItem>

diff --git a/src-docs/src/views/stat/stat_combos.js b/src-docs/src/views/stat/stat_combos.js
@@ -16,7 +16,6 @@ export default () => (
           <EuiStat
             title="8,888"
             description="Total widgets"
-            titleColor="full"
             textAlign="right"
           >
             <EuiIcon type="empty" />

diff --git a/src/components/stat/__snapshots__/stat.test.js.snap b/src/components/stat/__snapshots__/stat.test.js.snap
@@ -6,19 +6,17 @@ exports[`EuiStat is rendered 1`] = `
   class="euiStat euiStat--leftAligned testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div>
-    <div
-      class="euiText euiText--small euiStat__description"
-    >
-      <p>
-        description
-      </p>
-    </div>
-    <p
-      class="euiTitle euiTitle--large euiStat__title"
-    >
-      title
+  <div
+    class="euiText euiText--small euiStat__description"
+  >
+    <p>
+      description
     </p>
   </div>
+  <p
+    class="euiTitle euiTitle--large euiStat__title"
+  >
+    title
+  </p>
 </div>
 `;
diff --git a/src/components/stat/_stat.scss b/src/components/stat/_stat.scss
@@ -1,24 +1,25 @@
 .euiStat {
   // Modifier naming and colors.
   $titleColors: (
-    dark: $euiColorDarkShade,
-    full: $euiColorFullShade,
+    subdued: $euiColorDarkShade,
     primary: $euiColorPrimary,
     secondary: $euiColorSecondary,
     danger: $euiColorDanger,
     accent: $euiColorAccent,
   );
 
-  // Create color classes based upon the map.
-  @each $name, $color in $titleColors {
-    &--#{$name} .euiStat__title {
-      color: $color;
+  .euiStat__title {
+    color: $euiColorFullShade;
+
+    // Create color classes based upon the map.
+    @each $name, $color in $titleColors {
+      &--#{$name} {
+        color: $color;
+      }
     }
   }
-
-  color: map-get($titleColors, full);
 
-  .eui__description {
+  .euiStat__description {
     color: map-get($titleColors, dark);
   }
 

diff --git a/src/components/stat/stat.js b/src/components/stat/stat.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -7,12 +7,11 @@ import { EuiTitle, TITLE_SIZES } from '../title/title';
 
 const colorToClassNameMap = {
   default: null,
-  dark: 'euiStat--dark',
-  full: 'euiStat--full',
-  primary: 'euiStat--primary',
-  secondary: 'euiStat--secondary',
-  danger: 'euiStat--danger',
-  accent: 'euiStat--accent',
+  subdued: 'euiStat__title--dark',
+  primary: 'euiStat__title--primary',
+  secondary: 'euiStat__title--secondary',
+  danger: 'euiStat__title--danger',
+  accent: 'euiStat__title--accent',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -39,19 +38,23 @@ export const EuiStat = ({
 
   const classes = classNames(
     'euiStat',
-    colorToClassNameMap[titleColor],
     textAlignToClassNameMap[textAlign],
     className,
   );
 
+  const titleClasses = classNames(
+    'euiStat__title',
+    colorToClassNameMap[titleColor],
+  );
+
   const descriptionDisplay = (
     <EuiText size="s" className="euiStat__description">
       <p>{description}</p>
     </EuiText>
   );
 
   const titleDisplay = (
-    <EuiTitle size={titleSize} className="euiStat__title">
+    <EuiTitle size={titleSize} className={titleClasses}>
       <p>{title}</p>
     </EuiTitle>
   );
@@ -60,17 +63,17 @@ export const EuiStat = ({
 
   if (reverse) {
     statDisplay = (
-      <div>
+      <Fragment>
         {titleDisplay}
         {descriptionDisplay}
-      </div>
+      </Fragment>
     );
   } else {
     statDisplay = (
-      <div>
+      <Fragment>
         {descriptionDisplay}
         {titleDisplay}
-      </div>
+      </Fragment>
     );
   }