From 7490b0bb866a00ce7b323630a67b77b42e025408 Mon Sep 17 00:00:00 2001
From: Thu Nguyen <thuminhnguyen@berkeley.edu>
Date: Tue, 14 Jan 2025 09:31:57 -0800
Subject: [PATCH] Style Refactor Skeleton - Addressed Manny's comments

Updated Upgrade guide note
---
 modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx       |  22 ++++
 .../react/skeleton/lib/parts/SkeletonText.tsx | 113 +++++++-----------
 2 files changed, 62 insertions(+), 73 deletions(-)

diff --git a/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx
index 5cfdd9e15f..b7f411988c 100644
--- a/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx
@@ -18,6 +18,9 @@ any questions.
 
 - [Codemod](#codemod)
   - [Instructions](#instructions)
+- [Component Updates](#component-updates)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Skeleton](#skeleton)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -86,6 +89,25 @@ yarn remove @workday/canvas-kit-codemod
 > your project conventions.
 
 
+### Styling API and CSS Tokens
+
+Some components have been refactored to use our new
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+[styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The React interface **has not changed**, but CSS variables are now used for dynamic properties.
+
+> **Note:** These components also support our new `cs` prop for styling. Learn more about styling
+> with `cs` in our
+> [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
+
+### Skeleton
+
+**PR** [#2793](https://github.com/Workday/canvas-kit/pull/3088)
+
+Skeleton has been updated to use our new
+[styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil).
+
+
 ## Troubleshooting
 
 ## Glossary
diff --git a/modules/react/skeleton/lib/parts/SkeletonText.tsx b/modules/react/skeleton/lib/parts/SkeletonText.tsx
index 369a99df40..09d48cf8d6 100644
--- a/modules/react/skeleton/lib/parts/SkeletonText.tsx
+++ b/modules/react/skeleton/lib/parts/SkeletonText.tsx
@@ -1,14 +1,7 @@
 import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {
-  calc,
-  createStencil,
-  CSProps,
-  cssVar,
-  handleCsProp,
-  px2rem,
-} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 export interface SkeletonTextProps {
@@ -24,78 +17,52 @@ export interface SkeletonTextProps {
   backgroundColor?: string;
 }
 
-export interface SkeletonTextLineProps extends CSProps {
-  /**
-   * The width of the line in `px` or `%`.
-   */
-  width?: number | string;
-  /**
-   * The background color of the skeleton
-   * @default `system.color.bg.alt.strong`
-   */
-  backgroundColor?: string;
-  /**
-   * The borderRadius of the shape in `px` or `%`.
-   * @default 2px
-   */
-  borderRadius?: number | string;
-}
-
-const skeletonTextLineStencil = createStencil({
+export const skeletonTextStencil = createStencil({
   vars: {
-    width: '',
     backgroundColor: '',
-    borderRadius: '',
   },
-  base: ({width, borderRadius, backgroundColor}) => ({
-    backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
-    borderRadius: cssVar(borderRadius, calc.divide(system.space.x1, 2)), // borderRadius.s // 2px
-    height: cssVar(calc.subtract(system.space.x6, px2rem(3))),
-    width: width,
-    marginBottom: system.space.x3,
+  base: ({backgroundColor}) => ({
+    marginBottom: system.space.x6,
+    '& [data-part="skeleton-text-lines"], & [data-part="skeleton-text-single-or-last-line"]': {
+      backgroundColor: cssVar(backgroundColor, system.color.bg.alt.strong),
+      height: px2rem(21),
+      marginBlockEnd: system.space.x2,
+      borderRadius: system.shape.half,
+    },
+    '& [data-part="skeleton-text-lines"]': {
+      width: '100%',
+    },
+    '& [data-part="skeleton-text-single-or-last-line"]': {
+      width: '60%',
+    },
   }),
 });
 
-const textContainerStencil = createStencil({
-  base: () => ({
-    marginBottom: system.space.x4,
-  }),
-});
-
-const Line = createComponent('div')<SkeletonTextLineProps>({
-  displayName: 'Skeleton.TextLine',
-  Component: ({width, backgroundColor, ...elemProps}, ref, Element) => (
-    <Element
-      ref={ref}
-      {...handleCsProp(
-        elemProps,
-        skeletonTextLineStencil({
-          width: typeof width === 'number' ? px2rem(width) : width,
-          backgroundColor,
-        })
-      )}
-    />
-  ),
-});
-
-const createTextLines = (lineCount: number, backgroundColor?: string) => {
-  const lines = new Array(lineCount).fill(null);
-
-  return lines.map((_value, index) => (
-    <Line
-      key={index}
-      backgroundColor={backgroundColor}
-      width={index < lineCount - 1 || lineCount === 1 ? '100%' : '60%'}
-    />
-  ));
-};
-
 export const SkeletonText = createComponent('div')({
   displayName: 'Skeleton.Text',
-  Component: ({backgroundColor, lineCount = 2, ...elemProps}: SkeletonTextProps, ref, Element) =>
-    lineCount <= 0 ? null : (
-      <Element ref={ref} {...handleCsProp(elemProps, textContainerStencil())}>
-        {createTextLines(lineCount, backgroundColor)}
+  Component: ({backgroundColor, lineCount = 2, ...elemProps}: SkeletonTextProps, ref, Element) => {
+    const lines = new Array(lineCount).fill(null);
+    return lineCount <= 0 ? null : (
+      <Element
+        ref={ref}
+        {...handleCsProp(
+          elemProps,
+          skeletonTextStencil({
+            backgroundColor,
+          })
+        )}
+      >
+        {lines.map((_value, index) => (
+          <div
+            data-part={
+              index < lineCount - 1 || lineCount === 1
+                ? 'skeleton-text-lines'
+                : 'skeleton-text-single-or-last-line'
+            }
+            key={index}
+          ></div>
+        ))}
       </Element>
-    ),
+    );
+  },
 });