Skip to content

Commit

Permalink
Deprecate EuiLoadingContent in favor of EuiSkeletonText (#6557)
Browse files Browse the repository at this point in the history 
* Deprecate EuiLoadingContent + dogfood EuiSkeletonText

* Remove unnecessary tests

- leave a basic `is rendered` test in just to confirm the content, but should be deleted in the future

* Update documentation with deprecation notice

* changelog
  • Loading branch information
@cee-chen
cee-chen authored Jan 30, 2023
1 parent f9161a1 commit 8bcafdd
Show file tree
Hide file tree
Showing 8 changed files with 33 additions and 443 deletions.
9 changes: 0 additions & 9 deletions src-docs/src/views/loading/loading_content.tsx
View file

This file was deleted.

33 changes: 12 additions & 21 deletions src-docs/src/views/loading/loading_example.tsx
View file
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
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
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

0 comments on commit 8bcafdd

Please sign in to comment.