diff --git a/CHANGELOG.md b/CHANGELOG.md index b22ef047ba2..685a17ac228 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public changes since 0.0.50 +- Added `textStyle="reverse"` prop to `EuiDescriptionList` as well as a class (`.eui-definitionListReverse`) for `dl`'s within `EuiText` ([#882](https://github.com/elastic/eui/pull/882)) ## [`0.0.50`](https://github.com/elastic/eui/tree/v0.0.50) 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 5839b344ef8..459183f5f4c 100644 --- a/src-docs/src/views/description_list/description_list_example.js +++ b/src-docs/src/views/description_list/description_list_example.js @@ -27,6 +27,10 @@ import DescriptionListInline from './description_list_inline'; const descriptionListInlineSource = require('!!raw-loader!./description_list_inline'); const descriptionListInlineHtml = renderToHtml(DescriptionListInline); +import DescriptionListReverse from './description_list_reverse'; +const descriptionListReverseSource = require('!!raw-loader!./description_list_reverse'); +const descriptionListReverseHtml = renderToHtml(DescriptionListReverse); + export const DescriptionListExample = { title: 'Description List', sections: [{ @@ -48,6 +52,28 @@ export const DescriptionListExample = { ), props: { EuiDescriptionList }, demo: , + }, { + title: 'Reverse style', + source: [{ + type: GuideSectionTypes.JS, + code: descriptionListReverseSource, + }, { + type: GuideSectionTypes.HTML, + code: descriptionListReverseHtml, + }], + text: ( +
+

+ Setting the textStyle prop to reverse will reverse + the text styles of the title and description elements + so that the description is more prominent. This works best for key/value type content. +

+

+ Adding this property to the inline type will not change anything. +

+
+ ), + demo: , }, { title: 'As columns', source: [{ diff --git a/src-docs/src/views/description_list/description_list_reverse.js b/src-docs/src/views/description_list/description_list_reverse.js new file mode 100644 index 00000000000..e4326eec950 --- /dev/null +++ b/src-docs/src/views/description_list/description_list_reverse.js @@ -0,0 +1,24 @@ +import React from 'react'; + +import { + EuiDescriptionList, +} from '../../../../src/components'; + +const favoriteVideoGame = [ + { + title: 'Name', + description: 'The Elder Scrolls: Morrowind', + }, + { + title: 'Game style', + description: 'Open-world, fantasy, action role-playing', + }, + { + title: 'Release date', + description: '2002', + }, +]; + +export default () => ( + +); diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js index e4f10435348..2c5a0102caf 100644 --- a/src-docs/src/views/text/text.js +++ b/src-docs/src/views/text/text.js @@ -124,6 +124,29 @@ export default () => ( The game that made me drop out of college. + + + +
+
+ Name +
+
+ The Elder Scrolls: Morrowind +
+
+ Game style +
+
+ Open-world, fantasy, action role-playing +
+
+ Release date +
+
+ 2002 +
+
); diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss index 54159f632e8..d7ec9c1caaf 100644 --- a/src/components/description_list/_description_list.scss +++ b/src/components/description_list/_description_list.scss @@ -25,6 +25,18 @@ text-align: right; } + // Reversed makes the description larger than the title + &.euiDescriptionList--reverse { + .euiDescriptionList__title { + @include euiText; + @include euiFontSizeS; + } + + .euiDescriptionList__description { + @include euiTitle("xs"); + } + } + // Compressed gets smaller fonts. &.euiDescriptionList--compressed { @@ -35,6 +47,17 @@ .euiDescriptionList__description { @include euiFontSizeS; } + + &.euiDescriptionList--reverse { + .euiDescriptionList__title { + @include euiText; + @include euiFontSizeS; + } + + .euiDescriptionList__description { + @include euiTitle("xxs"); + } + } } } @@ -73,6 +96,17 @@ } } + &.euiDescriptionList--reverse { + .euiDescriptionList__title { + @include euiText; + @include euiFontSize; + } + + .euiDescriptionList__description { + @include euiTitle("xs"); + } + } + &.euiDescriptionList--compressed { .euiDescriptionList__title { @@ -82,6 +116,17 @@ .euiDescriptionList__description { @include euiFontSizeS; } + + &.euiDescriptionList--reverse { + .euiDescriptionList__title { + @include euiText; + @include euiFontSizeS; + } + + .euiDescriptionList__description { + @include euiTitle("xxs"); + } + } } } diff --git a/src/components/description_list/description_list.js b/src/components/description_list/description_list.js index 06a49dcf994..aeb31bf709d 100644 --- a/src/components/description_list/description_list.js +++ b/src/components/description_list/description_list.js @@ -25,12 +25,20 @@ const alignmentsToClassNameMap = { export const ALIGNMENTS = Object.keys(alignmentsToClassNameMap); +const textStylesToClassNameMap = { + normal: '', + reverse: 'euiDescriptionList--reverse', +}; + +export const TEXT_STYLES = Object.keys(textStylesToClassNameMap); + export const EuiDescriptionList = ({ children, className, listItems, align, compressed, + textStyle, type, ...rest }) => { @@ -38,6 +46,7 @@ export const EuiDescriptionList = ({ 'euiDescriptionList', typesToClassNameMap[type], alignmentsToClassNameMap[align], + textStylesToClassNameMap[textStyle], { 'euiDescriptionList--compressed': compressed, }, @@ -74,19 +83,38 @@ export const EuiDescriptionList = ({ }; EuiDescriptionList.propTypes = { - children: PropTypes.node, - className: PropTypes.string, listItems: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.node, description: PropTypes.node, })), + children: PropTypes.node, + className: PropTypes.string, + + /** + * Text alignment + */ + align: PropTypes.oneOf(ALIGNMENTS), + + /** + * Smaller text and condensed spacing + */ compressed: PropTypes.bool, + + /** + * How should the content be styled, by default + * this will emphasize the title + */ + textStyle: PropTypes.oneOf(TEXT_STYLES), + + /** + * How each item should be layed out + */ type: PropTypes.oneOf(TYPES), - align: PropTypes.oneOf(ALIGNMENTS), }; EuiDescriptionList.defaultProps = { - type: 'row', align: 'left', compressed: false, + textStyle: 'normal', + type: 'row', }; diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index 83785d45c47..74b3cf24208 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -7,7 +7,6 @@ ul, ol, dl, - dd, blockquote, img, pre { @@ -32,6 +31,10 @@ margin-bottom: convertToRem($baseLineHeightMultiplier * 1); } + dd + dt { + margin-top: convertToRem($baseLineHeightMultiplier * 2); + } + * + h2, * + h3, * + h4, @@ -56,10 +59,16 @@ } h4, - dt { + dt, + dl.eui-definitionListReverse dd { font-size: convertToRem($baseFontSize * nth($euiTextScale, 5)); // skip level 4 on purpose } + dl.eui-definitionListReverse dt { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 7)); + color: $euiTextColor; + } + h5 { font-size: convertToRem($baseFontSize * nth($euiTextScale, 6)); line-height: convertToRem($baseLineHeightMultiplier * 2);