chore: Style Refactor Skeleton

Workday · Jan 2, 2025 · a356a7d · a356a7d
1 parent ca5fd6a
commit a356a7d
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 91 deletions.
diff --git a/modules/react/skeleton/lib/parts/skeletonHeader.tsx b/modules/react/skeleton/lib/parts/skeletonHeader.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
 
 import {SkeletonShape} from './skeletonShape';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface SkeletonHeaderProps {
   /**
@@ -23,26 +25,17 @@ export interface SkeletonHeaderProps {
   width?: number | string;
 }
 
-export const SkeletonHeader = createComponent('div')({
+const skeletonHeaderStyles = createStyles({
+  backgroundColor: system.color.border.caution.default, // gotta find the mapping for this
+  borderRadius: 0,
+  height: '28px',
+  width: '100%',
+  marginBottom: space.s,
+});
+
+export const SkeletonHeader = createComponent('div')<SkeletonHeaderProps>({
   displayName: 'Skeleton.Header',
-  Component: (
-    {
-      backgroundColor = colors.soap200,
-      height = '28px',
-      width = '100%',
-      ...elemProps
-    }: SkeletonHeaderProps,
-    ref,
-    Element
-  ) => (
-    <SkeletonShape
-      ref={ref}
-      as={Element}
-      backgroundColor={backgroundColor}
-      borderRadius={borderRadius.s}
-      height={height}
-      width={width}
-      {...elemProps}
-    />
+  Component: ({...elemProps}: SkeletonHeaderProps, ref, Element) => (
+    <SkeletonShape ref={ref} as={Element} cs={skeletonHeaderStyles} {...elemProps} />
   ),
 });
diff --git a/modules/react/skeleton/lib/parts/skeletonShape.tsx b/modules/react/skeleton/lib/parts/skeletonShape.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {createStyles, CSProps} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
-export interface SkeletonShapeProps {
+export interface SkeletonShapeProps extends CSProps {
   /**
    *  The width of the shape in `px` or `%`.
    * @default 100%
@@ -22,42 +24,22 @@ export interface SkeletonShapeProps {
   borderRadius?: number | string;
   /**
    * The background color of the skeleton
-   * @default soap200
+   * @default soap200 // this will be changed too
    */
   backgroundColor?: string;
 }
 
-const Shape = styled('div')<SkeletonShapeProps & StyledType>(
-  ({backgroundColor, borderRadius, height, width}) => ({
-    backgroundColor,
-    borderRadius,
-    height,
-    width,
-    marginBottom: space.s,
-  })
-);
+const skeletonShapeStyles = createStyles({
+  backgroundColor: system.color.border.caution.default, // gotta find the mapping for this
+  borderRadius: 0,
+  height: '100%',
+  width: '100%',
+  marginBottom: space.s,
+});
 
 export const SkeletonShape = createComponent('div')({
   displayName: 'Skeleton.Shape',
-  Component: (
-    {
-      backgroundColor = colors.soap200,
-      borderRadius = 0,
-      height = '100%',
-      width = '100%',
-      ...elemProps
-    }: SkeletonShapeProps,
-    ref,
-    Element
-  ) => (
-    <Shape
-      ref={ref}
-      as={Element}
-      backgroundColor={backgroundColor}
-      borderRadius={borderRadius}
-      height={height}
-      width={width}
-      {...elemProps}
-    />
-  ),
+  Component: ({...elemProps}: SkeletonShapeProps, ref, Element) => {
+    return <Element ref={ref} {...mergeStyles(elemProps, skeletonShapeStyles)}></Element>;
+  },
 });
diff --git a/modules/react/skeleton/lib/parts/skeletonText.tsx b/modules/react/skeleton/lib/parts/skeletonText.tsx
@@ -1,12 +1,9 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 
-import {createComponent, filterOutProps, StyledType} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
-
-const TextContainer = styled('div')<StyledType>({
-  marginBottom: space.m,
-});
+import {createStyles} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface SkeletonTextProps {
   /**
@@ -21,21 +18,33 @@ export interface SkeletonTextProps {
   backgroundColor?: string;
 }
 
-const Line = styled('div', {
-  shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
-})<
-  {
-    backgroundColor: string;
-    width: number | string;
-  } & StyledType
->(({backgroundColor, width}) => {
-  return {
-    backgroundColor,
-    width,
-    borderRadius: borderRadius.s,
-    height: '21px',
-    marginBottom: space.xs,
-  };
+export interface SkeletonTextLineProps {
+  /**
+   * The width of the line in `px` or `%`.
+   */
+  width?: number | string;
+  /**
+   * The background color of the skeleton
+   * @default soap200
+   */
+  backgroundColor?: string;
+}
+
+const textContainerStyle = createStyles({
+  marginBottom: space.s,
+});
+
+const skeletonTextLineStyles = createStyles({
+  borderRadius: borderRadius.s,
+  height: '21px',
+  marginBottom: space.xs,
+});
+
+const Line = createComponent('div')<SkeletonTextLineProps>({
+  displayName: 'Skeleton.TextLine',
+  Component: ({...elemProps}, ref, Element) => (
+    <Element ref={ref} {...mergeStyles(elemProps, skeletonTextLineStyles)} />
+  ),
 });
 
 const createTextLines = (lineCount: number, backgroundColor: string) => {
@@ -58,8 +67,8 @@ export const SkeletonText = createComponent('div')({
     Element
   ) =>
     lineCount <= 0 ? null : (
-      <TextContainer ref={ref} as={Element} {...elemProps}>
+      <Element ref={ref} {...mergeStyles(elemProps, textContainerStyle)}>
         {createTextLines(lineCount, backgroundColor)}
-      </TextContainer>
+      </Element>
     ),
 });
diff --git a/modules/react/skeleton/lib/skeleton.tsx b/modules/react/skeleton/lib/skeleton.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
-import styled from '@emotion/styled';
 
-import {accessibleHide, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {accessibleHide, createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles, keyframes} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {SkeletonHeader} from './parts/skeletonHeader';
 import {SkeletonShape} from './parts/skeletonShape';
@@ -22,21 +22,21 @@ export interface SkeletonProps {
   children?: React.ReactNode;
 }
 
-const AccessibleHide = styled('div')(accessibleHide);
+const accessibleHideStyles = createStyles({
+  ...accessibleHide,
+});
 
 const fade = keyframes({
   from: {opacity: 0.4},
   to: {opacity: 1},
 });
 
-const animation = `${fade} 0.8s linear infinite alternate`;
-
-const SkeletonAnimator = styled('div')<SkeletonProps & StyledType>({
-  animation,
+const skeletonAnimatorStyles = createStyles({
   overflow: 'hidden',
   width: '100%',
   height: '100%',
   position: 'relative',
+  animation: `${fade} 0.8s linear infinite alternate`,
 });
 
 /**
@@ -59,11 +59,10 @@ export const Skeleton = createComponent('div')({
     ref,
     Element
   ) => (
-    <SkeletonAnimator ref={ref} as={Element} {...elemProps}>
-      <AccessibleHide>{loadingAriaLabel}</AccessibleHide>
-
+    <Element ref={ref} {...mergeStyles(elemProps, skeletonAnimatorStyles)} {...elemProps}>
+      <Element {...mergeStyles(elemProps, accessibleHideStyles)}>{loadingAriaLabel}</Element>
       <div aria-hidden={true}>{children}</div>
-    </SkeletonAnimator>
+    </Element>
   ),
   subComponents: {
     /**