From 62c7bd8013afa2553b059c6a6c283cbef99dcefa Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 12 Feb 2025 20:07:32 -0500 Subject: [PATCH 01/10] chore(SkeletonBox): promote to Alpha --- .../FilteredActionListLoaders.module.css | 4 + .../FilteredActionListLoaders.tsx | 5 +- .../Skeleton/SkeletonBox.docs.json | 10 +-- .../Skeleton/SkeletonBox.features.stories.tsx | 5 +- .../Skeleton/SkeletonBox.figma.tsx | 0 .../Skeleton/SkeletonBox.module.css | 0 .../Skeleton/SkeletonBox.stories.tsx | 10 +-- packages/react/src/Skeleton/SkeletonBox.tsx | 34 ++++++++ .../Skeleton/__tests__/SkeletonBox.test.tsx | 2 +- packages/react/src/Skeleton/index.ts | 6 ++ .../experimental/Skeleton/SkeletonAvatar.tsx | 4 +- .../src/experimental/Skeleton/SkeletonBox.tsx | 80 ------------------- .../experimental/Skeleton/SkeletonText.tsx | 68 +--------------- .../react/src/experimental/Skeleton/index.ts | 2 +- packages/react/src/index.ts | 3 + 15 files changed, 66 insertions(+), 167 deletions(-) create mode 100644 packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css rename packages/react/src/{experimental => }/Skeleton/SkeletonBox.docs.json (70%) rename packages/react/src/{experimental => }/Skeleton/SkeletonBox.features.stories.tsx (67%) rename packages/react/src/{experimental => }/Skeleton/SkeletonBox.figma.tsx (100%) rename packages/react/src/{experimental => }/Skeleton/SkeletonBox.module.css (100%) rename packages/react/src/{experimental => }/Skeleton/SkeletonBox.stories.tsx (71%) create mode 100644 packages/react/src/Skeleton/SkeletonBox.tsx rename packages/react/src/{experimental => }/Skeleton/__tests__/SkeletonBox.test.tsx (93%) create mode 100644 packages/react/src/Skeleton/index.ts delete mode 100644 packages/react/src/experimental/Skeleton/SkeletonBox.tsx diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css new file mode 100644 index 00000000000..b3c8f84fdd6 --- /dev/null +++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css @@ -0,0 +1,4 @@ +.LoadingSkeleton { + /* stylelint-disable-next-line primer/borders */ + border-radius: 4px; +} \ No newline at end of file diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx index defb136f3b5..65d82ee0554 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx @@ -2,7 +2,8 @@ import React from 'react' import Box from '../Box' import Spinner from '../Spinner' import {Stack} from '../Stack/Stack' -import {SkeletonBox} from '../experimental/Skeleton/SkeletonBox' +import {SkeletonBox} from '../experimental/Skeleton' +import classes from './FilteredActionListLoaders.module.css' export class FilteredActionListLoadingType { public name: string @@ -57,7 +58,7 @@ function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element { {Array.from({length: rows}, (_, i) => ( - + ))} diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.docs.json b/packages/react/src/Skeleton/SkeletonBox.docs.json similarity index 70% rename from packages/react/src/experimental/Skeleton/SkeletonBox.docs.json rename to packages/react/src/Skeleton/SkeletonBox.docs.json index 292c07072b5..70b8c32c272 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonBox.docs.json +++ b/packages/react/src/Skeleton/SkeletonBox.docs.json @@ -1,20 +1,20 @@ { "id": "skeleton_box", "name": "SkeletonBox", - "status": "draft", + "status": "alpha", "a11yReviewed": false, "stories": [ { - "id": "experimental-components-skeleton-skeletonbox--default" + "id": "components-skeleton-skeletonbox--default" }, { - "id": "experimental-components-skeleton-skeletonbox-features--custom-height" + "id": "components-skeleton-skeletonbox-features--custom-height" }, { - "id": "experimental-components-skeleton-skeletonbox-features--custom-width" + "id": "components-skeleton-skeletonbox-features--custom-width" } ], - "importPath": "@primer/react/experimental", + "importPath": "@primer/react", "props": [ { "name": "width", diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.features.stories.tsx b/packages/react/src/Skeleton/SkeletonBox.features.stories.tsx similarity index 67% rename from packages/react/src/experimental/Skeleton/SkeletonBox.features.stories.tsx rename to packages/react/src/Skeleton/SkeletonBox.features.stories.tsx index 887e2975573..7c0b9c21f0f 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonBox.features.stories.tsx +++ b/packages/react/src/Skeleton/SkeletonBox.features.stories.tsx @@ -1,10 +1,9 @@ -import React from 'react' +import React, {type ComponentProps} from 'react' import type {Meta} from '@storybook/react' -import type {ComponentProps} from '../../utils/types' import {SkeletonBox} from './SkeletonBox' export default { - title: 'Experimental/Components/Skeleton/SkeletonBox/Features', + title: 'Components/Skeleton/SkeletonBox/Features', component: SkeletonBox, } as Meta> diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.figma.tsx b/packages/react/src/Skeleton/SkeletonBox.figma.tsx similarity index 100% rename from packages/react/src/experimental/Skeleton/SkeletonBox.figma.tsx rename to packages/react/src/Skeleton/SkeletonBox.figma.tsx diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.module.css b/packages/react/src/Skeleton/SkeletonBox.module.css similarity index 100% rename from packages/react/src/experimental/Skeleton/SkeletonBox.module.css rename to packages/react/src/Skeleton/SkeletonBox.module.css diff --git a/packages/react/src/experimental/Skeleton/SkeletonBox.stories.tsx b/packages/react/src/Skeleton/SkeletonBox.stories.tsx similarity index 71% rename from packages/react/src/experimental/Skeleton/SkeletonBox.stories.tsx rename to packages/react/src/Skeleton/SkeletonBox.stories.tsx index 1d0acc5388b..627e548464d 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonBox.stories.tsx +++ b/packages/react/src/Skeleton/SkeletonBox.stories.tsx @@ -1,10 +1,10 @@ import React from 'react' import type {Meta, StoryFn} from '@storybook/react' -import type {ComponentProps} from '../../utils/types' import {SkeletonBox} from './SkeletonBox' +import type {ComponentProps} from '../utils/types' export default { - title: 'Experimental/Components/Skeleton/SkeletonBox', + title: 'Components/Skeleton/SkeletonBox', component: SkeletonBox, } as Meta> @@ -13,12 +13,6 @@ export const Default = () => export const Playground: StoryFn> = args => Playground.argTypes = { - sx: { - controls: false, - table: { - disable: true, - }, - }, height: { type: 'string', }, diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx new file mode 100644 index 00000000000..51a6c537ceb --- /dev/null +++ b/packages/react/src/Skeleton/SkeletonBox.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import {type CSSProperties, type HTMLProps} from 'react' +import {clsx} from 'clsx' +import classes from './SkeletonBox.module.css' +import {merge} from '../sx' + +export type SkeletonBoxProps = { + /** Height of the skeleton "box". Accepts any valid CSS `height` value. */ + height?: CSSProperties['height'] + /** Width of the skeleton "box". Accepts any valid CSS `width` value. */ + width?: CSSProperties['width'] + /** The className of the skeleton box */ + className?: string +} & HTMLProps + +export const SkeletonBox = React.forwardRef(function SkeletonBox( + {height, width, className, style, ...props}, + ref, +) { + return ( +
+ ) +}) diff --git a/packages/react/src/experimental/Skeleton/__tests__/SkeletonBox.test.tsx b/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx similarity index 93% rename from packages/react/src/experimental/Skeleton/__tests__/SkeletonBox.test.tsx rename to packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx index 654e66e2400..74f1f521014 100644 --- a/packages/react/src/experimental/Skeleton/__tests__/SkeletonBox.test.tsx +++ b/packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx @@ -1,6 +1,6 @@ import {render} from '@testing-library/react' import React from 'react' -import {FeatureFlags} from '../../../FeatureFlags' +import {FeatureFlags} from '../../FeatureFlags' import {SkeletonBox} from '../SkeletonBox' describe('SkeletonBox', () => { diff --git a/packages/react/src/Skeleton/index.ts b/packages/react/src/Skeleton/index.ts new file mode 100644 index 00000000000..399d83a6c2b --- /dev/null +++ b/packages/react/src/Skeleton/index.ts @@ -0,0 +1,6 @@ +import {SkeletonBox} from './SkeletonBox' + +export default SkeletonBox +export {SkeletonBox} + +export type {SkeletonBoxProps} from './SkeletonBox' diff --git a/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx b/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx index 5221154a39c..bac6e44a794 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx @@ -4,7 +4,7 @@ import {get} from '../../constants' import {isResponsiveValue} from '../../hooks/useResponsiveValue' import type {AvatarProps} from '../../Avatar' import {DEFAULT_AVATAR_SIZE} from '../../Avatar/Avatar' -import {SkeletonBox} from './SkeletonBox' +import {SkeletonBox} from './' import classes from './SkeletonAvatar.module.css' import {clsx} from 'clsx' import {useFeatureFlag} from '../../FeatureFlags' @@ -67,7 +67,7 @@ export const SkeletonAvatar: React.FC = ({ return ( - -const shimmer = keyframes` - from { mask-position: 200%; } - to { mask-position: 0%; } -` - -const StyledSkeletonBox = toggleStyledComponent( - CSS_MODULE_FLAG, - 'div', - styled.div` - animation: ${shimmer}; - display: block; - background-color: var(--skeletonLoader-bgColor, ${get('colors.canvas.subtle')}); - border-radius: 3px; - height: ${props => props.height || '1rem'}; - width: ${props => props.width}; - - @media (prefers-reduced-motion: no-preference) { - mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%); - mask-size: 200%; - animation: ${shimmer}; - animation-duration: 1s; - animation-iteration-count: infinite; - } - - @media (forced-colors: active) { - outline: 1px solid transparent; - outline-offset: -1px; - } - - ${sx}; - `, -) - -export const SkeletonBox = React.forwardRef(function SkeletonBox( - {height, width, className, style, ...props}, - ref, -) { - const enabled = useFeatureFlag(CSS_MODULE_FLAG) - return ( - - ) -}) diff --git a/packages/react/src/experimental/Skeleton/SkeletonText.tsx b/packages/react/src/experimental/Skeleton/SkeletonText.tsx index 08c2680363f..2d6e7eb940c 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonText.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonText.tsx @@ -1,6 +1,6 @@ import React, {type CSSProperties, type HTMLProps} from 'react' import Box from '../../Box' -import {SkeletonBox} from './SkeletonBox' +import {SkeletonBox} from './' import classes from './SkeletonText.module.css' import {useFeatureFlag} from '../../FeatureFlags' import {clsx} from 'clsx' @@ -18,61 +18,6 @@ type SkeletonTextProps = { className?: string } & Omit, 'size'> -const skeletonTextStyles = { - '&[data-component="SkeletonText"]': { - '--font-size': 'var(--text-body-size-medium, 0.875rem)', - '--line-height': 'var(--text-body-lineHeight-medium, 1.4285)', - '--leading': 'calc(var(--font-size) * var(--line-height) - var(--font-size))', - borderRadius: 'var(--borderRadius-small, 0.1875rem)', - height: 'var(--font-size)', - marginBlock: 'calc(var(--leading) / 2)', - }, - '&[data-in-multiline="true"]': { - marginBlockEnd: 'calc(var(--leading) * 2)', - }, - '&[data-in-multiline="true"]:last-child': { - maxWidth: '65%', - minWidth: '50px', - marginBottom: 0, - }, - '@supports (margin-block: mod(1px, 1px))': { - '&[data-component="SkeletonText"]': { - '--leading': 'mod(var(--font-size) * var(--line-height), var(--font-size))', - }, - }, - '&[data-text-skeleton-size="display"], &[data-text-skeleton-size="titleLarge"]': { - borderRadius: 'var(--borderRadius-medium, 0.375rem)', - }, - '&[data-text-skeleton-size="display"]': { - '--font-size': 'var(--text-display-size, 2.5rem)', - '--line-height': 'var(--text-display-lineHeight, 1.4)', - }, - '&[data-text-skeleton-size="titleLarge"]': { - '--font-size': 'var(--text-title-size-large, 2.5rem)', - '--line-height': 'var(--text-title-lineHeight-large, 1.5)', - }, - '&[data-text-skeleton-size="titleMedium"]': { - '--font-size': 'var(--text-title-size-medium, 1.25rem)', - '--line-height': 'var(--text-title-lineHeight-medium, 1.6)', - }, - '&[data-text-skeleton-size="titleSmall"]': { - '--font-size': 'var(--text-title-size-small, 1rem)', - '--line-height': 'var(--text-title-lineHeight-small, 1.5)', - }, - '&[data-text-skeleton-size="subtitle"]': { - '--font-size': 'var(--text-subtitle-size, 1.25rem)', - '--line-height': 'var(--text-subtitle-lineHeight, 1.6)', - }, - '&[data-text-skeleton-size="bodyLarge"]': { - '--font-size': 'var(--text-body-size-large, 1rem)', - '--line-height': 'var(--text-body-lineHeight-large, 1.5)', - }, - '&[data-text-skeleton-size="bodySmall"]': { - '--font-size': 'var(--text-body-size-small, 0.75rem)', - '--line-height': 'var(--text-body-lineHeight-small, 1.6666)', - }, -} - export const SkeletonText: React.FC = ({ lines = 1, maxWidth, @@ -84,20 +29,13 @@ export const SkeletonText: React.FC = ({ const enabled = useFeatureFlag(CSS_MODULE_FLAG) if (lines < 2) { + // TODO: fix return ( @@ -116,12 +54,12 @@ export const SkeletonText: React.FC = ({ style={enabled ? merge(style as CSSProperties, {maxWidth, paddingBlock: '0.1px'} as CSSProperties) : style} > {Array.from({length: lines}, (_, index) => ( + // TODO: fix diff --git a/packages/react/src/experimental/Skeleton/index.ts b/packages/react/src/experimental/Skeleton/index.ts index 90f0e92e597..c7e7803eee6 100644 --- a/packages/react/src/experimental/Skeleton/index.ts +++ b/packages/react/src/experimental/Skeleton/index.ts @@ -1,3 +1,3 @@ -export {SkeletonBox} from './SkeletonBox' +export {SkeletonBox} from '../../Skeleton/SkeletonBox' export {SkeletonText} from './SkeletonText' export {SkeletonAvatar} from './SkeletonAvatar' diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 82b6e3a06b1..f3751ccd5de 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -204,3 +204,6 @@ export type {PageHeaderProps} from './PageHeader' export {default as sx, merge} from './sx' export type {BetterCssProperties, BetterSystemStyleObject, SxProp} from './sx' + +export {SkeletonBox} from './Skeleton' +export type {SkeletonBoxProps} from './Skeleton' From 6813e22eed78d2feaf0a780435847eae27300db9 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 12 Feb 2025 20:09:08 -0500 Subject: [PATCH 02/10] Create dirty-squids-train.md --- .changeset/dirty-squids-train.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dirty-squids-train.md diff --git a/.changeset/dirty-squids-train.md b/.changeset/dirty-squids-train.md new file mode 100644 index 00000000000..864185f4726 --- /dev/null +++ b/.changeset/dirty-squids-train.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +WIP: chore(SkeletonBox): promote to Alpha From 0152be4fad9f46b3bf59c7a16ae3721916f5e985 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 1 Apr 2025 21:33:21 -0400 Subject: [PATCH 03/10] add new line at end of file --- .../src/FilteredActionList/FilteredActionListLoaders.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css index b3c8f84fdd6..5a6236717de 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css +++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css @@ -1,4 +1,4 @@ .LoadingSkeleton { /* stylelint-disable-next-line primer/borders */ border-radius: 4px; -} \ No newline at end of file +} From 102b02e0431854ba0a9727dd512a13de41560545 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 1 Apr 2025 21:35:13 -0400 Subject: [PATCH 04/10] remove comments --- packages/react/src/experimental/Skeleton/SkeletonText.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/experimental/Skeleton/SkeletonText.tsx b/packages/react/src/experimental/Skeleton/SkeletonText.tsx index 4b2b31ad895..0b67e967959 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonText.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonText.tsx @@ -24,7 +24,6 @@ export const SkeletonText: React.FC = ({ ...rest }) => { if (lines < 2) { - // TODO: fix return ( = ({ style={merge(style as CSSProperties, {maxWidth} as CSSProperties)} > {Array.from({length: lines}, (_, index) => ( - // TODO: fix Date: Tue, 1 Apr 2025 21:36:37 -0400 Subject: [PATCH 05/10] fix import --- packages/react/src/experimental/Skeleton/SkeletonText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/experimental/Skeleton/SkeletonText.tsx b/packages/react/src/experimental/Skeleton/SkeletonText.tsx index 0b67e967959..5dc25462fa3 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonText.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonText.tsx @@ -2,7 +2,7 @@ import React, {type CSSProperties, type HTMLProps} from 'react' import classes from './SkeletonText.module.css' import {clsx} from 'clsx' import {merge} from '../../sx' -import SkeletonBox from '../../Skeleton' +import {SkeletonBox} from './' type SkeletonTextProps = { /** Size of the text that the skeleton is replacing. */ From c6563d5b750abca2728d5b7e9014d153e84c85cb Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 1 Apr 2025 21:40:25 -0400 Subject: [PATCH 06/10] fix :format --- .../FilteredActionList/FilteredActionListLoaders.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css index 5a6236717de..c4c8757fff0 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css +++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css @@ -1,4 +1,4 @@ .LoadingSkeleton { - /* stylelint-disable-next-line primer/borders */ - border-radius: 4px; + /* stylelint-disable-next-line primer/borders */ + border-radius: 4px; } From 8088adb11893801a81a89d505c7da85ab9edef65 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 1 Apr 2025 21:42:58 -0400 Subject: [PATCH 07/10] fix circular dependency --- packages/react/src/experimental/Skeleton/SkeletonText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/experimental/Skeleton/SkeletonText.tsx b/packages/react/src/experimental/Skeleton/SkeletonText.tsx index 5dc25462fa3..2f7625fab2f 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonText.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonText.tsx @@ -2,7 +2,7 @@ import React, {type CSSProperties, type HTMLProps} from 'react' import classes from './SkeletonText.module.css' import {clsx} from 'clsx' import {merge} from '../../sx' -import {SkeletonBox} from './' +import {SkeletonBox} from '../../Skeleton' type SkeletonTextProps = { /** Size of the text that the skeleton is replacing. */ From b776fdaf8ea528a34d5ff2fc189f455443d41f54 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 1 Apr 2025 21:45:27 -0400 Subject: [PATCH 08/10] fix circular dependency --- packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx b/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx index 039698f5913..c1de038f73c 100644 --- a/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx +++ b/packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx @@ -2,7 +2,7 @@ import React, {type CSSProperties} from 'react' import {isResponsiveValue} from '../../hooks/useResponsiveValue' import type {AvatarProps} from '../../Avatar' import {DEFAULT_AVATAR_SIZE} from '../../Avatar/Avatar' -import {SkeletonBox} from './' +import {SkeletonBox} from '../../Skeleton' import classes from './SkeletonAvatar.module.css' import {clsx} from 'clsx' import {merge} from '../../sx' From 6113a95d73fdcecef2e4011d705a38e4838c2c51 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 1 Apr 2025 21:49:21 -0400 Subject: [PATCH 09/10] fix import --- packages/react/src/Skeleton/SkeletonBox.figma.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Skeleton/SkeletonBox.figma.tsx b/packages/react/src/Skeleton/SkeletonBox.figma.tsx index 83ccf84791e..a63e740c42c 100644 --- a/packages/react/src/Skeleton/SkeletonBox.figma.tsx +++ b/packages/react/src/Skeleton/SkeletonBox.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {SkeletonBox} from '../../../src/experimental/' +import {SkeletonBox} from './' import figma from '@figma/code-connect' figma.connect( From 8b84b7857e3571854b9f90ba6eb390bcb6d307cc Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 1 Apr 2025 23:14:04 -0400 Subject: [PATCH 10/10] fix vrt story names --- e2e/components/Skeletons.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/e2e/components/Skeletons.test.ts b/e2e/components/Skeletons.test.ts index e81f02e0406..20de053ec69 100644 --- a/e2e/components/Skeletons.test.ts +++ b/e2e/components/Skeletons.test.ts @@ -128,7 +128,7 @@ test.describe('Skeleton', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'experimental-components-skeleton-skeletonbox--default', + id: 'components-skeleton-skeletonbox--default', globals: { colorScheme: theme, }, @@ -146,7 +146,7 @@ test.describe('Skeleton', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'experimental-components-skeleton-skeletonbox-features--custom-height', + id: 'components-skeleton-skeletonbox-features--custom-height', globals: { colorScheme: theme, }, @@ -164,7 +164,7 @@ test.describe('Skeleton', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'experimental-components-skeleton-skeletonbox-features--custom-width', + id: 'components-skeleton-skeletonbox-features--custom-width', globals: { colorScheme: theme, },