From 1b702c6171858c0ca80f2c56d21f31a91d6fca2d Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 18 Dec 2019 13:21:29 +0100 Subject: [PATCH 01/12] [Skeleton] add prop animationDelay --- docs/pages/api/skeleton.md | 1 + docs/src/pages/components/skeleton/Delay.js | 24 +++++++++++++++++++ docs/src/pages/components/skeleton/Delay.tsx | 24 +++++++++++++++++++ .../src/pages/components/skeleton/skeleton.md | 4 ++++ .../src/Skeleton/Skeleton.d.ts | 1 + .../material-ui-lab/src/Skeleton/Skeleton.js | 7 ++++++ 6 files changed, 61 insertions(+) create mode 100644 docs/src/pages/components/skeleton/Delay.js create mode 100644 docs/src/pages/components/skeleton/Delay.tsx diff --git a/docs/pages/api/skeleton.md b/docs/pages/api/skeleton.md index 4a086926ebb507..3df09903130f99 100644 --- a/docs/pages/api/skeleton.md +++ b/docs/pages/api/skeleton.md @@ -24,6 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| animationDelay | number
| string | | animationDelay of the skeleton. Useful when you have multiple skeletons, and need them to pulse out of rhyme. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disableAnimate | bool | false | If `true` the animation effect is disabled. | diff --git a/docs/src/pages/components/skeleton/Delay.js b/docs/src/pages/components/skeleton/Delay.js new file mode 100644 index 00000000000000..b1eb41a30c3f65 --- /dev/null +++ b/docs/src/pages/components/skeleton/Delay.js @@ -0,0 +1,24 @@ +import React from 'react'; +import Skeleton from '@material-ui/lab/Skeleton'; + +export default function Variants() { + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/components/skeleton/Delay.tsx b/docs/src/pages/components/skeleton/Delay.tsx new file mode 100644 index 00000000000000..b1eb41a30c3f65 --- /dev/null +++ b/docs/src/pages/components/skeleton/Delay.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import Skeleton from '@material-ui/lab/Skeleton'; + +export default function Variants() { + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md index 8429da1cfb92b0..dca39df7c2b666 100644 --- a/docs/src/pages/components/skeleton/skeleton.md +++ b/docs/src/pages/components/skeleton/skeleton.md @@ -33,3 +33,7 @@ The component supports 3 variants. ## Facebook example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} + +## Delay example + +{{"demo": "pages/components/skeleton/Delay.js", "defaultCodeOpen": false}} diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts index 72b8abdfd13edb..8329b37d4fff7b 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts @@ -3,6 +3,7 @@ import { OverridableComponent, OverrideProps } from '@material-ui/core/Overridab export interface SkeletonTypeMap

{ props: P & { + animationDelay?: string; disableAnimate?: boolean; height?: number | string; variant?: 'text' | 'rect' | 'circle'; diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 237a624d3e9ef3..dce12d9fa99fa4 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -47,6 +47,7 @@ export const styles = theme => ({ const Skeleton = React.forwardRef(function Skeleton(props, ref) { const { + animationDelay, classes, className, component: Component = 'div', @@ -72,6 +73,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { style={{ width, height, + animationDelay, ...other.style, }} /> @@ -79,6 +81,11 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { }); Skeleton.propTypes = { + /** + * animationDelay of the skeleton. + * Useful when you have multiple skeletons, and need them to pulse out of rhyme. + */ + animationDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. From 188cd9ffbf7a6094b766345b44ee21d58dd8aa1b Mon Sep 17 00:00:00 2001 From: Bo Wann Date: Wed, 18 Dec 2019 13:40:50 +0100 Subject: [PATCH 02/12] Update docs/src/pages/components/skeleton/Delay.js Co-Authored-By: Matt --- docs/src/pages/components/skeleton/Delay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/skeleton/Delay.js b/docs/src/pages/components/skeleton/Delay.js index b1eb41a30c3f65..6fc402bd8920a7 100644 --- a/docs/src/pages/components/skeleton/Delay.js +++ b/docs/src/pages/components/skeleton/Delay.js @@ -9,7 +9,7 @@ export default function Variants() { variant="rect" width={210} height={118} - animationDelay={'0.1s'} + animationDelay="0.1s" style={{ marginTop: 5 }} /> Date: Wed, 18 Dec 2019 13:43:26 +0100 Subject: [PATCH 03/12] Update packages/material-ui-lab/src/Skeleton/Skeleton.js Co-Authored-By: Matt --- packages/material-ui-lab/src/Skeleton/Skeleton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index dce12d9fa99fa4..8bda6159e39cb0 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -82,7 +82,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { Skeleton.propTypes = { /** - * animationDelay of the skeleton. + * Delays the animation of the skeleton. * Useful when you have multiple skeletons, and need them to pulse out of rhyme. */ animationDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), From 751152cfd2ceb2034bbaf4712dd36eda0b1a6486 Mon Sep 17 00:00:00 2001 From: Bo Wann Date: Wed, 18 Dec 2019 13:43:49 +0100 Subject: [PATCH 04/12] Update docs/src/pages/components/skeleton/Delay.js Co-Authored-By: Matt --- docs/src/pages/components/skeleton/Delay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/skeleton/Delay.js b/docs/src/pages/components/skeleton/Delay.js index 6fc402bd8920a7..38696801b186fa 100644 --- a/docs/src/pages/components/skeleton/Delay.js +++ b/docs/src/pages/components/skeleton/Delay.js @@ -16,7 +16,7 @@ export default function Variants() { variant="rect" width={210} height={118} - animationDelay={'0.2s'} + animationDelay="0.2s" style={{ marginTop: 5 }} /> From 09403cc165c7332336b98cb7f7cae2a91c252a8f Mon Sep 17 00:00:00 2001 From: Bo Wann Date: Wed, 18 Dec 2019 13:43:57 +0100 Subject: [PATCH 05/12] Update docs/src/pages/components/skeleton/Delay.tsx Co-Authored-By: Matt --- docs/src/pages/components/skeleton/Delay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/skeleton/Delay.tsx b/docs/src/pages/components/skeleton/Delay.tsx index b1eb41a30c3f65..6cbfc6118de834 100644 --- a/docs/src/pages/components/skeleton/Delay.tsx +++ b/docs/src/pages/components/skeleton/Delay.tsx @@ -16,7 +16,7 @@ export default function Variants() { variant="rect" width={210} height={118} - animationDelay={'0.2s'} + animationDelay="0.2s" style={{ marginTop: 5 }} /> From ac1dd3f77d7e653cad84793924d6d4855ca026bc Mon Sep 17 00:00:00 2001 From: Bo Wann Date: Wed, 18 Dec 2019 13:44:18 +0100 Subject: [PATCH 06/12] Update docs/src/pages/components/skeleton/Delay.tsx Co-Authored-By: Matt --- docs/src/pages/components/skeleton/Delay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/skeleton/Delay.tsx b/docs/src/pages/components/skeleton/Delay.tsx index 6cbfc6118de834..38696801b186fa 100644 --- a/docs/src/pages/components/skeleton/Delay.tsx +++ b/docs/src/pages/components/skeleton/Delay.tsx @@ -9,7 +9,7 @@ export default function Variants() { variant="rect" width={210} height={118} - animationDelay={'0.1s'} + animationDelay="0.1s" style={{ marginTop: 5 }} /> Date: Wed, 18 Dec 2019 13:46:23 +0100 Subject: [PATCH 07/12] Update packages/material-ui-lab/src/Skeleton/Skeleton.js Co-Authored-By: Matt --- packages/material-ui-lab/src/Skeleton/Skeleton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 8bda6159e39cb0..7fffad3f8482a8 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -83,7 +83,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { Skeleton.propTypes = { /** * Delays the animation of the skeleton. - * Useful when you have multiple skeletons, and need them to pulse out of rhyme. + * Useful when you have multiple skeletons, and need them to pulse out of sync. */ animationDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** From 900fc4cae7214cb38044d2e05e5d20d8cfb2d522 Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 18 Dec 2019 13:52:50 +0100 Subject: [PATCH 08/12] update doc --- docs/pages/api/skeleton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api/skeleton.md b/docs/pages/api/skeleton.md index 3df09903130f99..f2c89dc49335d2 100644 --- a/docs/pages/api/skeleton.md +++ b/docs/pages/api/skeleton.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| animationDelay | number
| string | | animationDelay of the skeleton. Useful when you have multiple skeletons, and need them to pulse out of rhyme. | +| animationDelay | number
| string | | Delays the animation of the skeleton. Useful when you have multiple skeletons, and need them to pulse out of sync. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disableAnimate | bool | false | If `true` the animation effect is disabled. | From 027d6ed6b1851acb2ae2a64ec29e5a7253792806 Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 19 Dec 2019 07:35:59 +0100 Subject: [PATCH 09/12] update description to "out of phase" --- docs/pages/api/skeleton.md | 2 +- packages/material-ui-lab/src/Skeleton/Skeleton.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api/skeleton.md b/docs/pages/api/skeleton.md index f2c89dc49335d2..081de9df900b36 100644 --- a/docs/pages/api/skeleton.md +++ b/docs/pages/api/skeleton.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| animationDelay | number
| string | | Delays the animation of the skeleton. Useful when you have multiple skeletons, and need them to pulse out of sync. | +| animationDelay | number
| string | | Delays the animation of the skeleton. Useful when you have multiple skeletons, and need them to pulse out of phase. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disableAnimate | bool | false | If `true` the animation effect is disabled. | diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 7fffad3f8482a8..11afb2d7e1e176 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -83,7 +83,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { Skeleton.propTypes = { /** * Delays the animation of the skeleton. - * Useful when you have multiple skeletons, and need them to pulse out of sync. + * Useful when you have multiple skeletons, and need them to pulse out of phase. */ animationDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** From b2e4e16532d1825c73510c7c501de25bcb7d70d6 Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 19 Dec 2019 10:30:24 +0100 Subject: [PATCH 10/12] Add default animationDelay to the class --- packages/material-ui-lab/src/Skeleton/Skeleton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 11afb2d7e1e176..07ab13aba00385 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -31,6 +31,7 @@ export const styles = theme => ({ /* Styles applied to the root element if `disabledAnimate={false}`. */ animate: { animation: '$animate 1.5s ease-in-out infinite', + animationDelay: '0.5s', }, '@keyframes animate': { '0%': { From b1aae3a7f4fb56ff87d35591c9effd6cb10fbbf5 Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 19 Dec 2019 11:51:34 +0100 Subject: [PATCH 11/12] Use animation shorthand --- packages/material-ui-lab/src/Skeleton/Skeleton.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 07ab13aba00385..f27c06dca00d17 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -30,8 +30,7 @@ export const styles = theme => ({ }, /* Styles applied to the root element if `disabledAnimate={false}`. */ animate: { - animation: '$animate 1.5s ease-in-out infinite', - animationDelay: '0.5s', + animation: '$animate 1.5s ease-in-out 0.5s infinite', }, '@keyframes animate': { '0%': { From 9c06323e9378f4fbe7d70042a7f4d1de31604d68 Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 19 Dec 2019 18:47:49 +0100 Subject: [PATCH 12/12] Remove new demo and prop, keeping animationDelay in the shorthand style --- docs/pages/api/skeleton.md | 1 - docs/src/pages/components/skeleton/Delay.js | 24 ------------------- docs/src/pages/components/skeleton/Delay.tsx | 24 ------------------- .../src/pages/components/skeleton/skeleton.md | 4 ---- .../src/Skeleton/Skeleton.d.ts | 1 - .../material-ui-lab/src/Skeleton/Skeleton.js | 7 ------ 6 files changed, 61 deletions(-) delete mode 100644 docs/src/pages/components/skeleton/Delay.js delete mode 100644 docs/src/pages/components/skeleton/Delay.tsx diff --git a/docs/pages/api/skeleton.md b/docs/pages/api/skeleton.md index 081de9df900b36..4a086926ebb507 100644 --- a/docs/pages/api/skeleton.md +++ b/docs/pages/api/skeleton.md @@ -24,7 +24,6 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| animationDelay | number
| string | | Delays the animation of the skeleton. Useful when you have multiple skeletons, and need them to pulse out of phase. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disableAnimate | bool | false | If `true` the animation effect is disabled. | diff --git a/docs/src/pages/components/skeleton/Delay.js b/docs/src/pages/components/skeleton/Delay.js deleted file mode 100644 index 38696801b186fa..00000000000000 --- a/docs/src/pages/components/skeleton/Delay.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import Skeleton from '@material-ui/lab/Skeleton'; - -export default function Variants() { - return ( -

- - - -
- ); -} diff --git a/docs/src/pages/components/skeleton/Delay.tsx b/docs/src/pages/components/skeleton/Delay.tsx deleted file mode 100644 index 38696801b186fa..00000000000000 --- a/docs/src/pages/components/skeleton/Delay.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import Skeleton from '@material-ui/lab/Skeleton'; - -export default function Variants() { - return ( -
- - - -
- ); -} diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md index dca39df7c2b666..8429da1cfb92b0 100644 --- a/docs/src/pages/components/skeleton/skeleton.md +++ b/docs/src/pages/components/skeleton/skeleton.md @@ -33,7 +33,3 @@ The component supports 3 variants. ## Facebook example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} - -## Delay example - -{{"demo": "pages/components/skeleton/Delay.js", "defaultCodeOpen": false}} diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts index 8329b37d4fff7b..72b8abdfd13edb 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts @@ -3,7 +3,6 @@ import { OverridableComponent, OverrideProps } from '@material-ui/core/Overridab export interface SkeletonTypeMap

{ props: P & { - animationDelay?: string; disableAnimate?: boolean; height?: number | string; variant?: 'text' | 'rect' | 'circle'; diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index f27c06dca00d17..a24bdb36e877a9 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -47,7 +47,6 @@ export const styles = theme => ({ const Skeleton = React.forwardRef(function Skeleton(props, ref) { const { - animationDelay, classes, className, component: Component = 'div', @@ -73,7 +72,6 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { style={{ width, height, - animationDelay, ...other.style, }} /> @@ -81,11 +79,6 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) { }); Skeleton.propTypes = { - /** - * Delays the animation of the skeleton. - * Useful when you have multiple skeletons, and need them to pulse out of phase. - */ - animationDelay: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details.