[Fluent/InspectorV2] Fix bugs in number/text input; Add input validation UX; Refactor colorPicker to use new components (#16998)

- Separate out the input.tsx component into spinButton.tsx and
textInput.tsx since spinButton is more appropriate for handling
numerical values
- Introduce forceInt param to NumerInputPropertyLine 
- Both spinButton and textInput now have input validation UX as the user
types - if the input is valid, it will automatically propagate to
parent. If not, it will display as red background and won't notify
parent of change
<img width="378" height="330" alt="image"
src="https://github.com/user-attachments/assets/7d3c42e1-65c7-45ec-8534-d2cda00ef82e"
/>

- ColorPicker.tsx refactored to use the new textInput/spinButtons
directly,
- InfoLabel now an optional param to PrimitiveProps so that primitives
can optionally display an infoLabel (with or without the info popup)
directly on the primitive value (distinct from the propertyline's label)
-- colorpicker usage is refactored accordingly
- Add units to spinbutton with inputvalidation as well
- minor styling
<img width="411" height="128" alt="image"
src="https://github.com/user-attachments/assets/ad7072ba-054c-4c5d-9b2b-77f3612631dd"
/>
<img width="508" height="174" alt="image"
src="https://github.com/user-attachments/assets/7421bab0-442f-40fd-b213-8bdad68ed9da"
/>
<img width="408" height="489" alt="image"
src="https://github.com/user-attachments/assets/ceb08ef3-6f0d-4417-9b52-48a15e53a950"
/>

---------

Co-authored-by: Georgina <[email protected]>

Author: georginahalpern

packages/dev/inspector-v2/src/components/properties/animation/animationGroupProperties.tsx

@@ -78,8 +78,7 @@ export const AnimationGroupControlProperties: FunctionComponent<{ animationGroup
                     />
                     <BoundProperty component={SwitchPropertyLine} label="Is Additive" target={animationGroup} propertyKey="isAdditive" />
                     <BoundProperty component={NumberInputPropertyLine} label="Weight" target={animationGroup} propertyKey="weight" step={0.1} />
-                    <BoundProperty component={NumberInputPropertyLine} label="Play Order" target={animationGroup} propertyKey="playOrder" step={0} />
-                    {/* TODO: Hey georgie :<Play order> should be integer (even when typing)*/}
+                    <BoundProperty component={NumberInputPropertyLine} label="Play order" target={animationGroup} propertyKey="playOrder" forceInt />
                 </>
             </Collapse>
         </>

packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/inputPropertyLine.tsx

@@ -1,27 +1,31 @@
 import { PropertyLine } from "./propertyLine";
 import type { PropertyLineProps } from "./propertyLine";
 import type { FunctionComponent } from "react";
-import { NumberInput, TextInput } from "../../primitives/input";
-import type { InputProps } from "../../primitives/input";
-
+import type { TextInputProps } from "../../primitives/textInput";
+import { TextInput } from "../../primitives/textInput";
+import type { SpinButtonProps } from "../../primitives/spinButton";
+import { SpinButton } from "../../primitives/spinButton";
 /**
  * Wraps a text input in a property line
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-export const TextInputPropertyLine: FunctionComponent<InputProps<string> & PropertyLineProps<string>> = (props) => (
+export const TextInputPropertyLine: FunctionComponent<TextInputProps & PropertyLineProps<string>> = (props) => (
     <PropertyLine {...props}>
         <TextInput {...props} />
     </PropertyLine>
 );
 
 /**
  * Wraps a number input in a property line
+ * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-export const NumberInputPropertyLine: FunctionComponent<InputProps<number> & PropertyLineProps<number>> = (props) => (
-    <PropertyLine {...props}>
-        <NumberInput {...props} />
-    </PropertyLine>
-);
+export const NumberInputPropertyLine: FunctionComponent<SpinButtonProps & PropertyLineProps<number> & { forceInt?: boolean }> = (props) => {
+    return (
+        <PropertyLine {...props}>
+            <SpinButton {...props} />
+        </PropertyLine>
+    );
+};

packages/dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx

@@ -21,6 +21,10 @@ export type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quat
          * If passed, all sliders will use this for the max value
          */
         max?: number;
+        /**
+         * Will be displayed in the input UI to indicate the unit of measurement
+         */
+        unit?: string;
         /**
          * If passed, the UX will use the conversion functions to display/update values
          */
@@ -66,10 +70,14 @@ const TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2 | Ve
             {...props}
             expandedContent={
                 <>
-                    <SyncedSliderPropertyLine label="X" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, "x")} />
-                    <SyncedSliderPropertyLine label="Y" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, "y")} />
-                    {HasZ(vector) && <SyncedSliderPropertyLine label="Z" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, "z")} />}
-                    {HasW(vector) && <SyncedSliderPropertyLine label="W" value={converted(vector.w)} min={min} max={max} onChange={(val) => onChange(val, "w")} />}
+                    <SyncedSliderPropertyLine label="X" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, "x")} unit={props.unit} />
+                    <SyncedSliderPropertyLine label="Y" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, "y")} unit={props.unit} />
+                    {HasZ(vector) && (
+                        <SyncedSliderPropertyLine label="Z" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, "z")} unit={props.unit} />
+                    )}
+                    {HasW(vector) && (
+                        <SyncedSliderPropertyLine label="W" value={converted(vector.w)} min={min} max={max} onChange={(val) => onChange(val, "w")} unit={props.unit} />
+                    )}
                 </>
             }
         >
@@ -89,7 +97,7 @@ const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
 export const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {
     const min = props.useDegrees ? 0 : undefined;
     const max = props.useDegrees ? 360 : undefined;
-    return <Vector3PropertyLine {...props} valueConverter={props.useDegrees ? ToDegreesConverter : undefined} min={min} max={max} />;
+    return <Vector3PropertyLine {...props} unit={props.useDegrees ? "deg" : "rad"} valueConverter={props.useDegrees ? ToDegreesConverter : undefined} min={min} max={max} />;
 };
 
 type QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {
@@ -118,7 +126,7 @@ export const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLinePro
         props.onChange(quat);
     };
 
-    return props.useDegrees ? (
+    return useDegrees ? (
         <Vector3PropertyLine
             {...restProps}
             nullable={false}
@@ -128,9 +136,10 @@ export const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLinePro
             min={min}
             max={max}
             onChange={onEulerChange}
+            unit="deg"
         />
     ) : (
-        <QuaternionPropertyLineInternal {...props} nullable={false} value={quat} min={min} max={max} onChange={onQuatChange} />
+        <QuaternionPropertyLineInternal {...props} unit={"rad"} nullable={false} value={quat} min={min} max={max} onChange={onQuatChange} />
     );
 };
 export const Vector2PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector2>>;