[Fluent] Update NME to use fluent accordion for both nodeList and properties pane #16847

georginahalpern · 2025-07-03T16:07:31Z

Update nodeListComponent to conditionally use accordion
Update NME propertyTabComponents to use fluent accordion. This change required a bit of refactoring because the fluent accordion requires its first children to be the accordionItems, so in cases where we had wrappers around the LineContainer we would break the accordion. I thus had to push the accordion inside the individual fooPropertyTabComponent classes and in certain cases (ex: GenericProperties, InputProperties) where the properties were added dynamically, expose them via helper functions)
Minor styling changes

…undefined values, add stub for material in iv2

…into nmeFluent

sebavan · 2025-07-03T16:31:16Z

LGTM, but I ll let @ryantrem comment out.

bjsplat · 2025-07-03T17:44:32Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-07-03T18:09:50Z

Building or testing the sandbox has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T18:11:05Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T18:16:46Z

Graph tools CI has failed you can find the test results at:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T18:20:02Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

packages/dev/sharedUiComponents/src/components/propertyTabComponentBase.tsx

packages/dev/sharedUiComponents/src/fluent/hoc/pane.tsx

packages/dev/sharedUiComponents/src/fluent/hoc/propertyLine.tsx

packages/dev/sharedUiComponents/src/lines/draggableLineComponent.tsx

packages/tools/nodeEditor/src/graphSystem/properties/genericNodePropertyComponent.tsx

packages/tools/nodeEditor/src/graphSystem/properties/nodePortPropertyComponent.tsx

bjsplat · 2025-07-03T18:31:50Z

Snapshot stored with reference name:
refs/pull/16847/merge

Test environment:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/index.html

To test a playground add it to the URL, for example:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/16847/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/16847/merge
https://gui.babylonjs.com/?snapshot=refs/pull/16847/merge
https://nme.babylonjs.com/?snapshot=refs/pull/16847/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/16847/merge#BCU1XR#0

bjsplat · 2025-07-03T18:34:09Z

You have made possible changes to the playground.
You can test the snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/

The snapshot playground with the CDN snapshot (only when available):

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/?snapshot=refs/pull/16847/merge

Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly.

bjsplat · 2025-07-03T18:34:30Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/guiEditor/

bjsplat · 2025-07-03T18:35:40Z

You have changed file(s) that made possible changes to the sandbox.
You can test the sandbox snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16847/merge/

bjsplat · 2025-07-03T18:45:40Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/testResults/webgl2playwright/index.html

bjsplat · 2025-07-03T18:48:32Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/testResults/webgpuplaywright/index.html

bjsplat · 2025-07-03T21:04:48Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T21:05:45Z

Graph tools CI has failed you can find the test results at:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T21:05:56Z

Building or testing the sandbox has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T21:18:22Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-07-03T21:42:14Z

Building or testing the sandbox has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T21:42:58Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T21:49:27Z

Graph tools CI has failed you can find the test results at:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T22:40:55Z

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat · 2025-07-03T22:52:41Z

Snapshot stored with reference name:
refs/pull/16847/merge

Test environment:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/index.html

To test a playground add it to the URL, for example:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/16847/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/16847/merge
https://gui.babylonjs.com/?snapshot=refs/pull/16847/merge
https://nme.babylonjs.com/?snapshot=refs/pull/16847/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/16847/merge#BCU1XR#0

bjsplat · 2025-07-03T22:54:54Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/guiEditor/

bjsplat · 2025-07-03T22:55:15Z

You have changed file(s) that made possible changes to the sandbox.
You can test the sandbox snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16847/merge/

bjsplat · 2025-07-03T22:56:37Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-03T23:04:14Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/testResults/webgl2playwright/index.html

bjsplat · 2025-07-03T23:07:12Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/testResults/webgpuplaywright/index.html

bjsplat · 2025-07-03T23:22:15Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-04T15:06:46Z

Building or testing the playground has failed.

If the tests failed, results can be found here:
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/testResults/

bjsplat · 2025-07-07T14:49:10Z

You have changed file(s) that made possible changes to the sandbox.
You can test the sandbox snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/16847/merge/

bjsplat · 2025-07-07T14:53:04Z

You have made possible changes to one or more graph tools. To test the snapshots:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeGeometryEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/nodeRenderGraphEditor/
https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/TOOLS/refs/pull/16847/merge/guiEditor/

bjsplat · 2025-07-07T14:59:03Z

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/testResults/webgpuplaywright/index.html

bjsplat · 2025-07-07T15:01:50Z

You have made possible changes to the playground.
You can test the snapshot here:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/

The snapshot playground with the CDN snapshot (only when available):

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/16847/merge/?snapshot=refs/pull/16847/merge

Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly.

bjsplat · 2025-07-07T15:02:20Z

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16847/merge/testResults/webgl2playwright/index.html

…perties pane (BabylonJS#16847) - Update nodeListComponent to conditionally use accordion - Update NME propertyTabComponents to use fluent accordion. This change required a bit of refactoring because the fluent accordion requires its first children to be the accordionItems, so in cases where we had wrappers around the LineContainer we would break the accordion. I thus had to push the accordion inside the individual fooPropertyTabComponent classes and in certain cases (ex: GenericProperties, InputProperties) where the properties were added dynamically, expose them via helper functions) - Minor styling changes --------- Co-authored-by: Georgina <[email protected]>

Georgina and others added 12 commits June 25, 2025 15:04

remove useDegrees from syncedslider, fix dropdown to properly handle …

5005b78

…undefined values, add stub for material in iv2

move the notion of degrees outside of vector3

3e5a8d5

Merge branch 'BabylonJS:master' into master

322f066

pr comments

584e0d5

Merge branch 'BabylonJS:master' into master

2a84c20

Merge branch 'BabylonJS:master' into master

a1f736d

Merge branch 'BabylonJS:master' into master

885f533

Merge branch 'BabylonJS:master' into master

ec4534a

in progress

8f4721a

Merge branch 'master' of https://github.com/georginahalpern/Babylon.js …

4c24bb3

…into nmeFluent

merge

c6c6095

update propertytabs to use fluent accordion

0d9341f

sebavan requested a review from ryantrem July 3, 2025 16:30

Georgina added 2 commits July 3, 2025 13:40

merge masteR

be36204

nit

0d3c61a

fix build

0320ce5

ryantrem reviewed Jul 3, 2025

View reviewed changes

ryantrem approved these changes Jul 3, 2025

View reviewed changes

Georgina added 2 commits July 3, 2025 16:47

rename getter to be clear that its a function, pr comments

1a097cb

input properties getter made into a function

60292fd

georginahalpern enabled auto-merge (squash) July 3, 2025 21:01

input forwardref

c637aba

remove custom input styling and use fluent searchbox

b0d1112

remove style change to split container

d5676ae

georginahalpern merged commit 7fe7117 into BabylonJS:master Jul 7, 2025
19 of 20 checks passed

georginahalpern deleted the nmeFluent branch July 7, 2025 15:02

[Fluent] Update NME to use fluent accordion for both nodeList and properties pane #16847

[Fluent] Update NME to use fluent accordion for both nodeList and properties pane #16847

Uh oh!

Conversation

georginahalpern commented Jul 3, 2025

Uh oh!

sebavan commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 3, 2025

Uh oh!

bjsplat commented Jul 4, 2025

Uh oh!

bjsplat commented Jul 7, 2025

Uh oh!

bjsplat commented Jul 7, 2025

Uh oh!

bjsplat commented Jul 7, 2025

Uh oh!

bjsplat commented Jul 7, 2025

Uh oh!