Skip to content

chore(SkeletonBox): promote to Alpha #5693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Apr 2, 2025
5 changes: 5 additions & 0 deletions .changeset/dirty-squids-train.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": minor
---

WIP: chore(SkeletonBox): promote to Alpha
6 changes: 3 additions & 3 deletions e2e/components/Skeletons.test.ts
Original file line number Diff line number Diff line change
@@ -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,
},
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.LoadingSkeleton {
/* stylelint-disable-next-line primer/borders */
border-radius: 4px;
}
Original file line number Diff line number Diff line change
@@ -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) => (
<Stack key={i} direction="horizontal" gap="condensed" align="center">
<SkeletonBox width="16px" height="16px" />
<SkeletonBox height="10px" width={`${Math.random() * 60 + 20}%`} sx={{borderRadius: '4px'}} />
<SkeletonBox height="10px" width={`${Math.random() * 60 + 20}%`} className={classes.LoadingSkeleton} />
</Stack>
))}
</Stack>
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -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<ComponentProps<typeof SkeletonBox>>

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import {SkeletonBox} from '../../../src/experimental/'
import {SkeletonBox} from './'
import figma from '@figma/code-connect'

figma.connect(
Original file line number Diff line number Diff line change
@@ -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<ComponentProps<typeof SkeletonBox>>

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

Playground.argTypes = {
sx: {
controls: false,
table: {
disable: true,
},
},
height: {
type: 'string',
},
Original file line number Diff line number Diff line change
@@ -1,43 +1,22 @@
import React from 'react'
import {merge, type SxProp} from '../../sx'
import {type CSSProperties} from 'react'
import {type CSSProperties, type HTMLProps} from 'react'
import {clsx} from 'clsx'
import classes from './SkeletonBox.module.css'
import {defaultSxProp} from '../../utils/defaultSxProp'
import Box from '../../Box'
import {merge} from '../sx'

type SkeletonBoxProps = {
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
} & SxProp &
React.ComponentPropsWithoutRef<'div'>
} & HTMLProps<HTMLDivElement>

export const SkeletonBox = React.forwardRef<HTMLDivElement, SkeletonBoxProps>(function SkeletonBox(
{height, width, className, style, sx: sxProp = defaultSxProp, ...props},
{height, width, className, style, ...props},
ref,
) {
if (sxProp !== defaultSxProp) {
return (
<Box
as="div"
className={clsx(className, classes.SkeletonBox)}
style={merge(
style as CSSProperties,
{
height,
width,
} as CSSProperties,
)}
{...props}
ref={ref}
sx={sxProp}
/>
)
}
return (
<div
className={clsx(className, classes.SkeletonBox)}
6 changes: 6 additions & 0 deletions packages/react/src/Skeleton/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {SkeletonBox} from './SkeletonBox'

export default SkeletonBox
export {SkeletonBox}

export type {SkeletonBoxProps} from './SkeletonBox'
Original file line number Diff line number Diff line change
@@ -141,6 +141,8 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"SideNav",
"type SideNavLinkProps",
"type SideNavProps",
"SkeletonBox",
"type SkeletonBoxProps",
"Spinner",
"type SpinnerProps",
"SplitPageLayout",
Original file line number Diff line number Diff line change
@@ -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 './SkeletonBox'
import {SkeletonBox} from '../../Skeleton'
import classes from './SkeletonAvatar.module.css'
import {clsx} from 'clsx'
import {merge} from '../../sx'
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, {type CSSProperties, type HTMLProps} from 'react'
import {SkeletonBox} from './SkeletonBox'
import classes from './SkeletonText.module.css'
import {clsx} from 'clsx'
import {merge} from '../../sx'
import {SkeletonBox} from '../../Skeleton'

type SkeletonTextProps = {
/** Size of the text that the skeleton is replacing. */
2 changes: 1 addition & 1 deletion packages/react/src/experimental/Skeleton/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export {SkeletonBox} from './SkeletonBox'
export {SkeletonBox} from '../../Skeleton/SkeletonBox'
export {SkeletonText} from './SkeletonText'
export {SkeletonAvatar} from './SkeletonAvatar'
3 changes: 3 additions & 0 deletions packages/react/src/index.ts
Original file line number Diff line number Diff line change
@@ -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'