From ce1dc7c203487a48f83b68ed460a4421d69b4034 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Wed, 9 Jan 2019 15:59:41 -0500 Subject: [PATCH] Description list enhancements and fixes (#1419) --- CHANGELOG.md | 3 +- .../description_list_classes.js | 31 +++++++++++++++++++ .../description_list_example.js | 22 +++++++++++++ .../description_list/_description_list.scss | 11 +++++-- .../description_list/description_list.js | 20 +++++++++--- src/components/description_list/index.d.ts | 2 ++ 6 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 src-docs/src/views/description_list/description_list_classes.js diff --git a/CHANGELOG.md b/CHANGELOG.md index ffd1a2e7c31..6c649555f93 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,17 +5,18 @@ - Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413)) - Added `isAutoRefreshOnly` prop to `EuiSuperDatePicker` ([#1412](https://github.com/elastic/eui/pull/1412)) - Migrate remaining files in `accessiblity/` to TS ([#1408](https://github.com/elastic/eui/pull/1408)) +- Added `titleProps` and `descriptionProps` to `EuiDescriptionList` ([#1419](https://github.com/elastic/eui/pull/1419)) **Bug fixes** - Support extended characters (e.g. non-latin, unicode) in `EuiSearchBar` and `EuiQuery` ([#1415](https://github.com/elastic/eui/pull/1415)) +- 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)) 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..0b3350e7f70 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,13 +83,14 @@ .euiDescriptionList__title { @include euiTitle('xs'); - flex-basis: 50%; + line-height: $euiLineHeight; + 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; } @@ -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..253f1372975 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?: HTMLAttributes; + descriptionProps?: HTMLAttributes; } export class EuiDescriptionList extends Component<