Skip to content

DateInput redesign #2162

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

Merged
Jialecl merged 14 commits into from
Apr 28, 2025
Merged

DateInput redesign #2162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6ac1db4
Reimplementation of the Dropdown component with new CSS variables (1/2)
Feb 13, 2025
c05784c
Reimplementation of the Dropdown component with new CSS variables (2/2)
Feb 14, 2025
d954e4e
Fixed props for optional label
Feb 18, 2025
f974f53
Fixed outline overlapping header
Feb 18, 2025
c5967f6
Removed comment
Feb 18, 2025
26d9016
Added padding to calendar
Feb 19, 2025
a937376
Prepared structure for new documentation
Feb 19, 2025
4983ac9
Fixed problems based on feedback
Mar 17, 2025
3e56566
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mar 28, 2025
09b7a7a
Changed padding-top to flex gap
Mar 28, 2025
d0adbd4
Added documentation
Apr 24, 2025
9c011d7
Merge branch 'master' into Mil4n0r/tokens-date-input
Mil4n0r Apr 24, 2025
7360dec
Rephrasing for consistency
Jialecl Apr 28, 2025
abc2c37
Merge branch 'master' into Mil4n0r/tokens-date-input
Jialecl Apr 28, 2025
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
19 changes: 19 additions & 0 deletions apps/website/pages/components/date-input/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DateInputCodePage from "screens/components/date-input/code/DateInputCodePage";
import DateInputPageLayout from "screens/components/date-input/DateInputPageLayout";

const Code = () => {
return (
<>
<Head>
<title>Date Input Code — Halstack Design System</title>
</Head>
<DateInputCodePage />
</>
);
};

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

export default Code;
12 changes: 5 additions & 7 deletions apps/website/pages/components/date-input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import Head from "next/head";
import type { ReactElement } from "react";
import DateInputCodePage from "screens/components/date-input/code/DateInputCodePage";
import DateInputOverviewPage from "screens/components/date-input/overview/DateInputOverviewPage";
import DateInputPageLayout from "screens/components/date-input/DateInputPageLayout";

const Usage = () => {
const Index = () => {
return (
<>
<Head>
<title>Date Input — Halstack Design System</title>
</Head>
<DateInputCodePage />
<DateInputOverviewPage />
</>
);
};

Usage.getLayout = function getLayout(page: ReactElement) {
return <DateInputPageLayout>{page}</DateInputPageLayout>;
};
Index.getLayout = (page: ReactElement) => <DateInputPageLayout>{page}</DateInputPageLayout>;

export default Usage;
export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/date-input/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/date-input/usage.tsx
View file
Open in desktop

This file was deleted.

11 changes: 4 additions & 7 deletions apps/website/screens/components/date-input/DateInputPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,17 @@ import { ReactNode } from "react";

const DateInputPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/date-input" },
{ label: "Usage", path: "/components/date-input/usage" },
{ label: "Specifications", path: "/components/date-input/specifications" },
{ label: "Overview", path: "/components/date-input" },
{ label: "Code", path: "/components/date-input/code" },
];

