From 71408cb96abc2eadbe63058c61dbf2795d4339c7 Mon Sep 17 00:00:00 2001
From: Bruno Henriques <zettca@users.noreply.github.com>
Date: Wed, 4 Dec 2024 14:11:36 +0000
Subject: [PATCH] feat(ColorPicker): numeric field inputs

---
 packages/core/src/ColorPicker/ColorPicker.test.tsx | 6 +++---
 packages/core/src/ColorPicker/Fields/Fields.tsx    | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/ColorPicker/ColorPicker.test.tsx b/packages/core/src/ColorPicker/ColorPicker.test.tsx
index b7826124b7..ac7df82924 100644
--- a/packages/core/src/ColorPicker/ColorPicker.test.tsx
+++ b/packages/core/src/ColorPicker/ColorPicker.test.tsx
@@ -21,9 +21,9 @@ describe("ColorPicker", () => {
     );
 
     expect(screen.getByText("#de2beb")).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "R" })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "G" })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: "B" })).toBeInTheDocument();
+    expect(screen.getByRole("spinbutton", { name: "R" })).toBeInTheDocument();
+    expect(screen.getByRole("spinbutton", { name: "G" })).toBeInTheDocument();
+    expect(screen.getByRole("spinbutton", { name: "B" })).toBeInTheDocument();
   });
 
   it("should render recommended colors", () => {
diff --git a/packages/core/src/ColorPicker/Fields/Fields.tsx b/packages/core/src/ColorPicker/Fields/Fields.tsx
index b48c2f15be..113964a3ff 100644
--- a/packages/core/src/ColorPicker/Fields/Fields.tsx
+++ b/packages/core/src/ColorPicker/Fields/Fields.tsx
@@ -147,6 +147,7 @@ export const Fields = (props: FieldsProps) => {
         value={internalRed}
         onChange={(event, value) => onChangeRbg(event, value, "r")}
         onBlur={() => setInternalRed(rgb?.r)}
+        inputProps={{ type: "number", min: 0, max: 255 }}
         disableClear
       />
       <HvInput
@@ -156,6 +157,7 @@ export const Fields = (props: FieldsProps) => {
         value={internalGreen}
         onChange={(event, value) => onChangeRbg(event, value, "g")}
         onBlur={() => setInternalGreen(rgb?.g)}
+        inputProps={{ type: "number", min: 0, max: 255 }}
         disableClear
       />
       <HvInput
@@ -165,6 +167,7 @@ export const Fields = (props: FieldsProps) => {
         value={internalBlue}
         onChange={(event, value) => onChangeRbg(event, value, "b")}
         onBlur={() => setInternalBlue(rgb?.b)}
+        inputProps={{ type: "number", min: 0, max: 255 }}
         disableClear
       />
     </div>