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

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>>;