return (
<DxcFlex direction="column" gap="3rem">
<PageHeading>
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Date Input" />
<DxcParagraph>
A date input is a user interface element where the user can type or select a date in a predefined format.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<DxcParagraph>Date inputs enable users to type or select a date in a predefined format.</DxcParagraph>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
174 changes: 87 additions & 87 deletions apps/website/screens/components/date-input/code/DateInputCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,58 +25,73 @@ const sections = [
</thead>
<tbody>
<tr>
<td>defaultValue</td>
<td>ariaLabel</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Initial value of the input element, only when it is uncontrolled.</td>
<td>-</td>
<td>
Specifies a string to be used as the name for the date input element when no <Code>label</Code> is
provided.
</td>
<td>'Date input'</td>
</tr>
<tr>
<td>value</td>
<td>autocomplete</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
internally by the component.
HTML <Code>autocomplete</Code> attribute. Lets the user specify if any permission the user agent has to
provide automated assistance in filling out the input value. Its value must be one of all the possible
values of the HTML autocomplete attribute. See{" "}
<DxcLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete">MDN</DxcLink>{" "}
for further information.
</td>
<td>-</td>
</tr>
<tr>
<td>label</td>
<td>
<TableCode>string</TableCode>
<TableCode>'off'</TableCode>
</td>
<td>Text to be placed above the date input.</td>
<td>-</td>
</tr>
<tr>
<td>name</td>
<td>clearable</td>
<td>
<TableCode>string</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>If true, the date input will have an action to clear the entered value.</td>
<td>
<TableCode>false</TableCode>
</td>
<td>Name attribute of the input element.</td>
<td>-</td>
</tr>
<tr>
<td>helperText</td>
<td>defaultValue</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Helper text to be placed above the date.</td>
<td>Initial value of the input element, only when it is uncontrolled.</td>
<td>-</td>
</tr>
<tr>
<td>placeholder</td>
<td>disabled</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the date format will appear as placeholder in the field.</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 date 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>format</td>
<td>
Expand All @@ -93,52 +108,52 @@ const sections = [
</td>
</tr>
<tr>
<td>clearable</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the date input will have an action to clear the entered value.</td>
<td>helperText</td>
<td>
<TableCode>false</TableCode>
<TableCode>string</TableCode>
</td>
<td>Helper text to be placed above the date.</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>label</td>
<td>
<TableCode>false</TableCode>
<TableCode>string</TableCode>
</td>
<td>Text to be placed above the date input.</td>
<td>-</td>
</tr>
<tr>
<td>optional</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>margin</td>
<td>
If true, the date will be optional, showing the text '(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> and{" "}
<Code>onChange</Code> functions when it has not been filled.
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
<TableCode>false</TableCode>
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
</td>
<td>-</td>
</tr>
<tr>
<td>readOnly</td>
<td>name</td>
<td>
<TableCode>boolean</TableCode>
<TableCode>string</TableCode>
</td>
<td>Name attribute of the input element.</td>
<td>-</td>
</tr>
<tr>
<td>onBlur</td>
<td>
If true, the component will not be mutable, meaning the user can not edit the control. The date picker
cannot be opened either. In addition, the clear action will not be displayed even if the flag is set to
true.
<TableCode>{"(val: { value: string; error?: string; date?: Date }) => void"}</TableCode>
</td>
<td>
<TableCode>false</TableCode>
This function will be called when the input element loses the focus. An object including the string value,
the error and the date value will be passed to this function. If the string value is a valid date,{" "}
<Code>error</Code> will be undefined. Also, if the string value is not a valid date, <Code>date</Code>{" "}
will be undefined.
</td>
<td>-</td>
</tr>
<tr>
<td>onChange</td>
Expand All @@ -154,56 +169,49 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>onBlur</td>
<td>optional</td>
<td>
<TableCode>{"(val: { value: string; error?: string; date?: Date }) => void"}</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>
This function will be called when the input element loses the focus. An object including the string value,
the error and the date value will be passed to this function. If the string value is a valid date,{" "}
<Code>error</Code> will be undefined. Also, if the string value is not a valid date, <Code>date</Code>{" "}
will be undefined.
If true, the date will be optional, showing the text '(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> and{" "}
<Code>onChange</Code> functions when it has not been filled.
</td>
<td>
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>error</td>
<td>placeholder</td>
<td>
<TableCode>string</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>If true, the date format will appear as placeholder in the field.</td>
<td>
If it is a defined value and also a truthy string, the component will change its appearance, showing the
error below the date 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.
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>autocomplete</td>
<td>readOnly</td>
<td>
<TableCode>string</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>
HTML <Code>autocomplete</Code> attribute. Lets the user specify if any permission the user agent has to
provide automated assistance in filling out the input value. Its value must be one of all the possible
values of the HTML autocomplete attribute. See{" "}
<DxcLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete">MDN</DxcLink>{" "}
for further information.
If true, the component will not be mutable, meaning the user can not edit the control. The date picker
cannot be opened either. In addition, the clear action will not be displayed even if the flag is set to
true.
</td>
<td>
<TableCode>'off'</TableCode>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>margin</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>ref</td>
<td>
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
Expand All @@ -229,23 +237,15 @@ const sections = [
</td>
</tr>
<tr>
<td>ref</td>
<td>
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
<td>ariaLabel</td>
<td>value</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
Specifies a string to be used as the name for the date input element when no <Code>label</Code> is
provided.
Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
internally by the component.
</td>
<td>'Date input'</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
Expand Down
Loading