Skip to content

docs(many): fix default theme variables sections on component doc pages#2573

Open
git-nandor wants to merge 1 commit into
INSTUI-5031_better_multiversion_support_for_docs_v2from
INSTUI-5045_fix_default_theme_variables_docs_rendering
Open

docs(many): fix default theme variables sections on component doc pages#2573
git-nandor wants to merge 1 commit into
INSTUI-5031_better_multiversion_support_for_docs_v2from
INSTUI-5045_fix_default_theme_variables_docs_rendering

Conversation

@git-nandor
Copy link
Copy Markdown
Contributor

@git-nandor git-nandor commented Jun 1, 2026

INSTUI-5045

Summary

Fixes the "Default Theme Variables" section on docs pages. The build script now generates theme data for all themes, and components that reuse another component's tokens are correctly linked to their theme, allowing the docs to display the right theme variables.

Test plan

  • Button, IconButton, CondensedButton, CloseButton — borrow BaseButton tokens via useTokensFrom
  • Modal.Header, Modal.Body, Modal.Footer — child tabs of compound Modal
  • Drilldown.Group — YAML frontmatter themeId: Options override
  • CheckboxFacade, ToggleFacade — point to Checkbox / Toggle
  • TreeBrowser.Button, TreeBrowser.Collection, TreeBrowser.Node — all share TreeBrowserTreeButton
  • TopNavBar.Brand, TopNavBar.Item, TopNavBar.MenuItems, TopNavBar.ActionItems, TopNavBarDesktopLayout, TopNavBarSmallViewportLayout — borrow TopNavBarLayout
  • NumberInput — functional component with useTokensFrom: 'TextInput' (manual themeId attachment)
  • Menu.Separator — props-free child; theme section still renders
  • Pagination.PageInput, SideNavBar.Item — borrowed-token edge cases

Co-Authored-By: 🤖 Claude

@git-nandor git-nandor self-assigned this Jun 1, 2026
@snyk-io
Copy link
Copy Markdown

snyk-io Bot commented Jun 1, 2026

Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 1, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2573/

Built to branch gh-pages at 2026-06-04 09:49 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 1, 2026

Visual regression report

No changes.

Status Count
Unchanged 32
Changed 0
New 0
Removed 0

📊 View full report

Baselines come from the visual-baselines branch. They refresh on every merge to master.

github-actions Bot pushed a commit that referenced this pull request Jun 1, 2026
@git-nandor git-nandor force-pushed the INSTUI-5045_fix_default_theme_variables_docs_rendering branch from f256daf to 8f72023 Compare June 1, 2026 14:51
@git-nandor git-nandor marked this pull request as ready for review June 1, 2026 15:07
@git-nandor git-nandor requested review from ToMESSKa and balzss June 1, 2026 15:07
@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Jun 2, 2026

If I'm on v11.7 Alert and change from canvas (legacy) from to canvas-high-contrast (legacy) and back to canvas (legacy) the tokens do to change back to the canvas (legacy) tokens

@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Jun 2, 2026

CloseButton displayed only 4 tokens on v10 and v11.6 but now displays much more. Is that on purpose?

@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Jun 2, 2026

In v11.6 Modal.Body has one token in the canvas theme, but it does not have any tokens in the canvas-high-contrast theme?

@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Jun 2, 2026

In v11.6 Drilldown, the Drilldown tokens do to change when I change the theme from canvas to canvas-high-contrast. Also in Drilldown.Group, the tokens show undefined in the canvas-high-contrast theme.
image

@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Jun 2, 2026

In Checkbox, v11.7, the Checkbox and the CheckboxFacade tabs have the same tokens, while in v11.6 and v10, the Checkbox tab has only 3 tokens?

@ToMESSKa
Copy link
Copy Markdown
Contributor

ToMESSKa commented Jun 2, 2026

Pagination.PageInput has a 3 tokens displayed in v11.7, but it does not have any tokens displayed in v11.6.

Copy link
Copy Markdown
Contributor

@ToMESSKa ToMESSKa left a comment

Choose a reason for hiding this comment

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

@git-nandor see my comments above

@git-nandor git-nandor force-pushed the INSTUI-5031_better_multiversion_support_for_docs_v2 branch 2 times, most recently from 7e3bad3 to a04f8e7 Compare June 3, 2026 08:41
@git-nandor git-nandor force-pushed the INSTUI-5045_fix_default_theme_variables_docs_rendering branch from 8f72023 to a98af82 Compare June 3, 2026 10:00
@git-nandor
Copy link
Copy Markdown
Contributor Author

CloseButton displayed only 4 tokens on v10 and v11.6 but now displays much more. Is that on purpose?

CloseButton/v1 exports its own generateComponentTheme, which contains only 4 tokens.
CloseButton/v2 receives the full 'BaseButton' token set because of @withStyleNew(generateStyle, 'BaseButton').

This may need a separate ticket, as it affects multiple components and there doesn't appear to be a straightforward fix.

@git-nandor
Copy link
Copy Markdown
Contributor Author

In Checkbox, v11.7, the Checkbox and the CheckboxFacade tabs have the same tokens, while in v11.6 and v10, the Checkbox tab has only 3 tokens?

CheckboxFacade: --> @withStyleNew(generateStyle, 'Checkbox')
Same issue as with CloseButton

@git-nandor
Copy link
Copy Markdown
Contributor Author

Pagination.PageInput has a 3 tokens displayed in v11.7, but it does not have any tokens displayed in v11.6.

Nice catch, thanks!
The bug was caused by the missing static PageInput property in v1.

@git-nandor git-nandor force-pushed the INSTUI-5045_fix_default_theme_variables_docs_rendering branch from a98af82 to 14a00d3 Compare June 3, 2026 21:20
@git-nandor git-nandor force-pushed the INSTUI-5031_better_multiversion_support_for_docs_v2 branch from a04f8e7 to 9618859 Compare June 4, 2026 08:46
@git-nandor git-nandor force-pushed the INSTUI-5045_fix_default_theme_variables_docs_rendering branch from 14a00d3 to 30e5d44 Compare June 4, 2026 09:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants