studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) enhance DatePicker component styles

Browse Source 
update DatePicker token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:12:39 +02:00
committed by NathanVss
parent 91aead45d9
commit 8f71cdb7f9
6 changed files with 137 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/react/src/components/Forms/DatePicker/Calendar.tsx
View File

@@ -117,7 +117,7 @@ const CalendarAux = ({
const monthItems: Array<Option> = useMemo(() => {
// Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
state.focusedDate,
state.focusedDate
);
return range(1, numberOfMonths).map((monthNumber) => {
const date = state.focusedDate.set({ month: monthNumber });
@@ -133,16 +133,15 @@ const CalendarAux = ({
const yearItems: Array<Option> = useMemo(() => {
const calendarCurrentUser = createCalendar(
new Intl.DateTimeFormat().resolvedOptions()
.calendar as CalendarIdentifier,
new Intl.DateTimeFormat().resolvedOptions().calendar as CalendarIdentifier
);
const minDate = toCalendar(
new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
calendarCurrentUser,
calendarCurrentUser
);
const maxDate = toCalendar(
new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
calendarCurrentUser,
calendarCurrentUser
);
return range(minDate.year, maxDate.year).map((yearNumber) => {
const date = state.focusedDate.set({ year: yearNumber });
@@ -158,7 +157,7 @@ const CalendarAux = ({
const useDownshiftSelect = (
key: string,
items: Array<Option>,
items: Array<Option>
): UseSelectReturnValue<Option> => {
return useSelect({
items,
@@ -215,12 +214,12 @@ const CalendarAux = ({
const getToggleButtonProps = (
key: string,
items: Array<Option>,
downshift: UseSelectReturnValue<Option>,
downshift: UseSelectReturnValue<Option>
) => ({
...downshift.getToggleButtonProps(),
onClick: () => {
const selectedItem = items.find(
(item) => item.value === state.focusedDate[key as keyof CalendarDate],
(item) => item.value === state.focusedDate[key as keyof CalendarDate]
);
if (selectedItem) {
downshift.selectItem(selectedItem);
@@ -228,7 +227,7 @@ const CalendarAux = ({
downshift.toggleMenu();
},
"aria-label": t(
`components.forms.date_picker.${key}_select_button_aria_label`,
`components.forms.date_picker.${key}_select_button_aria_label`
),
});
@@ -257,13 +256,14 @@ const CalendarAux = ({
<div className="c__calendar__wrapper__header">
<div className="c__calendar__wrapper__header__actions">
<Button
color="tertiary-text"
variant="neutral"
color="tertiary"
size="small"
icon={<span className="material-icons">navigate_before</span>}
{...{
...prevButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.previous_month_button_aria_label",
"components.forms.date_picker.previous_month_button_aria_label"
),
}}
disabled={isPrevButtonDisabled}
@@ -272,7 +272,8 @@ const CalendarAux = ({
/>
<Button
className="c__calendar__wrapper__header__actions__dropdown"
color="tertiary-text"
variant="neutral"
color="tertiary"
size="small"
iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>}
@@ -280,18 +281,19 @@ const CalendarAux = ({
{...getToggleButtonProps("month", monthItems, downshiftMonth)}
>
{selectedMonthItemFormatter.format(
state.focusedDate.toDate(state.timeZone),
state.focusedDate.toDate(state.timeZone)
)}
</Button>
<Button
color="tertiary-text"
variant="neutral"
color="tertiary"
size="small"
icon={<span className="material-icons">navigate_next</span>}
type="button"
{...{
...nextButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.next_month_button_aria_label",
"components.forms.date_picker.next_month_button_aria_label"
),
}}
disabled={isNextButtonDisabled}
@@ -300,7 +302,8 @@ const CalendarAux = ({
</div>
<div className="c__calendar__wrapper__header__actions">
<Button
color="tertiary-text"
variant="neutral"
color="tertiary"
size="small"
icon={<span className="material-icons">navigate_before</span>}
onClick={() => state.focusPreviousSection(true)}
@@ -309,13 +312,14 @@ const CalendarAux = ({
state.minValue.year > state.focusedDate.add({ years: -1 }).year
}
aria-label={t(
"components.forms.date_picker.previous_year_button_aria_label",
"components.forms.date_picker.previous_year_button_aria_label"
)}
type="button"
/>
<Button
className="c__calendar__wrapper__header__actions__dropdown"
color="tertiary-text"
variant="neutral"
color="tertiary"
size="small"
iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>}
@@ -323,11 +327,12 @@ const CalendarAux = ({
{...getToggleButtonProps("year", yearItems, downshiftYear)}
>
{yearItemsFormatter.format(
state.focusedDate.toDate(state.timeZone),
state.focusedDate.toDate(state.timeZone)
)}
</Button>
<Button
color="tertiary-text"
variant="neutral"
color="tertiary"
size="small"
icon={<span className="material-icons">navigate_next</span>}
onClick={() => state.focusNextSection(true)}
@@ -336,7 +341,7 @@ const CalendarAux = ({
state.maxValue.year < state.focusedDate.add({ years: 1 }).year
}
aria-label={t(
"components.forms.date_picker.next_year_button_aria_label",
"components.forms.date_picker.next_year_button_aria_label"
)}
type="button"
/>

7
packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
View File

@@ -58,6 +58,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
>
<Button
size="small"
variant={isSelected ? "brand" : "neutral"}
color={
(
isRangeCalendar(state)
@@ -65,7 +66,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
: isSelected
)
? "primary"
: "tertiary-text"
: "tertiary"
}
className={classNames(
"c__calendar__wrapper__grid__week-row__button",
@@ -74,9 +75,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
isSelected,
"c__calendar__wrapper__grid__week-row__button--today": isToday(
date,
getLocalTimeZone(),
getLocalTimeZone()
),
},
}
)}
type="button"
disabled={isDisabled}

18
packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
View File

@@ -76,7 +76,7 @@ const DatePickerAux = ({
const isDateInvalid = useMemo(
() => pickerState.validationState === "invalid" || props.state === "error",
[pickerState.validationState, props.state],
[pickerState.validationState, props.state]
);
return (
@@ -114,7 +114,7 @@ const DatePickerAux = ({
name={name && `${name}_start`}
value={convertDateValueToString(
pickerState.value?.start ?? null,
props.timezone,
props.timezone
)}
/>
<input
@@ -122,7 +122,7 @@ const DatePickerAux = ({
name={name && `${name}_end`}
value={convertDateValueToString(
pickerState.value?.end ?? null,
props.timezone,
props.timezone
)}
/>
</>
@@ -132,7 +132,7 @@ const DatePickerAux = ({
name={name}
value={convertDateValueToString(
pickerState.value,
props.timezone,
props.timezone
)}
/>
)}
@@ -148,9 +148,10 @@ const DatePickerAux = ({
aria-label={t(
pickerState.isOpen
? "components.forms.date_picker.toggle_button_aria_label_close"
: "components.forms.date_picker.toggle_button_aria_label_open",
: "components.forms.date_picker.toggle_button_aria_label_open"
)}
color="tertiary-text"
variant="neutral"
color="tertiary"
size="small"
className="c__date-picker__wrapper__toggle"
icon={
@@ -166,7 +167,8 @@ const DatePickerAux = ({
"c__date-picker__inner__action--hidden":
labelAsPlaceholder || disabled,
})}
color="tertiary-text"
variant="neutral"
color="tertiary"
size="nano"
icon={<span className="material-icons">close</span>}
onClick={onClear}
@@ -176,7 +178,7 @@ const DatePickerAux = ({
}
}}
aria-label={t(
"components.forms.date_picker.clear_button_aria_label",
"components.forms.date_picker.clear_button_aria_label"
)}
disabled={disabled}
type="button"

120
packages/react/src/components/Forms/DatePicker/_index.scss
View File

@@ -1,17 +1,20 @@
@use 'src/utils' as *;
@use "src/utils" as *;
@use "../../../utils/responsive" as *;
.c__date-picker {
position: relative;
&__wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius);
border-width: var(--c--components--forms-datepicker--border-width);
border-color: var(--c--components--forms-datepicker--border-color);
border-style: var(--c--components--forms-datepicker--border-style);
display: flex;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
transition:
border var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out),
border-radius var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
padding: 0 0.75rem;
gap: 1rem;
box-sizing: border-box;
@@ -51,7 +54,7 @@
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute
position: absolute;
}
&--clickable {
@@ -71,7 +74,7 @@
}
&:focus-visible {
background-color: var(--c--theme--colors--primary-100);
background-color: var(--c--contextuals--background--semantic--brand--tertiary);
outline: none;
}
}
@@ -92,24 +95,24 @@
}
}
/** Modifiers */
&--disabled {
.c__date-picker__wrapper {
color: var(--c--theme--colors--greyscale-600);
border-color: var(--c--components--forms-datepicker--border-color--disabled);
color: var(--c--contextuals--content--semantic--disabled--primary);
border-color: var(
--c--components--forms-datepicker--border-color--disabled
);
cursor: default;
pointer-events: none;
&__toggle {
color: var(--c--theme--colors--greyscale-400);
color: var(--c--contextuals--content--semantic--disabled--tertiary);
}
.c__date-picker__inner {
&__action {
color: var(--c--theme--colors--greyscale-400);
color: var(--c--contextuals--content--semantic--disabled--primary);
}
&__value {
@@ -125,28 +128,28 @@
&--invalid {
.c__date-picker__wrapper {
border-color: var(--c--theme--colors--danger-600);
border-color: var(--c--contextuals--border--semantic--error--primary);
border-radius: var(--c--components--forms-datepicker--border-radius);
&__toggle {
color: var(--c--theme--colors--danger-600);
color: var(--c--contextuals--content--semantic--error--primary);
}
label {
color: var(--c--theme--colors--danger-600);
color: var(--c--contextuals--content--semantic--error--primary);
}
}
&:not(.c__date-picker--disabled) {
&:hover {
.c__date-picker__wrapper {
border-color: var(--c--theme--colors--danger-800);
border-color: var(--c--contextuals--border--semantic--error--secondary);
&__toggle {
color: var(--c--theme--colors--danger-800);
color: var(--c--contextuals--content--semantic--error--secondary);
}
label {
color: var(--c--theme--colors--danger-800);
color: var(--c--contextuals--content--semantic--error--secondary);
}
}
}
@@ -155,28 +158,28 @@
&--success {
.c__date-picker__wrapper {
border-color: var(--c--theme--colors--success-600);
border-color: var(--c--contextuals--border--semantic--success--secondary);
border-radius: var(--c--components--forms-datepicker--border-radius);
&__toggle {
color: var(--c--theme--colors--success-600);
color: var(--c--contextuals--content--semantic--success--secondary);
}
label {
color: var(--c--theme--colors--success-600);
color: var(--c--contextuals--content--semantic--success--secondary);
}
}
&:not(.c__date-picker--disabled) {
&:hover {
.c__date-picker__wrapper {
border-color: var(--c--theme--colors--success-800);
border-color: var(--c--contextuals--border--semantic--success--primary);
&__toggle {
color: var(--c--theme--colors--success-800);
color: var(--c--contextuals--content--semantic--success--primary);
}
label {
color: var(--c--theme--colors--success-800);
color: var(--c--contextuals--content--semantic--success--primary);
}
}
}
@@ -186,8 +189,12 @@
&:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
&:hover {
.c__date-picker__wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius--hover);
border-color: var(--c--components--forms-datepicker--border-color--hover);
border-radius: var(
--c--components--forms-datepicker--border-radius--hover
);
border-color: var(
--c--components--forms-datepicker--border-color--hover
);
}
}
}
@@ -197,11 +204,17 @@
* than :hover. But here hover has more css specificity, so we need !important.
*/
@mixin focused-wrapper {
border-radius: var(--c--components--forms-datepicker--border-radius--focus) !important;
border-color: var(--c--components--forms-datepicker--border-color--focus) !important;
border-radius: var(
--c--components--forms-datepicker--border-radius--focus
) !important;
border-color: var(
--c--components--forms-datepicker--border-color--focus
) !important;
.c__date-picker__wrapper__toggle {
color: var(--c--components--forms-datepicker--border-color--focus) !important;
color: var(
--c--components--forms-datepicker--border-color--focus
) !important;
}
label {
@@ -230,7 +243,6 @@
// So in order to make this work we use @media for the non-full-width fields and @container for the full-width.
&__container {
&:not(.c__field--full-width) {
min-width: $component-min-width;
@@ -244,7 +256,6 @@
}
&.c__field--full-width {
.c__date-picker__wrapper {
// The container-type must absolutely not be parent of the calendar popover or otherwise the popover will
// not be able to float above other DOM elements as a container-type: inline-size defines a new stacking
@@ -253,7 +264,6 @@
}
@container (max-width: #{$component-min-width}) {
.c__date-picker__wrapper__icon {
display: none;
}
@@ -261,11 +271,8 @@
}
}
&__separator {
background-color: var(--c--theme--colors--greyscale-400);
background-color: var(--c--contextuals--border--semantic--neutral--tertiary);
height: px-to-rem(24px);
width: px-to-rem(1px);
margin: auto;
@@ -273,7 +280,6 @@
}
}
.c__calendar {
display: block;
transform: translate(2px, 0);
@@ -285,7 +291,9 @@
&--opened {
@extend %shadow;
background-color: var(--c--components--forms-datepicker--menu-background-color);
background-color: var(
--c--components--forms-datepicker--menu-background-color
);
}
&__header {
@@ -318,22 +326,25 @@
th {
font-weight: var(--c--components--button--font-weight);
color: var(--c--theme--colors--greyscale-700);
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
}
&__week-row {
td {
padding: 0;
}
&__background {
&--range {
background: var(--c--components--forms-datepicker--range-selection-background-color);
background: var(
--c--components--forms-datepicker--range-selection-background-color
);
&:not(&--end):not(&--start):not(&--disabled) button {
color: var(--c--components--forms-datepicker--grid-cell--color--today);
color: var(
--c--components--forms-datepicker--grid-cell--color--today
);
}
&--end {
@@ -345,16 +356,23 @@
border-bottom-left-radius: 100%;
}
&--disabled {
background: var(--c--components--forms-datepicker--range-selection-background-color--disabled);
background: var(
--c--components--forms-datepicker--range-selection-background-color--disabled
);
}
}
}
&__button {
&--today {
border: 1px solid var(--c--components--forms-datepicker--grid-cell--border-color--today);
border: 1px solid
var(
--c--components--forms-datepicker--grid-cell--border-color--today
);
}
&--today:not(&--selected) {
color: var(--c--components--forms-datepicker--grid-cell--color--today);
color: var(
--c--components--forms-datepicker--grid-cell--color--today
);
}
}
.c__button--small {
@@ -378,7 +396,9 @@
overflow: auto;
width: 100%;
max-height: 25rem;
background-color: var(--c--components--forms-datepicker--menu-background-color);
background-color: var(
--c--components--forms-datepicker--menu-background-color
);
transform: translate(2px, 0);
display: none;
z-index: 2;
@@ -401,15 +421,19 @@
cursor: pointer;
&--highlight {
background-color: var(--c--components--forms-datepicker--item-background-color--hover);
background-color: var(
--c--components--forms-datepicker--item-background-color--hover
);
}
&--selected {
background-color: var(--c--components--forms-datepicker--item-background-color--selected);
background-color: var(
--c--components--forms-datepicker--item-background-color--selected
);
}
&--disabled {
color: var(--c--theme--colors--greyscale-400);
color: var(--c--contextuals--content--semantic--disabled--primary);
pointer-events: none;
}
}

8
packages/react/src/components/Forms/DatePicker/index.stories.tsx
View File

@@ -117,7 +117,7 @@ export const Controlled = () => {
const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z");
return (
<div>
<div className="clr-greyscale-900">
<div className="clr-gray-900">
Value: <span>{value?.toString()}</span>
</div>
<DatePicker
@@ -140,7 +140,7 @@ export const ReactHookForm = () => {
resolver: yupResolver(
Yup.object().shape({
date: Yup.string().required(),
}),
})
),
});
@@ -195,7 +195,7 @@ export const RangeControlled = () => {
]);
return (
<>
<div className="clr-greyscale-900">Value: {value?.join(" ")}</div>
<div className="clr-gray-900">Value: {value?.join(" ")}</div>
<div
style={{
display: "flex",
@@ -226,7 +226,7 @@ export const RangeControlledFull = () => {
]);
return (
<>
<div className="clr-greyscale-900">Value: {value?.join(" ")}</div>
<div className="clr-gray-900">Value: {value?.join(" ")}</div>
<div
style={{
display: "flex",

39
packages/react/src/components/Forms/DatePicker/tokens.ts
View File

@@ -1,29 +1,32 @@
import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.theme.colors["greyscale-300"],
"border-color--disabled": defaults.theme.colors["greyscale-200"],
"border-color--focus": defaults.theme.colors["primary-600"],
"border-color--hover": defaults.theme.colors["greyscale-500"],
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
"border-color--focus": defaults.contextuals.border.semantic.brand.primary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-radius": "8px",
"border-radius--focus": "2px",
"border-radius--hover": "2px",
"border-style": "solid",
"border-width": "1px",
"value-color": defaults.theme.colors["greyscale-900"],
"value-color--disabled": defaults.theme.colors["greyscale-800"],
"font-size": defaults.theme.font.sizes.l,
"value-color": defaults.contextuals.content.semantic.neutral.tertiary,
"value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"font-size": defaults.globals.font.sizes.lg,
height: "3.5rem",
"item-background-color--hover": defaults.theme.colors["greyscale-200"],
"item-background-color--selected": defaults.theme.colors["primary-100"],
"item-color": defaults.theme.colors["greyscale-800"],
"item-font-size": defaults.theme.font.sizes.l,
"background-color": defaults.theme.colors["greyscale-000"],
"menu-background-color": defaults.theme.colors["greyscale-000"],
"range-selection-background-color": defaults.theme.colors["primary-100"],
"item-background-color--hover":
defaults.contextuals.background.semantic.neutral["tertiary-hover"],
"item-background-color--selected":
defaults.contextuals.background.semantic.brand.tertiary,
"item-color": defaults.contextuals.content.semantic.neutral.primary,
"item-font-size": defaults.globals.font.sizes.md,
"background-color": defaults.contextuals.background.surface.primary,
"menu-background-color": defaults.contextuals.background.surface.primary,
"range-selection-background-color":
defaults.contextuals.background.semantic.brand.tertiary,
"range-selection-background-color--disabled":
defaults.theme.colors["greyscale-100"],
"grid-cell--border-color--today": defaults.theme.colors["primary-600"],
"grid-cell--color--today": defaults.theme.colors["primary-600"],
"label-color--focus": defaults.theme.colors["primary-600"],
defaults.contextuals.background.semantic.neutral.tertiary,
"grid-cell--border-color--today": defaults.contextuals.border.semantic.brand.primary,
"grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary,
"label-color--focus": defaults.contextuals.border.semantic.brand.secondary,
});