Skip to content

docs: Update Storybook default theme#4021

Open
sheelah wants to merge 7 commits into
Workday:prerelease/majorfrom
sheelah:update-storybook-default-theme
Open

docs: Update Storybook default theme#4021
sheelah wants to merge 7 commits into
Workday:prerelease/majorfrom
sheelah:update-storybook-default-theme

Conversation

@sheelah

@sheelah sheelah commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixes: #4020.

Updates Storybook to use Roboto by default, instead of Sana Sans, and not set data-theme=* on Storybook chrome (sidebar, component canvas, etc). For now on, data-theme is only set on the Storybook canvas (wrapper for each component story) when the user toggles the theme to "Sana Canvas".

Also includes a bit of a hack to hide the Sana Canvas theme toggle in docs view of Storybook.

Release Category

Documentation

Release Note

Optional release note message. Changelog and release summaries will contain a pull request title. This section will add additional notes under that title. This section is not a summary, but something extra to point out in release notes. An example might be calling out breaking changes in a labs component or minor visual changes that need visual regression updates. Remove this section if no additional release notes are required.

BREAKING CHANGES

Optional breaking changes message. If your PR includes breaking changes. It is extremely rare to put breaking changes outside a prerelease/major branch. Anything in this section will show up in release notes. Remove this section if no breaking changes are present.


Checklist

For the Reviewer

  • PR title is short and descriptive
  • PR summary describes the change (Fixes/Resolves linked correctly)
  • PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
  • Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Areas for Feedback? (optional)

  • Code
  • Documentation
  • Testing
  • Codemods

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

Summary by CodeRabbit

  • New Features
    • Updated Storybook and preview styling to use the new local typography, including Roboto and Sana Sans, for a more consistent look.
    • Added theme-aware canvas styling so the canvas can match the selected theme.
  • Bug Fixes
    • Refined the docs view to hide the theme toggle where it isn’t needed.

@sheelah sheelah requested a review from a team as a code owner June 24, 2026 23:37
@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e12df9a7-415c-449e-81ba-e6d9321a87c7

📥 Commits

Reviewing files that changed from the base of the PR and between a44e096 and 4d38ac3.

📒 Files selected for processing (1)
  • modules/react/fonts/lib/fonts.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • modules/react/fonts/lib/fonts.ts

📝 Walkthrough

Walkthrough

Storybook heads now load local Sana Sans assets and a shared type stylesheet. The stylesheet defines Roboto, Roboto Mono, and Sana Sans faces plus a sana-canvas font variable. Storybook theme config and CanvasProviderDecorator now use explicit Roboto stacks and a conditional canvas data-theme.

Changes

Storybook font and theme wiring

Layer / File(s) Summary
Head font assets
.storybook/manager-head.html, .storybook/preview-head.html, .storybook/updated-type.css, modules/react/fonts/lib/fonts.ts
Storybook chrome preloads Sana Sans and includes updated-type.css; the stylesheet adds Roboto, Roboto Mono, and Sana Sans faces plus the sana-canvas font variable, and the shared font export switches fontWeight to string ranges.
Theme wiring
.storybook/theme.js, utils/storybook/CanvasProviderDecorator.tsx
theme.js uses explicit Roboto font stacks for fontBase and fontCode, and CanvasProviderDecorator maps the selected Storybook theme to data-theme="sana-canvas".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • Workday/canvas-kit#3960: Updates the same Storybook font loading and theme wiring files, including manager-head.html, preview-head.html, theme.js, and updated-type.css.

Suggested labels

review in progress

Suggested reviewers

  • alanbsmith
  • RayRedGoose

Poem

A bunny hopped through Storybook glow,
With Sana Sans in a tidy row.
Roboto warmed the page by night,
And canvas themes switched just right. 🐇

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is concise and accurately describes the Storybook theme update.
Linked Issues check ✅ Passed The changes remove the default Storybook data-theme application and only set it for Sana Canvas when selected, matching #4020.
Out of Scope Changes check ✅ Passed All file changes stay within Storybook theme/font behavior needed to support the theme update; no unrelated changes are apparent.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sheelah sheelah changed the base branch from master to prerelease/major June 24, 2026 23:37
font-family: 'Roboto', sans-serif;
}

