Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adds support to pass descriptionID to bind a button and a description… #1758

Closed
wants to merge 6 commits into from
Closed

adds support to pass descriptionID to bind a button and a description… #1758

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9af9e40
adds support to pass descriptionID to bind a button and a description…
Mar 22, 2019
eb603d4
Merge branch 'master' into 1735
Mar 22, 2019
e024a71
updated CHANGELOG with 1758 pull request info
Mar 22, 2019
ae9dbfb
adds prop type for card component doc
Mar 22, 2019
5bf6237
card component: remove callout
Mar 22, 2019
397dc1b
card component: remove descriptionId example
Mar 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

- Converted `EuiCardGraphic` to TS ([#1751](https://github.com/elastic/eui/pull/1751))
- Enhanced the build process to emit TypeScript types for the variables extracted from the themes ([#1750](https://github.com/elastic/eui/pull/1750))
- Added support for passing descriptionID to bind a button to a description inside a card component ([#1758](https://github.com/elastic/eui/pull/1758))

## [`9.5.0`](https://github.com/elastic/eui/tree/v9.5.0)

Expand Down
294 changes: 163 additions & 131 deletions src-docs/src/views/card/card_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,9 @@ import React from 'react';

import { renderToHtml } from '../../services';

import {
GuideSectionTypes,
} from '../../components';
import { GuideSectionTypes } from '../../components';

import {
EuiCode,
EuiCard,
EuiCallOut,
} from '../../../../src/components';
import { EuiCode, EuiCard, EuiCallOut } from '../../../../src/components';

import Card from './card';
const cardSource = require('!!raw-loader!./card');
Expand All @@ -34,129 +28,167 @@ const cardLayoutHtml = renderToHtml(CardLayout);

export const CardExample = {
title: 'Card',
sections: [{
title: 'Basic Card',
source: [{
type: GuideSectionTypes.JS,
code: cardSource,
}, {
type: GuideSectionTypes.HTML,
code: cardHtml,
}],
text: (
<div>
sections: [
{
title: 'Basic Card',
source: [
{
type: GuideSectionTypes.JS,
code: cardSource,
},
{
type: GuideSectionTypes.HTML,
code: cardHtml,
},
],
text: (
<div>
<p>
At its core an <EuiCode>EuiCard</EuiCode> should contain a{' '}
<EuiCode>title</EuiCode>,<EuiCode>description</EuiCode>, and an{' '}
<EuiCode>icon</EuiCode>. You can make the whole card clickable by
giving it an <EuiCode>onClick</EuiCode> handler.
</p>
<p>
By default a card&apos;s title element is a <EuiCode>span</EuiCode>.
This can be changed via the <EuiCode>titleElement</EuiCode> prop.
However, if an <EuiCode>onClick</EuiCode> function is also passed,
the title element will be forced back to a span.
</p>
<p>
By default a card&apos;s content is center aligned. To change the
alignment set <EuiCode>textAlign</EuiCode> to{' '}
<EuiCode>left</EuiCode> or <EuiCode>right</EuiCode>.
</p>
</div>
),
props: { EuiCard },
demo: <Card />,
},
{
title: 'Layout',
source: [
{
type: GuideSectionTypes.JS,
code: cardLayoutSource,
},
{
type: GuideSectionTypes.HTML,
code: cardLayoutHtml,
},
],
text: (
<div>
<p>
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{' '}
<EuiCode>layout=&quot;horizontal&quot;</EuiCode>.
</p>
<EuiCallOut
color="danger"
title={
<span>
Horizontal layouts <strong>do not</strong> work with images,
footers, or <EuiCode>textAlign</EuiCode>. Therefore, these
properties will be ignored.
</span>
}
/>
</div>
),
components: { EuiCard },
demo: <CardLayout />,
},
{
title: 'Images',
source: [
{
type: GuideSectionTypes.JS,
code: cardImageSource,
},
{
type: GuideSectionTypes.HTML,
code: cardImageHtml,
},
],
text: (
<div>
<p>
Images can be added in place of, or in conjuction with, icons. Just
pass a url into the <EuiCode>image</EuiCode> prop and it will expand
to the edges of the card.
</p>
<EuiCallOut
title={
<span>
Make sure that all images are the{' '}
<strong>same proportions</strong> when used in a singular row.
</span>
}
/>
</div>
),
components: { EuiCard },
demo: <CardImage />,
},
{
title: 'Footer',
source: [
{
type: GuideSectionTypes.JS,
code: cardFooterSource,
},
{
type: GuideSectionTypes.HTML,
code: cardFooterHtml,
},
],
text: (
<div>
<p>
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{' '}
<EuiCode>EuiButton</EuiCode> you <strong>must not</strong> also give
it an <EuiCode>onClick</EuiCode>.
</p>
<EuiCallOut
title={
<span>
You can bind a button and a description for Screen Reader by
PhilippBaranovskiy marked this conversation as resolved.
Show resolved Hide resolved
providing <strong>descriptionId</strong>
</span>
}
/>
</div>
),
components: { EuiCard },
demo: <CardFooter />,
},
{
title: 'Beta badge',
source: [
{
type: GuideSectionTypes.JS,
code: cardBetaSource,
},
{
type: GuideSectionTypes.HTML,
code: cardBetaHtml,
},
],
text: (
<p>
At its core an <EuiCode>EuiCard</EuiCode> should contain a <EuiCode>title</EuiCode>,
<EuiCode>description</EuiCode>, and an <EuiCode>icon</EuiCode>. You can make the whole card
clickable by giving it an <EuiCode>onClick</EuiCode> handler.
If the card links to or references a module that is not GA (beta, lab,
etc), you can add a <EuiCode>betaBadgeLabel</EuiCode> and{' '}
<EuiCode>betaBadgeTooltipContent</EuiCode> to the card and it will
properly create and position an <EuiCode>EuiBetaBadge</EuiCode>. If
you want to change the title of the tooltip, supply a{' '}
<EuiCode>betaBadgeTitle</EuiCode> prop.
</p>
<p>
By default a card&apos;s title element is a <EuiCode>span</EuiCode>. This can be changed via
the <EuiCode>titleElement</EuiCode> prop. However, if an <EuiCode>onClick</EuiCode> function is
also passed, the title element will be forced back to a span.
</p>
<p>
By default a card&apos;s content is center aligned. To change the alignment
set <EuiCode>textAlign</EuiCode> to <EuiCode>left</EuiCode> or <EuiCode>right</EuiCode>.
</p>
</div>
),
props: { EuiCard },
demo: <Card />,
},
{
title: 'Layout',
source: [{
type: GuideSectionTypes.JS,
code: cardLayoutSource,
}, {
type: GuideSectionTypes.HTML,
code: cardLayoutHtml,
}],
text: (
<div>
<p>
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 <EuiCode>layout=&quot;horizontal&quot;</EuiCode>.
</p>
<EuiCallOut
color="danger"
title={
<span>Horizontal layouts <strong>do not</strong> work with images,
footers, or <EuiCode>textAlign</EuiCode>. Therefore, these properties will be ignored.
</span>
}
/>
</div>
),
components: { EuiCard },
demo: <CardLayout />,
},
{
title: 'Images',
source: [{
type: GuideSectionTypes.JS,
code: cardImageSource,
}, {
type: GuideSectionTypes.HTML,
code: cardImageHtml,
}],
text: (
<div>
<p>
Images can be added in place of, or in conjuction with, icons.
Just pass a url into the <EuiCode>image</EuiCode> prop and it will expand to the edges of the card.
</p>
<EuiCallOut
title={
<span>Make sure that all images are the <strong>same proportions</strong> when
used in a singular row.
</span>
}
/>
</div>
),
components: { EuiCard },
demo: <CardImage />,
},
{
title: 'Footer',
source: [{
type: GuideSectionTypes.JS,
code: cardFooterSource,
}, {
type: GuideSectionTypes.HTML,
code: cardFooterHtml,
}],
text: (
<p>
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 <EuiCode>EuiButton</EuiCode> you <strong>must not</strong> also
give it an <EuiCode>onClick</EuiCode>.
</p>
),
components: { EuiCard },
demo: <CardFooter />,
},
{
title: 'Beta badge',
source: [{
type: GuideSectionTypes.JS,
code: cardBetaSource,
}, {
type: GuideSectionTypes.HTML,
code: cardBetaHtml,
}],
text: (
<p>
If the card links to or references a module that is not GA (beta, lab, etc),
you can add a <EuiCode>betaBadgeLabel</EuiCode> and <EuiCode>betaBadgeTooltipContent</EuiCode> to
the card and it will properly create and position an <EuiCode>EuiBetaBadge</EuiCode>. If you want to
change the title of the tooltip, supply a <EuiCode>betaBadgeTitle</EuiCode> prop.
</p>
),
components: { EuiCard },
demo: <CardBeta />,
}],
),
components: { EuiCard },
demo: <CardBeta />,
},
],
};
11 changes: 8 additions & 3 deletions src-docs/src/views/card/card_footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ import {

const cardFooterContent = (
<div>
<EuiButton>Go for it</EuiButton>
<EuiSpacer size="xs"/>
<EuiButton aria-labelledby="example.cards.developerTools.screenReader">
PhilippBaranovskiy marked this conversation as resolved.
Show resolved Hide resolved
Go for it
</EuiButton>
<EuiSpacer size="xs" />
<EuiText size="s">
<p>Or try <EuiLink>this</EuiLink></p>
<p>
Or try <EuiLink>this</EuiLink>
</p>
</EuiText>
</div>
);
Expand All @@ -28,6 +32,7 @@ export default () => (
icon={<EuiIcon size="xxl" type="devToolsApp" />}
title="Developers Tools"
description="Example of a short card description."
descriptionId="example.cards.developerTools.screenReader"
PhilippBaranovskiy marked this conversation as resolved.
Show resolved Hide resolved
footer={cardFooterContent}
/>
</EuiFlexItem>
Expand Down
Loading