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

Jump to bottom

Deprecate EuiLoadingContent in favor of EuiSkeletonText #6557

Merged
merged 4 commits into from
Jan 30, 2023
Merged

Deprecate EuiLoadingContent in favor of EuiSkeletonText #6557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2084c3e
Deprecate EuiLoadingContent + dogfood EuiSkeletonText
cee-chen Jan 25, 2023
a514394
Remove unnecessary tests
cee-chen Jan 25, 2023
7491dc0
Update documentation with deprecation notice
cee-chen Jan 25, 2023
09fe9e1
changelog
cee-chen Jan 27, 2023
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
9 changes: 0 additions & 9 deletions src-docs/src/views/loading/loading_content.tsx
View file
Open in desktop

This file was deleted.

33 changes: 12 additions & 21 deletions src-docs/src/views/loading/loading_example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,19 @@ import { Link } from 'react-router-dom';
import { GuideSectionTypes } from '../../components';

import {
EuiCode,
EuiText,
EuiLoadingLogo,
EuiLoadingElastic,
EuiLoadingSpinner,
EuiLoadingChart,
EuiLoadingContent,
EuiCallOut,
} from '../../../../src/components';

import {
loadingElasticConfig,
loadingChartConfig,
loadingLogoConfig,
loadingSpinnerConfig,
loadingContentConfig,
// @ts-ignore Importing from JS
} from './playground';

Expand All @@ -40,9 +38,6 @@ const loadingChartSource = require('!!raw-loader!./loading_chart');
import LoadingSpinner from './loading_spinner';
const loadingSpinnerSource = require('!!raw-loader!./loading_spinner');

import LoadingContent from './loading_content';
const loadingContentSource = require('!!raw-loader!./loading_content');

export const LoadingExample = {
title: 'Loading',
intro: (
Expand Down Expand Up @@ -144,23 +139,19 @@ export const LoadingExample = {
},
{
title: 'Text content',
source: [
{
type: GuideSectionTypes.JS,
code: loadingContentSource,
},
],
text: (
<p>
<strong>EuiLoadingContent</strong> is a simple loading animation for
displaying placeholder text content. You can pass in a number of{' '}
<EuiCode>lines</EuiCode> between 1 and 10.
</p>
<EuiCallOut
title="EuiLoadingContent has been deprecated"
iconType="symlink"
>
<p>
<strong>EuiLoadingContent</strong> has been deprecated in favor of{' '}
<strong>EuiSkeletonText</strong>. Head on over to the{' '}
<Link to="/display/skeleton">Skeleton documentation page</Link> to
see more loading skeleton usages.
</p>
</EuiCallOut>
),
props: { EuiLoadingContent },
demo: <LoadingContent />,
snippet: '<EuiLoadingContent lines={3} />',
playground: loadingContentConfig,
},
],
};
29 changes: 0 additions & 29 deletions src-docs/src/views/loading/playground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import {
EuiLoadingChart,
EuiLoadingLogo,
EuiLoadingSpinner,
EuiLoadingContent,
} from '../../../../src/components/';
import { PropTypes } from 'react-view';

export const loadingElasticConfig = () => {
const docgenInfo = Array.isArray(EuiLoadingElastic.__docgenInfo)
Expand Down Expand Up @@ -99,30 +97,3 @@ export const loadingSpinnerConfig = () => {
},
};
};

export const loadingContentConfig = () => {
const docgenInfo = Array.isArray(EuiLoadingContent.__docgenInfo)
? EuiLoadingContent.__docgenInfo[0]
: EuiLoadingContent.__docgenInfo;
const propsToUse = propUtilityForPlayground(docgenInfo.props);

propsToUse.lines = {
...propsToUse.lines,
type: PropTypes.Number,
};

return {
config: {
componentName: 'EuiLoadingContent',
props: propsToUse,
scope: {
EuiLoadingContent,
},
imports: {
'@elastic/eui': {
named: ['EuiLoadingContent'],
},
},
},
};
};
264 changes: 5 additions & 259 deletions src/components/loading/__snapshots__/loading_content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,274 +2,20 @@

exports[`EuiLoadingContent is rendered 1`] = `
<span
aria-busy="true"
aria-label="aria-label"
class="euiLoadingContent testClass1 testClass2"
class="euiSkeletonText testClass1 testClass2"
data-test-subj="test subject string"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
class="emotion-euiSkeletonGradientAnimation-euiSkeletonText-m"
/>
<span
class="emotion-euiLoadingContent__singleLine"
class="emotion-euiSkeletonGradientAnimation-euiSkeletonText-m"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 1 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 2 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 3 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 4 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 5 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 6 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 7 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 8 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 9 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
</span>
`;

exports[`EuiLoadingContent lines 10 is rendered 1`] = `
<span
aria-label="Loading"
class="euiLoadingContent"
role="progressbar"
>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
/>
<span
class="emotion-euiLoadingContent__singleLine"
class="emotion-euiSkeletonGradientAnimation-euiSkeletonText-m"
/>
</span>
`;
Loading