/* Hide the theme toggle button in docs view as it cannot toggle individual stories' themes */

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of a hack but does hide the theme toggle in docs view. We could also just leave this out if preferred.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.storybook/preview-head.html:
- Around line 8-12: The default Canvas theme is using
var(--cnvs-sys-font-family-default) without that variable being defined when
CanvasProviderDecorator.tsx does not set a data-theme. Fix this by either adding
a default --cnvs-sys-font-family-default value in updated-type.css for the
standard theme, or by scoping the html/body font-family rule in
preview-head.html to [data-theme='sana-canvas'] so it only applies when the
variable is present.

In @.storybook/updated-type.css:
- Line 2: Stylelint is flagging unnecessary quotes around the font family name
in the updated type stylesheet. Update the `font-family` declarations in
`updated-type.css` to use `Roboto` without quotes wherever it appears, including
the repeated rules referenced by the reviewer. Keep the rest of the typography
styles unchanged and ensure the `font-family-name-quotes` violations are
removed.

In `@modules/codemod/lib/v16/utils/getImportRenameMap.ts`:
- Around line 36-43: The `root.find` predicate in `getImportRenameMap` is unsafe
because it reads `node.arguments[0].type` before confirming any arguments exist,
so a bare `styled()` call can crash the codemod. Update the `CallExpression`
guard to first verify `node.arguments` is non-empty before checking the first
argument’s `type`, while keeping the existing `styled` identifier match and
`Identifier` argument requirement.

In `@modules/react/fonts/lib/fonts.ts`:
- Line 1: The `fontWeight` range used in the font-face CSSObject is being
serialized incorrectly, so update the font definition in `fonts.ts` to use the
proper space-separated variable font range syntax instead of an array that
becomes a comma-separated string. Keep `CSSObject` imported from
`@emotion/styled` and adjust the `@font-face` object to match the rest of the
font declarations in this module, using the relevant font-face helper/constant
names to locate the affected entry.

In `@package.json`:
- Line 143: The dependency pin in package.json is using the pre-release
`@workday/canvas-tokens-web` 4.4.0-beta.0, so verify that this beta version is
intentional for the release and keep it aligned across package.json,
modules/docs/package.json, modules/labs-react/package.json, and
modules/preview-react/package.json. If this is temporary, update the shared
dependency entries together when the beta is finalized or replaced so all
packages stay in lockstep.
- Line 6: The listed .js files are still using CommonJS syntax even though the
repo root is ESM via package.json’s type setting, so update each affected module
to be compatible by either converting the file to ESM import/export, renaming it
to .cjs, or adding a nested package.json with type commonjs. Focus on the
identified files such as eslint.config.js, modules/docs/utils/build-docs.js,
modules/docs/webpack/extract-exports.js, and utils/update-changelog.js, and
remove any require/module.exports usage so build and lint can run without
require being undefined.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 445e7e98-5d1c-4e70-bf12-2ebb0c1bfea4

📥 Commits

Reviewing files that changed from the base of the PR and between 2362189 and a44e096.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (37)
  • .storybook/manager-head.html
  • .storybook/preview-head.html
  • .storybook/preview.js
  • .storybook/theme.js
  • .storybook/updated-type.css
  • cypress/support/component-index.html
  • modules/codemod/index.js
  • modules/codemod/lib/v16/index.ts
  • modules/codemod/lib/v16/spec/expectTransformFactory.ts
  • modules/codemod/lib/v16/utils/getImportRenameMap.ts
  • modules/docs/lib/stackblitzFiles/main.tsx
  • modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
  • modules/docs/package.json
  • modules/labs-react/package.json
  • modules/preview-react/package.json
  • modules/react/card/lib/Card.tsx
  • modules/react/card/lib/CardHeading.tsx
  • modules/react/common/lib/styles/cornerShape.ts
  • modules/react/common/lib/styles/index.ts
  • modules/react/fonts/README.md
  • modules/react/fonts/index.ts
  • modules/react/fonts/lib/fonts.ts
  • modules/react/fonts/stories/mdx/Fonts.mdx
  • modules/react/fonts/stories/tsconfig.json
  • modules/react/icon/lib/AccentIcon.tsx
  • modules/react/icon/stories/examples/AccentIconList.tsx
  • modules/react/package.json
  • modules/react/popup/lib/Popup.tsx
  • modules/react/popup/lib/PopupHeading.tsx
  • modules/react/side-panel/stories/examples/AlwaysOpen.tsx
  • modules/react/side-panel/stories/examples/Basic.tsx
  • modules/styling-transform/package.json
  • modules/styling/package.json
  • package.json
  • utils/download-fonts.js
  • utils/forward-merge.js
  • utils/storybook/CanvasProviderDecorator.tsx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.storybook/preview-head.html:
