Skip to content
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

Jump to bottom

Date year focus & two digit year format fix #1439

Merged
merged 17 commits into from Jan 30, 2023
Merged

Date year focus & two digit year format fix #1439

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
a122cf8
Fixing date select focus + 2 digit year format
Jialecl Jan 13, 2023
85ac7ba
Adding more tests + improved 2 digit year interactions
Jialecl Jan 16, 2023
e39c397
Adding test for two digit year format
Jialecl Jan 16, 2023
edc853b
improving some lines
Jialecl Jan 16, 2023
9db7fe2
Rename story
Jialecl Jan 17, 2023
481c8f0
Making changes based on feedback
Jialecl Jan 24, 2023
7e045cd
Improving the usage of dayjs()
Jialecl Jan 25, 2023
a249299
removing mocking in testing
Jialecl Jan 25, 2023
5c95bf7
remove mockdecorator from storybook
Jialecl Jan 25, 2023
0417b0f
reverting package-lock changes
Jialecl Jan 26, 2023
a620877
Changes to storybook and hook dependencies based on feedback
Jialecl Jan 26, 2023
de24d50
changing dependencies of useEffect
Jialecl Jan 26, 2023
323033c
getDate outside of the component
Jialecl Jan 27, 2023
644bd0b
Reorganizing tests + postition relative in suggestion's test
Jialecl Jan 30, 2023
6865574
reverting debug comment
Jialecl Jan 30, 2023
5d19fb9
Adding caret orientation
Jialecl Jan 30, 2023
d7154e4
moving icons to Icons.tsx
Jialecl Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions lib/src/common/variables.js
View file
Open in desktop
Expand Up @@ -1504,8 +1504,8 @@ export const defaultTranslatedComponentLabels = {
fetchingDataErrorMessage: "Error fetching data",
},
calendar: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
months: [
"January",
"February",
Expand Down
107 changes: 47 additions & 60 deletions lib/src/date-input/Calendar.tsx
View file
Open in desktop
Expand Up @@ -35,19 +35,28 @@ const getDays = (innerDate: Dayjs) => {
return monthDayCells;
};

const getDateToFocus = (selectedDate, innerDate, today) => {
return selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")
? selectedDate
: today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year")
? today
: innerDate.set("date", 1);
};

const isDaySelected = (date: { day: number; month: number; year: number }, selectedDate) =>
selectedDate?.get("month") === date.month &&
selectedDate?.get("year") === date.year &&
selectedDate?.get("date") === date.day;

const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: CalendarPropsType): JSX.Element => {
const [dateToFocus, setDateToFocus] = useState(
selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")
? selectedDate
: dayjs()
);
const [toFocus, setToFocus] = useState(false);
const today = dayjs();
const Calendar = ({
selectedDate,
innerDate,
onInnerDateChange,
onDaySelect,
today,
}: CalendarPropsType): JSX.Element => {
const [dateToFocus, setDateToFocus] = useState(getDateToFocus(selectedDate, innerDate, today));
const [isFocusable, setIsFocusable] = useState(false);
const dayCells = useMemo(() => getDays(innerDate), [innerDate]);
const translatedLabels = useTranslatedLabels();
const weekDays = translatedLabels.calendar.daysShort;
Expand All @@ -60,17 +69,7 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C

const handleOnBlur = (event) => {
if (!event?.currentTarget.contains(event.relatedTarget)) {
updateDateToFocus();
}
};

const updateDateToFocus = () => {
if (selectedDate?.get("month") === innerDate.get("month") && selectedDate?.get("year") === innerDate.get("year")) {
setDateToFocus(selectedDate);
} else if (today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year")) {
setDateToFocus(today);
} else {
setDateToFocus(innerDate.set("date", 1));
setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
}
};

Expand All @@ -79,21 +78,21 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
onInnerDateChange(date);
}
setDateToFocus(date);
setToFocus(true);
setIsFocusable(true);
};

useEffect(() => {
if (toFocus) {
if (isFocusable) {
document.getElementById(`day_${dateToFocus.get("date")}_month${dateToFocus.get("month")}`)?.focus();
setToFocus(false);
setIsFocusable(false);
}
}, [dateToFocus, toFocus]);
}, [dateToFocus, isFocusable]);

useEffect(() => {
if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
updateDateToFocus();
setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
}
}, [innerDate, dateToFocus, selectedDate]);
}, [innerDate, dateToFocus, selectedDate, today]);

