WIP: chore(SkeletonBox): promote to Alpha

.changeset/dirty-squids-train.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+WIP: chore(SkeletonBox): promote to Alpha

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

@@ -0,0 +1,4 @@
+.LoadingSkeleton {
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: 4px;
+}

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) => (
           <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>

packages/react/src/experimental/Skeleton/SkeletonBox.docs.json → 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",

packages/react/src/experimental/Skeleton/SkeletonBox.features.stories.tsx → 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<ComponentProps<typeof SkeletonBox>>
 

packages/react/src/experimental/Skeleton/SkeletonBox.stories.tsx → 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<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',
   },

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<HTMLDivElement>
+
+export const SkeletonBox = React.forwardRef<HTMLDivElement, SkeletonBoxProps>(function SkeletonBox(
+  {height, width, className, style, ...props},
+  ref,
+) {
+  return (
+    <div
+      className={clsx(className, classes.SkeletonBox)}
+      style={merge(
+        style as CSSProperties,
+        {
+          height,
+          width,
+        } as CSSProperties,
+      )}
+      {...props}
+      ref={ref}
+    />
+  )
+})

packages/react/src/experimental/Skeleton/__tests__/SkeletonBox.test.tsx → 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', () => {

packages/react/src/Skeleton/index.ts

@@ -0,0 +1,6 @@
+import {SkeletonBox} from './SkeletonBox'
+
+export default SkeletonBox
+export {SkeletonBox}
+
+export type {SkeletonBoxProps} from './SkeletonBox'

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

@@ -4,7 +4,7 @@
 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'
@@ -41,7 +41,7 @@
   const responsive = isResponsiveValue(size)
   const cssSizeVars = {} as Record<string, string>
   const enabled = useFeatureFlag(CSS_MODULE_FLAG)
   const avatarSx = responsive
     ? {
         ...getBreakpointDeclarations(
           size,
@@ -67,7 +67,7 @@
 
   return (
     <SkeletonBox
-      sx={enabled ? undefined : avatarSx}
+      // TODO: fix
       className={clsx(className, {[classes.SkeletonAvatar]: enabled})}
       {...rest}
       data-component="SkeletonAvatar"

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<HTMLProps<HTMLDivElement>, '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<SkeletonTextProps> = ({
   lines = 1,
   maxWidth,
@@ -84,20 +29,13 @@ export const SkeletonText: React.FC<SkeletonTextProps> = ({
   const enabled = useFeatureFlag(CSS_MODULE_FLAG)
 
   if (lines < 2) {
+    // TODO: fix
     return (
       <SkeletonBox
         data-component="SkeletonText"
         data-text-skeleton-size={size}
         width="100%"
         className={clsx(className, {[classes.SkeletonText]: enabled})}
-        sx={
-          enabled
-            ? {}
-            : {
-                maxWidth,
-                ...skeletonTextStyles,
-              }
-        }
         style={enabled ? merge(style as CSSProperties, {maxWidth} as CSSProperties) : style}
         {...rest}
       />
@@ -116,12 +54,12 @@ export const SkeletonText: React.FC<SkeletonTextProps> = ({
         style={enabled ? merge(style as CSSProperties, {maxWidth, paddingBlock: '0.1px'} as CSSProperties) : style}
       >
         {Array.from({length: lines}, (_, index) => (
+          // TODO: fix
           <SkeletonBox
             key={index}
             data-component="SkeletonText"
             data-in-multiline="true"
             data-text-skeleton-size={size}
-            sx={enabled ? {} : skeletonTextStyles}
             className={clsx(className, {[classes.SkeletonText]: enabled})}
             {...rest}
           />

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'

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'