- Around line 8-12: The default Canvas theme is using
var(--cnvs-sys-font-family-default) without that variable being defined when
CanvasProviderDecorator.tsx does not set a data-theme. Fix this by either adding
a default --cnvs-sys-font-family-default value in updated-type.css for the
standard theme, or by scoping the html/body font-family rule in
preview-head.html to [data-theme='sana-canvas'] so it only applies when the
variable is present.

In @.storybook/updated-type.css:
- Line 2: Stylelint is flagging unnecessary quotes around the font family name
in the updated type stylesheet. Update the `font-family` declarations in
`updated-type.css` to use `Roboto` without quotes wherever it appears, including
the repeated rules referenced by the reviewer. Keep the rest of the typography
styles unchanged and ensure the `font-family-name-quotes` violations are
removed.

In `@modules/codemod/lib/v16/utils/getImportRenameMap.ts`:
- Around line 36-43: The `root.find` predicate in `getImportRenameMap` is unsafe
because it reads `node.arguments[0].type` before confirming any arguments exist,
so a bare `styled()` call can crash the codemod. Update the `CallExpression`
guard to first verify `node.arguments` is non-empty before checking the first
argument’s `type`, while keeping the existing `styled` identifier match and
`Identifier` argument requirement.

In `@modules/react/fonts/lib/fonts.ts`:
- Line 1: The `fontWeight` range used in the font-face CSSObject is being
serialized incorrectly, so update the font definition in `fonts.ts` to use the
proper space-separated variable font range syntax instead of an array that
becomes a comma-separated string. Keep `CSSObject` imported from
`@emotion/styled` and adjust the `@font-face` object to match the rest of the
font declarations in this module, using the relevant font-face helper/constant
names to locate the affected entry.

In `@package.json`:
- Line 143: The dependency pin in package.json is using the pre-release
`@workday/canvas-tokens-web` 4.4.0-beta.0, so verify that this beta version is
intentional for the release and keep it aligned across package.json,
modules/docs/package.json, modules/labs-react/package.json, and
modules/preview-react/package.json. If this is temporary, update the shared
dependency entries together when the beta is finalized or replaced so all
packages stay in lockstep.
- Line 6: The listed .js files are still using CommonJS syntax even though the
repo root is ESM via package.json’s type setting, so update each affected module
to be compatible by either converting the file to ESM import/export, renaming it
to .cjs, or adding a nested package.json with type commonjs. Focus on the
identified files such as eslint.config.js, modules/docs/utils/build-docs.js,
modules/docs/webpack/extract-exports.js, and utils/update-changelog.js, and
remove any require/module.exports usage so build and lint can run without
require being undefined.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 445e7e98-5d1c-4e70-bf12-2ebb0c1bfea4

📥 Commits

Reviewing files that changed from the base of the PR and between 2362189 and a44e096.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (37)
  • .storybook/manager-head.html
  • .storybook/preview-head.html
  • .storybook/preview.js
  • .storybook/theme.js
  • .storybook/updated-type.css
  • cypress/support/component-index.html
  • modules/codemod/index.js
  • modules/codemod/lib/v16/index.ts
  • modules/codemod/lib/v16/spec/expectTransformFactory.ts
  • modules/codemod/lib/v16/utils/getImportRenameMap.ts
  • modules/docs/lib/stackblitzFiles/main.tsx
  • modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
  • modules/docs/package.json
  • modules/labs-react/package.json
  • modules/preview-react/package.json
  • modules/react/card/lib/Card.tsx
  • modules/react/card/lib/CardHeading.tsx
  • modules/react/common/lib/styles/cornerShape.ts
  • modules/react/common/lib/styles/index.ts
  • modules/react/fonts/README.md
  • modules/react/fonts/index.ts
  • modules/react/fonts/lib/fonts.ts
  • modules/react/fonts/stories/mdx/Fonts.mdx
  • modules/react/fonts/stories/tsconfig.json
  • modules/react/icon/lib/AccentIcon.tsx
  • modules/react/icon/stories/examples/AccentIconList.tsx
  • modules/react/package.json
  • modules/react/popup/lib/Popup.tsx
  • modules/react/popup/lib/PopupHeading.tsx
  • modules/react/side-panel/stories/examples/AlwaysOpen.tsx
  • modules/react/side-panel/stories/examples/Basic.tsx
  • modules/styling-transform/package.json
  • modules/styling/package.json
  • package.json
  • utils/download-fonts.js
  • utils/forward-merge.js
  • utils/storybook/CanvasProviderDecorator.tsx
