Refactor time picker

.eslintrc

@@ -83,6 +83,7 @@
                 "accessibility": "explicit"
             }
         ],
-        "react/react-in-jsx-scope": "off"
+        "react/react-in-jsx-scope": "off",
+        "react/no-unknown-property": ["error", { "ignore": ["inert"] }]
     }
 }

custom-types/react-augment.d.ts

@@ -5,4 +5,8 @@ declare module "react" {
     function forwardRef<T, P = {}>(
         render: (props: P, ref: Ref<T>) => ReactElement | null
     ): (props: P & RefAttributes<T>) => ReactElement | null;
+
+    interface HTMLAttributes<T> extends HTMLAttributes<T> {
+        inert?: string | undefined;
+    }
 }

src/date-input/date-input.style.tsx

@@ -19,6 +19,7 @@ interface ContainerStyleProps {
 
 interface IndicateBarStyleProps {
     $position: "start" | "end" | "none";
+    $error: boolean;
 }
 
 // =============================================================================
@@ -131,12 +132,13 @@ export const ArrowRight = styled(ArrowRightIcon)`
 
 export const IndicateBar = styled.div<IndicateBarStyleProps>`
     position: absolute;
-    background-color: ${Color.Primary};
+    background-color: ${(props) =>
+        props.$error ? Color.Validation.Red.Border : Color.Primary};
     height: 0.125rem;
     width: calc(100% - 50% - 2rem); // paddingX is 2rem,
     transition: left 350ms ease-in-out, opacity 350ms ease-in-out;
     left: 1rem;
-    bottom: -0.1rem;
+    bottom: 0;
 
     ${(props) => {
         switch (props.$position) {

src/date-input/date-input.tsx

@@ -480,7 +480,12 @@ export const DateInput = ({
     const renderIndicateBar = () => {
         if (variant === "single" || disabled || readOnly) return;
 
-        return <IndicateBar $position={currentElement.type || "none"} />;
+        return (
+            <IndicateBar
+                $position={currentElement.type || "none"}
+                $error={error}
+            />
+        );
     };
 
     const renderRangeInput = () => {

src/date-input/stand-alone-input.style.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
-import { MediaQuery } from "../media";
 import { Color } from "../color";
+import { MediaQuery } from "../media";
+import { BasicInput } from "../shared/input-wrapper/input-wrapper";
 import { TextStyleHelper } from "../text/helper";
 import { Text } from "../text/text";
 import { DateInputVariant } from "./types";
@@ -112,39 +113,10 @@ export const InputContainer = styled.div<InputContainerStyleProps>`
     }}
 `;
 
-const BaseInput = styled.input`
-    ${TextStyleHelper.getTextStyle("Body", "regular")}
+const BaseInput = styled(BasicInput)`
     background: transparent;
     height: 100%;
-    border: none;
     text-align: center;
-    padding: 0;
-
-    // Chrome, Safari, Edge, Opera
-    ::-webkit-outer-spin-button,
-    ::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    // Safari (remove top shadow)
-    --webkit-appearance: none;
-
-    // Firefox
-    --moz-appearance: textfield;
-
-    :focus,
-    :active {
-        outline: none;
-    }
-
-    ${(props) => {
-        if (props.disabled) {
-            return css`
-                cursor: not-allowed;
-            `;
-        }
-    }}
 `;
 
 export const DayInput = styled(BaseInput)`

src/form/index.ts

@@ -4,12 +4,12 @@ import { FormInput } from "./form-input";
 import { FormInputGroup } from "./form-input-group";
 import { FormLabel } from "./form-label";
 import { FormMultiSelect } from "./form-multi-select";
+import { FormPhoneNumberInput } from "./form-phone-number-input";
 import { FormSelect } from "./form-select";
 import { FormTextarea } from "./form-textarea";
+import { FormTimeRangePicker } from "./form-time-range-picker";
 import { FormTimepicker } from "./form-timepicker";
-import { FormTimeRangePicker } from "./form-timerangepicker";
 import { FormUnitNumberInput } from "./form-unit-number-input";
-import { FormPhoneNumberInput } from "./form-phone-number-input";
 
 export const Form = {
     DateInput: FormDateInput,

src/index.ts

@@ -38,11 +38,11 @@ export * from "./smart-app-banner";
 export * from "./text";
 export * from "./text-list";
 export * from "./theme";
+export * from "./time-range-picker";
 export * from "./time-slot-bar";
 export * from "./timeline";
 export * from "./timepicker";
-export * from "./time-range-picker";
+export * from "./toast";
 export * from "./toggle";
 export * from "./tooltip";
 export * from "./transition";
-export * from "./toast";

src/input-group/input-group.tsx

@@ -46,7 +46,7 @@ const Component = <T, V>(
                     return (
                         <InputWrapper
                             $error={error}
-                            disabled={otherProps.disabled}
+                            $disabled={otherProps.disabled}
                             $readOnly={otherProps.readOnly}
                             data-testid={otherProps["data-testid"]}
                             $position={position}
@@ -77,7 +77,7 @@ const Component = <T, V>(
                 if (labelAddon.value) {
                     return (
                         <InputWrapper
-                            disabled={otherProps.disabled}
+                            $disabled={otherProps.disabled}
                             $error={error}
                             $readOnly={otherProps.readOnly}
                             data-testid={otherProps["data-testid"]}

src/input/input.tsx

@@ -95,7 +95,7 @@ const Component = (
 
     return (
         <InputWrapper
-            disabled={disabled}
+            $disabled={disabled}
             $error={error}
             $readOnly={readOnly}
             className={className}

src/shared/dropdown-list/dropdown-search.styles.tsx

@@ -3,7 +3,7 @@ import { MagnifierIcon } from "@lifesg/react-icons/magnifier";
 import styled from "styled-components";
 import { Color } from "../../color";
 import { IconButton } from "../../icon-button";
-import { TextStyleHelper } from "../../text";
+import { BasicInput } from "../input-wrapper/input-wrapper";
 
 export const Container = styled.li`
     background: ${Color.Neutral[7]};
@@ -12,24 +12,11 @@ export const Container = styled.li`
     align-items: center;
 `;
 
-export const SearchInput = styled.input`
-    ${TextStyleHelper.getTextStyle("Body", "regular")}
+export const SearchInput = styled(BasicInput)`
     height: 3rem;
-    border: none;
-    background: transparent;
     flex: 1;
     padding: 0 0.5rem 0 0;
     width: 100%;
-
-    :focus,
-    :active {
-        outline: none;
-    }
-
-    ::placeholder,
-    ::-webkit-input-placeholder {
-        color: ${Color.Neutral[3]};
-    }
 `;
 
 export const SearchIcon = styled(MagnifierIcon)`

src/shared/input-wrapper/input-wrapper.tsx

@@ -1,13 +1,14 @@
+import styled, { css } from "styled-components";
 import { Color } from "../../color";
 import { DesignToken } from "../../design-token";
-import styled, { css } from "styled-components";
+import { TextStyleHelper } from "../../text";
 
 // =============================================================================
 // STYLE INTERFACE, transient props are denoted with $
 // See more https://styled-components.com/docs/api#transient-props
 // =============================================================================
-interface StyleProps {
-    disabled?: boolean | undefined;
+export interface InputWrapperStyleProps {
+    $disabled?: boolean | undefined;
     $error?: boolean | undefined;
     $readOnly?: boolean | undefined;
     $position?: "left" | "right" | undefined;
@@ -16,7 +17,7 @@ interface StyleProps {
 // =============================================================================
 // STYLING
 // =============================================================================
-export const InputWrapper = styled.div<StyleProps>`
+export const InputWrapper = styled.div<InputWrapperStyleProps>`
     display: flex;
     align-items: center;
     position: relative;
@@ -46,25 +47,65 @@ export const InputWrapper = styled.div<StyleProps>`
                     box-shadow: none;
                 }
             `;
-        } else if (props.disabled) {
+        } else if (props.$disabled) {
             return css`
-                background: ${Color.Neutral[6](props)};
+                background: ${Color.Neutral[6]};
                 cursor: not-allowed;
 
                 :focus-within {
-                    border: 1px solid ${Color.Neutral[5](props)};
+                    border: 1px solid ${Color.Neutral[5]};
                     box-shadow: none;
                 }
             `;
         } else if (props.$error) {
             return css`
-                border: 1px solid ${Color.Validation.Red.Border(props)};
+                border: 1px solid ${Color.Validation.Red.Border};
 
                 :focus-within {
-                    border: 1px solid ${Color.Validation.Red.Border(props)};
+                    border: 1px solid ${Color.Validation.Red.Border};
                     box-shadow: ${DesignToken.InputErrorBoxShadow};
                 }
             `;
         }
     }}
 `;
+
+/**
+ * standalone native input with stripped-down styles, intended to be used in
+ * combination with `InputWrapper` or other wrappers to build composite widgets
+ */
+export const BasicInput = styled.input`
+    ${TextStyleHelper.getTextStyle("Body", "regular")}
+    color: ${Color.Neutral[1]};
+    display: block;
+    background: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+
+    :disabled {
+        :hover {
+            cursor: not-allowed;
+        }
+    }
+
+    ::placeholder,
+    ::-webkit-input-placeholder {
+        color: ${Color.Neutral[3]};
+    }
+
+    // Chrome, Safari, Edge, Opera
+    ::-webkit-outer-spin-button,
+    ::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    // Safari (remove top shadow)
+    --webkit-appearance: none;
+
+    // Firefox
+    --moz-appearance: textfield;
+`;