const handleDayKeyboardEvent = (event, date) => {
let dateToFocusTemp =
Expand Down Expand Up @@ -163,32 +162,28 @@ const Calendar = ({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: C
))}
</DxcFlex>
<DayCellsContainer onBlur={handleOnBlur}>
{dayCells.map((date, index) =>
date !== 0 ? (
<DayCell
onKeyDown={(event) => handleDayKeyboardEvent(event, date)}
aria-label={date.day}
id={`day_${date.day}_month${date.month}`}
key={`day_${index}`}
onClick={() => onDateClickHandler(date)}
selected={isDaySelected(date, selectedDate)}
actualMonth={date.month === innerDate.get("month")}
autoFocus={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month")}
aria-selected={isDaySelected(date, selectedDate)}
tabIndex={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1}
isCurrentDay={
today.get("date") === date.day &&
today.get("month") === innerDate.get("month") &&
today.get("month") === date.month &&
today.get("year") === innerDate.get("year")
}
>
{date.day}
</DayCell>
) : (
<EmptyDayCell key={`empty_${index}`} />
)
)}
{dayCells.map((date, index) => (
<DayCell
onKeyDown={(event) => handleDayKeyboardEvent(event, date)}
aria-label={date.day}
id={`day_${date.day}_month${date.month}`}
key={`day_${index}`}
onClick={() => onDateClickHandler(date)}
selected={isDaySelected(date, selectedDate)}
actualMonth={date.month === innerDate.get("month")}
autoFocus={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month")}
aria-selected={isDaySelected(date, selectedDate)}
tabIndex={date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1}
isCurrentDay={
today.get("date") === date.day &&
today.get("month") === innerDate.get("month") &&
today.get("month") === date.month &&
today.get("year") === innerDate.get("year")
}
>
{date.day}
</DayCell>
))}
</DayCellsContainer>
</CalendarContainer>
);
Expand All @@ -210,8 +205,7 @@ const WeekHeaderCell = styled.span`
width: 36px;
height: 36px;
font-family: ${(props) => props.theme.dateInput.pickerFontFamily};
font-size: 14px;
line-height: 19px;
font-size: 0.875rem;
color: ${(props) => props.theme.dateInput.pickerWeekFontColor};
`;

Expand All @@ -238,7 +232,6 @@ const DayCell = styled.button<DayCellPropsType>`
padding: 0;
font-size: 0.875rem;
font-family: ${(props) => props.theme.dateInput.pickerFontFamily};
font-weight: 400;
border: none;
border-radius: 50%;
cursor: pointer;
Expand Down Expand Up @@ -272,10 +265,4 @@ const DayCell = styled.button<DayCellPropsType>`
: props.theme.dateInput.pickerDayFontColor};
`;

const EmptyDayCell = styled.div`
display: inline-block;
width: 40px;
height: 36px;
`;

export default React.memo(Calendar);
160 changes: 123 additions & 37 deletions lib/src/date-input/DateInput.stories.tsx
View file
Open in desktop
@@ -1,17 +1,23 @@
import React from "react";
import { userEvent, within, fireEvent, screen } from "@storybook/testing-library";
import DxcDateInput from "./DateInput";
import DxcDatePicker from "./DatePicker";
import YearPicker from "./YearPicker";
import Calendar from "./Calendar";
import Title from "../../.storybook/components/Title";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
import { BackgroundColorProvider } from "../BackgroundColorContext";
import DarkContainer from "../../.storybook/components/DarkSection";
import dayjs from "dayjs";
import useTheme from "../useTheme";
import { ThemeProvider } from "styled-components";

export default {
title: "Date input",
component: DxcDateInput,
};

export const Chromatic = () => (
const DateInputChromatic = () => (
<>
<ExampleContainer>
<Title title="Complete date input" theme="light" level={4} />
Expand All @@ -22,7 +28,7 @@ export const Chromatic = () => (
<DxcDateInput
label="Disabled date input"
helperText="Help message"
defaultValue="06-04-2027"
defaultValue="06-04-2007"
clearable
disabled
/>
Expand All @@ -33,7 +39,7 @@ export const Chromatic = () => (
</ExampleContainer>
<ExampleContainer>
<Title title="Relation between icons" theme="light" level={4} />
<DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2027" clearable />
<DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2007" clearable />
</ExampleContainer>
<BackgroundColorProvider color="#333333">
<DarkContainer>
Expand All @@ -58,7 +64,7 @@ export const Chromatic = () => (
</ExampleContainer>
<ExampleContainer>
<Title title="Relation between icons" theme="dark" level={4} />
<DxcDateInput label="Error date input" defaultValue="06-04-2027" error="Error message." clearable />
<DxcDateInput label="Error date input" defaultValue="06-04-2007" error="Error message." clearable />
</ExampleContainer>
</DarkContainer>
</BackgroundColorProvider>
Expand Down Expand Up @@ -104,48 +110,128 @@ export const Chromatic = () => (
<Title title="FillParent size" theme="light" level={4} />
<DxcDateInput label="FillParent" size="fillParent" />
</ExampleContainer>
<ExampleContainer expanded>
<Title title="Year picker" theme="light" level={4} />
<DxcDateInput label="Date input" defaultValue="06-04-1905" />
</ExampleContainer>
</>
);

const DatePicker = () => (
<ExampleContainer expanded>
<Title title="Show date picker" theme="light" level={4} />
<DxcDateInput label="Date input" defaultValue="06-04-2027" />
</ExampleContainer>
);

export const ShowDatePicker = DatePicker.bind({});
ShowDatePicker.play = async ({ canvasElement }) => {
export const Chromatic = DateInputChromatic.bind({});
Chromatic.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const dateBtn = canvas.getByRole("combobox");
await userEvent.click(dateBtn);
await userEvent.click(canvas.getAllByRole("combobox")[canvas.getAllByRole("combobox").length - 1]);
await fireEvent.click(screen.getByText("April 1905"));
};

const YearPicker = () => (
<ExampleContainer expanded>
<Title title="Show year picker" theme="light" level={4} />
<DxcDateInput label="Date input" defaultValue="06-04-2027" />
</ExampleContainer>
);
const DatePickerButtonStates = () => {
const colorsTheme: any = useTheme();
return (
<>
<ExampleContainer>
<Title title="Show date picker over another element with z-index 0" theme="light" level={4} />
GomezIvann marked this conversation as resolved.
Show resolved Hide resolved
<div
style={{
display: "flex",
flexDirection: "column",
gap: "20px",
height: "200px",
width: "500px",
marginBottom: "250px",
padding: "20px",
border: "1px solid black",
borderRadius: "4px",
overflow: "auto",
zIndex: "1300",
position: "relative",
}}
>
<DxcDateInput label="From" defaultValue="01-12-1995" />
<DxcDateInput label="To" />
<button style={{ zIndex: "1", width: "100px" }}>Submit</button>
</div>
</ExampleContainer>
<ThemeProvider theme={colorsTheme}>
<ExampleContainer pseudoState="pseudo-focus">
<Title title="Isolated calendar focused" theme="light" level={4} />
<DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
</ExampleContainer>
<ExampleContainer pseudoState="pseudo-hover">
<Title title="Isolated calendar hovered" theme="light" level={4} />
<DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
</ExampleContainer>
<ExampleContainer pseudoState="pseudo-active">
<Title title="Isolated calendar actived" theme="light" level={4} />
<DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
</ExampleContainer>
</ThemeProvider>
</>
);
};

export const ShowYearPicker = YearPicker.bind({});
ShowYearPicker.play = async ({ canvasElement }) => {
export const DatePickerStates = DatePickerButtonStates.bind({});
DatePickerStates.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole("combobox"));
await fireEvent.click(screen.getByText("April 2027"));
const dateBtn = canvas.getAllByTitle("Open calendar")[0];
await userEvent.click(dateBtn);
};

const YearPickerFocus = () => (
<ExampleContainer expanded>
<Title title="Show year picker and focus" theme="light" level={4} />
<DxcDateInput label="Date input" defaultValue="06-04-2027" />
</ExampleContainer>
);
export const YearpickerStates = () => {
Jialecl marked this conversation as resolved.
Show resolved Hide resolved
const colorsTheme: any = useTheme();
return (
<>
<ThemeProvider theme={colorsTheme}>
<ExampleContainer pseudoState="pseudo-focus">
<Title title="Isolated year picker focused" theme="light" level={4} />
<YearPicker
selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
onYearSelect={() => {}}
today={dayjs("1904-04-03", "YYYY-MM-DD")}
/>
</ExampleContainer>
<ExampleContainer pseudoState="pseudo-hover">
<Title title="Isolated year picker hovered" theme="light" level={4} />
<YearPicker
selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
onYearSelect={() => {}}
today={dayjs("1904-04-03", "YYYY-MM-DD")}
/>
</ExampleContainer>
<ExampleContainer pseudoState="pseudo-active">
<Title title="Isolated year picker actived" theme="light" level={4} />
<YearPicker
selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
onYearSelect={() => {}}
today={dayjs("1904-04-03", "YYYY-MM-DD")}
/>
</ExampleContainer>
</ThemeProvider>
</>
);
};

export const ShowYearPickerFocus = YearPickerFocus.bind({});
ShowYearPickerFocus.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole("combobox"));
await fireEvent.click(screen.getByText("April 2027"));
await userEvent.tab();
export const DatePickerWithToday = () => {
const colorsTheme: any = useTheme();
return (
<ThemeProvider theme={colorsTheme}>
<ExampleContainer>
<Title title="Isolated calendar with today" theme="light" level={4} />
<Calendar
selectedDate={dayjs("06-04-1904", "DD-MM-YYYY")}
today={dayjs("1904-04-03", "YYYY-MM-DD")}
onInnerDateChange={() => {}}
onDaySelect={() => {}}
innerDate={dayjs("06-04-1904", "DD-MM-YYYY")}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Isolated year picker with today" theme="light" level={4} />
<YearPicker
selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
onYearSelect={() => {}}
today={dayjs("1904-04-03", "YYYY-MM-DD")}
/>
</ExampleContainer>
</ThemeProvider>
);
};