[Fluent] Fix switch, add propertylines for text/link, add checkbox (#16769)

georginahalpern · Georgina · web-flow · commit a54c2f50d982 · 2025-06-18T23:42:32.000Z
Separate components for text vs link, rather than today's joint
textlinecomponent

Added checkbox component

Fix switch so that it responds to external changes

Co-authored-by: Georgina &lt;gehalper@microsoft.com&gt;
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/linkPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/linkPropertyLine.tsx
@@ -0,0 +1,27 @@
+import { Body1 } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine";
+import { Link } from "../primitives/link";
+import type { PropertyLineProps } from "./propertyLine";
+import type { FunctionComponent } from "react";
+
+type LinkProps = {
+    value: string;
+    tooltip?: string;
+    onLink?: () => void;
+    url?: string;
+};
+
+/**
+ * Wraps a link in a property line
+ * @param props - PropertyLineProps and LinkProps
+ * @returns property-line wrapped link
+ */
+export const LinkPropertyLine: FunctionComponent<PropertyLineProps & LinkProps> = (props) => {
+    return (
+        <PropertyLine {...props}>
+            <Link inline appearance="subtle" onClick={() => props.onLink?.()} href={props.url} title={props.tooltip}>
+                <Body1>{props.value}</Body1>
+            </Link>
+        </PropertyLine>
+    );
+};
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/textPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/textPropertyLine.tsx
@@ -0,0 +1,22 @@
+import { Body1 } from "@fluentui/react-components";
+import { PropertyLine } from "./propertyLine";
+import type { PropertyLineProps } from "./propertyLine";
+import type { FunctionComponent } from "react";
+
+type TextProps = {
+    value: string;
+    tooltip?: string;
+};
+
+/**
+ * Wraps text in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+export const TextPropertyLine: FunctionComponent<PropertyLineProps & TextProps> = (props) => {
+    return (
+        <PropertyLine {...props}>
+            <Body1 title={props.tooltip}>{props.value}</Body1>
+        </PropertyLine>
+    );
+};
diff --git a/packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx b/packages/dev/sharedUiComponents/src/fluent/hoc/vectorPropertyLine.tsx
@@ -20,10 +20,10 @@ const VectorSliders: FunctionComponent<VectorSliderProps> = (props) => {
     const { vector, ...sliderProps } = props;
     return (
         <>
-            <SyncedSliderLine label="X" propertyKey="x" target={vector} {...sliderProps} />
-            <SyncedSliderLine label="Y" propertyKey="y" target={vector} {...sliderProps} />
-            <SyncedSliderLine label="Z" propertyKey="z" target={vector} {...sliderProps} />
-            {vector instanceof Vector4 && <SyncedSliderLine label="W" propertyKey="w" target={vector} {...sliderProps} />}
+            <SyncedSliderLine {...sliderProps} label="X" propertyKey="x" target={vector} />
+            <SyncedSliderLine {...sliderProps} label="Y" propertyKey="y" target={vector} />
+            <SyncedSliderLine {...sliderProps} label="Z" propertyKey="z" target={vector} />
+            {vector instanceof Vector4 && <SyncedSliderLine {...sliderProps} label="W" propertyKey="w" target={vector} />}
         </>
     );
 };
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/checkbox.tsx
@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-internal-modules
+
+import type { CheckboxProps, CheckboxOnChangeData } from "@fluentui/react-components";
+import type { ChangeEvent, FunctionComponent } from "react";
+
+import { Checkbox as FluentCheckbox } from "@fluentui/react-components";
+import { useEffect, useState } from "react";
+
+/**
+ * This is a primitive fluent checkbox that can both read and write checked state
+ * @param props
+ * @returns Checkbox component
+ */
+export const Checkbox: FunctionComponent<CheckboxProps> = (props) => {
+    const [checked, setChecked] = useState(() => props.checked ?? false);
+
+    useEffect(() => {
+        if (props.checked != undefined) {
+            setChecked(props.checked); // Update local state when props.checked changes
+        }
+    }, [props.checked]);
+
+    const onChange = (ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => {
+        props.onChange && props.onChange(ev, data);
+        setChecked(ev.target.checked);
+    };
+
+    return <FluentCheckbox {...props} checked={checked} onChange={onChange} />;
+};
diff --git a/packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx b/packages/dev/sharedUiComponents/src/fluent/primitives/switch.tsx
@@ -4,7 +4,7 @@ import type { SwitchOnChangeData, SwitchProps as FluentSwitchProps } from "@flue
 import type { ChangeEvent, FunctionComponent } from "react";
 
 import { makeStyles, Switch as FluentSwitch } from "@fluentui/react-components";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const useSwitchStyles = makeStyles({
     switch: {
@@ -24,6 +24,12 @@ export const Switch: FunctionComponent<FluentSwitchProps> = (props) => {
     const classes = useSwitchStyles();
     const [checked, setChecked] = useState(() => props.checked ?? false);
 
+    useEffect(() => {
+        if (props.checked != undefined) {
+            setChecked(props.checked); // Update local state when props.checked changes
+        }
+    }, [props.checked]);
+
     const onChange = (event: ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => {
         props.onChange && props.onChange(event, data);
         setChecked(event.target.checked);
diff --git a/packages/dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx
@@ -8,6 +8,7 @@ import { conflictingValuesPlaceholder } from "./targetsProxy";
 import copyIcon from "../imgs/copy.svg";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper";
 import { SwitchPropertyLine } from "../fluent/hoc/switchPropertyLine";
+import { Checkbox } from "../fluent/primitives/checkbox";
 
 export interface ICheckBoxLineComponentProps {
     label?: string;
@@ -171,7 +172,10 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
     }
 
     renderFluent() {
-        // This same component renders a readonly 'check' icon, and an editable switch -- will introduce the icon in next PR as it will be a diff component
+        // if faIcons are sent (to mimic a checkbox) use fluent checkbox
+        if (this.props.faIcons) {
+            return <Checkbox disabled={this.props.disabled} checked={this.state.isSelected} onClick={() => !this.props.disabled && this.onChange()} />;
+        }
         return <SwitchPropertyLine label={this.props.label || ""} checked={this.state.isSelected} onChange={() => this.onChange()} disabled={!!this.props.disabled} />;
     }
 
diff --git a/packages/dev/sharedUiComponents/src/lines/textLineComponent.tsx b/packages/dev/sharedUiComponents/src/lines/textLineComponent.tsx
@@ -2,6 +2,9 @@ import * as React from "react";
 import copyIcon from "../imgs/copy.svg";
 import { copyCommandToClipboard } from "../copyCommandToClipboard";
 import { MergeClassNames } from "../styleHelper";
+import { TextPropertyLine } from "../fluent/hoc/textPropertyLine";
+import { LinkPropertyLine } from "../fluent/hoc/linkPropertyLine";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 
 interface ITextLineComponentProps {
     label?: string;
@@ -35,43 +38,51 @@ export class TextLineComponent extends React.Component<ITextLineComponentProps>
         this.props.onLink();
     }
 
-    renderContent() {
+    copyFn() {
+        const onCopy = this.props.onCopy;
+        const val = this.props.value;
+        if (onCopy === true && val !== undefined) {
+            return () => val;
+        } else if (typeof onCopy === "function") {
+            return onCopy;
+        }
+        return undefined;
+    }
+
+    renderContent(isLink: boolean, tooltip: string) {
         if (this.props.ignoreValue) {
             return null;
         }
-        const title = this.props.tooltip ?? this.props.value ?? this.props.label ?? "";
 
-        if (this.props.onLink || this.props.url) {
+        if (isLink) {
             return (
-                <div className="link-value" title={title} onClick={() => this.onLink()}>
+                <div className="link-value" title={tooltip} onClick={() => this.onLink()}>
                     {this.props.url ? "doc" : this.props.value || "no name"}
                 </div>
             );
         }
         return (
-            <div className="value" title={title} style={{ color: this.props.color ? this.props.color : "" }}>
+            <div className="value" title={tooltip} style={{ color: this.props.color ? this.props.color : "" }}>
                 {this.props.value || "no name"}
             </div>
         );
     }
 
-    override render() {
+    renderOriginal(isLink: boolean, tooltip: string) {
         return (
             <div className={MergeClassNames(["textLine", ["underline", this.props.underline], this.props.additionalClass, ["icon", this.props.onCopy]])}>
                 {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className="icon" />}
                 <div className="label" title={this.props.tooltip ?? this.props.label ?? ""}>
                     {this.props.label ?? ""}
                 </div>
-                {this.renderContent()}
+                {this.renderContent(isLink, tooltip)}
                 {this.props.onCopy && (
                     <div
                         className="copy hoverIcon"
                         onClick={() => {
-                            const onCopy = this.props.onCopy;
-                            if (onCopy === true && this.props.value !== undefined) {
-                                copyCommandToClipboard(this.props.value);
-                            } else if (typeof onCopy === "function") {
-                                copyCommandToClipboard(onCopy());
+                            const copyFn = this.copyFn();
+                            if (copyFn) {
+                                copyCommandToClipboard(copyFn());
                             }
                         }}
                         title="Copy to clipboard"
@@ -82,4 +93,23 @@ export class TextLineComponent extends React.Component<ITextLineComponentProps>
             </div>
         );
     }
+
+    renderFluent(isLink: boolean, tooltip: string) {
+        const sharedProps = {
+            tooltip,
+            label: this.props.label || "",
+            onCopy: this.copyFn(),
+        };
+        if (isLink) {
+            return <LinkPropertyLine {...sharedProps} value={this.props.url ? "doc" : this.props.value || "no name"} url={this.props.url} onLink={this.props.onLink} />;
+        } else {
+            return <TextPropertyLine {...sharedProps} value={this.props.value || ""} />;
+        }
+    }
+
+    override render() {
+        const tooltip = this.props.tooltip ?? this.props.value ?? this.props.label ?? "";
+        const isLink = this.props.onLink !== undefined || this.props.url !== undefined;
+        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent(isLink, tooltip) : this.renderOriginal(isLink, tooltip))}</ToolContext.Consumer>;
+    }
 }
