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

💄(react) add styling for range selection on a cell

Browse Source 
Integrate new styling classes for grid-cells to facilitate range selection
in the DatePicker component. This implementation improves the visual
representation and user experience of selecting a range. In addition,
outside-month cells are now hidden, to avoid having a range selection
that contains outside-month cells.
This commit is contained in:
Lebaud Antoine
2023-06-14 19:38:17 +02:00
committed by aleb_the_flash
parent 87ec3a5061
commit 2886f0c992
9 changed files with 178 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,9 @@ export const tokens = (defaults: DefaultTokens) => ({
"item-font-size": defaults.theme.font.sizes.l,
"background-color": "white",
"menu-background-color": "white",
"range-selection-background-color": defaults.theme.colors["primary-100"],
"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"],
});