🛑 Comments failed to post (6)
.storybook/preview-head.html (1)

8-12: 🎯 Functional Correctness | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify where --cnvs-sys-font-family-default is declared and whether a default (e.g., :root/body/canvas wrapper) exists.
rg -n -- '--cnvs-sys-font-family-default' .storybook modules utils

# Inspect preview/theme wiring files for default theme variable assignment paths.
fd -i 'preview.js|theme.js|CanvasProviderDecorator.tsx' .storybook utils modules | xargs -I{} sh -c 'echo "=== {} ==="; sed -n "1,220p" "{}"'

Repository: Workday/canvas-kit

Length of output: 7290


Fix missing font-family fallback for default Canvas theme

The variable --cnvs-sys-font-family-default is declared only under [data-theme='sana-canvas'] in updated-type.css, but preview-head.html applies var(--cnvs-sys-font-family-default) unconditionally to the html and body elements.

For the default 'Canvas' theme, CanvasProviderDecorator.tsx does not set a data-theme attribute, leaving the variable undefined. This results in the font family falling back to browser defaults rather than the expected Workday font stack.

Please either:

  1. Add a default definition for --cnvs-sys-font-family-default in updated-type.css (unscoped or :root) for the standard Canvas theme, or
  2. Scope the font-family rule in preview-head.html to [data-theme='sana-canvas'].
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.storybook/preview-head.html around lines 8 - 12, The default Canvas theme
is using var(--cnvs-sys-font-family-default) without that variable being defined
when CanvasProviderDecorator.tsx does not set a data-theme. Fix this by either
adding a default --cnvs-sys-font-family-default value in updated-type.css for
the standard theme, or by scoping the html/body font-family rule in
preview-head.html to [data-theme='sana-canvas'] so it only applies when the
variable is present.
.storybook/updated-type.css (1)

2-2: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Fix Stylelint violations for font-family quoting.

Stylelint reports errors on Line 2, Line 9, Line 17, and Line 24 (font-family-name-quotes). Remove unnecessary quotes around Roboto.

Proposed fix
-  font-family: 'Roboto';
+  font-family: Roboto;
...
-  font-family: 'Roboto';
+  font-family: Roboto;
...
-  font-family: 'Roboto';
+  font-family: Roboto;
...
-  font-family: 'Roboto';
+  font-family: Roboto;

Also applies to: 9-9, 17-17, 24-24

🧰 Tools
🪛 Stylelint (17.13.0)

[error] 2-2: Expected no quotes around "Roboto" (font-family-name-quotes)

(font-family-name-quotes)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.storybook/updated-type.css at line 2, Stylelint is flagging unnecessary
quotes around the font family name in the updated type stylesheet. Update the
`font-family` declarations in `updated-type.css` to use `Roboto` without quotes
wherever it appears, including the repeated rules referenced by the reviewer.
Keep the rest of the typography styles unchanged and ensure the
`font-family-name-quotes` violations are removed.

Source: Linters/SAST tools

modules/codemod/lib/v16/utils/getImportRenameMap.ts (1)

36-43: 🩺 Stability & Availability | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Inspect existing getImportRenameMap implementations across codemod versions
fd getImportRenameMap.ts modules/codemod --exec sh -c 'echo "=== {} ==="; sed -n "30,60p" "{}"'

Repository: Workday/canvas-kit

Length of output: 10033


Guard against zero-argument styled() calls

