feat(web/input): allow defining icon for number row field

web/src/features/dev/debug/input.ts

@@ -27,6 +27,7 @@ export const debugInput = () => {
             default: 12,
             min: 3,
             max: 10,
+            icon: 'receipt',
           },
           { type: 'slider', label: 'Slide bar', min: 10, max: 50, step: 2 },
         ],

web/src/features/dialog/components/input.tsx

@@ -22,7 +22,7 @@ const InputField: React.FC<Props> = (props) => {
         <Text>{props.row.label}</Text>
         <InputGroup>
           {props.row.icon && (
-            <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} />} />
+            <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
           )}
           <Input
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)}

web/src/features/dialog/components/number.tsx

@@ -6,9 +6,11 @@ import {
   NumberInputStepper,
   NumberIncrementStepper,
   NumberDecrementStepper,
+  InputLeftElement,
 } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import { INumber } from '../../../interfaces/dialog';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
   row: INumber;
@@ -30,7 +32,10 @@ const NumberField: React.FC<Props> = (props) => {
         min={props.row.min}
         max={props.row.max}
       >
-        <NumberInputField placeholder={props.row.placeholder} />
+        {props.row.icon && (
+          <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
+        )}
+        <NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
         <NumberInputStepper>
           <NumberIncrementStepper />
           <NumberDecrementStepper />

web/src/interfaces/dialog.ts

@@ -27,6 +27,7 @@ export interface INumber {
   label: string;
   placeholder?: string;
   default?: number;
+  icon?: IconProp;
   min?: number;
   max?: number;
 }