Skip to content

[minor] New component TimeInput #2465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jialecl wants to merge 19 commits into
base: master
Choose a base branch
from
Open

[minor] New component TimeInput #2465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3193f0e
Time component first commit
Jialecl Apr 20, 2026
13b5cda
Improved behavior and interactions
Jialecl Apr 20, 2026
3161247
Clearable and controlled behavior added
Jialecl Apr 21, 2026
0fbda9e
Added keyboard dupport to TimePicker
Jialecl Apr 21, 2026
51d06eb
Chromatic tests added
Jialecl Apr 22, 2026
5d4171b
Fix bugs related to events and added tests
Jialecl Apr 22, 2026
7799674
Improved readOnly, error and disabled behavior
Jialecl Apr 23, 2026
f2b0473
Changed token applied to popover
Jialecl Apr 23, 2026
b1952bf
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Apr 23, 2026
2af83c4
More tests added and code improvements
Jialecl Apr 23, 2026
9a9ea5e
Added documentation and improved tests coverage
Jialecl Apr 27, 2026
41a70e6
New examples added to documentation
Jialecl Apr 27, 2026
a1732f3
Adding step value for the time picker
Jialecl Apr 28, 2026
d2d265e
Changing option role
Jialecl Apr 28, 2026
dc11d9b
picking the correct role in tests
Jialecl Apr 28, 2026
3cc17ff
refactoring code to make it more readable
Jialecl Apr 28, 2026
4c3ad37
Images added to doc
Jialecl Apr 28, 2026
2c4d640
Fixed empty value behavior
Jialecl Apr 28, 2026
83bfc74
correct keyboard events filtered and taking into account 0
Jialecl Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/website/next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import "./.next/dev/types/routes.d.ts";

// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
17 changes: 17 additions & 0 deletions apps/website/pages/components/time-input/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import TimeInputPageLayout from "screens/components/time-input/TimeInputPageLayout";
import TimeInputCodePage from "screens/components/time-input/code/TimeInputCodePage";

const Code = () => (
<>
<Head>
<title>Time input code — Halstack Design System</title>
</Head>
<TimeInputCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <TimeInputPageLayout>{page}</TimeInputPageLayout>;

export default Code;
17 changes: 17 additions & 0 deletions apps/website/pages/components/time-input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import TimeInputOverviewPage from "screens/components/time-input/overview/TimeInputOverviewPage";
import TimeInputPageLayout from "screens/components/time-input/TimeInputPageLayout";

const Index = () => (
<>
<Head>
<title>Time input — Halstack Design System</title>
</Head>
<TimeInputOverviewPage />
</>
);

Index.getLayout = (page: ReactElement) => <TimeInputPageLayout>{page}</TimeInputPageLayout>;

export default Index;
6 changes: 6 additions & 0 deletions apps/website/screens/common/componentsList.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,12 @@
"status": "stable",
"icon": "subject"
},
{
"label": "Time input",
"path": "/components/time-input",
"status": "experimental",
"icon": "schedule"
},
{
"label": "Toggle group",
"path": "/components/toggle-group",
Expand Down
27 changes: 27 additions & 0 deletions apps/website/screens/components/time-input/TimeInputPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
import { ReactNode } from "react";

const TimeInputPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Overview", path: "/components/time-input" },
{ label: "Code", path: "/components/time-input/code" },
];

return (
<DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
<PageHeading>
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<ComponentHeading name="Time input" />
<DxcParagraph>Time input allows users to specify a specific time.</DxcParagraph>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
</DxcFlex>
);
};

export default TimeInputPageHeading;
248 changes: 248 additions & 0 deletions apps/website/screens/components/time-input/code/TimeInputCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import Code, { TableCode } from "@/common/Code";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import format from "./examples/format";
import withSeconds from "./examples/withSeconds";

