From cab11f210d8ad980e50180a4f21ddab96dd428b8 Mon Sep 17 00:00:00 2001 From: GitStart <1501599+gitstart@users.noreply.github.com> Date: Fri, 22 Sep 2023 18:57:27 +0100 Subject: [PATCH] [Skeleton][material-ui] Add new props to the Skeleton component (#38483) --- .../material/components/skeleton/Facebook.js | 15 ++- .../material/components/skeleton/Facebook.tsx | 15 ++- .../material/components/skeleton/Shapes.js | 13 +++ .../material/components/skeleton/Shapes.tsx | 13 +++ .../components/skeleton/Shapes.tsx.preview | 3 + .../material/components/skeleton/Sizes.js | 14 +++ .../material/components/skeleton/Sizes.tsx | 14 +++ .../components/skeleton/Sizes.tsx.preview | 4 + .../components/skeleton/SkeletonChildren.js | 4 +- .../components/skeleton/SkeletonChildren.tsx | 4 +- .../components/skeleton/SkeletonColor.js | 3 +- .../components/skeleton/SkeletonColor.tsx | 3 +- .../skeleton/SkeletonColor.tsx.preview | 3 +- .../material/components/skeleton/Variants.js | 16 --- .../material/components/skeleton/Variants.tsx | 17 --- .../components/skeleton/Variants.tsx.preview | 7 -- .../material/components/skeleton/YouTube.js | 2 +- .../material/components/skeleton/YouTube.tsx | 2 +- .../components/skeleton/skeleton-pt.md | 20 +++- .../components/skeleton/skeleton-zh.md | 22 ++-- .../material/components/skeleton/skeleton.md | 20 +++- docs/pages/material-ui/api/skeleton.json | 12 +- .../api-docs/skeleton/skeleton.json | 17 ++- .../mui-material/src/Skeleton/Skeleton.d.ts | 16 +++ .../mui-material/src/Skeleton/Skeleton.js | 109 ++++++++++-------- .../src/Skeleton/Skeleton.test.js | 86 ++++++++++++++ .../src/Skeleton/skeletonClasses.ts | 11 +- 27 files changed, 335 insertions(+), 130 deletions(-) create mode 100644 docs/data/material/components/skeleton/Shapes.js create mode 100644 docs/data/material/components/skeleton/Shapes.tsx create mode 100644 docs/data/material/components/skeleton/Shapes.tsx.preview create mode 100644 docs/data/material/components/skeleton/Sizes.js create mode 100644 docs/data/material/components/skeleton/Sizes.tsx create mode 100644 docs/data/material/components/skeleton/Sizes.tsx.preview delete mode 100644 docs/data/material/components/skeleton/Variants.js delete mode 100644 docs/data/material/components/skeleton/Variants.tsx delete mode 100644 docs/data/material/components/skeleton/Variants.tsx.preview diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js index eca186ecb4465d..aa5cdd934282ab 100644 --- a/docs/data/material/components/skeleton/Facebook.js +++ b/docs/data/material/components/skeleton/Facebook.js @@ -18,7 +18,13 @@ function Media(props) { + ) : ( {loading ? ( - + ) : ( + ) : ( {loading ? ( - + ) : ( + + + + + ); +} diff --git a/docs/data/material/components/skeleton/Shapes.tsx b/docs/data/material/components/skeleton/Shapes.tsx new file mode 100644 index 00000000000000..814ed30a70e8d3 --- /dev/null +++ b/docs/data/material/components/skeleton/Shapes.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; + +export default function Shapes() { + return ( + + + + + + ); +} diff --git a/docs/data/material/components/skeleton/Shapes.tsx.preview b/docs/data/material/components/skeleton/Shapes.tsx.preview new file mode 100644 index 00000000000000..6fa0fbe5152508 --- /dev/null +++ b/docs/data/material/components/skeleton/Shapes.tsx.preview @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/data/material/components/skeleton/Sizes.js b/docs/data/material/components/skeleton/Sizes.js new file mode 100644 index 00000000000000..38fcfdc8d7439c --- /dev/null +++ b/docs/data/material/components/skeleton/Sizes.js @@ -0,0 +1,14 @@ +import * as React from 'react'; +import Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; + +export default function Sizes() { + return ( + + {/* For size="text", adjust the height via font-size */} + + {/* For size="box", adjust height based on bounding box */} + + + ); +} diff --git a/docs/data/material/components/skeleton/Sizes.tsx b/docs/data/material/components/skeleton/Sizes.tsx new file mode 100644 index 00000000000000..38fcfdc8d7439c --- /dev/null +++ b/docs/data/material/components/skeleton/Sizes.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; + +export default function Sizes() { + return ( + + {/* For size="text", adjust the height via font-size */} + + {/* For size="box", adjust height based on bounding box */} + + + ); +} diff --git a/docs/data/material/components/skeleton/Sizes.tsx.preview b/docs/data/material/components/skeleton/Sizes.tsx.preview new file mode 100644 index 00000000000000..bd2e9812c47488 --- /dev/null +++ b/docs/data/material/components/skeleton/Sizes.tsx.preview @@ -0,0 +1,4 @@ +{/* For size="text", adjust the height via font-size */} + +{/* For size="box", adjust height based on bounding box */} + \ No newline at end of file diff --git a/docs/data/material/components/skeleton/SkeletonChildren.js b/docs/data/material/components/skeleton/SkeletonChildren.js index dea54ea2feb889..4238e3ebd076ce 100644 --- a/docs/data/material/components/skeleton/SkeletonChildren.js +++ b/docs/data/material/components/skeleton/SkeletonChildren.js @@ -19,7 +19,7 @@ function SkeletonChildrenDemo(props) { {loading ? ( - + ) : ( @@ -37,7 +37,7 @@ function SkeletonChildrenDemo(props) { {loading ? ( - +
) : ( diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx b/docs/data/material/components/skeleton/SkeletonChildren.tsx index bf27ebb7fad364..cc560617a7862b 100644 --- a/docs/data/material/components/skeleton/SkeletonChildren.tsx +++ b/docs/data/material/components/skeleton/SkeletonChildren.tsx @@ -18,7 +18,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) { {loading ? ( - + ) : ( @@ -36,7 +36,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) { {loading ? ( - +
) : ( diff --git a/docs/data/material/components/skeleton/SkeletonColor.js b/docs/data/material/components/skeleton/SkeletonColor.js index ddad47d6302af8..9342f876680276 100644 --- a/docs/data/material/components/skeleton/SkeletonColor.js +++ b/docs/data/material/components/skeleton/SkeletonColor.js @@ -15,7 +15,8 @@ export default function SkeletonColor() { > diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/SkeletonColor.tsx index ddad47d6302af8..9342f876680276 100644 --- a/docs/data/material/components/skeleton/SkeletonColor.tsx +++ b/docs/data/material/components/skeleton/SkeletonColor.tsx @@ -15,7 +15,8 @@ export default function SkeletonColor() { > diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview index 47ff5795e47d3c..1c90e20e617b1c 100644 --- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview +++ b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview @@ -1,6 +1,7 @@ \ No newline at end of file diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js deleted file mode 100644 index c6a075daad4feb..00000000000000 --- a/docs/data/material/components/skeleton/Variants.js +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import Skeleton from '@mui/material/Skeleton'; -import Stack from '@mui/material/Stack'; - -export default function Variants() { - return ( - - {/* For variant="text", adjust the height via font-size */} - - {/* For other variants, adjust the size with `width` and `height` */} - - - - - ); -} diff --git a/docs/data/material/components/skeleton/Variants.tsx b/docs/data/material/components/skeleton/Variants.tsx deleted file mode 100644 index cb1bb0905d617d..00000000000000 --- a/docs/data/material/components/skeleton/Variants.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import Skeleton from '@mui/material/Skeleton'; -import Stack from '@mui/material/Stack'; - -export default function Variants() { - return ( - - {/* For variant="text", adjust the height via font-size */} - - - {/* For other variants, adjust the size with `width` and `height` */} - - - - - ); -} diff --git a/docs/data/material/components/skeleton/Variants.tsx.preview b/docs/data/material/components/skeleton/Variants.tsx.preview deleted file mode 100644 index 8b1bb76eaa17b2..00000000000000 --- a/docs/data/material/components/skeleton/Variants.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ -{/* For variant="text", adjust the height via font-size */} - - -{/* For other variants, adjust the size with `width` and `height` */} - - - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js index ad14816a766901..aa9a82aba7fc53 100644 --- a/docs/data/material/components/skeleton/YouTube.js +++ b/docs/data/material/components/skeleton/YouTube.js @@ -43,7 +43,7 @@ function Media(props) { src={item.src} /> ) : ( - + )} {item ? ( diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/YouTube.tsx index b0ac646c1853fd..fb3800dac24385 100644 --- a/docs/data/material/components/skeleton/YouTube.tsx +++ b/docs/data/material/components/skeleton/YouTube.tsx @@ -46,7 +46,7 @@ function Media(props: MediaProps) { src={item.src} /> ) : ( - + )} {item ? ( diff --git a/docs/data/material/components/skeleton/skeleton-pt.md b/docs/data/material/components/skeleton/skeleton-pt.md index 535dcec9ac44a4..dbd07db167c28d 100644 --- a/docs/data/material/components/skeleton/skeleton-pt.md +++ b/docs/data/material/components/skeleton/skeleton-pt.md @@ -22,19 +22,27 @@ O componente é projetado para ser usado **diretamente em seus componentes**. Po item ? ( {item.title} ) : ( - + ); } ``` -## Variantes +## Formas -The component supports 4 shape variants: +O componente suporta 3 formas: -- `text` (default): represents a single line of text (you can adjust the height via font size). -- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size. +- `circular`, `rectangular`, e `rounded`: Venha com um raio de borda diferente para permitir que você assuma o controle da forma. -{{"demo": "Variants.js"}} +{{"demo": "Shapes.js"}} + +## Tamanhos + +Você pode usar os seguintes valores para especificar o tamanho do componente: + +- `text` (default): representa uma única linha de texto (você pode ajustar a altura por tamanho da fonte). +- `box`: Escala o componente para o tamanho da caixa delimitadora. + +{{"demo": "Sizes.js"}} ## Animações diff --git a/docs/data/material/components/skeleton/skeleton-zh.md b/docs/data/material/components/skeleton/skeleton-zh.md index 4654b4dc0cfdc6..30e94804e49756 100644 --- a/docs/data/material/components/skeleton/skeleton-zh.md +++ b/docs/data/material/components/skeleton/skeleton-zh.md @@ -29,19 +29,27 @@ githubLabel: 'component: skeleton' src={item.src} /> ) : ( - + ); } ``` -## 变体 +## 形状 -The component supports 4 shape variants: +组件支持 3 种形状: -- `text` (default): represents a single line of text (you can adjust the height via font size). -- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size. +- `circular`, `rectangular`, 和 `rounded`: 带有不同的边界半径，让您控制形状 -{{"demo": "Variants.js"}} +{{"demo": "Shapes.js"}} + +## 尺寸 + +您可以使用以下值来指定组件的大小: + +- `text` （默认值）：表示一行文本（您可以通过字体大小调整高度）。 +- `box`: 将组件扩展到边界框的大小。 + +{{"demo": "Sizes.js"}} ## 动画 @@ -73,7 +81,7 @@ The component supports 4 shape variants: ```jsx loading ? ( - + ) : ( diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md index da7cacad060fb6..81bd839c55039b 100644 --- a/docs/data/material/components/skeleton/skeleton.md +++ b/docs/data/material/components/skeleton/skeleton.md @@ -30,19 +30,27 @@ For instance: src={item.src} /> ) : ( - + ); } ``` -## Variants +## Shapes -The component supports 4 shape variants: +The component supports 3 shapes: + +- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the shape. + +{{"demo": "Shapes.js"}} + +## Sizes + +You can use the following values to specify the size of the component: - `text` (default): represents a single line of text (you can adjust the height via font size). -- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size. +- `box`: scale the component to the size of the bounding box. -{{"demo": "Variants.js"}} +{{"demo": "Sizes.js"}} ## Animations @@ -76,7 +84,7 @@ infer its width and height from them. ```jsx loading ? ( - + ) : ( diff --git a/docs/pages/material-ui/api/skeleton.json b/docs/pages/material-ui/api/skeleton.json index 0204b0370994ae..ff6da79c3fdf12 100644 --- a/docs/pages/material-ui/api/skeleton.json +++ b/docs/pages/material-ui/api/skeleton.json @@ -11,6 +11,13 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "component": { "type": { "name": "elementType" } }, "height": { "type": { "name": "union", "description": "number
| string" } }, + "shape": { + "type": { + "name": "enum", + "description": "'circular'
| 'rectangular'
| 'rounded'" + } + }, + "size": { "type": { "name": "enum", "description": "'text'
| 'box'" } }, "sx": { "type": { "name": "union", @@ -23,7 +30,9 @@ "name": "union", "description": "'circular'
| 'rectangular'
| 'rounded'
| 'text'
| string" }, - "default": "'text'" + "default": "'text'", + "deprecated": true, + "deprecationInfo": "Use shape prop to set the shape of the skeleton and size prop to set the scale adaptation." }, "width": { "type": { "name": "union", "description": "number
| string" } } }, @@ -36,6 +45,7 @@ "classes": [ "root", "text", + "box", "rectangular", "rounded", "circular", diff --git a/docs/translations/api-docs/skeleton/skeleton.json b/docs/translations/api-docs/skeleton/skeleton.json index 7eeb123f3b37f6..f143b853e7f211 100644 --- a/docs/translations/api-docs/skeleton/skeleton.json +++ b/docs/translations/api-docs/skeleton/skeleton.json @@ -12,6 +12,10 @@ "height": { "description": "Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card." }, + "shape": { "description": "The shape of the skeleton." }, + "size": { + "description": "Determines whether the skeleton should scale to the element's text or bounding box." + }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, @@ -25,22 +29,27 @@ "text": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\"" + "conditions": "size=\"text\" or variant=\"text\"" + }, + "box": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"box\"" }, "rectangular": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"rectangular\"" + "conditions": "shape=\"rectangular\" or variant=\"rectangular\"" }, "rounded": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"rounded\"" + "conditions": "shape=\"rounded\" or variant=\"rounded\"" }, "circular": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"circular\"" + "conditions": "shape=\"circular\" or variant=\"circular\"" }, "pulse": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts index 1d4e9eda13c324..090feef3106453 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.d.ts +++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts @@ -7,6 +7,10 @@ import { SkeletonClasses } from './skeletonClasses'; export interface SkeletonPropsVariantOverrides {} +export interface SkeletonPropsSizeOverrides {} + +export interface SkeletonPropsShapeOverrides {} + export interface SkeletonOwnProps { /** * The animation. @@ -27,6 +31,17 @@ export interface SkeletonOwnProps { * Useful when you don't want to adapt the skeleton to a text element but for instance a card. */ height?: number | string; + /** + * The shape of the skeleton. + */ + shape?: OverridableStringUnion< + 'rectangular' | 'rounded' | 'circular', + SkeletonPropsShapeOverrides + >; + /** + * Determines whether the skeleton should scale to the element's text or bounding box. + */ + size?: OverridableStringUnion<'text' | 'box', SkeletonPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -34,6 +49,7 @@ export interface SkeletonOwnProps { /** * The type of content that will be rendered. * @default 'text' + * @deprecated Use `shape` prop to set the shape of the skeleton and `size` prop to set the scale adaptation. */ variant?: OverridableStringUnion< 'text' | 'rectangular' | 'rounded' | 'circular', diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js index 3fc8bf1a052627..8c81103f752862 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.js +++ b/packages/mui-material/src/Skeleton/Skeleton.js @@ -4,18 +4,19 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import { keyframes, css } from '@mui/system'; import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; -import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles'; +import { alpha } from '../styles'; import styled from '../styles/styled'; import useThemeProps from '../styles/useThemeProps'; import { getSkeletonUtilityClass } from './skeletonClasses'; const useUtilityClasses = (ownerState) => { - const { classes, variant, animation, hasChildren, width, height } = ownerState; + const { classes, shape, size, animation, hasChildren, width, height } = ownerState; const slots = { root: [ 'root', - variant, + size, + shape, animation, hasChildren && 'withChildren', hasChildren && !width && 'fitContent', @@ -60,10 +61,10 @@ const SkeletonRoot = styled('span', { slot: 'Root', overridesResolver: (props, styles) => { const { ownerState } = props; - return [ styles.root, - styles[ownerState.variant], + ownerState.shape && styles[ownerState.shape], + ownerState.size && styles[ownerState.size], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, @@ -71,51 +72,44 @@ const SkeletonRoot = styled('span', { ]; }, })( - ({ theme, ownerState }) => { - const radiusUnit = getUnit(theme.shape.borderRadius) || 'px'; - const radiusValue = toUnitless(theme.shape.borderRadius); - - return { - display: 'block', - // Create a "on paper" color with sufficient contrast retaining the color - backgroundColor: theme.vars - ? theme.vars.palette.Skeleton.bg - : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), - height: '1.2em', - ...(ownerState.variant === 'text' && { - marginTop: 0, - marginBottom: 0, - height: 'auto', - transformOrigin: '0 55%', - transform: 'scale(1, 0.60)', - borderRadius: `${radiusValue}${radiusUnit}/${ - Math.round((radiusValue / 0.6) * 10) / 10 - }${radiusUnit}`, - '&:empty:before': { - content: '"\\00a0"', - }, - }), - ...(ownerState.variant === 'circular' && { - borderRadius: '50%', + ({ theme, ownerState }) => ({ + display: 'block', + // Create a "on paper" color with sufficient contrast retaining the color + backgroundColor: theme.vars + ? theme.vars.palette.Skeleton.bg + : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13), + height: '1.2em', + borderRadius: (theme.vars || theme).shape.borderRadius, + ...(ownerState.size === 'text' && { + marginTop: 0, + marginBottom: 0, + height: 'auto', + transformOrigin: '0 55%', + transform: 'scale(1, 0.60)', + '&:empty:before': { + content: '"\\00a0"', + }, + }), + ...(ownerState.shape === 'circular' && { + borderRadius: '50%', + }), + ...(ownerState.shape === 'rectangular' && { + borderRadius: 0, + }), + ...(ownerState.hasChildren && { + '& > *': { + visibility: 'hidden', + }, + }), + ...(ownerState.hasChildren && + !ownerState.width && { + maxWidth: 'fit-content', }), - ...(ownerState.variant === 'rounded' && { - borderRadius: (theme.vars || theme).shape.borderRadius, - }), - ...(ownerState.hasChildren && { - '& > *': { - visibility: 'hidden', - }, + ...(ownerState.hasChildren && + !ownerState.height && { + height: 'auto', }), - ...(ownerState.hasChildren && - !ownerState.width && { - maxWidth: 'fit-content', - }), - ...(ownerState.hasChildren && - !ownerState.height && { - height: 'auto', - }), - }; - }, + }), ({ ownerState }) => ownerState.animation === 'pulse' && css` @@ -156,17 +150,25 @@ const Skeleton = React.forwardRef(function Skeleton(inProps, ref) { className, component = 'span', height, + // TODO v6: add defaults + shape, + size, style, variant = 'text', width, ...other } = props; + const sizeValue = size ?? (variant === 'text' ? variant : undefined); + const shapeValue = + shape ?? (['circular', 'rectangular', 'rounded'].includes(variant) ? variant : undefined); + const ownerState = { ...props, animation, component, - variant, + size: sizeValue, + shape: shapeValue, hasChildren: Boolean(other.children), }; @@ -221,6 +223,14 @@ Skeleton.propTypes /* remove-proptypes */ = { * Useful when you don't want to adapt the skeleton to a text element but for instance a card. */ height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** + * The shape of the skeleton. + */ + shape: PropTypes.oneOf(['circular', 'rectangular', 'rounded']), + /** + * Determines whether the skeleton should scale to the element's text or bounding box. + */ + size: PropTypes.oneOf(['text', 'box']), /** * @ignore */ @@ -236,6 +246,7 @@ Skeleton.propTypes /* remove-proptypes */ = { /** * The type of content that will be rendered. * @default 'text' + * @deprecated Use `shape` prop to set the shape of the skeleton and `size` prop to set the scale adaptation. */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']), diff --git a/packages/mui-material/src/Skeleton/Skeleton.test.js b/packages/mui-material/src/Skeleton/Skeleton.test.js index 41bd8d67eec034..f217b8c8bb7abd 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.test.js +++ b/packages/mui-material/src/Skeleton/Skeleton.test.js @@ -67,4 +67,90 @@ describe('', () => { expect(containerWithHeight.firstChild).not.to.have.class(classes.heightAuto); }); + + describe('Variant Prop', () => { + it('should get `text` class when no variant is specified', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.text); + }); + + it('should get `circular` when variant is set to `circular`', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.circular); + }); + + it('should get `rounded` when variant is set to `rounded`', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.rounded); + }); + + it('should get `rectangular` when variant is set to `rectangular`', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.rectangular); + }); + }); + + describe('Size & Shape Prop', () => { + it('should get `box` class when size is set to `box`', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.box); + }); + + it('should set `size` prop over `variant` prop', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.box); + expect(container.firstChild).not.to.have.class(classes.text); + }); + + it('should get `circular` when shape is set to `circular`', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.circular); + }); + + it('should set `shape` prop over `variant` prop', () => { + const { container } = render( + + + , + ); + + expect(container.firstChild).to.have.class(classes.rectangular); + expect(container.firstChild).not.to.have.class(classes.rounded); + }); + }); }); diff --git a/packages/mui-material/src/Skeleton/skeletonClasses.ts b/packages/mui-material/src/Skeleton/skeletonClasses.ts index b57813f9d176b3..b9ad6bacc8ce4f 100644 --- a/packages/mui-material/src/Skeleton/skeletonClasses.ts +++ b/packages/mui-material/src/Skeleton/skeletonClasses.ts @@ -4,13 +4,15 @@ import generateUtilityClass from '../generateUtilityClass'; export interface SkeletonClasses { /** Styles applied to the root element. */ root: string; - /** Styles applied to the root element if `variant="text"`. */ + /** Styles applied to the root element if `size="text"` or `variant="text"`. */ text: string; - /** Styles applied to the root element if `variant="rectangular"`. */ + /** Styles applied to the root element if `size="box"`. */ + box: string; + /** Styles applied to the root element if `shape="rectangular"` or `variant="rectangular"`. */ rectangular: string; - /** Styles applied to the root element if `variant="rounded"`. */ + /** Styles applied to the root element if `shape="rounded"` or `variant="rounded"`. */ rounded: string; - /** Styles applied to the root element if `variant="circular"`. */ + /** Styles applied to the root element if `shape="circular"` or `variant="circular"`. */ circular: string; /** Styles applied to the root element if `animation="pulse"`. */ pulse: string; @@ -33,6 +35,7 @@ export function getSkeletonUtilityClass(slot: string): string { const skeletonClasses: SkeletonClasses = generateUtilityClasses('MuiSkeleton', [ 'root', 'text', + 'box', 'rectangular', 'rounded', 'circular',