diff --git a/CHANGELOG.md b/CHANGELOG.md index b22ef047ba2..1735d9cb690 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## [`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)) +- Added `inspect` icon ([#886](https://github.com/elastic/eui/pull/886)) +- Added `layout` prop to `EuiCard` ([#885](https://github.com/elastic/eui/pull/885)) ## [`0.0.50`](https://github.com/elastic/eui/tree/v0.0.50) diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index d8baa7dee52..c0492290371 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -9,6 +9,7 @@ import { import { EuiCode, EuiCard, + EuiCallOut, } from '../../../../src/components'; import Card from './card'; @@ -27,6 +28,10 @@ import CardBeta from './card_beta'; const cardBetaSource = require('!!raw-loader!./card_beta'); const cardBetaHtml = renderToHtml(CardBeta); +import CardLayout from './card_layout'; +const cardLayoutSource = require('!!raw-loader!./card_layout'); +const cardLayoutHtml = renderToHtml(CardLayout); + export const CardExample = { title: 'Card', sections: [{ @@ -54,6 +59,30 @@ export const CardExample = { props: { EuiCard }, demo: , }, + { + title: 'Layout', + source: [{ + type: GuideSectionTypes.JS, + code: cardLayoutSource, + }, { + type: GuideSectionTypes.HTML, + code: cardLayoutHtml, + }], + text: ( +
+

+ Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may + want the icon to be to the left of the content. In this case, add the prop layout="horizontal". +

+ Horizontal layouts do not work with images, footers or textAlign. Therefore, these properties will be ignored.} + /> +
+ ), + components: { EuiCard }, + demo: , + }, { title: 'Images', source: [{ @@ -69,9 +98,9 @@ export const CardExample = { Images can be added in place of, or in conjuction with, icons. Just pass a url into the image prop and it will expand to to edges of the card.

-

- Make sure that all images are the same proportions when used in a singular row. -

+ Make sure that all images are the same proportions when used in a singular row.} + /> ), components: { EuiCard }, diff --git a/src-docs/src/views/card/card_layout.js b/src-docs/src/views/card/card_layout.js new file mode 100644 index 00000000000..d4b6854dad2 --- /dev/null +++ b/src-docs/src/views/card/card_layout.js @@ -0,0 +1,39 @@ +import React from 'react'; + +import { + EuiCard, + EuiIcon, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +export default () => ( + + + } + title={`Elastic Beats`} + description="Example of a card's description. Stick to one or two sentences." + onClick={() => window.alert('Card clicked')} + /> + + + } + title={`Elastic Cloud`} + description="Example of a card's description. Stick to one or two sentences." + onClick={() => window.alert('Card clicked')} + /> + + + window.alert('Card clicked')} + /> + + +); 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/icon/icons.js b/src-docs/src/views/icon/icons.js index 81ee27e9940..6a692d4f3bc 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -72,6 +72,7 @@ const iconTypes = [ 'indexMapping', 'indexOpen', 'indexSettings', + 'inspect', 'invert', 'inputOutput', 'kqlField', diff --git a/src-docs/src/views/panel/panel_badge.js b/src-docs/src/views/panel/panel_badge.js new file mode 100644 index 00000000000..93baca6ec2a --- /dev/null +++ b/src-docs/src/views/panel/panel_badge.js @@ -0,0 +1,29 @@ +import React from 'react'; + +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +const badges = [null, 'Beta', 'Lab']; + +const panelNodes = badges.map(function (item, index) { + return ( + + window.alert('Card clicked')} + > + I am some panel content + + + ); +}); + +export default () => ( + + {panelNodes} + +); diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js index d908fbdd2aa..c1bd998fd83 100644 --- a/src-docs/src/views/panel/panel_example.js +++ b/src-docs/src/views/panel/panel_example.js @@ -21,6 +21,10 @@ import PanelHover from './panel_hover'; const panelHoverSource = require('!!raw-loader!./panel_hover'); const panelHoverHtml = renderToHtml(PanelHover); +import PanelBadge from './panel_badge'; +const panelBadgeSource = require('!!raw-loader!./panel_badge'); +const panelBadgeHtml = renderToHtml(PanelBadge); + export const PanelExample = { title: 'Panel', sections: [{ @@ -56,5 +60,21 @@ export const PanelExample = {

), demo: , + }, { + title: 'Panel beta badges', + source: [{ + type: GuideSectionTypes.JS, + code: panelBadgeSource, + }, { + type: GuideSectionTypes.HTML, + code: panelBadgeHtml, + }], + text: ( +

+ Similar to EuiCard panels can also accept + an EuiBetaBadge. +

+ ), + demo: , }], }; 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/badge/beta_badge/_index.scss b/src/components/badge/beta_badge/_index.scss index 10c53901b29..166e3b0878c 100644 --- a/src/components/badge/beta_badge/_index.scss +++ b/src/components/badge/beta_badge/_index.scss @@ -1 +1,2 @@ +@import 'mixins'; @import 'beta_badge'; diff --git a/src/components/badge/beta_badge/_mixins.scss b/src/components/badge/beta_badge/_mixins.scss new file mode 100644 index 00000000000..a07c59f3f58 --- /dev/null +++ b/src/components/badge/beta_badge/_mixins.scss @@ -0,0 +1,30 @@ + +/** + * 1. Extend beta badges to at least 40% of the card's width + */ + +@mixin hasBetaBadge($selector, $spacing: $euiSize) { + &.#{$selector}--hasBetaBadge { + position: relative; + + .#{$selector}__betaBadgeWrapper { + position: absolute; + top: $euiSizeL/-2; + left: 50%; + transform: translateX(-50%); + z-index: 3; // get above abs positioned image + min-width: 40%; /* 1 */ + max-width: calc(100% - #{$spacing*2}); + + .euiToolTipAnchor, + .#{$selector}__betaBadge { + width: 100%; /* 1 */ + } + + .#{$selector}__betaBadge { + overflow: hidden; + text-overflow: ellipsis; + } + } + } +} diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index 1746900d97e..dcb7ed2c7de 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -1,8 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiCard horizontal 1`] = ` +
+ + + Card title + +
+

+ Card description +

+
+ +
+`; + exports[`EuiCard icon 1`] = `
tag - * 4. Fix for IE where the image correctly resizes in width but doesn't collapse it's height + * 2. Fix for IE to ensure badges are visible outside of a