diff --git a/CHANGELOG.md b/CHANGELOG.md index 57d6b142869..052eedbefad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,17 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Made `EuiCard` more accessible ([#2521](https://github.com/elastic/eui/pull/2521)) +- Added ability to pass `children` to `EuiCard` ([#2521](https://github.com/elastic/eui/pull/2521)) + **Bug fixes** - Added support for `timeFormat` formatting in `EuiSuperDatePicker` and fixed some formatting inconsistencies ([#2518](https://github.com/elastic/eui/pull/2518)) - Added support for `locale` in `EuiSuperDatePicker` and `EuiDatePicker` both as a prop and from `EuiContext` ([#2518](https://github.com/elastic/eui/pull/2518)) +**Breaking changes** + +- Removed `EuiCardGraphic` ([#2521](https://github.com/elastic/eui/pull/2521)) + ## [`15.0.0`](https://github.com/elastic/eui/tree/v15.0.0) - Converted `EuiShowFor` and `EuiHideFor` to TS ([#2503](https://github.com/elastic/eui/pull/2503)) diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js index 352ac98ab62..108305b817a 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -319,6 +319,7 @@ export class GuidePageChrome extends Component { placeholder="Search" value={this.state.search} onChange={this.onSearchChange} + aria-label="Search for a docs section" /> diff --git a/src-docs/src/views/card/card_children.js b/src-docs/src/views/card/card_children.js new file mode 100644 index 00000000000..d4186b35371 --- /dev/null +++ b/src-docs/src/views/card/card_children.js @@ -0,0 +1,91 @@ +import React from 'react'; + +import { + EuiCard, + EuiFlexGroup, + EuiFlexItem, + EuiCodeBlock, + EuiRadioGroup, + EuiText, + EuiButton, + EuiCode, +} from '../../../../src/components'; + +const radios = [ + { + id: 'radios0', + label: 'Option one', + }, + { + id: 'radios1', + label: 'Option two', + }, + { + id: 'radios2', + label: 'Option three', + disabled: true, + }, +]; + +export default () => { + return ( + + + + Wrap a lists with EuiText size="s" to + match the description text. + + }> + +
    +
  • Bullet 1
    • +
  • Bullet 2
    • +
  • Bullet 3
    • +
+ + + + + + + + Send + + + + }> + {}} + compressed + /> + + + + + Just be sure not to add any onClick handler to + the card if the children are also interactable. + + }> + + {'Hello, young Skywalker'} + + + + + ); +}; diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 69699747df0..8ef41744bc7 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -32,6 +32,10 @@ import CardSelectable from './card_selectable'; const cardSelectableSource = require('!!raw-loader!./card_selectable'); const cardSelectableHtml = renderToHtml(CardSelectable); +import CardChildren from './card_children'; +const cardChildrenSource = require('!!raw-loader!./card_children'); +const cardChildrenHtml = renderToHtml(CardChildren); + export const CardExample = { title: 'Card', sections: [ @@ -58,8 +62,7 @@ export const CardExample = {

By default a card's title element is a span. This can be changed via the titleElement prop. - However, if an onClick function is also passed, - the title element will be forced back to a span. + However, it will always remain the same visual size.

By default a card's content is center aligned. To change the @@ -70,6 +73,12 @@ export const CardExample = { ), props: { EuiCard }, demo: , + snippet: `} + title="" + description="" + onClick={} +/>`, }, { title: 'Layout', @@ -89,7 +98,8 @@ export const CardExample = { 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". + layout="horizontal". Works best when + the icon is size xl.

, + snippet: `} + title="" + description="" + onClick={} +/>`, }, { title: 'Images', @@ -137,6 +154,13 @@ export const CardExample = { ), props: { EuiCard }, demo: , + snippet: ``, }, { title: 'Footer', @@ -151,15 +175,40 @@ export const CardExample = { }, ], text: ( -

- Footers can contain any number of elements and will always align to - the bottom of the card. However, if you supply a footer containing a{' '} - EuiButton you must not also give - it an onClick. -

+ <> +

+ Footers can contain any number of elements and will always align to + the bottom of the card. However, if you supply a footer containing a{' '} + EuiButton you must not also give + it an onClick. +

+ +

+ When using footers to display generic "Go" buttons. You + must provide an aria-label to the button itself + that refers back to the title of the card. +

+ + ), components: { EuiCard }, demo: , + snippet: `} + title="" + description="" + footer={ +
+ + + +

+ Or try this +

+ +
+ } +/>`, }, { title: 'Beta badge', @@ -185,6 +234,14 @@ export const CardExample = { ), props: { EuiCard }, demo: , + snippet: `} + title="" + description="" + onClick={} + betaBadgeLabel="" + betaBadgeTooltipContent="" +/>`, }, { title: 'Selectable', @@ -204,31 +261,72 @@ export const CardExample = { When you have a list of cards that can be selected but{' '} do not navigate anywhere, you can add the{' '} selectable prop. The prop is an object that - requires an onClick. It will apply the button as - seen below, and passing{' '} + extends EuiButtonEmpty. It will apply the button + as seen below, and passing{' '} selectable.isSelected = true will alter the styles of the card and button to look selected.

-

- The select button is essentially an EuiButtonEmpty and so the{' '} - selectable object can also accept any props that - EuiButtonEmpty can. -

+ ), props: { EuiCardSelect }, demo: , snippet: `} - title="Title" - description="Example of a short card description." - footer={cardFooterContent} + title="" + description="" selectable={{ onClick: this.cardClicked, isSelected: this.state.cardIsSelected, isDisabled: this.state.cardIsDisabled, }} + footer={ { + e.stopPropagation(); + }} + aria-label="" + />} />`, }, + { + title: 'Custom children', + source: [ + { + type: GuideSectionTypes.JS, + code: cardChildrenSource, + }, + { + type: GuideSectionTypes.HTML, + code: cardChildrenHtml, + }, + ], + text: ( + +

+ In the event that you need more than just paragraph text for the + description, you can pass anything you need as the{' '} + children of the component. +

+ + ), + props: { EuiCard }, + demo: , + snippet: ` + +
    +
  • Bullet 1
    • +
  • Bullet 2
    • +
  • Bullet 3
    • +
+ +`, + }, ], }; diff --git a/src-docs/src/views/card/card_footer.js b/src-docs/src/views/card/card_footer.js index 9e3cd713293..21e340f2db1 100644 --- a/src-docs/src/views/card/card_footer.js +++ b/src-docs/src/views/card/card_footer.js @@ -11,18 +11,6 @@ import { EuiText, } from '../../../../src/components'; -const cardFooterContent = ( -
- Go for it - - -

- Or try this -

- -
-); - export default () => ( @@ -30,7 +18,17 @@ export default () => ( icon={} title="Developers Tools" description="Example of a short card description." - footer={cardFooterContent} + footer={ +
+ Go for it + + +

+ Or try this +

+ +
+ } /> @@ -38,7 +36,17 @@ export default () => ( icon={} title="Dashboards" description="Example of a longer card description. See how the footers stay lined up." - footer={cardFooterContent} + footer={ +
+ Go for it + + +

+ Or try this +

+ +
+ } /> @@ -46,7 +54,17 @@ export default () => ( icon={} title="Save Objects" description="Example of a short card description." - footer={cardFooterContent} + footer={ +
+ Go for it + + +

+ Or try this +

+ +
+ } /> diff --git a/src-docs/src/views/card/card_layout.js b/src-docs/src/views/card/card_layout.js index 84a1baac78d..b0da0fc5598 100644 --- a/src-docs/src/views/card/card_layout.js +++ b/src-docs/src/views/card/card_layout.js @@ -12,7 +12,7 @@ export default () => ( } + icon={} title={'Elastic Beats'} description="Example of a card's description. Stick to one or two sentences." onClick={() => window.alert('Card clicked')} @@ -21,7 +21,7 @@ export default () => ( } + icon={} title={'Elastic Cloud'} description="Example of a card's description. Stick to one or two sentences." onClick={() => window.alert('Card clicked')} @@ -33,6 +33,7 @@ export default () => ( title={'No icon example'} description="Example of a card's description. Stick to one or two sentences." onClick={() => window.alert('Card clicked')} + href="#" /> diff --git a/src-docs/src/views/card/card_selectable.js b/src-docs/src/views/card/card_selectable.js index cda3c4d013a..6c8e687f639 100644 --- a/src-docs/src/views/card/card_selectable.js +++ b/src-docs/src/views/card/card_selectable.js @@ -30,13 +30,12 @@ export default class extends Component { }); }; - render() { - const cardFooterContent = ( - - More details - - ); + detailsClicked = e => { + e.stopPropagation(); + console.log('Details clicked'); + }; + render() { return ( @@ -44,7 +43,15 @@ export default class extends Component { icon={} title="Sketch" description="Example of a short card description." - footer={cardFooterContent} + footer={ + + More details + + } selectable={{ onClick: this.card1Clicked, isSelected: this.state.card1Selected, @@ -56,7 +63,15 @@ export default class extends Component { icon={} title="Google" description="Example of a longer card description. See how the footers stay lined up." - footer={cardFooterContent} + footer={ + + More details + + } selectable={{ onClick: this.card2Clicked, isSelected: this.state.card2Selected, @@ -68,7 +83,15 @@ export default class extends Component { icon={} title="Not Adobe" description="Example of a short card description." - footer={cardFooterContent} + footer={ + + More details + + } selectable={{ onClick: () => {}, isDisabled: true, diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index 1d9d6cd4ceb..1a1e30ed7b2 100644 --- a/src-docs/src/views/home/home_view.js +++ b/src-docs/src/views/home/home_view.js @@ -108,7 +108,6 @@ export const HomeView = () => ( href="#/display/icons" textAlign="left" image={imageIcons} - isClickable title="Icons" description="Our SVG icon library gives you full control over size and color" /> @@ -119,7 +118,6 @@ export const HomeView = () => ( textAlign="left" image={imageButtons} title="Buttons" - isClickable description="Buttons for every usage you might need" /> @@ -130,7 +128,6 @@ export const HomeView = () => ( image={imageFlexgrid} title="Flexible layouts" description="Create layouts by using flex groups, grids, and items" - isClickable /> @@ -139,7 +136,6 @@ export const HomeView = () => ( textAlign="left" image={imageTables} title="Tables" - isClickable description="Build tables from individual components or high level wrappers" /> @@ -150,7 +146,6 @@ export const HomeView = () => ( image={imageCards} title="Cards" description="Cards like these help you make repeatable content more presentable" - isClickable /> @@ -159,7 +154,6 @@ export const HomeView = () => ( textAlign="left" image={imageForms} title="Forms" - isClickable description="Input tags, layouts, and validation for your forms" /> diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index cc0393beaef..37c9f1ca008 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -6,11 +6,11 @@ exports[`EuiCard is rendered 1`] = ` class="euiCard euiCard--centerAligned testClass1 testClass2" data-test-subj="test subject string" > - Card title @@ -23,10 +23,33 @@ exports[`EuiCard is rendered 1`] = ` Card description

- - + + +`; + +exports[`EuiCard props children 1`] = ` +
+
+ + Card title + +
+

+ Card description +

+
+ Child +
`; @@ -34,11 +57,11 @@ exports[`EuiCard props footer 1`] = `
- Card title @@ -51,14 +74,14 @@ exports[`EuiCard props footer 1`] = ` Card description

- - +
Footer - +
`; @@ -66,11 +89,11 @@ exports[`EuiCard props horizontal 1`] = `
- Card title @@ -83,15 +106,66 @@ exports[`EuiCard props horizontal 1`] = ` Card description

- + `; +exports[`EuiCard props href supports href as a link 1`] = ` + +
+
+ + + + Hoi + + + + +
+

+ There +

+
+ +
+
+ +`; + exports[`EuiCard props icon 1`] = `
- - - +
Card title @@ -120,22 +194,19 @@ exports[`EuiCard props icon 1`] = ` Card description

- - +
`; exports[`EuiCard props selectable 1`] = `
- Card title @@ -148,13 +219,12 @@ exports[`EuiCard props selectable 1`] = ` Card description

- - + + ); + } else { + theTitle = title; + } + + /** + * Convert titleElement to a capital TitleElement + */ + + const TitleElement = titleElement; + return ( - // @ts-ignore - +
{optionalBetaBadge} - {optionalCardTop} - - - {title} +
+ + {theTitle} = ({ className="euiCard__description">

{description}

 - - {layout === 'vertical' && ( - {footer} - )} + {children} +
- {optionalSelectButton || optionalBottomGraphic} - + {layout === 'vertical' && footer && ( +
{footer}
+ )} + {optionalSelectButton} +
); }; - -EuiCard.defaultProps = { - textAlign: 'center', - layout: 'vertical', - titleElement: 'span', -}; diff --git a/src/components/card/card_graphic.test.tsx b/src/components/card/card_graphic.test.tsx deleted file mode 100644 index be6183cbd6f..00000000000 --- a/src/components/card/card_graphic.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; - -import { EuiCardGraphic, GRAPHIC_COLORS } from './card_graphic'; - -describe('EuiCardGraphic', () => { - test('is rendered', () => { - const component = render(); - - expect(component).toMatchSnapshot(); - }); - - describe('props', () => { - describe('colors', () => { - GRAPHIC_COLORS.forEach(color => { - it(`${color} is rendered`, () => { - const component = render(); - - expect(component).toMatchSnapshot(); - }); - }); - }); - }); -}); diff --git a/src/components/card/card_graphic.tsx b/src/components/card/card_graphic.tsx deleted file mode 100644 index 9f28387ce13..00000000000 --- a/src/components/card/card_graphic.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, { HTMLAttributes, FunctionComponent } from 'react'; -import { CommonProps } from '../common'; - -export type EuiCardGraphicColor = 'blue' | 'green' | 'purple'; -interface EuiCardGraphicColorsToCode { - color: EuiCardGraphicColor; - start: string; - end: string; - path: string; - pathLight: string; -} -const graphicColorsToCodes: EuiCardGraphicColorsToCode[] = [ - { - color: 'blue', - start: '#0079A5', - end: '#3185FC', - path: - 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 159.656579,4 213.348797,4 C267.041016,4 288.265625,13.4882812 700,17.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', - pathLight: - 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z', - }, // eslint-disable-line max-len - { - color: 'green', - start: '#017F75', - end: '#00B3A4', - path: - 'M3.14689825e-06,13.6239758 C26.8316503,17.6239758 55.6152344,25 116.542969,25 C177.470703,25 263.972656,4 297.017578,4 C330.0625,4 348.589288,7.23392617 700.000003,9 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,13.6239758 Z', - pathLight: - 'M3.1372994e-06,24.4746094 C127.450326,24.4746094 108.698941,3 180.25,3 C251.801058,3 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.1372994e-06,24.4746094 Z', - }, // eslint-disable-line max-len - { - color: 'purple', - start: '#490092', - end: '#DD0A73', - path: - 'M0,5 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,5 Z', - pathLight: - 'M700,21.4746094 L700,40 L1.76214598e-12,40 L1.12746648e-08,18.4941406 C9.35694419,18.5359805 41.1418261,21.0181774 102.519531,21.4746094 C163.897236,21.9310414 216.210205,5 260.105102,5 C304,5 339.77443,21.6752984 700,21.4746094 Z', - }, // eslint-disable-line max-len -]; - -export const GRAPHIC_COLORS: EuiCardGraphicColor[] = graphicColorsToCodes.map( - ({ color }) => color -); - -export type EuiCardGraphicProps = HTMLAttributes & - CommonProps & { - /** - * Determines the brand-driven color codes used in the SVG - */ - color?: EuiCardGraphicColor; - }; - -export const EuiCardGraphic: FunctionComponent = ({ - color = 'blue', -}) => { - // Set the svg gradient colors - const graphicStartColor: string = graphicColorsToCodes.find( - w => w.color === color - )!.start; - const graphicEndColor: string = graphicColorsToCodes.find( - x => x.color === color - )!.end; - const graphicSVGPath: string = graphicColorsToCodes.find( - y => y.color === color - )!.path; - const graphicSVGPathLight: string = graphicColorsToCodes.find( - z => z.color === color - )!.pathLight; - - return ( - - - - - - - - - - - - - ); -}; diff --git a/src/components/card/card_select.tsx b/src/components/card/card_select.tsx index e06cf85d14d..5abf17d52b0 100644 --- a/src/components/card/card_select.tsx +++ b/src/components/card/card_select.tsx @@ -1,31 +1,25 @@ -import React, { FunctionComponent, MouseEventHandler, ReactNode } from 'react'; +import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; -import { EuiButtonEmpty, EuiButtonEmptyColor } from '../button/button_empty'; +import { + EuiButtonEmpty, + EuiButtonEmptyColor, + EuiButtonEmptyProps, +} from '../button/button_empty'; import { EuiI18n } from '../i18n'; -export type EuiCardSelectProps = CommonProps & { - /** - * You must handle the click event in order to have a select button - */ - onClick: MouseEventHandler; +export type EuiCardSelectProps = EuiButtonEmptyProps & { /** * Is in the selected state */ isSelected?: boolean; isDisabled?: boolean; - /** - * Override the default color with one of the available colors from `EuiButtonEmpty` - */ - color?: EuiButtonEmptyColor; }; export const EuiCardSelect: FunctionComponent = ({ className, - onClick, - isSelected, + isSelected = false, isDisabled, color, children, @@ -44,9 +38,10 @@ export const EuiCardSelect: FunctionComponent = ({ className={selectClasses} color={color || 'text'} size="xs" - onClick={onClick} isDisabled={isDisabled} iconType={isSelected ? 'check' : undefined} + role="switch" + aria-checked={isSelected} {...rest}> {child} diff --git a/src/components/card/index.ts b/src/components/card/index.ts index 3c6c2f1d082..679ef81085d 100644 --- a/src/components/card/index.ts +++ b/src/components/card/index.ts @@ -1,3 +1 @@ export { EuiCard } from './card'; - -export { EuiCardGraphic } from './card_graphic'; diff --git a/src/components/index.js b/src/components/index.js index 85207f9e02c..a4638e56f05 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -20,7 +20,7 @@ export { export { EuiCallOut } from './call_out'; -export { EuiCard, EuiCardGraphic } from './card'; +export { EuiCard } from './card'; export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code';