fix(AISkeleton): export ai skeleton, update dark theme tokens (carbon…

…-design-system#15991) * fix(AISkeleton): export AI Skeleton components * fix(AISkeleton): update tokens in dark themes * test(AISkeleton): update snapshots * chore(eslint): fix linting error
tay1orjones · Apr 24, 2024 · b5db13d · b5db13d
1 parent 10fec51
commit b5db13d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 5 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9700,6 +9700,42 @@ Map {
       },
     },
   },
+  "unstable__AiSkeletonIcon" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "style": Object {
+        "type": "object",
+      },
+    },
+  },
+  "unstable__AiSkeletonPlaceholder" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
+  "unstable__AiSkeletonText" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "heading": Object {
+        "type": "bool",
+      },
+      "lineCount": Object {
+        "type": "number",
+      },
+      "paragraph": Object {
+        "type": "bool",
+      },
+      "width": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable__ChatButton" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -246,6 +246,9 @@ describe('Carbon Components React', () => {
         "unstable_Pagination",
         "unstable_Text",
         "unstable_TextDirection",
+        "unstable__AiSkeletonIcon",
+        "unstable__AiSkeletonPlaceholder",
+        "unstable__AiSkeletonText",
         "unstable__ChatButton",
         "unstable__ChatButtonSkeleton",
         "unstable__FluidComboBox",

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -162,6 +162,11 @@ export {
   ChatButton as unstable__ChatButton,
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,
 } from './components/ChatButton';
+export {
+  AiSkeletonText as unstable__AiSkeletonText,
+  AiSkeletonIcon as unstable__AiSkeletonIcon,
+  AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
+} from './components/AiSkeleton';
 export * from './components/Stack';
 export * from './components/Tooltip';
 export {

diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
@@ -228,8 +228,8 @@ export const aiPopoverShadowOuter01 = rgba(black, 0.12);
 export const aiPopoverShadowOuter02 = rgba(black, 0.08);
 
 // AI skeleton
-export const aiSkeletonBackground = blue30;
-export const aiSkeletonElementBackground = blue80;
+export const aiSkeletonBackground = rgba(blue40, 0.5);
+export const aiSkeletonElementBackground = rgba(blue40, 0.3);
 
 // AI Modal tokens
 export const aiOverlay = rgba(black, 0.5);

diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
@@ -10,7 +10,6 @@ import {
   blue40,
   blue60,
   blue70,
-  blue80,
 
   // Gray
   gray10,
@@ -229,8 +228,8 @@ export const aiPopoverShadowOuter01 = rgba(black, 0.12);
 export const aiPopoverShadowOuter02 = rgba(black, 0.08);
 
 // AI skeleton
-export const aiSkeletonBackground = blue30;
-export const aiSkeletonElementBackground = blue80;
+export const aiSkeletonBackground = rgba(blue40, 0.5);
+export const aiSkeletonElementBackground = rgba(blue40, 0.3);
 
 // AI Modal tokens
 export const aiOverlay = rgba(black, 0.5);