diff --git a/src-docs/src/views/loading/loading_content.tsx b/src-docs/src/views/loading/loading_content.tsx deleted file mode 100644 index 8e451455cdd..00000000000 --- a/src-docs/src/views/loading/loading_content.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import { EuiLoadingContent } from '../../../../src/components/loading'; - -export default () => ( -
- -
-); diff --git a/src-docs/src/views/loading/loading_example.tsx b/src-docs/src/views/loading/loading_example.tsx index 95e44130ffc..ba7cb87ce94 100644 --- a/src-docs/src/views/loading/loading_example.tsx +++ b/src-docs/src/views/loading/loading_example.tsx @@ -4,13 +4,12 @@ import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; import { - EuiCode, EuiText, EuiLoadingLogo, EuiLoadingElastic, EuiLoadingSpinner, EuiLoadingChart, - EuiLoadingContent, + EuiCallOut, } from '../../../../src/components'; import { @@ -18,7 +17,6 @@ import { loadingChartConfig, loadingLogoConfig, loadingSpinnerConfig, - loadingContentConfig, // @ts-ignore Importing from JS } from './playground'; @@ -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: ( @@ -144,23 +139,19 @@ export const LoadingExample = { }, { title: 'Text content', - source: [ - { - type: GuideSectionTypes.JS, - code: loadingContentSource, - }, - ], text: ( -

- EuiLoadingContent is a simple loading animation for - displaying placeholder text content. You can pass in a number of{' '} - lines between 1 and 10. -

+ +

+ EuiLoadingContent has been deprecated in favor of{' '} + EuiSkeletonText. Head on over to the{' '} + Skeleton documentation page to + see more loading skeleton usages. +

+ ), - props: { EuiLoadingContent }, - demo: , - snippet: '', - playground: loadingContentConfig, }, ], }; diff --git a/src-docs/src/views/loading/playground.js b/src-docs/src/views/loading/playground.js index fce4aa5653b..e227fe2a3a0 100644 --- a/src-docs/src/views/loading/playground.js +++ b/src-docs/src/views/loading/playground.js @@ -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) @@ -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'], - }, - }, - }, - }; -}; diff --git a/src/components/loading/__snapshots__/loading_content.test.tsx.snap b/src/components/loading/__snapshots__/loading_content.test.tsx.snap index e2c5c715101..9a711ef1f1a 100644 --- a/src/components/loading/__snapshots__/loading_content.test.tsx.snap +++ b/src/components/loading/__snapshots__/loading_content.test.tsx.snap @@ -2,274 +2,20 @@ exports[`EuiLoadingContent is rendered 1`] = ` - -`; - -exports[`EuiLoadingContent lines 1 is rendered 1`] = ` - - - -`; - -exports[`EuiLoadingContent lines 2 is rendered 1`] = ` - - - - -`; - -exports[`EuiLoadingContent lines 3 is rendered 1`] = ` - - - - - -`; - -exports[`EuiLoadingContent lines 4 is rendered 1`] = ` - - - - - - -`; - -exports[`EuiLoadingContent lines 5 is rendered 1`] = ` - - - - - - - -`; - -exports[`EuiLoadingContent lines 6 is rendered 1`] = ` - - - - - - - - -`; - -exports[`EuiLoadingContent lines 7 is rendered 1`] = ` - - - - - - - - - -`; - -exports[`EuiLoadingContent lines 8 is rendered 1`] = ` - - - - - - - - - - -`; - -exports[`EuiLoadingContent lines 9 is rendered 1`] = ` - - - - - - - - - - - -`; - -exports[`EuiLoadingContent lines 10 is rendered 1`] = ` - - - - - - - - - - - `; diff --git a/src/components/loading/loading_content.styles.ts b/src/components/loading/loading_content.styles.ts deleted file mode 100644 index 925e01d887e..00000000000 --- a/src/components/loading/loading_content.styles.ts +++ /dev/null @@ -1,72 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { css, keyframes } from '@emotion/react'; -import { euiCanAnimate, logicalCSS } from '../../global_styling'; -import { COLOR_MODES_STANDARD, shade, tint, UseEuiTheme } from '../../services'; - -const loadingContentGradient = keyframes` - 0% { - transform: translateX(-53%); - } - - 100% { - transform: translateX(0); - } -`; - -export const euiLoadingContentStyles = ({ - euiTheme, - colorMode, -}: UseEuiTheme) => { - const gradientStartStop = - colorMode === COLOR_MODES_STANDARD.dark - ? shade(euiTheme.colors.lightShade, 0.12) - : tint(euiTheme.colors.lightShade, 0.65); - const gradientMiddle = - colorMode === COLOR_MODES_STANDARD.dark - ? shade(euiTheme.colors.lightShade, 0.24) - : tint(euiTheme.colors.lightShade, 0.8); - - return { - euiLoadingContent__singleLine: css` - display: block; - ${logicalCSS('width', '100%')} - ${logicalCSS('height', euiTheme.size.base)} - border-radius: ${euiTheme.border.radius.medium}; - background: ${gradientStartStop}; - overflow: hidden; - - &:not(:last-child) { - ${logicalCSS('margin-bottom', euiTheme.size.s)} - } - - &:last-child:not(:only-child) { - ${logicalCSS('width', '75%')} - } - - &::after { - content: ''; - display: block; - ${logicalCSS('width', '220%')} - ${logicalCSS('height', '100%')} - background: linear-gradient( - 137deg, - ${gradientStartStop} 45%, - ${gradientMiddle} 50%, - ${gradientStartStop} 55% - ); - - ${euiCanAnimate} { - animation: ${loadingContentGradient} 1.5s - ${euiTheme.animation.resistance} infinite; - } - } - `, - }; -}; diff --git a/src/components/loading/loading_content.test.tsx b/src/components/loading/loading_content.test.tsx index 9e23b01d338..927bdab91fc 100644 --- a/src/components/loading/loading_content.test.tsx +++ b/src/components/loading/loading_content.test.tsx @@ -10,9 +10,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiLoadingContent, LineRange } from './loading_content'; - -const lines: LineRange[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; +import { EuiLoadingContent } from './loading_content'; describe('EuiLoadingContent', () => { test('is rendered', () => { @@ -20,14 +18,4 @@ describe('EuiLoadingContent', () => { expect(component).toMatchSnapshot(); }); - - describe('lines', () => { - lines.forEach((line) => { - test(`${line} is rendered`, () => { - const component = render(); - - expect(component).toMatchSnapshot(); - }); - }); - }); }); diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx index 2a4fc8e040f..1734899164c 100644 --- a/src/components/loading/loading_content.tsx +++ b/src/components/loading/loading_content.tsx @@ -6,46 +6,18 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, HTMLAttributes } from 'react'; -import classNames from 'classnames'; -import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; -import { useLoadingAriaLabel } from './_loading_strings'; -import { euiLoadingContentStyles } from './loading_content.styles'; +import React, { FunctionComponent } from 'react'; -export type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; +import { EuiSkeletonText, EuiSkeletonTextProps } from '../skeleton'; -export type EuiLoadingContentProps = CommonProps & - HTMLAttributes & { - lines?: LineRange; - }; - -export const EuiLoadingContent: FunctionComponent = ({ - lines = 3, - className, - 'aria-label': ariaLabel, - ...rest -}) => { - const euiTheme = useEuiTheme(); - const styles = euiLoadingContentStyles(euiTheme); - const lineCssStyles = [styles.euiLoadingContent__singleLine]; - const defaultLabel = useLoadingAriaLabel(); - - const classes = classNames('euiLoadingContent', className); - const lineElements = []; - - for (let i = 0; i < lines; i++) { - lineElements.push(); - } +/** + * @deprecated Use `EuiSkeletonTextProps` instead + */ +export type EuiLoadingContentProps = EuiSkeletonTextProps; - return ( - - {lineElements} - - ); -}; +/** + * @deprecated Use `EuiSkeletonText` instead + */ +export const EuiLoadingContent: FunctionComponent = ( + props +) => ; diff --git a/upcoming_changelogs/6557.md b/upcoming_changelogs/6557.md new file mode 100644 index 00000000000..ae13297fd90 --- /dev/null +++ b/upcoming_changelogs/6557.md @@ -0,0 +1,3 @@ +**Deprecations** + +- Deprecated `EuiLoadingContent` - use `EuiSkeletonText` instead