From a211b7900a3ac6d509a5fbeec244f8308a31b3bc Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Thu, 11 Jul 2019 14:36:42 -0700 Subject: [PATCH] changes based on feedback --- src-docs/src/routes.js | 4 +- src-docs/src/views/icon/tokens.js | 2 +- src-docs/src/views/suggest/suggest.js | 3 + src-docs/src/views/suggest/suggest_example.js | 81 +++++++++++++++++ src-docs/src/views/suggest/suggest_item.js | 72 +++++++++++++++ .../src/views/suggest_item/suggest_item.js | 49 ---------- .../suggest_item/suggest_item_example.js | 89 ------------------- .../suggest_item/suggest_item_long_label.js | 27 ------ .../__snapshots__/suggest_item.test.js.snap | 58 +++++++++++- .../suggest_item/_suggest_item.scss | 33 +++---- src/components/suggest_item/_variables.scss | 14 +-- src/components/suggest_item/suggest_item.js | 62 ++++++------- .../suggest_item/suggest_item.test.js | 32 ++++++- 13 files changed, 291 insertions(+), 235 deletions(-) create mode 100644 src-docs/src/views/suggest/suggest.js create mode 100644 src-docs/src/views/suggest/suggest_example.js create mode 100644 src-docs/src/views/suggest/suggest_item.js delete mode 100644 src-docs/src/views/suggest_item/suggest_item.js delete mode 100644 src-docs/src/views/suggest_item/suggest_item_example.js delete mode 100644 src-docs/src/views/suggest_item/suggest_item_long_label.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index fc63a086bdd5..a7a86a7c86c2 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -156,7 +156,7 @@ import { StatExample } from './views/stat/stat_example'; import { StepsExample } from './views/steps/steps_example'; -import { SuggestItemExample } from './views/suggest_item/suggest_item_example'; +import { SuggestExample } from './views/suggest/suggest_example'; import { TableExample } from './views/tables/tables_example'; @@ -324,7 +324,6 @@ const navigation = [ LoadingExample, ProgressExample, StatExample, - SuggestItemExample, TableExample, TextExample, TitleExample, @@ -348,6 +347,7 @@ const navigation = [ RangeControlExample, SearchBarExample, SelectableExample, + SuggestExample, ].map(example => createExample(example)), }, { diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js index ae59983696ec..aaadc65ebf26 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.js @@ -112,7 +112,7 @@ export default () => ( displayOptions={{ color: 'tokenTint10', shape: 'square', - fill: true, + fill: false, }} /> diff --git a/src-docs/src/views/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js new file mode 100644 index 000000000000..3c4c903427b3 --- /dev/null +++ b/src-docs/src/views/suggest/suggest.js @@ -0,0 +1,3 @@ +import React from 'react'; + +export default () =>
; diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js new file mode 100644 index 000000000000..b884f78846b6 --- /dev/null +++ b/src-docs/src/views/suggest/suggest_example.js @@ -0,0 +1,81 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { GuideSectionTypes } from '../../components'; + +import { EuiCode, EuiSuggestItem } from '../../../../src/components'; + +import Suggest from './suggest'; +const suggestSource = require('!!raw-loader!./suggest'); +const suggestHtml = renderToHtml(Suggest); + +import SuggestItem from './suggest_item'; +const suggestItemSource = require('!!raw-loader!./suggest_item'); +const suggestItemHtml = renderToHtml(SuggestItem); +const suggestItemSnippet = [ + ` +`, + ``, +]; + +export const SuggestExample = { + title: 'Suggest', + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: suggestSource, + }, + { + type: GuideSectionTypes.HTML, + code: suggestHtml, + }, + ], + text: ( +
+

+ EuiSuggest description goes here. +

+
+ ), + }, + { + title: 'Suggest Item', + source: [ + { + type: GuideSectionTypes.JS, + code: suggestItemSource, + }, + { + type: GuideSectionTypes.HTML, + code: suggestItemHtml, + }, + ], + text: ( +
+

+ EuiSuggestItem is a list item component to + display suggestions when typing queries in{' '} + EuiSuggestInput. Use{' '} + labelDisplay to set whether the{' '} + label has a fixed width or not. +

+
+ ), + props: { EuiSuggestItem }, + snippet: suggestItemSnippet, + demo: , + }, + ], +}; diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js new file mode 100644 index 000000000000..a641ad89b184 --- /dev/null +++ b/src-docs/src/views/suggest/suggest_item.js @@ -0,0 +1,72 @@ +import React from 'react'; + +import { EuiSuggestItem, EuiSpacer } from '../../../../src/components'; + +const shortDescription = 'This is the description'; + +const sampleItems = [ + { + type: { iconType: 'kqlField', color: 'itemTint03' }, + label: 'Field sample', + description: shortDescription, + }, + { + type: { iconType: 'kqlValue', color: 'itemTint02' }, + label: 'Value sample', + description: shortDescription, + }, + { + type: { iconType: 'kqlSelector', color: 'itemTint06' }, + label: 'Conjunction sample', + description: shortDescription, + }, + { + type: { iconType: 'kqlOperand', color: 'itemTint01' }, + label: 'Operator sample', + description: shortDescription, + }, + { + type: { iconType: 'search', color: 'itemTint05' }, + label: 'Recent search', + }, + { + type: { iconType: 'save', color: 'itemTint07' }, + label: 'Saved search', + }, +]; + +const sampleItem1 = { + type: { iconType: 'kqlValue', color: 'itemTint02' }, + label: 'Charles de Gaulle International Airport', + description: shortDescription, +}; + +export default () => ( +
+ {sampleItems.map((item, index) => ( + + ))} + + + + + +
+); diff --git a/src-docs/src/views/suggest_item/suggest_item.js b/src-docs/src/views/suggest_item/suggest_item.js deleted file mode 100644 index 10d62c76bfa9..000000000000 --- a/src-docs/src/views/suggest_item/suggest_item.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; - -import { EuiSuggestItem } from '../../../../src/components/suggest_item'; - -const shortDescription = 'This is the description'; - -const sampleItems = [ - { - type: { icon: 'kqlField', color: 'warning' }, - label: 'Field sample', - description: shortDescription, - }, - { - type: { icon: 'kqlValue', color: 'secondary' }, - label: 'Value sample', - description: shortDescription, - }, - { - type: { icon: 'kqlSelector', color: 'accent' }, - label: 'Conjunction sample', - description: shortDescription, - }, - { - type: { icon: 'kqlOperand', color: 'primary' }, - label: 'Operator sample', - description: shortDescription, - }, - { - type: { icon: 'search', color: 'text' }, - label: 'Recent search sample', - }, - { - type: { icon: 'save', color: 'vis3' }, - label: 'Saved search', - }, -]; - -export default () => ( -
- {sampleItems.map((item, index) => ( - - ))} -
-); diff --git a/src-docs/src/views/suggest_item/suggest_item_example.js b/src-docs/src/views/suggest_item/suggest_item_example.js deleted file mode 100644 index 6c72feb15c3f..000000000000 --- a/src-docs/src/views/suggest_item/suggest_item_example.js +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { GuideSectionTypes } from '../../components'; - -import { EuiCode, EuiSuggestItem } from '../../../../src/components'; - -import SuggestItem from './suggest_item'; -const suggestItemSource = require('!!raw-loader!./suggest_item'); -const suggestItemHtml = renderToHtml(SuggestItem); - -import SuggestItemLongLabel from './suggest_item_long_label'; -const suggestItemLongLabelSource = require('!!raw-loader!./suggest_item_long_label'); -const suggestItemLongLabelHtml = renderToHtml(SuggestItemLongLabel); - -export const SuggestItemExample = { - title: 'Suggest Item', - sections: [ - { - source: [ - { - type: GuideSectionTypes.JS, - code: suggestItemSource, - }, - { - type: GuideSectionTypes.HTML, - code: suggestItemHtml, - }, - ], - text: ( -
-

- EuiSuggestItem is a list item component useful to - suggestions when typing queries in input fields. -

-
    -
  • - type is an object that takes{' '} - icon and color.{' '} - icon supports any of the icons available in - EuiIcon. color is the color - for the icon and its background. The background color is - automatically calculated and it is a ligther shade of - color. -
    • -
  • - label is the primary text for the suggestion. -
    • -
  • - description is the secondary text for the - suggestion and it is optional. -
    • -
  • - Use layout to change the distribution of the{' '} - EuiSuggestItem elements. The default{' '} - layout is setColumns. -
    • -
-
- ), - props: { EuiSuggestItem }, - demo: , - }, - { - title: 'Expand long label', - source: [ - { - type: GuideSectionTypes.JS, - code: suggestItemLongLabelSource, - }, - { - type: GuideSectionTypes.HTML, - code: suggestItemLongLabelHtml, - }, - ], - text: ( -

- By default EuiSuggestItem's{' '} - label will have a fixed width and use ellipsis - whenever its content is too long. It is possible to show the full text - by setting layout to inline. -

- ), - props: { EuiSuggestItem }, - demo: , - }, - ], -}; diff --git a/src-docs/src/views/suggest_item/suggest_item_long_label.js b/src-docs/src/views/suggest_item/suggest_item_long_label.js deleted file mode 100644 index 026f6ae6daed..000000000000 --- a/src-docs/src/views/suggest_item/suggest_item_long_label.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import { EuiSuggestItem } from '../../../../src/components/suggest_item'; - -const shortDescription = 'This is the description'; - -const sampleItem = { - type: { icon: 'kqlValue', color: 'secondary' }, - label: 'Charles de Gaulle International Airport', - description: shortDescription, -}; - -export default () => ( -
- - -
-); diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap index 5b1061eacd6a..f5d2db891f26 100644 --- a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap +++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap @@ -7,10 +7,10 @@ exports[`EuiSuggestItem is rendered 1`] = ` data-test-subj="test subject string" >
`; + +exports[`props item with no description has expanded label is rendered 1`] = ` +
+ + + + + +
+`; + +exports[`props labelDisplay as expand is rendered 1`] = ` +
+ + + + + + This is the description + +
+`; diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss index 594da0a57e73..2fe4558e2747 100644 --- a/src/components/suggest_item/_suggest_item.scss +++ b/src/components/suggest_item/_suggest_item.scss @@ -1,13 +1,5 @@ @import '../loading/mixins'; -// $buttonTypes: ( -// primary: $euiColorPrimary, -// secondary: $euiColorSecondary, -// warning: $euiColorWarning, -// danger: $euiColorDanger, -// dark: $euiColorMediumShade, -// ); - .euiSuggestItem { display: flex; flex-grow: 1; @@ -17,7 +9,12 @@ @each $name, $color in $itemColors { .euiSuggestItem__type--#{$name} { - background-color: tintOrShade($color, 90%, 50%); + $backgroundColor: tintOrShade($color, 90%, 50%); + background-color: $backgroundColor; + + svg { + fill: makeHighContrastColor($color, $backgroundColor); + } } } @@ -40,15 +37,6 @@ padding: $euiSizeXS; justify-content: center; align-items: center; - - .customBackground { - width: 32px; - height: 32px; - position: absolute; - opacity: .2; - top: 0; - left: 0; - } } .euiSuggestItem__label { @@ -59,15 +47,15 @@ padding: $euiSizeXS $euiSizeS; color: $euiTextColor; - &.euiSuggestItem__layout--inline { + &.euiSuggestItem__labelDisplay--expand { flex-basis: auto; + flex-shrink: 1; } } .euiSuggestItem__description, .euiSuggestItem__label { - overflow: hidden; - text-overflow: ellipsis; + @include euiTextTruncate; display: block; } @@ -75,9 +63,10 @@ color: $euiColorDarkShade; flex-basis: auto; padding-top: $euiSizeXS * .5; + &:empty { flex-grow: 0; - margin-left:0; + margin-left: 0; } } } diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss index 140eb1e1bfee..dbdf162dd08c 100644 --- a/src/components/suggest_item/_variables.scss +++ b/src/components/suggest_item/_variables.scss @@ -1,9 +1,9 @@ $itemColors: ( - primary: $euiColorPrimary, - secondary: $euiColorSecondary, - warning: $euiColorWarning, - danger: $euiColorDanger, - text: $euiColorMediumShade, - accent: $euiColorAccent, - vis3: $euiColorVis3, + itemTint01: $euiColorPrimary, + itemTint02: $euiColorSecondary, + itemTint03: $euiColorWarning, + itemTint04: $euiColorDanger, + itemTint05: $euiColorMediumShade, + itemTint06: $euiColorAccent, + itemTint07: $euiColorVis3, ); diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js index 99415c027d75..f442609d4f51 100644 --- a/src/components/suggest_item/suggest_item.js +++ b/src/components/suggest_item/suggest_item.js @@ -4,59 +4,55 @@ import classNames from 'classnames'; import { EuiIcon, IconPropType } from '../icon'; const colorToClassNameMap = { - 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' }, + 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', }; export const COLORS = Object.keys(colorToClassNameMap); -const layoutToClassNameMap = { - setColumns: 'euiSuggestItem__layout--set', - inline: 'euiSuggestItem__layout--inline', +const labelDisplayToClassMap = { + fixed: 'euiSuggestItem__labelDisplay--fixed', + expand: 'euiSuggestItem__labelDisplay--expand', }; -export const LAYOUTS = Object.keys(layoutToClassNameMap); +export const DISPLAYS = Object.keys(labelDisplayToClassMap); export const EuiSuggestItem = ({ className, label, type, - layout, + labelDisplay, description, ...rest }) => { const classes = classNames('euiSuggestItem', className); let optionalColorClass = ''; - const layoutClass = layoutToClassNameMap[layout]; - // let optionalCustomStyles = undefined; + let labelDisplayClass = labelDisplayToClassMap[labelDisplay]; + + if (!description) { + labelDisplayClass = 'euiSuggestItem__labelDisplay--expand'; + } if (type && type.color) { if (COLORS.indexOf(type.color) > -1) { - optionalColorClass = colorToClassNameMap[type.color].class; + optionalColorClass = colorToClassNameMap[type.color]; } - // } else { - // optionalCustomStyles = { backgroundColor: type.color }; - // } } - let colorName; - colorName = colorToClassNameMap[type.color].colorName; - return (
- + + + + {label} - {label} {description}
); @@ -65,26 +61,26 @@ export const EuiSuggestItem = ({ EuiSuggestItem.propTypes = { className: PropTypes.string, /** - * Takes 'icon' for EuiIcon and 'color'. 'color' can be either our palette colors (primary, secondary, etc) or a hex value. + * Takes 'iconType' for EuiIcon and 'color'. 'color' can be itemTint01 through itemTint07. */ type: PropTypes.shape({ - icon: IconPropType, + iconType: IconPropType, color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string]), }).isRequired, /** - * Label for suggestion + * Label for suggest item */ label: PropTypes.string, /** - * Description for suggestion + * Description for suggest item */ description: PropTypes.string, /** - * Layout for suggest item + * Label display for suggest item */ - layout: PropTypes.oneOf(LAYOUTS), + labelDisplay: PropTypes.oneOf(DISPLAYS), }; EuiSuggestItem.defaultProps = { - layout: 'setColumns', + labelDisplay: 'fixed', }; diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js index 1c8c87c5fba1..42eb4e7d7afd 100644 --- a/src/components/suggest_item/suggest_item.test.js +++ b/src/components/suggest_item/suggest_item.test.js @@ -5,8 +5,8 @@ import { requiredProps } from '../../test/required_props'; import { EuiSuggestItem } from './suggest_item'; const TYPE = { - icon: 'search', - color: 'primary', + iconType: 'search', + color: 'itemTint01', }; describe('EuiSuggestItem', () => { @@ -16,3 +16,31 @@ describe('EuiSuggestItem', () => { expect(component).toMatchSnapshot(); }); }); + +describe('props', () => { + const sampleItem = { + type: { iconType: 'kqlValue', color: 'itemTint02' }, + label: 'Charles de Gaulle International Airport', + description: 'This is the description', + }; + + describe('labelDisplay as expand', () => { + test('is rendered', () => { + const component = render( + + ); + expect(component).toMatchSnapshot(); + }); + }); + + describe('item with no description has expanded label', () => { + test('is rendered', () => { + const component = render(); + expect(component).toMatchSnapshot(); + }); + }); +});