add unit of measure to settings step input

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx

@@ -188,15 +188,17 @@ export class SettingsComponent extends React.Component<
                 />
                 {nls.localize('arduino/preferences/automatic', 'Automatic')}
               </label>
-              <SettingsStepInput
-                value={scalePercentage}
-                setSettingsStateValue={this.setInterfaceScale}
-                step={scaleStep}
-                maxValue={maxScale}
-                minValue={minScale}
-                classNames={{ input: 'theia-input small with-margin' }}
-              />
-              %
+              <div>
+                <SettingsStepInput
+                  value={scalePercentage}
+                  setSettingsStateValue={this.setInterfaceScale}
+                  step={scaleStep}
+                  maxValue={maxScale}
+                  minValue={minScale}
+                  unitOfMeasure="%"
+                  classNames={{ input: 'theia-input small with-margin' }}
+                />
+              </div>
             </div>
             <div className="flex-line">
               <select

arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx

@@ -7,14 +7,22 @@ interface SettingsStepInputProps {
   step: number;
   maxValue: number;
   minValue: number;
+  unitOfMeasure?: string;
   classNames?: { [key: string]: string };
 }
 
 const SettingsStepInput: React.FC<SettingsStepInputProps> = (
   props: SettingsStepInputProps
 ) => {
-  const { value, setSettingsStateValue, step, maxValue, minValue, classNames } =
-    props;
+  const {
+    value,
+    setSettingsStateValue,
+    step,
+    maxValue,
+    minValue,
+    unitOfMeasure,
+    classNames,
+  } = props;
 
   const clamp = (value: number, min: number, max: number): number => {
     return Math.min(Math.max(value, min), max);
@@ -86,6 +94,7 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
           &#9662;
         </button>
       </div>
+      {unitOfMeasure && `${unitOfMeasure}`}
     </div>
   );
 };

arduino-ide-extension/src/browser/style/settings-step-input.css

@@ -12,7 +12,7 @@
     display: none;
     flex-direction: column;
     position: absolute;
-    right: 0px;
+    right: 14px;
     top: 50%;
     transform: translate(0px, -50%);
     height: calc(100% - 4px);