The find predicate evaluates node.arguments[0].type without first ensuring the arguments array is non-empty. A bare styled() call in the source code causes node.arguments[0] to be undefined, leading to a TypeError when accessing .type and crashing the codemod. This unsafe pattern is historically consistent across v5–v15 but requires fixing here to ensure stability.

Proposed Fix
     .find(
       j.CallExpression,
       (node: CallExpression) =>
         node.callee.type === 'Identifier' &&
         node.callee.name === 'styled' &&
+        node.arguments.length > 0 &&
         node.arguments[0].type === 'Identifier'
     )
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  root
    .find(
      j.CallExpression,
      (node: CallExpression) =>
        node.callee.type === 'Identifier' &&
        node.callee.name === 'styled' &&
        node.arguments.length > 0 &&
        node.arguments[0].type === 'Identifier'
    )
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@modules/codemod/lib/v16/utils/getImportRenameMap.ts` around lines 36 - 43,
The `root.find` predicate in `getImportRenameMap` is unsafe because it reads
`node.arguments[0].type` before confirming any arguments exist, so a bare
`styled()` call can crash the codemod. Update the `CallExpression` guard to
first verify `node.arguments` is non-empty before checking the first argument’s
`type`, while keeping the existing `styled` identifier match and `Identifier`
argument requirement.
modules/react/fonts/lib/fonts.ts (1)

1-1: 🎯 Functional Correctness | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify existing project contract for CSSObject import and `@font-face` weight style usage
rg -n "import\s+\{CSSObject\}\s+from\s+'`@emotion/`(react|styled)'" modules
rg -n "fontWeight:\s*\[[^]]+\]" modules/react/fonts
rg -n "fontWeight:\s*'100 700'|font-weight:\s*100 700" modules .storybook cypress

Repository: Workday/canvas-kit

Length of output: 1184


Fix @font-face font-weight range syntax.

The CSS Object literal fontWeight: [100, 700] for variable fonts is incorrect for Emotion; it serializes to a comma-separated string (e.g., "100, 700") rather than the required space-separated CSS range syntax ("100 700"). Consistent with the rest of the codebase, CSSObject should be imported from @emotion/styled.

--- a/modules/react/fonts/lib/fonts.ts
@@ -7,7 +7,7 @@ const face = {
     fontFamily: '"Work Sans", sans-serif',
     fontStyle: 'normal',
     fontWeight: [100, 700],
     fontDisplay: 'swap',
@@ -15,7 +15,7 @@ const face = {
     fontFamily: '"Work Sans", sans-serif',
     fontStyle: 'normal',
     fontWeight: [100, 700],
     fontDisplay: 'swap',
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@modules/react/fonts/lib/fonts.ts` at line 1, The `fontWeight` range used in
the font-face CSSObject is being serialized incorrectly, so update the font
definition in `fonts.ts` to use the proper space-separated variable font range
syntax instead of an array that becomes a comma-separated string. Keep
`CSSObject` imported from `@emotion/styled` and adjust the `@font-face` object
to match the rest of the font declarations in this module, using the relevant
font-face helper/constant names to locate the affected entry.
package.json (2)

6-6: 🩺 Stability & Availability | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find .js files that still use CommonJS constructs and would break under "type":"module".
# Excludes .cjs (already opted out) and vendored dirs.
rg -nP --type=js -g '!**/node_modules/**' -g '!**/dist/**' \
  '\b(module\.exports|exports\.[A-Za-z_]|require\s*\(|__dirname|__filename)\b' \
  | head -200

echo "----- nested package.json type overrides -----"
fd -t f 'package.json' -E node_modules | xargs -I{} sh -c 'echo "== {} =="; jq -r ".type // \"(none)\"" {} 2>/dev/null'

Repository: Workday/canvas-kit

Length of output: 156


🏁 Script executed:

#!/bin/bash
# 1. Check for CJS-like usage in .js files, ignoring node_modules/dist
echo "=== Potential CJS usage in .js files ==="
rg --type=js -g '!**/node_modules/**' -g '!**/dist/**' '\b(module\.exports|exports\.|require\(|__dirname|__filename)\b' -l --max-count 50 || echo "No matches found or limit reached."

