Allowed user to use any colour in EuiStat (#3617)

* Allowed user to use any colour * Updated branch and changelog * Added tests
elastic · Jun 16, 2020 · ee87dd0 · ee87dd0
1 parent cdb64f1
commit ee87dd0
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,8 +9,10 @@
 - Added `side` prop to `EuiGlobalToastList` for choosing which window side to display toasts ([#3600](https://github.com/elastic/eui/pull/3600))
 - Default `titleSize` get's implicitly set to 'm' for `EuiEmptyPrompt` ([#3598](https://github.com/elastic/eui/pull/3598))
 - Updated `logoElastic` to meet brand guidelines ([#3613](https://github.com/elastic/eui/pull/3613))
+- Allowed user to enter hexcode for colors in `EuiStat` ([#3617](https://github.com/elastic/eui/pull/3617))
 - Extended `CommonProps` in `EuiColorPalettePickerPaletteTextProps`, `EuiColorPalettePickerPaletteFixedProps` and `EuiColorPalettePickerPaletteGradientProps` types ([#3616](https://github.com/elastic/eui/pull/3616))
 
+
 **Bug fixes**
 
 - Added `display` prop to `EuiDataGridColumnSortingDraggable` to pass` displayAsText` prop correctly to the column sorting popover.([#3574](https://github.com/elastic/eui/pull/3574))

diff --git a/src/components/stat/__snapshots__/stat.test.tsx.snap b/src/components/stat/__snapshots__/stat.test.tsx.snap
@@ -29,8 +29,6 @@ exports[`EuiStat is rendered 1`] = `
 </div>
 `;
 
-
-
 exports[`EuiStat props accent is rendered 1`] = `
 <div
   class="euiStat euiStat--leftAligned"
@@ -139,6 +137,34 @@ exports[`EuiStat props default is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiStat props hexcode colors are rendered 1`] = `
+<div
+  class="euiStat euiStat--leftAligned"
+>
+  <div
+    class="euiText euiText--small euiStat__description"
+  >
+    <p
+      aria-hidden="true"
+    >
+      description
+    </p>
+  </div>
+  <p
+    aria-hidden="true"
+    class="euiTitle euiTitle--large euiStat__title"
+    style="color:#EB1919"
+  >
+    title
+  </p>
+  <p
+    class="euiScreenReaderOnly"
+  >
+    description title
+  </p>
+</div>
+`;
+
 exports[`EuiStat props l is rendered 1`] = `
 <div
   class="euiStat euiStat--leftAligned"
@@ -411,7 +437,6 @@ exports[`EuiStat props title and description are reversed 1`] = `
 </div>
 `;
 
-
 exports[`EuiStat props xs is rendered 1`] = `
 <div
   class="euiStat euiStat--leftAligned"

diff --git a/src/components/stat/stat.test.tsx b/src/components/stat/stat.test.tsx
@@ -81,6 +81,14 @@ describe('EuiStat', () => {
       });
     });
 
+    test('hexcode colors are rendered', () => {
+      const component = render(
+        <EuiStat title="title" description="description" titleColor="#EB1919" />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     TITLE_SIZES.forEach(size => {
       test(`${size} is rendered`, () => {
         const component = render(

diff --git a/src/components/stat/stat.tsx b/src/components/stat/stat.tsx
@@ -48,6 +48,10 @@ const textAlignToClassNameMap = {
   right: 'euiStat--rightAligned',
 };
 
+export const isColorClass = (input: string): input is keyof typeof colorToClassNameMap => {
+  return colorToClassNameMap.hasOwnProperty(input);
+};
+
 export const ALIGNMENTS = keysOf(textAlignToClassNameMap);
 
 export interface EuiStatProps {
@@ -71,7 +75,7 @@ export interface EuiStatProps {
   /**
    * The color of the title text
    */
-  titleColor?: keyof typeof colorToClassNameMap;
+  titleColor?: keyof typeof colorToClassNameMap | string;
   /**
    * Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc)
    */
@@ -100,7 +104,7 @@ export const EuiStat: FunctionComponent<
 
   const titleClasses = classNames(
     'euiStat__title',
-    colorToClassNameMap[titleColor],
+    isColorClass(titleColor) ? colorToClassNameMap[titleColor] : null,
     {
       'euiStat__title-isLoading': isLoading,
     }
@@ -112,10 +116,16 @@ export const EuiStat: FunctionComponent<
     </EuiText>
   );
 
-  const titleDisplay = (
+  const titleDisplay = isColorClass(titleColor) ? (
     <EuiTitle size={titleSize} className={titleClasses}>
       <p aria-hidden="true">{isLoading ? '--' : title}</p>
     </EuiTitle>
+  ) : (
+    <EuiTitle size={titleSize} className={titleClasses}>
+      <p aria-hidden="true" style={{ color: `${titleColor}` }}>
+        {isLoading ? '--' : title}
+      </p>
+    </EuiTitle>
   );
 
   const screenReader = (