From 6cbcb7a7417c98cd3f6499880cafcfee5f52fef6 Mon Sep 17 00:00:00 2001
From: Bruno Henriques <zettca@users.noreply.github.com>
Date: Wed, 13 Nov 2024 18:43:10 +0000
Subject: [PATCH] chore: fix ToggleButton usage

---
 packages/core/src/Button/Button.tsx            |  2 +-
 .../core/src/TimePicker/TimePicker.stories.tsx |  2 +-
 packages/core/src/TimePicker/Unit/Unit.tsx     | 18 ++++++++----------
 .../core/src/ToggleButton/ToggleButton.tsx     | 12 +++++-------
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/Button/Button.tsx b/packages/core/src/Button/Button.tsx
index b54c1270ee..4a299f3711 100644
--- a/packages/core/src/Button/Button.tsx
+++ b/packages/core/src/Button/Button.tsx
@@ -170,7 +170,7 @@ export const HvButton = fixedForwardRef(function HvButton<
         tabIndex: focusableWhenDisabled ? 0 : -1,
         "aria-disabled": true,
       })}
-      {...(selected && { "aria-pressed": selected })}
+      {...(selected != null && { "aria-pressed": selected })}
       {...others}
     >
       {startIcon && <span className={classes.startIcon}>{startIcon}</span>}
diff --git a/packages/core/src/TimePicker/TimePicker.stories.tsx b/packages/core/src/TimePicker/TimePicker.stories.tsx
index 5169710f11..0fa1597169 100644
--- a/packages/core/src/TimePicker/TimePicker.stories.tsx
+++ b/packages/core/src/TimePicker/TimePicker.stories.tsx
@@ -37,10 +37,10 @@ export const Main: StoryObj<HvTimePickerProps> = {
     label: "Time Picker",
     description: "",
     placeholder: "Select a date",
+    timeFormat: "24",
   },
   argTypes: {
     classes: { control: { disable: true } },
-    timeFormat: { control: { disable: true } },
     value: { control: { disable: true } },
     defaultValue: { control: { disable: true } },
     dropdownProps: { control: { disable: true } },
diff --git a/packages/core/src/TimePicker/Unit/Unit.tsx b/packages/core/src/TimePicker/Unit/Unit.tsx
index c73b8af3e7..0269ce0894 100644
--- a/packages/core/src/TimePicker/Unit/Unit.tsx
+++ b/packages/core/src/TimePicker/Unit/Unit.tsx
@@ -1,4 +1,3 @@
-import { KeyboardEvent } from "react";
 import { DateFieldState, DateSegment } from "@react-stately/datepicker";
 import {
   DropUpXS as AddTimeIcon,
@@ -6,8 +5,8 @@ import {
 } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 
-import { HvInput, HvInputProps } from "../../Input";
-import { HvToggleButton } from "../../ToggleButton";
+import { HvBaseInput, HvBaseInputProps } from "../../BaseInput";
+import { HvButton } from "../../Button";
 import { useClasses } from "./Unit.styles";
 
 interface UnitProps {
@@ -16,7 +15,7 @@ interface UnitProps {
   segment: DateSegment;
   placeholder?: string;
   /** Called when the value changes */
-  onChange?: HvInputProps["onChange"];
+  onChange?: HvBaseInputProps["onChange"];
   /** Called when the up/add arrow is pressed */
   onAdd?: () => void;
   /** Called when the down/subtract arrow is pressed */
@@ -41,14 +40,13 @@ export const Unit = ({
       {type !== "literal" && <AddTimeIcon onClick={onAdd} />}
       {type === "literal" && <div className={classes.separator}>{text}</div>}
       {type === "dayPeriod" && (
-        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>
+        <HvButton icon className={classes.periodToggle} onClick={onAdd}>
           {text}
-        </HvToggleButton>
+        </HvButton>
       )}
       {["hour", "minute", "second"].includes(type) && (
-        <HvInput
+        <HvBaseInput
           id={id}
-          disableClear
           style={{
             ...theme.typography.title3,
           }}
@@ -59,13 +57,13 @@ export const Unit = ({
             inputRoot: classes.inputRoot,
           }}
           onKeyDown={(event) => {
-            if ((event as KeyboardEvent).key === "Enter") {
+            if ("key" in event && event.key === "Enter") {
               event.preventDefault();
               event.stopPropagation();
             }
           }}
           required
-          status={state.validationState}
+          invalid={state.isInvalid}
           value={text.padStart(2, "0")}
           onChange={onChange}
           placeholder={placeholder}
diff --git a/packages/core/src/ToggleButton/ToggleButton.tsx b/packages/core/src/ToggleButton/ToggleButton.tsx
index 76300777e1..8a8df75add 100644
--- a/packages/core/src/ToggleButton/ToggleButton.tsx
+++ b/packages/core/src/ToggleButton/ToggleButton.tsx
@@ -43,17 +43,15 @@ export const HvToggleButton = forwardRef<
     Boolean(defaultSelected),
   );
 
-  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setIsSelected(!isSelected);
-    onClick?.(event, !isSelected);
-  };
-
   return (
     <HvButton
       ref={ref}
       icon
-      aria-pressed={isSelected}
-      onClick={onClickHandler}
+      selected={isSelected}
+      onClick={(event) => {
+        setIsSelected(!isSelected);
+        onClick?.(event, !isSelected);
+      }}
       {...others}
     >
       {children || (!isSelected ? notSelectedIcon : selectedIcon)}