const sections = [
{
title: "Props",
content: (
<DxcTable>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>ariaLabel</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Specifies a string to be used as the name for the timeInput element when no `label` is provided.</td>
<td>
<TableCode>'Text input'</TableCode>
</td>
</tr>
<tr>
<td>clearable</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the input will have an action to clear the entered value.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>defaultValue</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Initial value of the input, only when it is uncontrolled.</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>error</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
If it is a defined value and also a truthy string, the component will change its appearance, showing the
error below the input component. If the defined value is an empty string, it will reserve a space below
the component for a future error, but it would not change its look. In case of being undefined or null,
both the appearance and the space for the error message would not be modified.
</td>
<td>-</td>
</tr>
<tr>
<td>helperText</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Helper text to be placed above the input.</td>
<td>-</td>
</tr>
<tr>
<td>label</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be placed above the input.</td>
<td>-</td>
</tr>
<tr>
<td>name</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Name attribute of the input element.</td>
<td>-</td>
</tr>
<tr>
<td>onBlur</td>
<td>
<TableCode>{"(val: { value: string; error?: string }) => void"}</TableCode>
</td>
<td>
This function will be called when the input element loses the focus. An object including the input value
and the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
<Code>error</Code> will not be defined.
</td>
<td>-</td>
</tr>
<tr>
<td>onChange</td>
<td>
<TableCode>{"(value: string) => void"}</TableCode>
</td>
<td>
This function will be called when the user types within the input or selects a value in the dropdown
element of the component.
</td>
<td>-</td>
</tr>
<tr>
<td>optional</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>
If true, the input will be optional, showing '(Optional)' next to the label. Otherwise, the field will be
considered required and an error will be passed as a parameter to the <Code>onBlur</Code> function when it
has not been filled.
</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>readOnly</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>
If true, the component will not be mutable, meaning the user can not edit the control. In addition, the
clear action will not be displayed even if the flag is set to true.
</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>ref</td>
<td>
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
<td>showSeconds</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>
If true, the component will display seconds and allow the user to input them. Otherwise, seconds will not
be shown and the user will not be able to input them.
</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>size</td>
<td>
<TableCode>'small' | 'medium' | 'large' | 'fillParent'</TableCode>
</td>
<td>Size of the component.</td>
<td>
<TableCode>'medium'</TableCode>
</td>
</tr>
<tr>
<td>tabIndex</td>
<td>
<TableCode>number</TableCode>
</td>
<td>
Value of the <Code>tabindex</Code> attribute.
</td>
<td>
<TableCode>0</TableCode>
</td>
</tr>
<tr>
<td>timeFormat</td>
<td>
<TableCode>'12' | '24'</TableCode>
</td>
<td>Time format of the input. It can be either 12 or 24.</td>
<td>
<TableCode>'12'</TableCode>
</td>
</tr>
<tr>
<td>value</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Value of the input. If undefined, the component will be uncontrolled and the value will be managed
internally by the component.
</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
),
},
{
title: "Examples",
subSections: [
{
title: "Controlled",
content: <Example example={controlled} defaultIsVisible />,
},
{
title: "Uncontrolled",
content: <Example example={uncontrolled} defaultIsVisible />,
},
{
title: "24h format",
content: <Example example={format} defaultIsVisible />,
},
{
title: "With seconds",
content: <Example example={withSeconds} defaultIsVisible />,
},
],
},
];

const TextInputCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainer sections={sections} startHeadingLevel={2} />
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/text-input/code/TextInputCodePage.tsx" />
</DxcFlex>
);

export default TextInputCodePage;
24 changes: 24 additions & 0 deletions apps/website/screens/components/time-input/code/examples/controlled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { DxcTimeInput, DxcInset } from "@dxc-technology/halstack-react";
import { useState } from "react";

const code = `() => {
const [value, setValue] = useState("");

return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcTimeInput
label="Enter your name"
value={value}
onChange={newValue => setValue(newValue)}
/>
</DxcInset>
);
}`;

const scope = {
DxcTimeInput,
DxcInset,
useState,
};

export default { code, scope };
26 changes: 26 additions & 0 deletions apps/website/screens/components/time-input/code/examples/format.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { DxcTimeInput, DxcInset } from "@dxc-technology/halstack-react";
import { useState } from "react";

const code = `() => {
const onChange = (value) => {
console.log(value);
};

return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcTimeInput
label="Enter your name"
defaultValue="20:00"
timeFormat="24"
/>
</DxcInset>
);
}`;

const scope = {
DxcTimeInput,
DxcInset,
useState,
};

export default { code, scope };
Loading
Loading