github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Shared UX][No Data] Hide No Data card title (#133668)

Browse source
This commit is contained in:
Clint Andrew Hall 2022-06-07 08:33:39 -05:00 • committed by GitHub
parent 9b7aeb46b2
commit 3e8778a78a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap generated
View file

@ -231,7 +231,13 @@ exports[`ElasticAgentCard renders 1`] = `
/>
}
paddingSize="l"
title="Add Elastic Agent"
title={
<EuiScreenReaderOnly>
<span>
Add Elastic Agent
</span>
</EuiScreenReaderOnly>
}
>
<EuiPanel
css="unknown styles"
@ -366,7 +372,13 @@ exports[`ElasticAgentCard renders 1`] = `
href="/app/integrations/browse"
rel="noreferrer"
>
Add Elastic Agent
<EuiScreenReaderOnly>
<span
className="euiScreenReaderOnly"
>
Add Elastic Agent
</span>
</EuiScreenReaderOnly>
</a>
</span>
</EuiTitle>

30
packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap generated
View file

@ -11,7 +11,11 @@ exports[`NoDataCard props button 1`] = `
class="euiTitle euiTitle--small euiCard__title"
id="generated-idTitle"
>
Card title
<span
class="euiScreenReaderOnly"
>
Card title
</span>
</span>
<div
class="euiText euiText--small euiCard__description"
@ -54,7 +58,11 @@ exports[`NoDataCard props extends EuiCardProps 1`] = `
class="euiTitle euiTitle--small euiCard__title"
id="generated-idTitle"
>
Card title
<span
class="euiScreenReaderOnly"
>
Card title
</span>
</span>
<div
class="euiText euiText--small euiCard__description"
@ -103,7 +111,11 @@ exports[`NoDataCard props href 1`] = `
href="#"
rel="noreferrer"
>
Card title
<span
class="euiScreenReaderOnly"
>
Card title
</span>
</a>
</span>
<div
@ -152,7 +164,11 @@ exports[`NoDataCard props isDisabled 1`] = `
class="euiCard__titleButton"
disabled=""
>
Card title
<span
class="euiScreenReaderOnly"
>
Card title
</span>
</button>
</span>
<div
@ -178,7 +194,11 @@ exports[`NoDataCard renders 1`] = `
class="euiTitle euiTitle--small euiCard__title"
id="generated-idTitle"
>
Card title
<span
class="euiScreenReaderOnly"
>
Card title
</span>
</span>
<div
class="euiText euiText--small euiCard__description"

14
packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/no_data_card.tsx
View file

@ -8,7 +8,7 @@
import { i18n } from '@kbn/i18n';
import React, { FunctionComponent } from 'react';
import { EuiButton, EuiCard } from '@elastic/eui';
import { EuiButton, EuiCard, EuiScreenReaderOnly } from '@elastic/eui';
import type { NoDataCardProps } from './types';
import { NoDataCardStyles } from './no_data_card.styles';
@ -21,7 +21,7 @@ const defaultDescription = i18n.translate(
);
export const NoDataCard: FunctionComponent<NoDataCardProps> = ({
title,
title: titleProp,
button,
description,
isDisabled,
@ -39,10 +39,18 @@ export const NoDataCard: FunctionComponent<NoDataCardProps> = ({
return button;
}
// Default footer action is a button with the provided or default string
return <EuiButton fill>{button || title}</EuiButton>;
return <EuiButton fill>{button || titleProp}</EuiButton>;
};
const cardDescription = description || defaultDescription;
// Fix the need for an a11y title even though the button exists by setting to screen reader only
const title = titleProp ? (
<EuiScreenReaderOnly>
<span>{titleProp}</span>
</EuiScreenReaderOnly>
) : null;
return (
<EuiCard
css={styles}