Introduce new fluent shared components; conditionally load them from existing shared components if useFluent context is true #16709

georginahalpern · 2025-06-03T15:52:44Z

View shared-ui-components/src/fluent/readme.md for a complete overview of these changes and the plan for rolling them out!

The changes in this PR can be broken down into the below buckets, with several examples for each. Future PRs will be more incremental, can bring 1 control at a time.

shared-ui-components/src/fluent: contains new primitives and HOCs (including FluentToolWrapper, which wraps children in FluentProvider and ContextProvider<{useFluent=true}> if the 'newUX' string is present in the QSP or hash)
shared-ui-components/src/lines: existing shared components, updated to conditionally render above fluent components if anywhere upstream is wrapped in a FluentToolWrapper
examples enabling fluent in the below tools
- packages/tools/nodeEditor/src/graphEditor.tsx (NME)
- packages/dev/inspector/src/components/actionTabs/tabs/propertyGridTabComponent.tsx (inspectorV1 property panel)
- shared-ui-components/src/fluent/tempInspectorV2 (temp folder to show usage before ryan's changes are merged - u can view them in PR history but won't be checked in with the final merge)

Miscellaneous:

eslint change to allow useFoo to be camelcased (since that is the standard w fluent)
generateDeclaration.ts change to cast fluent types to any in the d.ts files so that consumers don't need to declare fluent dependency (same thing we do for fontawesome)

NOTE that introducing fluent introduced some build issues in this PR, which were diagnosed/ resolved in this test PR and then checked in separately in this PR.

bjsplat · 2025-06-03T15:54:25Z

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-06-03T15:54:26Z

Reviewer - this PR has made changes to one or more package.json files.

bjsplat · 2025-06-03T16:17: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/16709/merge/testResults/

bjsplat · 2025-06-03T16:20:03Z

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/16709/merge/testResults/

bjsplat · 2025-06-03T16:25:24Z

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

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

bjsplat · 2025-06-03T17:08:10Z

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-06-03T17:08:11Z

Reviewer - this PR has made changes to one or more package.json files.

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

bjsplat · 2025-06-03T17:31:36Z

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/16709/merge/testResults/

bjsplat · 2025-06-03T17:31:54Z

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/16709/merge/testResults/

bjsplat · 2025-06-03T17:37:41Z

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

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

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

packages/dev/inspector/src/components/actionTabs/tabs/propertyGridTabComponent.tsx

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

packages/dev/sharedUiComponents/src/fluent/primitives/input.tsx

packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx

packages/dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx

packages/dev/sharedUiComponents/src/fluent/primitives/textarea.tsx

.eslintrc.js

…plied

bjsplat · 2025-06-04T16:33:35Z

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-06-04T16:33:35Z

Reviewer - this PR has made changes to one or more package.json files.

bjsplat · 2025-06-04T16:57:21Z

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/16709/merge/testResults/

bjsplat · 2025-06-04T16:57: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/16709/merge/testResults/

bjsplat · 2025-06-04T17:01:28Z

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

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

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

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

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

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

packages/dev/sharedUiComponents/src/fluent/primitives/dropdown.tsx

…rtyLineProps helper

