[v12] feat(ui-tree-browser): TreeBrowser rework #2342

git-nandor · 2026-01-09T09:08:39Z

INSTUI-4818

Summary

Migrated TreeBrowser component from the old theming system.

Test plan

On the documentation page, verify that everything displays and works correctly.

Co-Authored-By: 🤖 Claude

scripts/bootstrap.js


+function bootstrap() {
+  execSync(path.resolve('scripts/clean.js'), opts)


In general, to fix this class of problem you should avoid passing a single command string to child_process.execSync when any part of that string is dynamic. Instead, either (1) use execFileSync with the executable and its arguments passed as separate parameters, or (2) if you need to run a Node script, invoke process.execPath (the Node binary) with the script path as an argument, again using an argument array. This way, the shell is not involved and dynamic values are not interpreted as shell syntax.

For this file, the best fix is to change the bootstrap function so it no longer passes the resolved script path as a shell command string. A simple, behavior-preserving change is:

Call execFileSync instead of execSync.

Use process.execPath as the command (the current Node executable).

Pass [path.resolve('scripts/clean.js')] as the argument array.

Keep opts unchanged so stdio: 'inherit' behavior is preserved.

We also need to import execFileSync from child_process alongside the existing execSync and fork imports. All changes are confined to scripts/bootstrap.js:

At the top, extend the destructuring require to include execFileSync.

In bootstrap(), replace execSync(path.resolve('scripts/clean.js'), opts) with execFileSync(process.execPath, [path.resolve('scripts/clean.js')], opts).

github-actions · 2026-01-09T15:29:58Z

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2342/
Built to branch `gh-pages` at 2026-01-20 18:34 UTC. Preview will be ready when the GitHub Pages deployment is complete.

matyasf

Can you also update the example in the regression test to use the new icons?

packages/ui-tree-browser/src/TreeBrowser/README.md

docs/guides/upgrade-guide.md

matyasf · 2026-01-13T12:58:08Z

packages/ui-tree-browser/src/TreeBrowser/TreeButton/index.tsx

+      const iconElement = isValidElement(icon)
+        ? safeCloneElement(icon, { size, color: iconColor })
+        : callRenderProp(icon, { size, color: iconColor })


We should come up with a pattern for this... @joyenjoyer FYI

packages/ui-tree-browser/src/TreeBrowser/TreeButton/index.tsx

packages/ui-tree-browser/src/TreeBrowser/TreeCollection/styles.ts

matyasf

looks good!

ToMESSKa · 2026-01-20T15:28:34Z

here the text-background contrast ratio seem a bit off

ToMESSKa · 2026-01-20T15:37:06Z

In v11, the TextInput's focus ring is visible when I click into the input field:

But here it is not:

ToMESSKa · 2026-01-20T15:51:19Z

I dark mode and with hover, the text is not really visible

ToMESSKa

see my comments

ToMESSKa · 2026-01-20T16:00:56Z

docs/guides/upgrade-guide.md

+  - `iconsMarginRightSmall` (new)
+  - `iconsMarginRightMedium` (new)
+  - `iconsMarginRightLarge` (new)


Are we supposed to put the new tokens into the upgrade guide? I think only the renamed or removed ones are relevant?

git-nandor · 2026-01-20T18:04:48Z

here the text-background contrast ratio seem a bit off

This is just an example of the custom content, but I updated the color to make it more visible in all cases.

git-nandor · 2026-01-20T18:16:04Z

I dark mode and with hover, the text is not really visible

Thanks! I talked to Ádám, and he’s going to change the tokens.

git-nandor self-assigned this Jan 9, 2026

github-advanced-security bot found potential problems Jan 9, 2026

View reviewed changes

git-nandor changed the base branch from master to v12 January 9, 2026 09:12

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch 3 times, most recently from 6abd48e to ee0bed7 Compare January 9, 2026 15:25

git-nandor marked this pull request as ready for review January 10, 2026 11:03

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch from ee0bed7 to 8f81f6f Compare January 10, 2026 12:03

git-nandor changed the title ~~Inst UI 4818 treebrowser rework 1~~ [v12] feat(ui-tree-browser): TreeBrowser rework Jan 10, 2026

git-nandor requested review from ToMESSKa and matyasf January 10, 2026 13:00

matyasf requested changes Jan 13, 2026

View reviewed changes

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch 7 times, most recently from b8e26a4 to ae7c1ea Compare January 16, 2026 10:21

git-nandor requested a review from matyasf January 16, 2026 11:13

matyasf requested a review from hajnaldo January 19, 2026 15:38

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch from ae7c1ea to e394b93 Compare January 19, 2026 19:28

matyasf approved these changes Jan 20, 2026

View reviewed changes

ToMESSKa requested changes Jan 20, 2026

View reviewed changes

ToMESSKa reviewed Jan 20, 2026

View reviewed changes

feat(ui-tree-browser): migrate to new theming system

ef34995

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch from e394b93 to ef34995 Compare January 20, 2026 18:29

@@ -24,7 +24,7 @@
              * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
              * SOFTWARE.
              */
-            const { execSync, fork } = require('child_process')
+            const { execSync, execFileSync, fork } = require('child_process')
             const path = require('path')
             const opts = { stdio: 'inherit' }
@@ -65,7 +65,7 @@
             }
             function bootstrap() {
-              execSync(path.resolve('scripts/clean.js'), opts)
+              execFileSync(process.execPath, [path.resolve('scripts/clean.js')], opts)
               buildProject()
             }


		function bootstrap() {
		execSync(path.resolve('scripts/clean.js'), opts)

[v12] feat(ui-tree-browser): TreeBrowser rework #2342

Are you sure you want to change the base?

[v12] feat(ui-tree-browser): TreeBrowser rework #2342

Conversation

git-nandor commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

Check warning

Copilot Autofix

github-actions bot commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-01-20 18:34 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

matyasf Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

ToMESSKa commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ToMESSKa commented Jan 20, 2026

Uh oh!

ToMESSKa commented Jan 20, 2026

Uh oh!

ToMESSKa left a comment

Choose a reason for hiding this comment

Uh oh!

ToMESSKa Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

git-nandor commented Jan 20, 2026

Uh oh!

git-nandor commented Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

git-nandor commented Jan 9, 2026 •

edited

Loading

github-actions bot commented Jan 9, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-01-20 18:34 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

ToMESSKa commented Jan 20, 2026 •

edited

Loading