echo -e "\n=== Nested package.json type overrides (looking for commonjs) ==="
# Find all package.json files, extract type, and filter for commonjs
fd -t f 'package.json' --exclude node_modules | while read -r file; do
    type=$(jq -r '.type // empty' "$file" 2>/dev/null)
    if [ "$type" = "commonjs" ]; then
        echo "$file (type: commonjs)"
    fi
done | head -20

echo -e "\n=== Checking specific config files ==="
rg --files --glob '*.config.js' | while read -r file; do
    if grep -q "module.exports\|require(" "$file" 2>/dev/null; then
        echo "Config file $file contains CJS syntax"
        head -5 "$file"
    fi
done 2>/dev/null | head -10

Repository: Workday/canvas-kit

Length of output: 205


🏁 Script executed:

#!/bin/bash
# Read the log file generated in the previous turn
LOGFILE="/tmp/coderabbit-shell-logs/shell-output-HDZB1s"
echo "=== First 50 lines of log file ==="
head -n 100 "$LOGFILE"

echo -e "\n=== Checking for matches in the log ==="
grep -A 1 "Potential CJS" "$LOGFILE" | tail -n +2 | grep -E "\.(js)" | head -20

Repository: Workday/canvas-kit

Length of output: 281


🏁 Script executed:

python3 - <<'PY'
import os
import re

# Directories to exclude
exclusions = {'node_modules', 'dist', '.git', 'storybook-static', 'coverage', 'build'}

# Pattern for CommonJS keywords
pattern = re.compile(r'\b(module\.exports|exports\.|require\s*\(|__dirname|__filename)\b')

js_cjs_files = []
js_commonjs_overrides = []

# Traverse repository
for root, dirs, files in os.walk('.'):
    # Prune exclusion dirs
    dirs[:] = [d for d in dirs if d not in exclusions]
    
    for file in files:
        if file.endswith('.js'):
            filepath = os.path.join(root, file)
            try:
                with open(filepath, 'r', encoding='utf-8', errors='ignore') as f:
                    content = f.read(10000) # Read first 10k chars to catch imports/exports at top
                    if pattern.search(content):
                        js_cjs_files.append(filepath)
            except Exception:
                pass
        
        if file == 'package.json':
            filepath = os.path.join(root, file)
            try:
                with open(filepath, 'r', encoding='utf-8') as f:
                    import json
                    try:
                        pkg = json.load(f)
                        if pkg.get('type') == 'commonjs':
                            js_commonjs_overrides.append(filepath)
                    except json.JSONDecodeError:
                        pass
            except Exception:
                pass

print(f"Total .js files with CJS syntax found: {len(js_cjs_files)}")
print(f"Total nested package.json with 'type: commonjs': {len(js_commonjs_overrides)}")

if js_cjs_files:
    print("\n--- Found CJS .js files (Potential issues if root is 'type: module') ---")
    for f in js_cjs_files[:50]: # Limit to first 50
        print(f)
    
    if len(js_cjs_files) > 50:
        print(f"... and {len(js_cjs_files) - 50} more files.")

if js_commonjs_overrides:
    print("\n--- Found nested 'type: commonjs' overrides ---")
    for f in js_commonjs_overrides[:20]:
        print(f)
PY

Repository: Workday/canvas-kit

Length of output: 843


Fix CommonJS syntax compatibility issues in 15 .js files.

The root package.json sets "type": "module", but the following 15 files contain CommonJS syntax (e.g., require, module.exports) and lack corresponding "type": "commonjs" overrides or .cjs extensions. These will fail with ReferenceError: require is not defined during build or lint steps.

./eslint.config.js
./cypress/plugins/index.js
./modules/codemod/index.js
./modules/docs/docgen/createDocProgram.js
./modules/docs/utils/build-docs.js
./modules/docs/utils/build-mdx.js
./modules/docs/utils/build-specifications.js
./modules/docs/utils/get-component-prop-map.js
./modules/docs/utils/get-specifications.js
./modules/docs/webpack/extract-exports.js
./modules/docs/webpack/inject-module-name-loader.js
./utils/check-lockfile.js
./utils/download-fonts.js
./utils/replace-version.js
./utils/update-changelog.js

Ensure these are migrated to ESM (using import/export), renamed to .cjs, or protected by a nested package.json with "type": "commonjs".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package.json` at line 6, The listed .js files are still using CommonJS syntax
even though the repo root is ESM via package.json’s type setting, so update each
affected module to be compatible by either converting the file to ESM
import/export, renaming it to .cjs, or adding a nested package.json with type
commonjs. Focus on the identified files such as eslint.config.js,
modules/docs/utils/build-docs.js, modules/docs/webpack/extract-exports.js, and
utils/update-changelog.js, and remove any require/module.exports usage so build
and lint can run without require being undefined.

143-143: 🔒 Security & Privacy | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Confirm the version exists on the registry and list any newer GA/beta.
curl -s https://registry.npmjs.org/@workday/canvas-tokens-web | jq '{latest: .["dist-tags"], hasVersion: (.versions["4.4.0-beta.0"] != null)}'

Repository: Workday/canvas-kit

Length of output: 280


🏁 Script executed:

#!/bin/bash
# Verify if the version 4.4.0-beta.0 is present in the other package.json files mentioned
echo "Checking modules/docs/package.json:"
cat modules/docs/package.json | grep "`@workday/canvas-tokens-web`" || echo "Not found"

echo "Checking modules/labs-react/package.json:"
cat modules/labs-react/package.json | grep "`@workday/canvas-tokens-web`" || echo "Not found"

echo "Checking modules/preview-react/package.json:"
cat modules/preview-react/package.json | grep "`@workday/canvas-tokens-web`" || echo "Not found"

Repository: Workday/canvas-kit

Length of output: 429


Pinning to a pre-release version (4.4.0-beta.0) of @workday/canvas-tokens-web.

Beta versions are not guaranteed for production and may contain breaking changes. Confirm this is intentional for the release. Ensure this version remains in lockstep across package.json, modules/docs/package.json, modules/labs-react/package.json, and modules/preview-react/package.json when the beta is eventually finalized or replaced.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package.json` at line 143, The dependency pin in package.json is using the
pre-release `@workday/canvas-tokens-web` 4.4.0-beta.0, so verify that this beta
version is intentional for the release and keep it aligned across package.json,
modules/docs/package.json, modules/labs-react/package.json, and
modules/preview-react/package.json. If this is temporary, update the shared
dependency entries together when the beta is finalized or replaced so all
packages stay in lockstep.

@sheelah

sheelah commented Jun 24, 2026

Copy link
Copy Markdown
Contributor Author

@jamesfan I think your enhancement of adding a theme toggle button next to the "Show Code" button in the docs view would fit well in this PR if you want to add it in.

@sheelah sheelah added the ready for review Code is ready for review label Jun 24, 2026
@cypress

cypress Bot commented Jun 25, 2026

Copy link
Copy Markdown

Workday/canvas-kit    Run #11100

Run Properties:  status check passed Passed #11100  •  git commit fee6975648 ℹ️: Merge 73274233ed2554e457f8bb3c79642f6c554c569d into d6ad8e074e3198ed8ea07558a667...
Project Workday/canvas-kit
Branch Review update-storybook-default-theme
Run status status check passed Passed #11100
Run duration 02m 32s
Commit git commit fee6975648 ℹ️: Merge 73274233ed2554e457f8bb3c79642f6c554c569d into d6ad8e074e3198ed8ea07558a667...
Committer Sheelah Brennan
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 17
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 809
View all changes introduced in this branch ↗︎
UI Coverage  19.55%
  Untested elements 1537  
  Tested elements 371  
Accessibility  99.41%
  Failed rules  5 critical   5 serious   0 moderate   2 minor
  Failed elements 68  

@jamesfan

Copy link
Copy Markdown
Member

@jamesfan I think your enhancement of adding a theme toggle button next to the "Show Code" button in the docs view would fit well in this PR if you want to add it in.

Suspending this work since it sounds like the Sana Theme will be the defacto theme for v16.

@RayRedGoose

Copy link
Copy Markdown
Contributor

Maybe we can close that, as we go without theme

@jsmbennett

Copy link
Copy Markdown

Just noting here that testing the legacy theme will be very important on the Kernel side, as DSR tokens are not applied in PREVIEW or PROD environments as of today, and is currently opt-in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready for review Code is ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Remove default theme setting in Storybook

4 participants