[Fluent] InputPropertyLine for text and number (#16786)

Simple helper to create a property line with either a text or number
input

---------

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

Author: georginahalpern

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

@@ -0,0 +1,23 @@
+import { PropertyLine } from "./propertyLine";
+import type { PropertyLineProps } from "./propertyLine";
+import type { FunctionComponent } from "react";
+import { Input } from "../primitives/input";
+import type { InputProps } from "../primitives/input";
+
+type InputPropertyLineProps = InputProps<string | number> & PropertyLineProps;
+
+/**
+ * Wraps an input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+const InputPropertyLine: FunctionComponent<InputPropertyLineProps> = (props) => {
+    return (
+        <PropertyLine {...props}>
+            <Input {...props} />
+        </PropertyLine>
+    );
+};
+
+export const TextInputPropertyLine = InputPropertyLine as FunctionComponent<InputProps<string> & PropertyLineProps>;
+export const FloatInputPropertyLine = InputPropertyLine as FunctionComponent<InputProps<number> & PropertyLineProps>;

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

@@ -7,6 +7,7 @@ import type { BaseComponentProps } from "../hoc/propertyLine";
 const useInputStyles = makeStyles({
     text: {
         height: "auto",
+        textAlign: "right",
     },
     float: {
         height: "auto",
@@ -15,10 +16,9 @@ const useInputStyles = makeStyles({
     },
 });
 
-type InputProps = BaseComponentProps<string | number> & {
+export type InputProps<T extends string | number> = BaseComponentProps<T> & {
     step?: number;
     placeholder?: string;
-    type?: "number" | "text";
     min?: number;
     max?: number;
 };
@@ -27,7 +27,7 @@ type InputProps = BaseComponentProps<string | number> & {
  * @param props
  * @returns
  */
-export const Input: FunctionComponent<InputProps> = (props) => {
+export const Input: FunctionComponent<InputProps<string | number>> = (props) => {
     const classes = useInputStyles();
     const [value, setValue] = useState(props.value ?? "");
 
@@ -48,9 +48,10 @@ export const Input: FunctionComponent<InputProps> = (props) => {
     return (
         <FluentInput
             {...props}
+            type={typeof props.value === "number" ? "number" : "text"}
             size="small"
             value={value.toString()}
-            className={props.type === "number" ? classes.float : classes.text}
+            className={typeof props.value === "number" ? classes.float : classes.text}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
         />

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

@@ -59,7 +59,7 @@ export const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) =
             {props.min != undefined && props.max != undefined && (
                 <Slider {...props} size="small" className={classes.slider} value={value} onChange={handleSliderChange} step={undefined} />
             )}
-            <Input {...props} className={classes.input} type="number" value={value} onChange={handleInputChange} step={props.step} />
+            <Input {...props} className={classes.input} value={value} onChange={handleInputChange} step={props.step} />
         </div>
     );
 };