[v12] feat(ui-tree-browser): TreeBrowser rework by git-nandor · Pull Request #2342 · instructure/instructure-ui

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

INSTUI-4818

Summary

Migrated TreeBrowser component from the old theming system.

Add controlled selection and hoverable prop to prevents visual conflicts when rendering custom interactive content.

hoverable?: boolean - Allows disabling hover effects on custom nodes
selection?: string - Controlled selection state
defaultSelection?: string - Initial selection for uncontrolled mode
onSelectionChange?: - Callback when selection changes

Test plan

On the documentation page, verify that everything displays and works correctly.
Check the new example of the Rendering custom items before and after nodes section

Co-Authored-By: 🤖 Claude


+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
Preview removed because the pull request was closed.
2026-01-29 09:26 UTC

matyasf

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

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

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.

hajnaldo

All looks good from the design side ✅

ToMESSKa · 2026-01-27T10:48:18Z

+
+  collectionIcon = {<BookCheckInstUIIcon />}
+  collectionIconExpanded = {XInstUIIcon}
+  itemIcon = {(props) => <UserInstUIIcon size={props.size} color={props.color} />}


I don't think props.size and props.color are valid here, they are undefined

Thanks, modified

ToMESSKa · 2026-01-27T11:23:27Z

+  _props: unknown,
+  sharedTokens: SharedTokens


Why isn't the type TreeBrowserProps? I think elsewhere this is properly typed even when unused.

ToMESSKa · 2026-01-27T11:39:11Z

If I hover on this node containing the TextInput, the line disappears.

git-nandor · 2026-01-27T12:28:06Z

If I hover on this node containing the TextInput, the line disappears.

Thanks! I talked to Ádám, and i fixed the line.

…selection and hoverable prop

git-nandor self-assigned this Jan 9, 2026

github-advanced-security AI 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

Comment thread docs/guides/upgrade-guide.md Outdated

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch 6 times, most recently from b3f8805 to 84b76f7 Compare January 22, 2026 15:03

hajnaldo approved these changes Jan 22, 2026

View reviewed changes

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch 2 times, most recently from 4f4374c to b0a8c40 Compare January 23, 2026 14:38

git-nandor requested a review from ToMESSKa January 27, 2026 08:41

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch from 41ced00 to 43d22c4 Compare January 27, 2026 09:03

ToMESSKa requested changes Jan 27, 2026

View reviewed changes

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch from 43d22c4 to 1ac0c60 Compare January 27, 2026 12:25

feat(ui-tree-browser): migrate to new theming system, add controlled …

85bc425

…selection and hoverable prop

git-nandor force-pushed the INSTUI-4818_treebrowser_rework_1 branch from 1ac0c60 to 85bc425 Compare January 27, 2026 12:31

git-nandor requested review from ToMESSKa and matyasf January 27, 2026 15:21

matyasf approved these changes Jan 28, 2026

View reviewed changes

ToMESSKa approved these changes Jan 28, 2026

View reviewed changes

git-nandor merged commit 50627e3 into v12 Jan 29, 2026
8 of 9 checks passed

git-nandor deleted the INSTUI-4818_treebrowser_rework_1 branch January 29, 2026 09:26

@@ -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)

Conversation

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

Uh oh!

Summary

Add controlled selection and hoverable prop to prevents visual conflicts when rendering custom interactive content.

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!

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Uh oh!

git-nandor commented Jan 20, 2026

Uh oh!

git-nandor commented Jan 20, 2026

Uh oh!

hajnaldo left a comment

Choose a reason for hiding this comment

Uh oh!

ToMESSKa Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

git-nandor Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ToMESSKa commented Jan 27, 2026

Uh oh!

git-nandor commented Jan 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

git-nandor commented Jan 9, 2026 •

edited

Loading

github-actions Bot commented Jan 9, 2026 •

edited

Loading

ToMESSKa commented Jan 20, 2026 •

edited

Loading

ToMESSKa Jan 27, 2026 •

edited

Loading