considering vis colors

elastic · Jul 9, 2019 · 091a19f · 091a19f
1 parent 0ab76c6
commit 091a19f
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 34 deletions.
diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js
@@ -16,7 +16,7 @@ const sampleItems = [
     description: shortDescription,
   },
   {
-    type: { icon: 'kqlSelector', color: '#7800A6' },
+    type: { icon: 'kqlSelector', color: 'accent' },
     label: 'Conjunction sample',
     description: shortDescription,
   },
@@ -26,20 +26,21 @@ const sampleItems = [
     description: shortDescription,
   },
   {
-    type: { icon: 'search', color: 'dark' },
+    type: { icon: 'search', color: 'text' },
     label: 'Recent search sample',
   },
   {
-    type: { icon: 'save', color: '#DD0A73' },
+    type: { icon: 'save', color: 'vis3' },
     label: 'Saved search',
   },
 ];
 
 export default () => (
   <div>
-    {sampleItems.map(item => (
+    {sampleItems.map((item, index) => (
       <EuiSuggestItem
         type={item.type}
+        key={index}
         label={item.label}
         description={item.description}
       />

diff --git a/src/components/suggest_item/_index.scss b/src/components/suggest_item/_index.scss
@@ -1 +1,3 @@
+@import 'variables';
+
 @import 'suggest_item';
diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
@@ -1,12 +1,12 @@
 @import '../loading/mixins';
 
-$buttonTypes: (
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  dark: $euiColorMediumShade,
-);
+// $buttonTypes: (
+//   primary: $euiColorPrimary,
+//   secondary: $euiColorSecondary,
+//   warning: $euiColorWarning,
+//   danger: $euiColorDanger,
+//   dark: $euiColorMediumShade,
+// );
 
 .euiSuggestItem {
   display: flex;
@@ -15,7 +15,7 @@ $buttonTypes: (
   font-size: $euiFontSizeXS;
   white-space: nowrap;
 
-  @each $name, $color in $buttonTypes {
+  @each $name, $color in $itemColors {
     .euiSuggestItem__type--#{$name} {
       background-color: tintOrShade($color, 90%, 50%);
 		}
@@ -24,15 +24,14 @@ $buttonTypes: (
   .euiSuggestItem__label,
   .euiSuggestItem__type,
   .euiSuggestItem__description {
-    flex-grow: 1;
-    flex-basis: 0%;
+    flex-grow: 0;
     display: flex;
     flex-direction: column;
 	}
 
   .euiSuggestItem__type {
     position: relative;
-    flex-grow: 0;
+    flex-shrink: 0;
     flex-basis: auto;
     width: $euiSizeXL;
     height: $euiSizeXL;
@@ -53,17 +52,15 @@ $buttonTypes: (
   }
 
   .euiSuggestItem__label {
-    flex-grow: 0;
-    flex-basis: auto;
+    flex-basis: 30%;
     font-family: $euiCodeFontFamily;
-    width: 250px;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: $euiSizeXS $euiSizeS;
     color: $euiTextColor;
 
     &.euiSuggestItem__layout--inline {
-      width: auto;
+      flex-basis: auto;
     }
   }
 
@@ -76,5 +73,11 @@ $buttonTypes: (
 
   .euiSuggestItem__description {
     color: $euiColorDarkShade;
+    flex-basis: auto;
+    padding-top: $euiSizeXS * .5;
+    &:empty {
+      flex-grow: 0;
+      margin-left:0;
+    }
 	}
 }
diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
@@ -0,0 +1,9 @@
+$itemColors: (
+  primary: $euiColorPrimary,
+  secondary: $euiColorSecondary,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  text: $euiColorMediumShade,
+  accent: $euiColorAccent,
+  vis3: $euiColorVis3,
+);
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
@@ -4,11 +4,16 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  primary: 'euiSuggestItem__type--primary',
-  secondary: 'euiSuggestItem__type--secondary',
-  warning: 'euiSuggestItem__type--warning',
-  danger: 'euiSuggestItem__type--danger',
-  dark: 'euiSuggestItem__type--dark',
+  primary: { class: 'euiSuggestItem__type--primary', colorName: 'primary' },
+  secondary: {
+    class: 'euiSuggestItem__type--secondary',
+    colorName: 'secondary',
+  },
+  warning: { class: 'euiSuggestItem__type--warning', colorName: 'warning' },
+  danger: { class: 'euiSuggestItem__type--danger', colorName: 'danger' },
+  text: { class: 'euiSuggestItem__type--text', colorName: 'text' },
+  accent: { class: 'euiSuggestItem__type--accent', colorName: 'accent' },
+  vis3: { class: 'euiSuggestItem__type--vis3', colorName: '#490092' },
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -32,25 +37,24 @@ export const EuiSuggestItem = ({
 
   let optionalColorClass = '';
   const layoutClass = layoutToClassNameMap[layout];
-  let optionalCustomStyles = undefined;
+  // let optionalCustomStyles = undefined;
 
   if (type && type.color) {
     if (COLORS.indexOf(type.color) > -1) {
-      optionalColorClass = colorToClassNameMap[type.color];
-    } else {
-      optionalCustomStyles = { backgroundColor: type.color };
+      optionalColorClass = colorToClassNameMap[type.color].class;
     }
+    // } else {
+    //   optionalCustomStyles = { backgroundColor: type.color };
+    // }
   }
 
+  let colorName;
+  colorName = colorToClassNameMap[type.color].colorName;
+
   return (
     <div className={classes} {...rest}>
       <span className={`euiSuggestItem__type ${optionalColorClass}`}>
-        {optionalCustomStyles ? (
-          <div style={optionalCustomStyles} className="customBackground" />
-        ) : (
-          undefined
-        )}
-        <EuiIcon color={type.color} type={type.icon} />
+        <EuiIcon color={colorName} type={type.icon} />
       </span>
       <span className={`euiSuggestItem__label ${layoutClass}`}>{label}</span>
       <span className="euiSuggestItem__description">{description}</span>