feat(ColorPicker): numeric field inputs

lumada-design · Dec 6, 2024 · 71408cb · 71408cb
1 parent 941db54
commit 71408cb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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>