@workday/canvas-kit-docs 12.4.12 → 12.4.13

package/dist/mdx/TESTING.mdx

@@ -160,6 +160,31 @@ This will ensure snapshot tests have stable ids for each snapshot. It is still p
 changing if you add an additional component that uses id generation - subsequent ids will be
 different, but this will prevent snapshot tests that don't have any changes from showing diffs.
 
+The Canvas Kit Styling package uses CSS Variables and multiple class names with unique hashes.
+The following snapshot serializers handle styling. Setting unique seeds will not effect static style
+hashes because the styles are created before any test code is run. These serializers ignore the
+hashes instead.
+
+```ts
+// Handle `css-{hash}` class names
+const emotionClassnameRegex = /(css-[a-zA-Z0-9]{1,7})/g;
+expect.addSnapshotSerializer({
+  test: (val) => typeof val === "string" && emotionClassnameRegex.test(val),
+  print: (val) => {
+    return `"${val.replaceAll(emotionClassnameRegex, "css-xxxxx")}"`;
+  },
+});
+
+// Handle `--myVariableName-{hash}` CSS variables used by Stencils
+const cssVariableRegex = /(--([a-zA-Z-]+)-[a-zA-Z0-9]{1,7})/g;
+expect.addSnapshotSerializer({
+  test: (val) => typeof val === "string" && cssVariableRegex.test(val),
+  print: (val) => {
+    return `"${val.replaceAll(cssVariableRegex, "--$2-xxxxx")}"`;
+  },
+});
+```
+
 ## Functional tests
 
 Canvas Kit uses [Cypress](https://cypress.io) for browser-based behavior testing (additional info:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.4.12",
+  "version": "12.4.13",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.4.12",
-    "@workday/canvas-kit-preview-react": "^12.4.12",
-    "@workday/canvas-kit-react": "^12.4.12",
-    "@workday/canvas-kit-styling": "^12.4.12",
+    "@workday/canvas-kit-labs-react": "^12.4.13",
+    "@workday/canvas-kit-preview-react": "^12.4.13",
+    "@workday/canvas-kit-react": "^12.4.13",
+    "@workday/canvas-kit-styling": "^12.4.13",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "b73cb312dab3faa3e299ba39732135662c77c7ba"
+  "gitHead": "99d1efa4856ed23c7d238b277996adb35d914a70"
 }