updated colors and added minor css changes

elastic · Jul 13, 2019 · 2c20086 · 2c20086
1 parent 3e87f51
commit 2c20086
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 32 deletions.
diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js
@@ -6,37 +6,37 @@ const shortDescription = 'This is the description';
 
 const sampleItems = [
   {
-    type: { iconType: 'kqlField', color: 'itemTint03' },
+    type: { iconType: 'kqlField', color: 'tint4' },
     label: 'Field sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlValue', color: 'itemTint02' },
+    type: { iconType: 'kqlValue', color: 'tint0' },
     label: 'Value sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlSelector', color: 'itemTint06' },
+    type: { iconType: 'kqlSelector', color: 'tint2' },
     label: 'Conjunction sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'kqlOperand', color: 'itemTint01' },
+    type: { iconType: 'kqlOperand', color: 'tint1' },
     label: 'Operator sample',
     description: shortDescription,
   },
   {
-    type: { iconType: 'search', color: 'itemTint05' },
+    type: { iconType: 'search', color: 'tint8' },
     label: 'Recent search',
   },
   {
-    type: { iconType: 'save', color: 'itemTint07' },
+    type: { iconType: 'save', color: 'tint3' },
     label: 'Saved search',
   },
 ];
 
 const sampleItem1 = {
-  type: { iconType: 'kqlValue', color: 'itemTint02' },
+  type: { iconType: 'kqlValue', color: 'tint0' },
   label: 'Charles de Gaulle International Airport',
   description: shortDescription,
 };
@@ -61,11 +61,11 @@ export default () => (
       type={sampleItem1.type}
       labelDisplay="expand"
       label={sampleItem1.label}
-      description="This item expands its label"
+      description="This item will expand its label if needed"
     />
     <EuiSpacer size="m" />
     <EuiSuggestItem
-      type={{ iconType: 'search', color: 'itemTint05' }}
+      type={{ iconType: 'search', color: 'tint8' }}
       label="Items with no description will expand their label"
     />
   </div>

diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap
@@ -7,7 +7,7 @@ exports[`EuiSuggestItem is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint01"
+    class="euiSuggestItem__type "
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
@@ -32,7 +32,7 @@ exports[`props item with no description has expanded label is rendered 1`] = `
   class="euiSuggestItem"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+    class="euiSuggestItem__type "
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"
@@ -57,7 +57,7 @@ exports[`props labelDisplay as expand is rendered 1`] = `
   class="euiSuggestItem"
 >
   <span
-    class="euiSuggestItem__type euiSuggestItem__type--itemTint02"
+    class="euiSuggestItem__type "
   >
     <svg
       class="euiIcon euiIcon--medium euiIcon-isLoading"

diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss
@@ -11,10 +11,7 @@
     .euiSuggestItem__type--#{$name} {
       $backgroundColor: tintOrShade($color, 90%, 50%);
       background-color: $backgroundColor;
-
-      svg {
-        fill: makeHighContrastColor($color, $backgroundColor);
-      }
+      color: makeHighContrastColor($color, $backgroundColor);
 		}
 	}
 
@@ -40,7 +37,8 @@
   }
 
   .euiSuggestItem__label {
-    flex-basis: 30%;
+    flex-basis: 50%;
+    min-width: 50%;
     font-family: $euiCodeFontFamily;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss
@@ -1,9 +1,11 @@
 $itemColors: (
-  itemTint01: $euiColorPrimary,
-  itemTint02: $euiColorSecondary,
-  itemTint03: $euiColorWarning,
-  itemTint04: $euiColorDanger,
-  itemTint05: $euiColorMediumShade,
-  itemTint06: $euiColorAccent,
-  itemTint07: $euiColorVis3,
+  tint0: $euiColorVis0,
+  tint1: $euiColorVis1,
+  tint2: $euiColorVis2,
+  tint3: $euiColorVis3,
+  tint4: $euiColorVis5,
+  tint5: $euiColorVis7,
+  tint6: $euiColorVis8,
+  tint7: $euiColorVis9,
+  tint8: $euiColorDarkShade,
 );
diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js
@@ -4,13 +4,16 @@ import classNames from 'classnames';
 import { EuiIcon, IconPropType } from '../icon';
 
 const colorToClassNameMap = {
-  itemTint01: 'euiSuggestItem__type--itemTint01',
-  itemTint02: 'euiSuggestItem__type--itemTint02',
-  itemTint03: 'euiSuggestItem__type--itemTint03',
-  itemTint04: 'euiSuggestItem__type--itemTint04',
-  itemTint05: 'euiSuggestItem__type--itemTint05',
-  itemTint06: 'euiSuggestItem__type--itemTint06',
-  itemTint07: 'euiSuggestItem__type--itemTint07',
+  tint0: 'euiSuggestItem__type--tint0',
+  tint1: 'euiSuggestItem__type--tint1',
+  tint2: 'euiSuggestItem__type--tint2',
+  tint3: 'euiSuggestItem__type--tint3',
+  tint4: 'euiSuggestItem__type--tint4',
+  tint5: 'euiSuggestItem__type--tint5',
+  tint6: 'euiSuggestItem__type--tint6',
+  tint7: 'euiSuggestItem__type--tint7',
+  tint8: 'euiSuggestItem__type--tint8',
+  tint9: 'euiSuggestItem__type--tint9',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -61,7 +64,7 @@ export const EuiSuggestItem = ({
 EuiSuggestItem.propTypes = {
   className: PropTypes.string,
   /**
-   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be itemTint01 through itemTint07.
+   * Takes 'iconType' for EuiIcon and 'color'. 'color' can be tint1 through tint9.
    */
   type: PropTypes.shape({
     iconType: IconPropType,