From 3b696371bd29c43c721b95ef6883ad3e527c026c Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 30 Jun 2026 17:11:44 +0200 Subject: [PATCH 1/2] Adding type to buttons to avoid triggering onSubmit inside a form --- packages/lib/src/accordion/Accordion.test.tsx | 14 ++ packages/lib/src/accordion/AccordionItem.tsx | 1 + packages/lib/src/date-input/Calendar.tsx | 1 + .../lib/src/date-input/DateInput.stories.tsx | 208 +++++++++++------- .../lib/src/date-input/DateInput.test.tsx | 16 ++ packages/lib/src/date-input/DatePicker.tsx | 3 + packages/lib/src/date-input/YearPicker.tsx | 1 + packages/lib/src/dropdown/Dropdown.test.tsx | 11 + packages/lib/src/dropdown/Dropdown.tsx | 1 + packages/lib/src/tabs/Tabs.test.tsx | 25 +++ packages/lib/src/tabs/Tabs.tsx | 2 + .../lib/src/toggle-group/ToggleGroup.test.tsx | 17 ++ packages/lib/src/toggle-group/ToggleGroup.tsx | 1 + packages/lib/src/wizard/Wizard.test.tsx | 21 ++ packages/lib/src/wizard/Wizard.tsx | 1 + 15 files changed, 241 insertions(+), 82 deletions(-) diff --git a/packages/lib/src/accordion/Accordion.test.tsx b/packages/lib/src/accordion/Accordion.test.tsx index 4aab152c14..c121ceb984 100644 --- a/packages/lib/src/accordion/Accordion.test.tsx +++ b/packages/lib/src/accordion/Accordion.test.tsx @@ -131,4 +131,18 @@ describe("Accordion component tests", () => { fireEvent.click(getByText("Accordion")); expect(onChange).not.toHaveBeenCalled(); }); + test("Accordion does not trigger onSubmit when inside a form", () => { + const onSubmit = jest.fn(); + const { getByText } = render( +
+ + +
test-expanded
+ + +
+ ); + fireEvent.click(getByText("Accordion")); + expect(onSubmit).not.toHaveBeenCalled(); + }); }); diff --git a/packages/lib/src/accordion/AccordionItem.tsx b/packages/lib/src/accordion/AccordionItem.tsx index cbae646b33..5d1b132128 100644 --- a/packages/lib/src/accordion/AccordionItem.tsx +++ b/packages/lib/src/accordion/AccordionItem.tsx @@ -174,6 +174,7 @@ const AccordionItem = ({ tabIndex={disabled ? -1 : tabIndex} aria-expanded={isItemExpanded} aria-controls={`accordion-panel-${id}`} + type="button" > diff --git a/packages/lib/src/date-input/Calendar.tsx b/packages/lib/src/date-input/Calendar.tsx index 6e27e6f398..3e2b61b387 100644 --- a/packages/lib/src/date-input/Calendar.tsx +++ b/packages/lib/src/date-input/Calendar.tsx @@ -283,6 +283,7 @@ const Calendar = ({ today.get("month") === date.month && today.get("year") === innerDate.get("year") } + type="button" > {date.day} diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/packages/lib/src/date-input/DateInput.stories.tsx index c98da33b31..5fa96d8791 100644 --- a/packages/lib/src/date-input/DateInput.stories.tsx +++ b/packages/lib/src/date-input/DateInput.stories.tsx @@ -10,6 +10,8 @@ import DxcDateInput from "./DateInput"; import DxcDatePicker from "./DatePicker"; import YearPicker from "./YearPicker"; import { fireEvent, screen, userEvent, within } from "storybook/internal/test"; +import DxcAccordion from "../accordion/Accordion"; +import DxcSelect from "../select/Select"; export default { title: "Date Input", @@ -29,88 +31,130 @@ export default { }, } satisfies Meta; -const DateInputChromatic = () => ( - <> - - - <DxcContainer height="500px"> - <DxcDateInput label="Date input" defaultValue="06-04-1905" error="Error message" /> - </DxcContainer> - </ExampleContainer> - <ExampleContainer> - <Title title="Complete date input" theme="light" level={4} /> - <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <DxcDateInput - label="Disabled date input" - helperText="Help message" - defaultValue="06-04-2007" - clearable - disabled - /> - </ExampleContainer> - <ExampleContainer> - <Title title="Read only" theme="light" level={4} /> - <DxcDateInput label="Example label" helperText="Help message" defaultValue="06-04-2007" clearable readOnly /> - </ExampleContainer> - <ExampleContainer> - <Title title="Invalid" theme="light" level={4} /> - <DxcDateInput label="Error date input" error="Error message." placeholder /> - </ExampleContainer> - <ExampleContainer> - <Title title="Relation between icons" theme="light" level={4} /> - <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2007" clearable /> - </ExampleContainer> - <Title title="Margins" theme="light" level={2} /> - <ExampleContainer> - <Title title="Xxsmall" theme="light" level={4} /> - <DxcDateInput label="Xxsmall" margin="xxsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xsmall" theme="light" level={4} /> - <DxcDateInput label="Xsmall" margin="xsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Small" theme="light" level={4} /> - <DxcDateInput label="Small" margin="small" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium" theme="light" level={4} /> - <DxcDateInput label="Medium" margin="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large" theme="light" level={4} /> - <DxcDateInput label="Large" margin="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xlarge" theme="light" level={4} /> - <DxcDateInput label="Xlarge" margin="xlarge" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xxlarge" theme="light" level={4} /> - <DxcDateInput label="Xxlarge" margin="xxlarge" /> - </ExampleContainer> - <Title title="Sizes" theme="light" level={2} /> - <ExampleContainer> - <Title title="Small size" theme="light" level={4} /> - <DxcDateInput label="Small" size="small" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size" theme="light" level={4} /> - <DxcDateInput label="Medium" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size" theme="light" level={4} /> - <DxcDateInput label="Large" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="FillParent size" theme="light" level={4} /> - <DxcDateInput label="FillParent" size="fillParent" /> - </ExampleContainer> - </> -); +const DateInputChromatic = () => { + const onChange = ({ value }: { value: string; error?: string; date?: Date }) => { + console.log("onChange: ", value); + }; + const onBlur = ({ value }: { value: string; error?: string; date?: Date }) => { + console.log("onBlur: ", value); + }; + + const singleOptions = [ + { label: "Option 01", value: "1" }, + { label: "Option 02", value: "2" }, + { label: "Option 03", value: "3" }, + { label: "Option 04", value: "4" }, + ]; + + return ( + <> + <ExampleContainer> + <Title title="Year picker" theme="light" level={4} /> + <DxcContainer height="500px"> + <form + onSubmit={(e) => { + e.preventDefault(); + console.log("Form submitted"); + }} + > + <DxcDateInput + label="Date input" + defaultValue="06-04-1905" + error="Error message" + onChange={onChange} + onBlur={onBlur} + /> + <DxcAccordion> + <DxcAccordion.AccordionItem label="asdasd">asdasd</DxcAccordion.AccordionItem> + </DxcAccordion> + <ExampleContainer> + <Title title="Multiple selection" theme="light" level={4} /> + <DxcSelect + label="Multiple select" + searchable + options={singleOptions} + multiple + defaultValue={["1", "2"]} + /> + </ExampleContainer> + </form> + </DxcContainer> + </ExampleContainer> + <ExampleContainer> + <Title title="Complete date input" theme="light" level={4} /> + <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional /> + </ExampleContainer> + <ExampleContainer> + <Title title="Disabled" theme="light" level={4} /> + <DxcDateInput + label="Disabled date input" + helperText="Help message" + defaultValue="06-04-2007" + clearable + disabled + /> + </ExampleContainer> + <ExampleContainer> + <Title title="Read only" theme="light" level={4} /> + <DxcDateInput label="Example label" helperText="Help message" defaultValue="06-04-2007" clearable readOnly /> + </ExampleContainer> + <ExampleContainer> + <Title title="Invalid" theme="light" level={4} /> + <DxcDateInput label="Error date input" error="Error message." placeholder /> + </ExampleContainer> + <ExampleContainer> + <Title title="Relation between icons" theme="light" level={4} /> + <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2007" clearable /> + </ExampleContainer> + <Title title="Margins" theme="light" level={2} /> + <ExampleContainer> + <Title title="Xxsmall" theme="light" level={4} /> + <DxcDateInput label="Xxsmall" margin="xxsmall" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Xsmall" theme="light" level={4} /> + <DxcDateInput label="Xsmall" margin="xsmall" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Small" theme="light" level={4} /> + <DxcDateInput label="Small" margin="small" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Medium" theme="light" level={4} /> + <DxcDateInput label="Medium" margin="medium" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Large" theme="light" level={4} /> + <DxcDateInput label="Large" margin="large" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Xlarge" theme="light" level={4} /> + <DxcDateInput label="Xlarge" margin="xlarge" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Xxlarge" theme="light" level={4} /> + <DxcDateInput label="Xxlarge" margin="xxlarge" /> + </ExampleContainer> + <Title title="Sizes" theme="light" level={2} /> + <ExampleContainer> + <Title title="Small size" theme="light" level={4} /> + <DxcDateInput label="Small" size="small" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Medium size" theme="light" level={4} /> + <DxcDateInput label="Medium" size="medium" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Large size" theme="light" level={4} /> + <DxcDateInput label="Large" size="large" /> + </ExampleContainer> + <ExampleContainer> + <Title title="FillParent size" theme="light" level={4} /> + <DxcDateInput label="FillParent" size="fillParent" /> + </ExampleContainer> + </> + ); +}; const YearPickerComponent = () => ( <ExampleContainer expanded> diff --git a/packages/lib/src/date-input/DateInput.test.tsx b/packages/lib/src/date-input/DateInput.test.tsx index 8212575bf2..27655dcfa6 100644 --- a/packages/lib/src/date-input/DateInput.test.tsx +++ b/packages/lib/src/date-input/DateInput.test.tsx @@ -497,4 +497,20 @@ describe("DateInput component tests", () => { userEvent.click(calendarAction); expect(getByText("October 2080")).toBeTruthy(); }); + test("Form onSubmit is not called when interacting with the calendar and pressing enter", () => { + const onSubmit = jest.fn(); + const { getByRole, getAllByText } = render( + <form onSubmit={onSubmit}> + <DxcDateInput label="Default label" format="dd-mm-yy" defaultValue="21-10-80" /> + </form> + ); + const calendarAction = getByRole("combobox"); + userEvent.click(calendarAction); + const day1 = getAllByText("1")[0]; + if (day1 != null) { + userEvent.click(day1); + } + userEvent.type(calendarAction, "{enter}"); + expect(onSubmit).not.toHaveBeenCalled(); + }); }); diff --git a/packages/lib/src/date-input/DatePicker.tsx b/packages/lib/src/date-input/DatePicker.tsx index fb5b8f45c4..723d8b4bd9 100644 --- a/packages/lib/src/date-input/DatePicker.tsx +++ b/packages/lib/src/date-input/DatePicker.tsx @@ -107,6 +107,7 @@ const DatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Elemen <HeaderButton aria-label={translatedLabels.calendar.previousMonthTitle} onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))} + type="button" > <DxcIcon icon="keyboard_arrow_left" /> </HeaderButton> @@ -114,6 +115,7 @@ const DatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Elemen <HeaderYearTrigger aria-live="polite" onClick={() => setContent((currentContent) => (currentContent === "yearPicker" ? "calendar" : "yearPicker"))} + type="button" > <HeaderYearTriggerLabel> {translatedLabels.calendar.months[innerDate.get("month")]} {innerDate.format("YYYY")} @@ -124,6 +126,7 @@ const DatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Elemen <HeaderButton aria-label={translatedLabels.calendar.nextMonthTitle} onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))} + type="button" > <DxcIcon icon="keyboard_arrow_right" /> </HeaderButton> diff --git a/packages/lib/src/date-input/YearPicker.tsx b/packages/lib/src/date-input/YearPicker.tsx index b08f0cd547..d32ecc103c 100644 --- a/packages/lib/src/date-input/YearPicker.tsx +++ b/packages/lib/src/date-input/YearPicker.tsx @@ -109,6 +109,7 @@ const YearPicker = ({ onYearSelect, selectedDate, today }: YearPickerPropsType): onYearSelect(year); }} role="option" + type="button" > {year} </YearPickerButton> diff --git a/packages/lib/src/dropdown/Dropdown.test.tsx b/packages/lib/src/dropdown/Dropdown.test.tsx index ba2290eb71..de333c8ebe 100644 --- a/packages/lib/src/dropdown/Dropdown.test.tsx +++ b/packages/lib/src/dropdown/Dropdown.test.tsx @@ -411,4 +411,15 @@ describe("Dropdown component tests", () => { }); expect(queryByRole("menu")).toBeFalsy(); }); + test("Dropdown does not trigger form submission when inside a form", () => { + const onSubmit = jest.fn(); + const { getByRole } = render( + <form onSubmit={onSubmit}> + <DxcDropdown options={options} label="dropdown-test-1" onSelectOption={() => {}} /> + </form> + ); + const dropdown = getByRole("button"); + userEvent.click(dropdown); + expect(onSubmit).not.toHaveBeenCalled(); + }); }); diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx index f9d75012a4..c67357e45b 100644 --- a/packages/lib/src/dropdown/Dropdown.tsx +++ b/packages/lib/src/dropdown/Dropdown.tsx @@ -283,6 +283,7 @@ const DxcDropdown = ({ aria-label="Show options" tabIndex={tabIndex} ref={triggerRef} + type="button" > <DropdownTriggerContent iconPosition={iconPosition}> {icon && ( diff --git a/packages/lib/src/tabs/Tabs.test.tsx b/packages/lib/src/tabs/Tabs.test.tsx index 66f4f4815c..430d3172d7 100644 --- a/packages/lib/src/tabs/Tabs.test.tsx +++ b/packages/lib/src/tabs/Tabs.test.tsx @@ -331,4 +331,29 @@ describe("Tabs component tests", () => { expect(tabs[1]?.getAttribute("aria-selected")).toBe("false"); expect(tabs[2]?.getAttribute("aria-selected")).toBe("true"); }); + test("Tabs should not trigger onSubmit inside a form", () => { + const onSubmit = jest.fn(); + const onTabClick = [jest.fn(), jest.fn(), jest.fn()]; + const { getAllByRole } = render( + <form onSubmit={onSubmit}> + <DxcTabs> + <DxcTabs.Tab label="Tab-1" onClick={onTabClick[0]} defaultActive> + <></> + </DxcTabs.Tab> + <DxcTabs.Tab label="Tab-2" onClick={onTabClick[1]}> + <></> + </DxcTabs.Tab> + <DxcTabs.Tab label="Tab-3" onClick={onTabClick[2]}> + <></> + </DxcTabs.Tab> + </DxcTabs> + </form> + ); + const tabs = getAllByRole("tab"); + if (tabs[0]) { + fireEvent.click(tabs[0]); + } + expect(onTabClick[0]).toHaveBeenCalled(); + expect(onSubmit).not.toHaveBeenCalled(); + }); }); diff --git a/packages/lib/src/tabs/Tabs.tsx b/packages/lib/src/tabs/Tabs.tsx index 1d137cf0f4..4d96e056ba 100644 --- a/packages/lib/src/tabs/Tabs.tsx +++ b/packages/lib/src/tabs/Tabs.tsx @@ -208,6 +208,7 @@ const DxcTabs = ({ children, iconPosition = "left", margin, tabIndex = 0 }: Tabs disabled={!scrollLeftEnabled} onClick={scrollLeft} tabIndex={scrollLeftEnabled ? tabIndex : -1} + type="button" > <DxcIcon icon="keyboard_arrow_left" /> </ScrollIndicatorButton> @@ -229,6 +230,7 @@ const DxcTabs = ({ children, iconPosition = "left", margin, tabIndex = 0 }: Tabs disabled={!scrollRightEnabled} onClick={scrollRight} tabIndex={scrollRightEnabled ? tabIndex : -1} + type="button" > <DxcIcon icon="keyboard_arrow_right" /> </ScrollIndicatorButton> diff --git a/packages/lib/src/toggle-group/ToggleGroup.test.tsx b/packages/lib/src/toggle-group/ToggleGroup.test.tsx index 2aa58d02c2..88f916a7c8 100644 --- a/packages/lib/src/toggle-group/ToggleGroup.test.tsx +++ b/packages/lib/src/toggle-group/ToggleGroup.test.tsx @@ -160,4 +160,21 @@ describe("Toggle group component tests", () => { fireEvent.click(getByRole("button", { name: "Ebay" })); expect(handleChange).toHaveBeenCalledWith([1, 2]); }); + + test("Togglegroup should not trigger onSubmit when inside a form", () => { + const handleSubmit = jest.fn(); + const handleChange = jest.fn(); + const options = [ + { value: 1, label: "Amazon" }, + { value: 2, label: "Ebay" }, + ]; + const { getByRole } = render( + <form onSubmit={handleSubmit}> + <DxcToggleGroup options={options} value={[1]} multiple onChange={handleChange} /> + </form> + ); + fireEvent.click(getByRole("button", { name: "Ebay" })); + expect(handleChange).toHaveBeenCalledWith([1, 2]); + expect(handleSubmit).not.toHaveBeenCalled(); + }); }); diff --git a/packages/lib/src/toggle-group/ToggleGroup.tsx b/packages/lib/src/toggle-group/ToggleGroup.tsx index db80c10de5..ec1ddd85f9 100644 --- a/packages/lib/src/toggle-group/ToggleGroup.tsx +++ b/packages/lib/src/toggle-group/ToggleGroup.tsx @@ -120,6 +120,7 @@ export default function DxcToggleGroup({ onlyIcon={!option.label && !!option.icon} selected={selected} tabIndex={!option.disabled ? tabIndex : -1} + type="button" > {option.icon && ( <IconContainer> diff --git a/packages/lib/src/wizard/Wizard.test.tsx b/packages/lib/src/wizard/Wizard.test.tsx index 83d14e9777..cd2dce2113 100644 --- a/packages/lib/src/wizard/Wizard.test.tsx +++ b/packages/lib/src/wizard/Wizard.test.tsx @@ -140,4 +140,25 @@ describe("Wizard components tests", () => { expect(onClick).toHaveBeenNthCalledWith(1, 1); expect(onClick).toHaveBeenNthCalledWith(2, 0); }); + + test("Wizard should not trigger onSubmit when inside a form", () => { + const onSubmit = jest.fn(); + const { getByText } = render( + <form onSubmit={onSubmit}> + <DxcWizard + steps={[ + { + label: "first-step", + }, + { + label: "second-step", + }, + ]} + /> + </form> + ); + const step = getByText("second-step"); + fireEvent.click(step); + expect(onSubmit).not.toHaveBeenCalled(); + }); }); diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx index aa15ebfb89..fb0799b368 100644 --- a/packages/lib/src/wizard/Wizard.tsx +++ b/packages/lib/src/wizard/Wizard.tsx @@ -190,6 +190,7 @@ export default function DxcWizard({ }} tabIndex={tabIndex} unvisited={i > (currentStep ?? innerCurrent)} + type="button" > <StepIndicator hasValidityIcon={step.valid != null}> <IconContainer From 5ae2f4af54f73766bc1abd53a4ab75bd866856b5 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Tue, 30 Jun 2026 17:14:57 +0200 Subject: [PATCH 2/2] Reverted date input visual tests --- .../lib/src/date-input/DateInput.stories.tsx | 208 +++++++----------- 1 file changed, 82 insertions(+), 126 deletions(-) diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/packages/lib/src/date-input/DateInput.stories.tsx index 5fa96d8791..c98da33b31 100644 --- a/packages/lib/src/date-input/DateInput.stories.tsx +++ b/packages/lib/src/date-input/DateInput.stories.tsx @@ -10,8 +10,6 @@ import DxcDateInput from "./DateInput"; import DxcDatePicker from "./DatePicker"; import YearPicker from "./YearPicker"; import { fireEvent, screen, userEvent, within } from "storybook/internal/test"; -import DxcAccordion from "../accordion/Accordion"; -import DxcSelect from "../select/Select"; export default { title: "Date Input", @@ -31,130 +29,88 @@ export default { }, } satisfies Meta<typeof DxcDateInput>; -const DateInputChromatic = () => { - const onChange = ({ value }: { value: string; error?: string; date?: Date }) => { - console.log("onChange: ", value); - }; - const onBlur = ({ value }: { value: string; error?: string; date?: Date }) => { - console.log("onBlur: ", value); - }; - - const singleOptions = [ - { label: "Option 01", value: "1" }, - { label: "Option 02", value: "2" }, - { label: "Option 03", value: "3" }, - { label: "Option 04", value: "4" }, - ]; - - return ( - <> - <ExampleContainer> - <Title title="Year picker" theme="light" level={4} /> - <DxcContainer height="500px"> - <form - onSubmit={(e) => { - e.preventDefault(); - console.log("Form submitted"); - }} - > - <DxcDateInput - label="Date input" - defaultValue="06-04-1905" - error="Error message" - onChange={onChange} - onBlur={onBlur} - /> - <DxcAccordion> - <DxcAccordion.AccordionItem label="asdasd">asdasd</DxcAccordion.AccordionItem> - </DxcAccordion> - <ExampleContainer> - <Title title="Multiple selection" theme="light" level={4} /> - <DxcSelect - label="Multiple select" - searchable - options={singleOptions} - multiple - defaultValue={["1", "2"]} - /> - </ExampleContainer> - </form> - </DxcContainer> - </ExampleContainer> - <ExampleContainer> - <Title title="Complete date input" theme="light" level={4} /> - <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional /> - </ExampleContainer> - <ExampleContainer> - <Title title="Disabled" theme="light" level={4} /> - <DxcDateInput - label="Disabled date input" - helperText="Help message" - defaultValue="06-04-2007" - clearable - disabled - /> - </ExampleContainer> - <ExampleContainer> - <Title title="Read only" theme="light" level={4} /> - <DxcDateInput label="Example label" helperText="Help message" defaultValue="06-04-2007" clearable readOnly /> - </ExampleContainer> - <ExampleContainer> - <Title title="Invalid" theme="light" level={4} /> - <DxcDateInput label="Error date input" error="Error message." placeholder /> - </ExampleContainer> - <ExampleContainer> - <Title title="Relation between icons" theme="light" level={4} /> - <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2007" clearable /> - </ExampleContainer> - <Title title="Margins" theme="light" level={2} /> - <ExampleContainer> - <Title title="Xxsmall" theme="light" level={4} /> - <DxcDateInput label="Xxsmall" margin="xxsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xsmall" theme="light" level={4} /> - <DxcDateInput label="Xsmall" margin="xsmall" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Small" theme="light" level={4} /> - <DxcDateInput label="Small" margin="small" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium" theme="light" level={4} /> - <DxcDateInput label="Medium" margin="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large" theme="light" level={4} /> - <DxcDateInput label="Large" margin="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xlarge" theme="light" level={4} /> - <DxcDateInput label="Xlarge" margin="xlarge" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Xxlarge" theme="light" level={4} /> - <DxcDateInput label="Xxlarge" margin="xxlarge" /> - </ExampleContainer> - <Title title="Sizes" theme="light" level={2} /> - <ExampleContainer> - <Title title="Small size" theme="light" level={4} /> - <DxcDateInput label="Small" size="small" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Medium size" theme="light" level={4} /> - <DxcDateInput label="Medium" size="medium" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Large size" theme="light" level={4} /> - <DxcDateInput label="Large" size="large" /> - </ExampleContainer> - <ExampleContainer> - <Title title="FillParent size" theme="light" level={4} /> - <DxcDateInput label="FillParent" size="fillParent" /> - </ExampleContainer> - </> - ); -}; +const DateInputChromatic = () => ( + <> + <ExampleContainer> + <Title title="Year picker" theme="light" level={4} /> + <DxcContainer height="500px"> + <DxcDateInput label="Date input" defaultValue="06-04-1905" error="Error message" /> + </DxcContainer> + </ExampleContainer> + <ExampleContainer> + <Title title="Complete date input" theme="light" level={4} /> + <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional /> + </ExampleContainer> + <ExampleContainer> + <Title title="Disabled" theme="light" level={4} /> + <DxcDateInput + label="Disabled date input" + helperText="Help message" + defaultValue="06-04-2007" + clearable + disabled + /> + </ExampleContainer> + <ExampleContainer> + <Title title="Read only" theme="light" level={4} /> + <DxcDateInput label="Example label" helperText="Help message" defaultValue="06-04-2007" clearable readOnly /> + </ExampleContainer> + <ExampleContainer> + <Title title="Invalid" theme="light" level={4} /> + <DxcDateInput label="Error date input" error="Error message." placeholder /> + </ExampleContainer> + <ExampleContainer> + <Title title="Relation between icons" theme="light" level={4} /> + <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2007" clearable /> + </ExampleContainer> + <Title title="Margins" theme="light" level={2} /> + <ExampleContainer> + <Title title="Xxsmall" theme="light" level={4} /> + <DxcDateInput label="Xxsmall" margin="xxsmall" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Xsmall" theme="light" level={4} /> + <DxcDateInput label="Xsmall" margin="xsmall" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Small" theme="light" level={4} /> + <DxcDateInput label="Small" margin="small" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Medium" theme="light" level={4} /> + <DxcDateInput label="Medium" margin="medium" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Large" theme="light" level={4} /> + <DxcDateInput label="Large" margin="large" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Xlarge" theme="light" level={4} /> + <DxcDateInput label="Xlarge" margin="xlarge" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Xxlarge" theme="light" level={4} /> + <DxcDateInput label="Xxlarge" margin="xxlarge" /> + </ExampleContainer> + <Title title="Sizes" theme="light" level={2} /> + <ExampleContainer> + <Title title="Small size" theme="light" level={4} /> + <DxcDateInput label="Small" size="small" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Medium size" theme="light" level={4} /> + <DxcDateInput label="Medium" size="medium" /> + </ExampleContainer> + <ExampleContainer> + <Title title="Large size" theme="light" level={4} /> + <DxcDateInput label="Large" size="large" /> + </ExampleContainer> + <ExampleContainer> + <Title title="FillParent size" theme="light" level={4} /> + <DxcDateInput label="FillParent" size="fillParent" /> + </ExampleContainer> + </> +); const YearPickerComponent = () => ( <ExampleContainer expanded>