-
Notifications
You must be signed in to change notification settings - Fork 18
[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.
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
30
commits into
master
Choose a base branch
from
jialecl/timeComponent
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
30 commits
Select commit
Hold shift + click to select a range
3193f0e
Time component first commit
Jialecl 13b5cda
Improved behavior and interactions
Jialecl 3161247
Clearable and controlled behavior added
Jialecl 0fbda9e
Added keyboard dupport to TimePicker
Jialecl 51d06eb
Chromatic tests added
Jialecl 5d4171b
Fix bugs related to events and added tests
Jialecl 7799674
Improved readOnly, error and disabled behavior
Jialecl f2b0473
Changed token applied to popover
Jialecl b1952bf
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl 2af83c4
More tests added and code improvements
Jialecl 9a9ea5e
Added documentation and improved tests coverage
Jialecl 41a70e6
New examples added to documentation
Jialecl a1732f3
Adding step value for the time picker
Jialecl d2d265e
Changing option role
Jialecl dc11d9b
picking the correct role in tests
Jialecl 3cc17ff
refactoring code to make it more readable
Jialecl 4c3ad37
Images added to doc
Jialecl 2c4d640
Fixed empty value behavior
Jialecl 83bfc74
correct keyboard events filtered and taking into account 0
Jialecl b7f01cb
Improved keyboard behavior and moved a function to utils
Jialecl a1380f8
Removed calculateWidth from time
Jialecl ca00a86
Changes based on feedback related to styles and documentation
Jialecl 82d2f76
Additional changes
Jialecl c2ccbb7
More changes based on review comments.
Jialecl a665103
Added missing localization options
Jialecl 907303f
Added localization to date and time inputs
Jialecl c635a80
refactored function for clarity
Jialecl 083e6fc
Correct values applied to aria label and translations
Jialecl e7d3150
Some minor improvements based on comments
Jialecl 8d48b9e
Fixing empty values in spinButton
Jialecl File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
apps/website/screens/components/time-input/TimeInputPageLayout.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
251 changes: 251 additions & 0 deletions
251
apps/website/screens/components/time-input/code/TimeInputCodePage.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,251 @@ | ||
| 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 <Code>label</Code> is | ||
| provided. | ||
| </td> | ||
| <td> | ||
| <TableCode>'Time 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
24
apps/website/screens/components/time-input/code/examples/controlled.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 time" | ||
| value={value} | ||
| onChange={newValue => setValue(newValue)} | ||
| /> | ||
| </DxcInset> | ||
| ); | ||
| }`; | ||
|
|
||
| const scope = { | ||
| DxcTimeInput, | ||
| DxcInset, | ||
| useState, | ||
| }; | ||
|
|
||
| export default { code, scope }; |
27 changes: 27 additions & 0 deletions
27
apps/website/screens/components/time-input/code/examples/format.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| 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 time" | ||
| defaultValue="20:00" | ||
| timeFormat="24" | ||
|
PelayoFelgueroso marked this conversation as resolved.
|
||
| onChange={onChange} | ||
| /> | ||
| </DxcInset> | ||
| ); | ||
| }`; | ||
|
|
||
| const scope = { | ||
| DxcTimeInput, | ||
| DxcInset, | ||
| useState, | ||
| }; | ||
|
|
||
| export default { code, scope }; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we should merge this change