….json to point to minified bundle (#16759) When introducing fluent dependency in [this PR](#16709) we saw our build agents running out of memory when running es6/UMD build steps, and we also saw the importing of public inspector package causing heap allocation error in the test app sceneWithInspector test. After many attempts to solve (branching off onto another [smaller PR](#16747) to isolate the causes) the solution we are landing on is to reduce parallelization of build steps (solving OOM during es6/UMD build, and confirmed that it wont slow down our build) and to update the inspector and gui editor package.json to point to the minified bundle (solving heap allocation error, and confirmed via npm link + babylonjs-webpack-es6 test app that inspector loads properly) Co-authored-by: Georgina <[email protected]>

…into freshSharedComponents

bjsplat · 2025-06-16T20:58:35Z

Reviewer - this PR has made changes to one or more package.json files.

bjsplat · 2025-06-16T21:10:09Z

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-06-16T21:10:10Z

Reviewer - this PR has made changes to one or more package.json files.

bjsplat · 2025-06-16T21:19:28Z

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-06-16T21:19:29Z

Reviewer - this PR has made changes to one or more package.json files.

bjsplat · 2025-06-16T21:39:19Z

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

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

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

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

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/16709/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/16709/merge
https://gui.babylonjs.com/?snapshot=refs/pull/16709/merge
https://nme.babylonjs.com/?snapshot=refs/pull/16709/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/16709/merge#BCU1XR#0

bjsplat · 2025-06-16T21:41:10Z

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

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

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

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

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

bjsplat · 2025-06-16T21:41:26Z

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/16709/merge/

bjsplat · 2025-06-16T21:41:48Z

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

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

bjsplat · 2025-06-16T21:51:54Z

WebGL2 visualization test reporter:

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

bjsplat · 2025-06-16T21:52:01Z

Visualization tests for WebGPU

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

bjsplat · 2025-06-16T23:51:15Z

Reviewer - this PR has made changes to one or more package.json files.

bjsplat · 2025-06-17T00:13:41Z

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/16709/merge/

bjsplat · 2025-06-17T00:14:33Z

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

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

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

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

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

bjsplat · 2025-06-17T00:15:28Z

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

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

bjsplat · 2025-06-17T00:23:12Z

Visualization tests for WebGPU

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

bjsplat · 2025-06-17T00:27:51Z

WebGL2 visualization test reporter:

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

Squashed: Add all changes from freshSharedComponents

618c2ac

georginahalpern marked this pull request as ready for review June 3, 2025 16:00

fix eslint issues

a7f155f

georginahalpern commented Jun 3, 2025

View reviewed changes

packages/dev/sharedUiComponents/src/lines/textInputLineComponent.tsx Show resolved Hide resolved

ryantrem reviewed Jun 3, 2025

View reviewed changes

georginahalpern commented Jun 3, 2025

View reviewed changes

.eslintrc.js Outdated Show resolved Hide resolved

georginahalpern marked this pull request as draft June 3, 2025 18:22

Georgina added 3 commits June 4, 2025 12:23

PR comments

623b303

merge

348b49b

remove required dropdown defaultvalue and default to first if not sup…

4d90b99

…plied

georginahalpern added new feature tools labels Jun 4, 2025

ryantrem reviewed Jun 4, 2025

View reviewed changes

packages/dev/sharedUiComponents/src/fluent/hoc/colorPropertyLine.tsx Outdated Show resolved Hide resolved

ryantrem reviewed Jun 4, 2025

View reviewed changes

rename styles to classes when using makeStyles; remove the SplitPrope…

b54b986

…rtyLineProps helper

Georgina added 2 commits June 16, 2025 16:54

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

c4c8723

…into freshSharedComponents

merge build changes from master

6ea17ab

rm webpack config change leftover from testing treeshaking

c6f8a00

check for existence of QSP instead of truthiness

117f18f

remove HOC for conditionally loading fluent

5d6a54a

georginahalpern marked this pull request as ready for review June 17, 2025 14:30

deltakosh enabled auto-merge (squash) June 17, 2025 14:41

georginahalpern disabled auto-merge June 17, 2025 14:43

georginahalpern enabled auto-merge (squash) June 17, 2025 14:43

deltakosh approved these changes Jun 17, 2025

View reviewed changes

georginahalpern merged commit fd3d76f into BabylonJS:master Jun 17, 2025
20 checks passed

georginahalpern deleted the freshSharedComponents branch June 17, 2025 15:26

Introduce new fluent shared components; conditionally load them from existing shared components if useFluent context is true #16709

Introduce new fluent shared components; conditionally load them from existing shared components if useFluent context is true #16709

Uh oh!

Conversation

georginahalpern commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

bjsplat commented Jun 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bjsplat commented Jun 4, 2025

Uh oh!

bjsplat commented Jun 4, 2025

Uh oh!

bjsplat commented Jun 4, 2025

Uh oh!

bjsplat commented Jun 4, 2025

Uh oh!

bjsplat commented Jun 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

bjsplat commented Jun 16, 2025

Uh oh!

georginahalpern commented Jun 3, 2025 •

edited

Loading