From 0b369d0bc75f9d343d1f2872568e10284b3cee8d Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 26 Oct 2020 09:52:47 -0700 Subject: [PATCH 1/7] inspecting --- src-docs/src/views/suggest/suggest.js | 7 +++++-- src/components/suggest/_suggest_item.scss | 7 ++++++- src/components/suggest/suggest.tsx | 1 + src/components/suggest/suggest_item.tsx | 2 +- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js index e233d08a0db..d6f32d65280 100644 --- a/src-docs/src/views/suggest/suggest.js +++ b/src-docs/src/views/suggest/suggest.js @@ -9,12 +9,15 @@ import { import { htmlIdGenerator } from '../../../../src/services'; const shortDescription = 'This is the description'; +const longDescription = + 'This is very long long descriptionThis is very long long descriptionThis is very long long description'; const sampleItems = [ { type: { iconType: 'kqlField', color: 'tint4' }, - label: 'Field sample', - description: shortDescription, + label: longDescription, + description: longDescription, + labelDisplay: 'expand', }, { type: { iconType: 'kqlValue', color: 'tint0' }, diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss index 5d2dfdb8278..a9ef1ccb104 100644 --- a/src/components/suggest/_suggest_item.scss +++ b/src/components/suggest/_suggest_item.scss @@ -64,7 +64,12 @@ } } - .euiSuggestItem__description, + .euiSuggestItem__description { + // @include euiTextBreakWord; + display: block; + } + + // .euiSuggestItem__description, .euiSuggestItem__label { @include euiTextTruncate; display: block; diff --git a/src/components/suggest/suggest.tsx b/src/components/suggest/suggest.tsx index 3d47b9c1a16..f178df661a8 100644 --- a/src/components/suggest/suggest.tsx +++ b/src/components/suggest/suggest.tsx @@ -59,6 +59,7 @@ export const EuiSuggest: FunctionComponent = ( type={item.type} key={index} label={item.label} + labelDisplay={item.labelDisplay} onClick={onItemClick ? () => onItemClick(item) : undefined} description={item.description} /> diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx index 36bffa87680..19e761b88cf 100644 --- a/src/components/suggest/suggest_item.tsx +++ b/src/components/suggest/suggest_item.tsx @@ -143,7 +143,7 @@ export const EuiSuggestItem: FunctionComponent = ({ {label} - {description} + {description} ); From 313e4719ace9b30dd3c57372a35143222ff690fb Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 26 Oct 2020 17:25:28 -0700 Subject: [PATCH 2/7] fixed labelDisplay and added labelWidth and descriptionDisplay --- src-docs/src/views/suggest/suggest.js | 7 +-- src-docs/src/views/suggest/suggest_example.js | 6 ++- src-docs/src/views/suggest/suggest_item.js | 50 ++++++++++++++++++- .../__snapshots__/suggest_item.test.tsx.snap | 34 +++++++++++-- src/components/suggest/_suggest_item.scss | 34 ++++++++----- src/components/suggest/suggest.tsx | 2 + src/components/suggest/suggest_item.test.tsx | 28 +++++++++++ src/components/suggest/suggest_item.tsx | 40 +++++++++++++-- 8 files changed, 171 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js index d6f32d65280..e233d08a0db 100644 --- a/src-docs/src/views/suggest/suggest.js +++ b/src-docs/src/views/suggest/suggest.js @@ -9,15 +9,12 @@ import { import { htmlIdGenerator } from '../../../../src/services'; const shortDescription = 'This is the description'; -const longDescription = - 'This is very long long descriptionThis is very long long descriptionThis is very long long description'; const sampleItems = [ { type: { iconType: 'kqlField', color: 'tint4' }, - label: longDescription, - description: longDescription, - labelDisplay: 'expand', + label: 'Field sample', + description: shortDescription, }, { type: { iconType: 'kqlValue', color: 'tint0' }, diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js index 25ed77def89..9a3bd538c86 100644 --- a/src-docs/src/views/suggest/suggest_example.js +++ b/src-docs/src/views/suggest/suggest_example.js @@ -106,7 +106,11 @@ export const SuggestExample = { EuiSuggestItem is a list item component to display suggestions when typing queries in EuiSuggest. Use{' '} labelDisplay to set whether the{' '} - label has a fixed width or not. + label has a fixed width or not. By default, fixed + labels will have a width of 50%, you can adjust this by setting{' '} + labelWidth. Use{' '} + descriptionDisplay to set whether the{' '} + description truncates or wraps.

), diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js index 981fc66c0f5..f98a487cb39 100644 --- a/src-docs/src/views/suggest/suggest_item.js +++ b/src-docs/src/views/suggest/suggest_item.js @@ -4,6 +4,9 @@ import { EuiSuggestItem, EuiSpacer } from '../../../../src/components'; const shortDescription = 'This is the description'; +const longDescription = + 'This is a long description. Fusce euismod dui eu metus sagittis molestie.'; + const sampleItems = [ { type: { iconType: 'kqlField', color: 'tint5' }, @@ -35,13 +38,34 @@ const sampleItems = [ }, ]; +const sampleItems2 = [ + { + type: { iconType: 'kqlField', color: 'tint5' }, + label: 'Field sample with label at 20%', + labelWidth: 20, + description: shortDescription, + }, + { + type: { iconType: 'kqlField', color: 'tint5' }, + label: 'Field sample with label at 50%', + labelWidth: 50, + description: shortDescription, + }, + { + type: { iconType: 'kqlField', color: 'tint5' }, + label: 'Field sample with label at 80%', + labelWidth: 80, + description: shortDescription, + }, +]; + const typeObj = { iconType: 'kqlValue', color: 'tint0' }; const longLabel = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam.'; export default () => ( -
+
{sampleItems.map((item, index) => ( ( type={{ iconType: 'search', color: 'tint10' }} label="Items with no description will expand their label" /> + + {sampleItems2.map((item, index) => ( + + ))} + + +
); diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap index 257e231306d..a374acc21ce 100644 --- a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap +++ b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap @@ -14,16 +14,40 @@ exports[`EuiSuggestItem is rendered 1`] = ` /> Test label
`; +exports[`props descriptionDisplay as wrap is rendered 1`] = ` +
+ + + + + This is the description + + + This is the description + +
+`; + exports[`props item with no description has expanded label is rendered 1`] = `
This is the description
`; @@ -63,7 +87,7 @@ exports[`props labelDisplay as expand is rendered 1`] = ` This is the description This is the description diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss index a9ef1ccb104..97abfdadc9e 100644 --- a/src/components/suggest/_suggest_item.scss +++ b/src/components/suggest/_suggest_item.scss @@ -50,13 +50,21 @@ } .euiSuggestItem__label { - flex-basis: 50%; - min-width: 50%; + @include euiTextTruncate; font-family: $euiCodeFontFamily; overflow: hidden; text-overflow: ellipsis; padding: $euiSizeXS $euiSizeS; color: $euiTextColor; + display: block; + + @for $i from 30 through 90 { + &.euiSuggestItem__labelWidth#{$i} { + flex-basis: $i * 1%; + min-width: $i * 1%; + $i: $i + 10; + } + } &.euiSuggestItem__labelDisplay--expand { flex-basis: auto; @@ -64,21 +72,21 @@ } } - .euiSuggestItem__description { - // @include euiTextBreakWord; - display: block; - } - - // .euiSuggestItem__description, - .euiSuggestItem__label { - @include euiTextTruncate; - display: block; - } - .euiSuggestItem__description { color: $euiColorDarkShade; flex-basis: auto; padding-top: $euiSizeXS * .5; + display: block; + + &.euiSuggestItem__description--wrap { + @include euiTextBreakWord; + white-space: normal; + } + + &.euiSuggestItem__description--truncate { + @include euiTextTruncate; + line-height: $euiLineHeight; + } &:empty { flex-grow: 0; diff --git a/src/components/suggest/suggest.tsx b/src/components/suggest/suggest.tsx index f178df661a8..4a60a64b053 100644 --- a/src/components/suggest/suggest.tsx +++ b/src/components/suggest/suggest.tsx @@ -60,6 +60,8 @@ export const EuiSuggest: FunctionComponent = ( key={index} label={item.label} labelDisplay={item.labelDisplay} + descriptionDisplay={item.descriptionDisplay} + labelWidth={item.labelWidth} onClick={onItemClick ? () => onItemClick(item) : undefined} description={item.description} /> diff --git a/src/components/suggest/suggest_item.test.tsx b/src/components/suggest/suggest_item.test.tsx index fde27eb689f..660926021e5 100644 --- a/src/components/suggest/suggest_item.test.tsx +++ b/src/components/suggest/suggest_item.test.tsx @@ -59,6 +59,34 @@ describe('props', () => { }); }); + describe('descriptionDisplay as wrap', () => { + test('is rendered', () => { + const component = render( + + ); + expect(component).toMatchSnapshot(); + }); + }); + + describe('labelWidth is 20%', () => { + test('is rendered', () => { + const component = render( + + ); + expect(component).toMatchSnapshot(); + }); + }); + describe('item with no description has expanded label', () => { test('is rendered', () => { const component = render( diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx index 19e761b88cf..de3bace73a5 100644 --- a/src/components/suggest/suggest_item.tsx +++ b/src/components/suggest/suggest_item.tsx @@ -52,6 +52,16 @@ interface EuiSuggestItemPropsBase { * Label display is 'fixed' by default. Label will increase its width beyond 50% if needed with 'expand'. */ labelDisplay?: keyof typeof labelDisplayToClassMap; + + /** + * With of 'label' when 'labelDisplay' is set to 'fixed'. Defaults to 50. Any value from 20 to 90 with increases of 10. + */ + labelWidth?: LabelWidthSize; + + /** + * Set the way in which 'description' is displayed, defaults to 'truncate'. + */ + descriptionDisplay?: keyof typeof descriptionDisplayToClassMap; } type PropsForDiv = Omit, 'onClick'>; @@ -81,6 +91,15 @@ interface ColorToClassMap { [key: string]: string; } +export type LabelWidthSize = + | 30 + | 40 + | 50 + | 60 + | 70 + | 80 + | 90; + const colorToClassNameMap: ColorToClassMap = { tint0: 'euiSuggestItem__type--tint0', tint1: 'euiSuggestItem__type--tint1', @@ -102,6 +121,11 @@ const labelDisplayToClassMap = { expand: 'euiSuggestItem__labelDisplay--expand', }; +const descriptionDisplayToClassMap = { + truncate: 'euiSuggestItem__description--truncate', + wrap: 'euiSuggestItem__description--wrap', +}; + export const DISPLAYS = keysOf(labelDisplayToClassMap); export const EuiSuggestItem: FunctionComponent = ({ @@ -109,7 +133,9 @@ export const EuiSuggestItem: FunctionComponent = ({ label, type, labelDisplay = 'fixed', + labelWidth = 50, description, + descriptionDisplay = 'truncate', onClick, ...rest }) => { @@ -123,12 +149,18 @@ export const EuiSuggestItem: FunctionComponent = ({ let colorClass = ''; - const labelDisplayClass = classNames( + const labelClassNames = classNames( 'euiSuggestItem__label', labelDisplayToClassMap[labelDisplay], { 'euiSuggestItem__labelDisplay--expand': !description, - } + [`euiSuggestItem__labelWidth${labelWidth}`] : labelDisplay === 'fixed', + }, + ); + + const descriptionClassNames = classNames( + 'euiSuggestItem__description', + descriptionDisplayToClassMap[descriptionDisplay], ); if (type && type.color) { @@ -142,8 +174,8 @@ export const EuiSuggestItem: FunctionComponent = ({ - {label} - {description} + {label} + {description} ); From 5424a0bf80436f4ca4dbd56a0f2fc6f2455a6598 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 26 Oct 2020 18:17:30 -0700 Subject: [PATCH 3/7] cl --- CHANGELOG.md | 2 ++ src-docs/src/views/suggest/suggest_item.js | 4 ++-- src/components/suggest/suggest_item.test.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d0eb3427bf..ef9e282fd1f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,10 +3,12 @@ - Improved `EuiButtonGroup` focus, hover, selected and disabled states ([#4142](https://github.com/elastic/eui/pull/4142)) - Added `display` prop to `EuiToolTip` for common display block needs ([#4148](https://github.com/elastic/eui/pull/4148)) - Added support for more colors in `EuiProgress` such as `vis0` through `vis9`, `warning`, `success` and custom colors ([#4130](https://github.com/elastic/eui/pull/4130)) +- Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) **Bug fixes** - Fixed issue with duplicate checkmarks in `EuiComboBox` ([#4162](https://github.com/elastic/eui/pull/4162)) +- Fixed issue with `labelWidth` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) ## [`30.0.0`](https://github.com/elastic/eui/tree/v30.0.0) diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js index f98a487cb39..fd624a84324 100644 --- a/src-docs/src/views/suggest/suggest_item.js +++ b/src-docs/src/views/suggest/suggest_item.js @@ -41,8 +41,8 @@ const sampleItems = [ const sampleItems2 = [ { type: { iconType: 'kqlField', color: 'tint5' }, - label: 'Field sample with label at 20%', - labelWidth: 20, + label: 'Field sample with label at 30%', + labelWidth: 30, description: shortDescription, }, { diff --git a/src/components/suggest/suggest_item.test.tsx b/src/components/suggest/suggest_item.test.tsx index 660926021e5..039da5ed530 100644 --- a/src/components/suggest/suggest_item.test.tsx +++ b/src/components/suggest/suggest_item.test.tsx @@ -73,7 +73,7 @@ describe('props', () => { }); }); - describe('labelWidth is 20%', () => { + describe('labelWidth is 30%', () => { test('is rendered', () => { const component = render( Date: Mon, 26 Oct 2020 18:19:16 -0700 Subject: [PATCH 4/7] typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef9e282fd1f..f501188c135 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ **Bug fixes** - Fixed issue with duplicate checkmarks in `EuiComboBox` ([#4162](https://github.com/elastic/eui/pull/4162)) -- Fixed issue with `labelWidth` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) +- Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) ## [`30.0.0`](https://github.com/elastic/eui/tree/v30.0.0) From 631707feb3454e8fd47356dce4792b0f5a223910 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Tue, 27 Oct 2020 13:23:40 -0700 Subject: [PATCH 5/7] fix test and add comment to Sass --- .../__snapshots__/suggest_item.test.tsx.snap | 24 ++++++++++++++++++ src/components/suggest/_suggest_item.scss | 3 ++- src/components/suggest/suggest_item.tsx | 25 ++++++++++--------- 3 files changed, 39 insertions(+), 13 deletions(-) diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap index a374acc21ce..e8ba8c4b678 100644 --- a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap +++ b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap @@ -93,3 +93,27 @@ exports[`props labelDisplay as expand is rendered 1`] = ` `; + +exports[`props labelWidth is 30% is rendered 1`] = ` +
+ + + + + This is the description + + + This is the description + +
+`; diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss index 97abfdadc9e..595b4b6ac06 100644 --- a/src/components/suggest/_suggest_item.scss +++ b/src/components/suggest/_suggest_item.scss @@ -58,7 +58,8 @@ color: $euiTextColor; display: block; - @for $i from 30 through 90 { + // Sets labelWidth from 20% to 90% in increments of 10% + @for $i from 20 through 90 { &.euiSuggestItem__labelWidth#{$i} { flex-basis: $i * 1%; min-width: $i * 1%; diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx index de3bace73a5..7465a38eed4 100644 --- a/src/components/suggest/suggest_item.tsx +++ b/src/components/suggest/suggest_item.tsx @@ -54,7 +54,7 @@ interface EuiSuggestItemPropsBase { labelDisplay?: keyof typeof labelDisplayToClassMap; /** - * With of 'label' when 'labelDisplay' is set to 'fixed'. Defaults to 50. Any value from 20 to 90 with increases of 10. + * With of 'label' when 'labelDisplay' is set to 'fixed'. Defaults to 50. Any value from 20 to 90 with increases of 10. */ labelWidth?: LabelWidthSize; @@ -92,13 +92,14 @@ interface ColorToClassMap { } export type LabelWidthSize = - | 30 - | 40 - | 50 - | 60 - | 70 - | 80 - | 90; + | '20' + | '30' + | '40' + | '50' + | '60' + | '70' + | '80' + | '90'; const colorToClassNameMap: ColorToClassMap = { tint0: 'euiSuggestItem__type--tint0', @@ -133,7 +134,7 @@ export const EuiSuggestItem: FunctionComponent = ({ label, type, labelDisplay = 'fixed', - labelWidth = 50, + labelWidth = '50', description, descriptionDisplay = 'truncate', onClick, @@ -154,13 +155,13 @@ export const EuiSuggestItem: FunctionComponent = ({ labelDisplayToClassMap[labelDisplay], { 'euiSuggestItem__labelDisplay--expand': !description, - [`euiSuggestItem__labelWidth${labelWidth}`] : labelDisplay === 'fixed', - }, + [`euiSuggestItem__labelWidth${labelWidth}`]: labelDisplay === 'fixed', + } ); const descriptionClassNames = classNames( 'euiSuggestItem__description', - descriptionDisplayToClassMap[descriptionDisplay], + descriptionDisplayToClassMap[descriptionDisplay] ); if (type && type.color) { From e7ecf9b66d542db683021806242c565e0faac5cf Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 28 Oct 2020 18:06:47 -0700 Subject: [PATCH 6/7] only show description span if there's a description --- .../suggest/__snapshots__/suggest_item.test.tsx.snap | 8 +------- src/components/suggest/suggest_item.test.tsx | 2 +- src/components/suggest/suggest_item.tsx | 4 +++- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap index ab2b7a94158..df2c7e9e403 100644 --- a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap +++ b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap @@ -18,9 +18,6 @@ exports[`EuiSuggestItem is rendered 1`] = ` > Test label - `; @@ -62,11 +59,8 @@ exports[`props item with no description has expanded label is rendered 1`] = ` - This is the description + Charles de Gaulle International Airport - `; diff --git a/src/components/suggest/suggest_item.test.tsx b/src/components/suggest/suggest_item.test.tsx index 039da5ed530..9bb2d365d04 100644 --- a/src/components/suggest/suggest_item.test.tsx +++ b/src/components/suggest/suggest_item.test.tsx @@ -90,7 +90,7 @@ describe('props', () => { describe('item with no description has expanded label', () => { test('is rendered', () => { const component = render( - + ); expect(component).toMatchSnapshot(); }); diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx index 77525c7de5e..292b53595b2 100644 --- a/src/components/suggest/suggest_item.tsx +++ b/src/components/suggest/suggest_item.tsx @@ -170,7 +170,9 @@ export const EuiSuggestItem: FunctionComponent = ({ {label} - {description} + {description && ( + {description} + )} ); From 5a8d35523d33daa9b7775eeb14abc6fdb59d49eb Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 28 Oct 2020 18:12:16 -0700 Subject: [PATCH 7/7] cl --- CHANGELOG.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 496e137cf5a..7a63d27adbe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,17 +1,19 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `30.1.1`. +- Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) + +**Bug fixes** + +- Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) ## [`30.1.1`](https://github.com/elastic/eui/tree/v30.1.1) - Added more exports for `EuiInMemoryTable` types ([#4179](https://github.com/elastic/eui/pull/4179)) -- Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) **Bug fixes** - Removed unnecessary shadow on hover of `EuiButtonGroup` ([#4186](https://github.com/elastic/eui/pull/4186)) - Fixed position of `EuiScreenReaderOnly` elements within `EuiButtonGroup` ([#4189](https://github.com/elastic/eui/pull/4189)) -- Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) ## [`30.1.0`](https://github.com/elastic/eui/tree/v30.1.0)