[Fluent] Update NME to use fluent accordion for both nodeList and properties 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]>

Author: georginahalpern

packages/dev/inspector-v2/src/components/accordionPane.tsx

@@ -62,11 +62,6 @@ const useStyles = makeStyles({
         display: "flex",
         flexDirection: "column",
     },
-    panelDiv: {
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-    },
 });
 
 export type AccordionPaneSectionProps = {

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

@@ -775,7 +775,7 @@ export class PropertyGridTabComponent extends PaneComponent {
         const entity = this.props.selectedEntity || {};
         const entityHasMetadataProp = Object.prototype.hasOwnProperty.call(entity, "metadata");
         return (
-            <FluentToolWrapper>
+            <FluentToolWrapper toolName="INSPECTOR">
                 <div className="pane">
                     {this.renderContent()}
                     {Tags.HasTags(entity) && (

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

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import type { FunctionComponent, PropsWithChildren } from "react";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
+import { Pane } from "../fluent/hoc/pane";
+import { Accordion } from "../fluent/primitives/accordion";
+
+/**
+ * A wrapper component for the property tab that provides a consistent layout and styling.
+ * It uses a Pane and an Accordion to organize the content, so its direct children
+ * must have 'title' props to be compatible with the Accordion structure.
+ * @param props The props to pass to the component.
+ * @returns The rendered component.
+ */
+export const PropertyTabComponentBase: FunctionComponent<PropsWithChildren> = (props) => {
+    const context = useContext(ToolContext);
+    const fluentWrapper: FunctionComponent<PropsWithChildren> = (props) => {
+        return (
+            <Pane title={context.toolName}>
+                <Accordion>{props.children}</Accordion>
+            </Pane>
+        );
+    };
+    const originalWrapper: FunctionComponent<PropsWithChildren> = (props) => {
+        return (
+            <div id="propertyTab">
+                <div id="header">
+                    <img id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                    <div id="title">{context.toolName}</div>
+                </div>
+                <div>{props.children}</div>
+            </div>
+        );
+    };
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const Wrapper = context.useFluent ? fluentWrapper : originalWrapper;
+    return <Wrapper>{props.children}</Wrapper>;
+};

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

@@ -13,9 +13,14 @@ export type ToolHostProps = {
      * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled)
      */
     disableCopy?: boolean;
+
+    /**
+     * Name of the tool displayed in the UX
+     */
+    toolName: string;
 };
 
-export const ToolContext = createContext({ useFluent: false as boolean, disableCopy: false as boolean } as const);
+export const ToolContext = createContext({ useFluent: false as boolean, disableCopy: false as boolean, toolName: "" as string } as const);
 
 /**
  * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component
@@ -25,13 +30,17 @@ export const ToolContext = createContext({ useFluent: false as boolean, disableC
  */
 export const FluentToolWrapper: FunctionComponent<PropsWithChildren<ToolHostProps>> = (props) => {
     const url = new URL(window.location.href);
-    const enableFluent = url.searchParams.has("newUX") || url.hash.includes("newUX");
-
-    return enableFluent ? (
+    const useFluent = url.searchParams.has("newUX") || url.hash.includes("newUX");
+    const contextValue = {
+        useFluent,
+        disableCopy: !!props.disableCopy,
+        toolName: props.toolName,
+    };
+    return useFluent ? (
         <FluentProvider theme={props.customTheme || webDarkTheme}>
-            <ToolContext.Provider value={{ useFluent: true, disableCopy: !!props.disableCopy }}>{props.children}</ToolContext.Provider>
+            <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>
         </FluentProvider>
     ) : (
-        props.children
+        <ToolContext.Provider value={contextValue}>{props.children}</ToolContext.Provider>
     );
 };

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

@@ -0,0 +1,44 @@
+import { Body1Strong, makeStyles, tokens } from "@fluentui/react-components";
+import type { FluentIcon } from "@fluentui/react-icons";
+import type { FunctionComponent, PropsWithChildren } from "react";
+
+const useStyles = makeStyles({
+    rootDiv: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+    },
+    icon: {
+        width: tokens.fontSizeBase400,
+        height: tokens.fontSizeBase400,
+        verticalAlign: "middle",
+    },
+    header: {
+        height: tokens.fontSizeBase400,
+        fontSize: tokens.fontSizeBase400,
+        textAlign: "center",
+        verticalAlign: "middle",
+    },
+});
+
+export type PaneProps = {
+    title: string;
+    icon?: FluentIcon;
+};
+export const Pane: FunctionComponent<PropsWithChildren<PaneProps>> = (props) => {
+    const classes = useStyles();
+    return (
+        <div className={classes.rootDiv}>
+            <div className={classes.header}>
+                {props.icon ? (
+                    <props.icon className={classes.icon} />
+                ) : (
+                    <img className={classes.icon} id="logo" src="https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" />
+                )}
+                <Body1Strong id="title">{props.title}</Body1Strong>
+            </div>
+            {props.children}
+        </div>
+    );
+};

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

@@ -1,7 +1,7 @@
 import { Body1, Body1Strong, Button, InfoLabel, Link, ToggleButton, makeStyles, tokens } from "@fluentui/react-components";
 import { Collapse } from "@fluentui/react-motion-components-preview";
 import { AddFilled, CopyRegular, SubtractFilled } from "@fluentui/react-icons";
-import type { FunctionComponent, PropsWithChildren } from "react";
+import type { FunctionComponent, HTMLProps, PropsWithChildren } from "react";
 import { useContext, useState, forwardRef } from "react";
 import { copyCommandToClipboard } from "../../copyCommandToClipboard";
 import { ToolContext } from "./fluentToolWrapper";
@@ -81,10 +81,10 @@ export type PropertyLineProps = {
     docLink?: string;
 };
 
-export const LineContainer = forwardRef<HTMLDivElement, PropsWithChildren>((props, ref) => {
+export const LineContainer = forwardRef<HTMLDivElement, PropsWithChildren<HTMLProps<HTMLDivElement>>>((props, ref) => {
     const classes = usePropertyLineStyles();
     return (
-        <div ref={ref} className={classes.container}>
+        <div ref={ref} className={classes.container} {...props}>
             {props.children}
         </div>
     );

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

@@ -12,6 +12,7 @@ const useStyles = makeStyles({
         display: "flex",
         flexDirection: "column",
         rowGap: tokens.spacingVerticalM,
+        height: "100%",
     },
     panelDiv: {
         display: "flex",

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

@@ -0,0 +1,25 @@
+import { Field, SearchBox as FluentSearchBox, makeStyles } from "@fluentui/react-components";
+import type { InputOnChangeData } from "@fluentui/react-components";
+import type { SearchBoxChangeEvent } from "@fluentui/react-components";
+
+type SearchProps = {
+    onChange: (val: string) => void;
+    placeholder?: string;
+};
+const useStyles = makeStyles({
+    search: {
+        minWidth: "50px",
+    },
+});
+export const SearchBox = (props: SearchProps) => {
+    const classes = useStyles();
+    const onChange: (ev: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) => {
+        props.onChange(data.value);
+    };
+
+    return (
+        <Field>
+            <FluentSearchBox className={classes.search} placeholder={props.placeholder} onChange={onChange} />
+        </Field>
+    );
+};

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

@@ -2,6 +2,8 @@ import * as React from "react";
 import { DataStorage } from "core/Misc/dataStorage";
 import type { ISelectedLineContainer } from "./iSelectedLineContainer";
 import downArrow from "./downArrow.svg";
+import { AccordionSection } from "../fluent/primitives/accordion";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 
 interface ILineContainerComponentProps {
     selection?: ISelectedLineContainer;
@@ -69,7 +71,11 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
         }
     }
 
-    override render() {
+    renderFluent() {
+        return <AccordionSection title={this.props.title}>{this.props.children}</AccordionSection>;
+    }
+
+    renderOriginal() {
         if (!this.state.isExpanded) {
             return (
                 <div className="paneContainer">
@@ -88,4 +94,8 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
             </div>
         );
     }
+
+    override render() {
+        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;
+    }
 }

packages/tools/nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -14,6 +14,9 @@ import deleteButton from "../../imgs/delete.svg";
 import { NodeLedger } from "shared-ui-components/nodeGraphSystem/nodeLedger";
 
 import "./nodeList.scss";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
+import { Accordion } from "shared-ui-components/fluent/primitives/accordion";
+import { SearchBox } from "shared-ui-components/fluent/primitives/searchBox";
 
 interface INodeListComponentProps {
     globalState: GlobalState;
@@ -327,6 +330,38 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         }
     }
 
+    renderFluent(blockMenu: JSX.Element[]) {
+        return (
+            <div>
+                <SearchBox placeholder="Filter" onChange={(val) => this.filterContent(val.toString())} />
+                <Accordion>{blockMenu}</Accordion>
+            </div>
+        );
+    }
+
+    renderOriginal(blockMenu: JSX.Element[]) {
+        return (
+            <div id="nmeNodeList">
+                <div className="panes">
+                    <div className="pane">
+                        <div className="filter">
+                            <input
+                                type="text"
+                                placeholder="Filter"
+                                onFocus={() => (this.props.globalState.lockObject.lock = true)}
+                                onBlur={() => {
+                                    this.props.globalState.lockObject.lock = false;
+                                }}
+                                onChange={(evt) => this.filterContent(evt.target.value)}
+                            />
+                        </div>
+                        <div className="list-container">{blockMenu}</div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
     override render() {
         const customFrameNames: string[] = [];
         for (const frame in this._customFrameList) {
@@ -556,7 +591,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         }
 
         // Create node menu
-        const blockMenu = [];
+        const blockMenu: JSX.Element[] = [];
         for (const key in allBlocks) {
             const blockList = allBlocks[key]
                 .filter((b: string) => !this.state.filter || b.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1)
@@ -661,25 +696,6 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             };
         }
 
-        return (
-            <div id="nmeNodeList">
-                <div className="panes">
-                    <div className="pane">
-                        <div className="filter">
-                            <input
-                                type="text"
-                                placeholder="Filter"
-                                onFocus={() => (this.props.globalState.lockObject.lock = true)}
-                                onBlur={() => {
-                                    this.props.globalState.lockObject.lock = false;
-                                }}
-                                onChange={(evt) => this.filterContent(evt.target.value)}
-                            />
-                        </div>
-                        <div className="list-container">{blockMenu}</div>
-                    </div>
-                </div>
-            </div>
-        );
+        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent(blockMenu) : this.renderOriginal(blockMenu))}</ToolContext.Consumer>;
     }
 }