Skip to content

Commit da85192

Browse files
francineluccafrancinelucca
authored
chore(SkeletonBox): promote to Alpha (#5693)
1 parent d3c6305 commit da85192

17 files changed

+44
-51
lines changed

‎.changeset/dirty-squids-train.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
WIP: chore(SkeletonBox): promote to Alpha

‎e2e/components/Skeletons.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ test.describe('Skeleton', () => {
128128
test.describe(theme, () => {
129129
test('default @vrt', async ({page}) => {
130130
await visit(page, {
131-
id: 'experimental-components-skeleton-skeletonbox--default',
131+
id: 'components-skeleton-skeletonbox--default',
132132
globals: {
133133
colorScheme: theme,
134134
},
@@ -146,7 +146,7 @@ test.describe('Skeleton', () => {
146146
test.describe(theme, () => {
147147
test('default @vrt', async ({page}) => {
148148
await visit(page, {
149-
id: 'experimental-components-skeleton-skeletonbox-features--custom-height',
149+
id: 'components-skeleton-skeletonbox-features--custom-height',
150150
globals: {
151151
colorScheme: theme,
152152
},
@@ -164,7 +164,7 @@ test.describe('Skeleton', () => {
164164
test.describe(theme, () => {
165165
test('default @vrt', async ({page}) => {
166166
await visit(page, {
167-
id: 'experimental-components-skeleton-skeletonbox-features--custom-width',
167+
id: 'components-skeleton-skeletonbox-features--custom-width',
168168
globals: {
169169
colorScheme: theme,
170170
},

‎packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.LoadingSkeleton {
2+
/* stylelint-disable-next-line primer/borders */
3+
border-radius: 4px;
4+
}

‎packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React from 'react'
22
import Box from '../Box'
33
import Spinner from '../Spinner'
44
import {Stack} from '../Stack/Stack'
5-
import {SkeletonBox} from '../experimental/Skeleton/SkeletonBox'
5+
import {SkeletonBox} from '../experimental/Skeleton'
6+
import classes from './FilteredActionListLoaders.module.css'
67

78
export class FilteredActionListLoadingType {
89
public name: string
@@ -57,7 +58,7 @@ function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
5758
{Array.from({length: rows}, (_, i) => (
5859
<Stack key={i} direction="horizontal" gap="condensed" align="center">
5960
<SkeletonBox width="16px" height="16px" />
60-
<SkeletonBox height="10px" width={`${Math.random() * 60 + 20}%`} sx={{borderRadius: '4px'}} />
61+
<SkeletonBox height="10px" width={`${Math.random() * 60 + 20}%`} className={classes.LoadingSkeleton} />
6162
</Stack>
6263
))}
6364
</Stack>

‎packages/react/src/experimental/Skeleton/SkeletonBox.docs.json renamed to ‎packages/react/src/Skeleton/SkeletonBox.docs.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
{
22
"id": "skeleton_box",
33
"name": "SkeletonBox",
4-
"status": "draft",
4+
"status": "alpha",
55
"a11yReviewed": false,
66
"stories": [
77
{
8-
"id": "experimental-components-skeleton-skeletonbox--default"
8+
"id": "components-skeleton-skeletonbox--default"
99
},
1010
{
11-
"id": "experimental-components-skeleton-skeletonbox-features--custom-height"
11+
"id": "components-skeleton-skeletonbox-features--custom-height"
1212
},
1313
{
14-
"id": "experimental-components-skeleton-skeletonbox-features--custom-width"
14+
"id": "components-skeleton-skeletonbox-features--custom-width"
1515
}
1616
],
17-
"importPath": "@primer/react/experimental",
17+
"importPath": "@primer/react",
1818
"props": [
1919
{
2020
"name": "width",

‎packages/react/src/experimental/Skeleton/SkeletonBox.features.stories.tsx renamed to ‎packages/react/src/Skeleton/SkeletonBox.features.stories.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React from 'react'
1+
import React, {type ComponentProps} from 'react'
22
import type {Meta} from '@storybook/react'
3-
import type {ComponentProps} from '../../utils/types'
43
import {SkeletonBox} from './SkeletonBox'
54

65
export default {
7-
title: 'Experimental/Components/Skeleton/SkeletonBox/Features',
6+
title: 'Components/Skeleton/SkeletonBox/Features',
87
component: SkeletonBox,
98
} as Meta<ComponentProps<typeof SkeletonBox>>
109

‎packages/react/src/experimental/Skeleton/SkeletonBox.figma.tsx renamed to ‎packages/react/src/Skeleton/SkeletonBox.figma.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {SkeletonBox} from '../../../src/experimental/'
2+
import {SkeletonBox} from './'
33
import figma from '@figma/code-connect'
44

55
figma.connect(

‎packages/react/src/experimental/Skeleton/SkeletonBox.module.css renamed to ‎packages/react/src/Skeleton/SkeletonBox.module.css

File renamed without changes.

‎packages/react/src/experimental/Skeleton/SkeletonBox.stories.tsx renamed to ‎packages/react/src/Skeleton/SkeletonBox.stories.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react'
22
import type {Meta, StoryFn} from '@storybook/react'
3-
import type {ComponentProps} from '../../utils/types'
43
import {SkeletonBox} from './SkeletonBox'
4+
import type {ComponentProps} from '../utils/types'
55

66
export default {
7-
title: 'Experimental/Components/Skeleton/SkeletonBox',
7+
title: 'Components/Skeleton/SkeletonBox',
88
component: SkeletonBox,
99
} as Meta<ComponentProps<typeof SkeletonBox>>
1010

@@ -13,12 +13,6 @@ export const Default = () => <SkeletonBox />
1313
export const Playground: StoryFn<ComponentProps<typeof SkeletonBox>> = args => <SkeletonBox {...args} />
1414

1515
Playground.argTypes = {
16-
sx: {
17-
controls: false,
18-
table: {
19-
disable: true,
20-
},
21-
},
2216
height: {
2317
type: 'string',
2418
},

‎packages/react/src/experimental/Skeleton/SkeletonBox.tsx renamed to ‎packages/react/src/Skeleton/SkeletonBox.tsx

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,22 @@
11
import React from 'react'
2-
import {merge, type SxProp} from '../../sx'
3-
import {type CSSProperties} from 'react'
2+
import {type CSSProperties, type HTMLProps} from 'react'
43
import {clsx} from 'clsx'
54
import classes from './SkeletonBox.module.css'
6-
import {defaultSxProp} from '../../utils/defaultSxProp'
7-
import Box from '../../Box'
5+
import {merge} from '../sx'
86

9-
type SkeletonBoxProps = {
7+
export type SkeletonBoxProps = {
108
/** Height of the skeleton "box". Accepts any valid CSS `height` value. */
119
height?: CSSProperties['height']
1210
/** Width of the skeleton "box". Accepts any valid CSS `width` value. */
1311
width?: CSSProperties['width']
1412
/** The className of the skeleton box */
1513
className?: string
16-
} & SxProp &
17-
React.ComponentPropsWithoutRef<'div'>
14+
} & HTMLProps<HTMLDivElement>
1815

1916
export const SkeletonBox = React.forwardRef<HTMLDivElement, SkeletonBoxProps>(function SkeletonBox(
20-
{height, width, className, style, sx: sxProp = defaultSxProp, ...props},
17+
{height, width, className, style, ...props},
2118
ref,
2219
) {
23-
if (sxProp !== defaultSxProp) {
24-
return (
25-
<Box
26-
as="div"
27-
className={clsx(className, classes.SkeletonBox)}
28-
style={merge(
29-
style as CSSProperties,
30-
{
31-
height,
32-
width,
33-
} as CSSProperties,
34-
)}
35-
{...props}
36-
ref={ref}
37-
sx={sxProp}
38-
/>
39-
)
40-
}
4120
return (
4221
<div
4322
className={clsx(className, classes.SkeletonBox)}

‎packages/react/src/experimental/Skeleton/__tests__/SkeletonBox.test.tsx renamed to ‎packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx

File renamed without changes.

‎packages/react/src/Skeleton/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {SkeletonBox} from './SkeletonBox'
2+
3+
export default SkeletonBox
4+
export {SkeletonBox}
5+
6+
export type {SkeletonBoxProps} from './SkeletonBox'

‎packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,8 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
141141
"SideNav",
142142
"type SideNavLinkProps",
143143
"type SideNavProps",
144+
"SkeletonBox",
145+
"type SkeletonBoxProps",
144146
"Spinner",
145147
"type SpinnerProps",
146148
"SplitPageLayout",

‎packages/react/src/experimental/Skeleton/SkeletonAvatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {type CSSProperties} from 'react'
22
import {isResponsiveValue} from '../../hooks/useResponsiveValue'
33
import type {AvatarProps} from '../../Avatar'
44
import {DEFAULT_AVATAR_SIZE} from '../../Avatar/Avatar'
5-
import {SkeletonBox} from './SkeletonBox'
5+
import {SkeletonBox} from '../../Skeleton'
66
import classes from './SkeletonAvatar.module.css'
77
import {clsx} from 'clsx'
88
import {merge} from '../../sx'

‎packages/react/src/experimental/Skeleton/SkeletonText.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, {type CSSProperties, type HTMLProps} from 'react'
2-
import {SkeletonBox} from './SkeletonBox'
32
import classes from './SkeletonText.module.css'
43
import {clsx} from 'clsx'
54
import {merge} from '../../sx'
5+
import {SkeletonBox} from '../../Skeleton'
66

77
type SkeletonTextProps = {
88
/** Size of the text that the skeleton is replacing. */

‎packages/react/src/experimental/Skeleton/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export {SkeletonBox} from './SkeletonBox'
1+
export {SkeletonBox} from '../../Skeleton/SkeletonBox'
22
export {SkeletonText} from './SkeletonText'
33
export {SkeletonAvatar} from './SkeletonAvatar'

‎packages/react/src/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,3 +204,6 @@ export type {PageHeaderProps} from './PageHeader'
204204

205205
export {default as sx, merge} from './sx'
206206
export type {BetterCssProperties, BetterSystemStyleObject, SxProp} from './sx'
207+
208+
export {SkeletonBox} from './Skeleton'
209+
export type {SkeletonBoxProps} from './Skeleton'

0 commit comments

Comments
 (0)