From 5ab74f502004eb5e4be96bf7754937e85c226383 Mon Sep 17 00:00:00 2001
From: Sofien-Sellami <73444179+Sofien-Sellami@users.noreply.github.com>
Date: Fri, 7 Jul 2023 16:30:52 +0100
Subject: [PATCH] =?UTF-8?q?ui(InputNumber):=20adding=20label=20element=20i?=
 =?UTF-8?q?n=20InputNumber=20Component=20and=20=E2=80=A6=20(#3501)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/src/components/InputNumber/InputNumber.tsx     | 11 ++++++++++-
 platform/ui/src/index.js                              |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/platform/ui/src/components/InputNumber/InputNumber.tsx b/platform/ui/src/components/InputNumber/InputNumber.tsx
index c7ef97868..a29792f7f 100644
--- a/platform/ui/src/components/InputNumber/InputNumber.tsx
+++ b/platform/ui/src/components/InputNumber/InputNumber.tsx
@@ -2,9 +2,10 @@ import React, { useState, useCallback } from 'react';
 import IconButton from '../IconButton';
 import Icon from '../Icon';
 import './InputNumber.css';
+import Label from '../Label';
 
 /**
- * React Number Input component'
+ *  React Number Input component'
  * it has two props, value and onChange
  * value is a number value
  * onChange is a function that will be called when the number input is changed
@@ -14,6 +15,7 @@ import './InputNumber.css';
 
 const sizesClasses = {
   sm: 'w-[45px] h-[28px]',
+  lg: 'w-[206px] h-[35px]',
 };
 
 const InputNumber: React.FC<{
@@ -24,6 +26,8 @@ const InputNumber: React.FC<{
   step: number;
   size?: string;
   className?: string;
+  labelClassName?: string;
+  label?: string;
 }> = ({
   value,
   onChange,
@@ -32,6 +36,8 @@ const InputNumber: React.FC<{
   size = 'sm',
   minValue = 0,
   maxValue = 100,
+  labelClassName,
+  label,
 }) => {
   const [numberValue, setNumberValue] = useState(value);
 
@@ -76,6 +82,8 @@ const InputNumber: React.FC<{
   );
 
   return (
+  <div className={'flex flex-col flex-1'}>
+      {label && <Label className={labelClassName} text={label}></Label>}
     <div
       className={`flex items-center bg-black border-2 px-1 overflow-hidden justify-center border-secondary-light rounded-md ${sizesClasses[size]
         } ${className ? className : ''}`}
@@ -112,6 +120,7 @@ const InputNumber: React.FC<{
         </div>
       </div>
     </div>
+  </div>
   );
 };
 
diff --git a/platform/ui/src/index.js b/platform/ui/src/index.js
index 622657c13..a6595beeb 100644
--- a/platform/ui/src/index.js
+++ b/platform/ui/src/index.js
@@ -56,6 +56,7 @@ export {
   IconButton,
   Input,
   InputRange,
+  InputNumber,
   InputDateRange,
   InputGroup,
   InputLabelWrapper,