From 4e5a15460765dc870709850f1518ac76db59cd64 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 9 Jan 2019 12:34:40 -0500 Subject: [PATCH 1/5] Description list enhancements and fixes - Fixes line-heights of the different sizes so that the title and description line-up (especially in columns) - Allows the `EuiDescriptionList` wrapper to pass props to the individual `EuiDescriptionListTitle` and `EuiDescriptionListDescription` items --- .../description_list_classes.js | 31 +++++++++++++++++++ .../description_list_example.js | 22 +++++++++++++ .../description_list/_description_list.scss | 7 +++++ .../description_list/description_list.js | 20 +++++++++--- src/components/description_list/index.d.ts | 2 ++ 5 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/description_list/description_list_classes.js diff --git a/src-docs/src/views/description_list/description_list_classes.js b/src-docs/src/views/description_list/description_list_classes.js new file mode 100644 index 00000000000..4d828f5a70e --- /dev/null +++ b/src-docs/src/views/description_list/description_list_classes.js @@ -0,0 +1,31 @@ +import React from 'react'; + +import { + EuiDescriptionList, +} from '../../../../src/components'; + +const favoriteVideoGames = [ + { + title: 'The Elder Scrolls: Morrowind', + description: 'The opening music alone evokes such strong memories.', + }, + { + title: 'TIE Fighter', + description: 'The sequel to XWING, join the dark side and fly for the Emporer.', + }, + { + title: 'Quake 2', + description: 'The game that made me drop out of college.', + }, +]; +export default () => ( +
+ +
+); diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js index 459183f5f4c..a759f3b0343 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -31,6 +31,10 @@ import DescriptionListReverse from './description_list_reverse'; const descriptionListReverseSource = require('!!raw-loader!./description_list_reverse'); const descriptionListReverseHtml = renderToHtml(DescriptionListReverse); +import DescriptionListClasses from './description_list_classes'; +const descriptionListClassesSource = require('!!raw-loader!./description_list_classes'); +const descriptionListClassesHtml = renderToHtml(DescriptionListClasses); + export const DescriptionListExample = { title: 'Description List', sections: [{ @@ -124,5 +128,23 @@ export const DescriptionListExample = {

), demo: , + }, { + title: 'Passing className', + source: [{ + type: GuideSectionTypes.JS, + code: descriptionListClassesSource, + }, { + type: GuideSectionTypes.HTML, + code: descriptionListClassesHtml, + }], + text: ( +

+ When using the listItems prop to pass an object of items and you + need to also add classNames (or other available props) to the individual + pieces, you can use the titleProps and descriptionProps to + do so. +

+ ), + demo: , }], }; diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss index 3bfabcd4ad3..5cc9a878462 100644 --- a/src/components/description_list/_description_list.scss +++ b/src/components/description_list/_description_list.scss @@ -5,6 +5,7 @@ .euiDescriptionList__title { @include euiTitle('xs'); + line-height: $euiLineHeight; margin-top: $euiSize; // Make sure the first
doesn't get a margine. @@ -43,6 +44,7 @@ .euiDescriptionList__title { @include euiTitle('xxs'); + line-height: $euiLineHeight; } .euiDescriptionList__description { @@ -57,6 +59,7 @@ .euiDescriptionList__description { @include euiTitle('xxs'); + line-height: $euiLineHeight; } } } @@ -80,6 +83,7 @@ .euiDescriptionList__title { @include euiTitle('xs'); + line-height: $euiLineHeight; flex-basis: 50%; padding-right: $euiSizeS; } @@ -106,6 +110,7 @@ .euiDescriptionList__description { @include euiTitle('xs'); + line-height: $euiLineHeight; } } @@ -113,6 +118,7 @@ .euiDescriptionList__title { @include euiTitle('xxs'); + line-height: $euiLineHeight; } .euiDescriptionList__description { @@ -127,6 +133,7 @@ .euiDescriptionList__description { @include euiTitle('xxs'); + line-height: $euiLineHeight; } } } diff --git a/src/components/description_list/description_list.js b/src/components/description_list/description_list.js index aeb31bf709d..e9e4f4bc223 100644 --- a/src/components/description_list/description_list.js +++ b/src/components/description_list/description_list.js @@ -33,12 +33,14 @@ const textStylesToClassNameMap = { export const TEXT_STYLES = Object.keys(textStylesToClassNameMap); export const EuiDescriptionList = ({ + align, children, className, - listItems, - align, compressed, + descriptionProps, + listItems, textStyle, + titleProps, type, ...rest }) => { @@ -58,11 +60,11 @@ export const EuiDescriptionList = ({ childrenOrListItems = ( listItems.map((item, index) => { return [ - + {item.title} , - + {item.description} ]; @@ -110,6 +112,16 @@ EuiDescriptionList.propTypes = { * How each item should be layed out */ type: PropTypes.oneOf(TYPES), + + /** + * Props object to be passed to `EuiDescriptionListTitle` + */ + titleProps: PropTypes.object, + + /** + * Props object to be passed to `EuiDescriptionListDescription` + */ + descriptionProps: PropTypes.object, }; EuiDescriptionList.defaultProps = { diff --git a/src/components/description_list/index.d.ts b/src/components/description_list/index.d.ts index c4290953721..62fea6ec873 100644 --- a/src/components/description_list/index.d.ts +++ b/src/components/description_list/index.d.ts @@ -12,6 +12,8 @@ declare module '@elastic/eui' { compressed?: boolean; textStyle?: EuiDescriptionListTextStyle; type?: EuiDescriptionListType; + titleProps?: object; + descriptionProps?: object; } export class EuiDescriptionList extends Component< From 6465ea7083cd23e51e7d1c54cc90f245591c07ce Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 9 Jan 2019 12:41:43 -0500 Subject: [PATCH 2/5] cl --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 42301c7382e..7ad217ffc14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,13 +4,17 @@ - Added `initialFocus` prop typedefs to `EuiModal` and `EuiPopover` ([#1410](https://github.com/elastic/eui/pull/1410)) - Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413)) - Added `isAutoRefreshOnly` prop to `EuiSuperDatePicker` ([#1412](https://github.com/elastic/eui/pull/1412)) +- Added `titleProps` and `descriptionProps` to `EuiDescriptionList` ([#1419](https://github.com/elastic/eui/pull/1419)) + +**Bug fixes** + +- Fixed line-heights of the differently sized `EuiDescriptionList` alternates ([#1419](https://github.com/elastic/eui/pull/1419)) ## [`6.2.0`](https://github.com/elastic/eui/tree/v6.2.0) - Added `logoCodesandbox` and updated `apmApp` icons ([#1407](https://github.com/elastic/eui/pull/1407)) - Changed `EuiListGroup` PropType for `extraAction` to remove console warning ([#1405](hhttps://github.com/elastic/eui/pull/1405)) - **Bug fixes** - Account for `min` attribute when determining `EuiRange` input width ([#1406](https://github.com/elastic/eui/pull/1406)) From 01841636730b500973ac9729c7ae8acf50bc8986 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 9 Jan 2019 14:36:05 -0500 Subject: [PATCH 3/5] Fix for IE column layout --- src/components/description_list/_description_list.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss index 5cc9a878462..0b3350e7f70 100644 --- a/src/components/description_list/_description_list.scss +++ b/src/components/description_list/_description_list.scss @@ -84,13 +84,13 @@ .euiDescriptionList__title { @include euiTitle('xs'); line-height: $euiLineHeight; - flex-basis: 50%; + width: 50%; // Flex-basis doesn't work in IE with padding padding-right: $euiSizeS; } .euiDescriptionList__description { @include euiFontSize; - flex-basis: 50%; + width: 50%; // Flex-basis doesn't work in IE with padding padding-left: $euiSizeS; } From dc230e2fe042f4ba250e34f86915814ddd004054 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 9 Jan 2019 14:37:25 -0500 Subject: [PATCH 4/5] Update src/components/description_list/index.d.ts Co-Authored-By: cchaos <549577+cchaos@users.noreply.github.com> --- src/components/description_list/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/index.d.ts b/src/components/description_list/index.d.ts index 62fea6ec873..d180b46b360 100644 --- a/src/components/description_list/index.d.ts +++ b/src/components/description_list/index.d.ts @@ -12,7 +12,7 @@ declare module '@elastic/eui' { compressed?: boolean; textStyle?: EuiDescriptionListTextStyle; type?: EuiDescriptionListType; - titleProps?: object; + titleProps?: HTMLAttributes; descriptionProps?: object; } From 8f5e85cd701d3ecccb81f1c4c4e7c04d120ea1e7 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 9 Jan 2019 14:37:31 -0500 Subject: [PATCH 5/5] Update src/components/description_list/index.d.ts Co-Authored-By: cchaos <549577+cchaos@users.noreply.github.com> --- src/components/description_list/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description_list/index.d.ts b/src/components/description_list/index.d.ts index d180b46b360..253f1372975 100644 --- a/src/components/description_list/index.d.ts +++ b/src/components/description_list/index.d.ts @@ -13,7 +13,7 @@ declare module '@elastic/eui' { textStyle?: EuiDescriptionListTextStyle; type?: EuiDescriptionListType; titleProps?: HTMLAttributes; - descriptionProps?: object; + descriptionProps?: HTMLAttributes; } export class EuiDescriptionList extends Component<