From e5e749e53aea513e223634115a5fbac4ee0a7a98 Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Thu, 5 Dec 2024 17:28:55 +0100 Subject: [PATCH] Fix hover styling, add range story --- .../DatePicker/DatePicker.module.scss | 57 ++++++++++++----- .../DatePicker/DatePicker.stories.tsx | 61 ++++++++++++++++++- .../forms/controls/DatePicker/DatePicker.tsx | 17 +----- src/styling/variables.scss | 5 +- 4 files changed, 109 insertions(+), 31 deletions(-) diff --git a/src/components/forms/controls/DatePicker/DatePicker.module.scss b/src/components/forms/controls/DatePicker/DatePicker.module.scss index 643269b..7749db7 100644 --- a/src/components/forms/controls/DatePicker/DatePicker.module.scss +++ b/src/components/forms/controls/DatePicker/DatePicker.module.scss @@ -97,16 +97,17 @@ $navigation-distance: 1rem; color: bk.$theme-date-picker-text-default; } -// TODO check if both are actually needed -:global(.react-datepicker__day-name--outside-month), -:global(.react-datepicker__day--outside-month) { - color: bk.$theme-date-picker-text-disabled; +:global(.react-datepicker__day--today) { + font-weight: bk.$font-weight-semibold; } -// TODO check if both are actually needed -:global(.react-datepicker__day-name--disabled), +:global(.react-datepicker__day--outside-month), :global(.react-datepicker__day--disabled) { - opacity: .35; + color: bk.$theme-date-picker-text-disabled; +} + +:global(.react-datepicker__day--outside-month.react-datepicker__day--disabled) { + color: bk.$theme-date-picker-text-unavailable; } :global(.react-datepicker__day--selected), @@ -116,6 +117,7 @@ $navigation-distance: 1rem; color: bk.$theme-date-picker-text-selected; } +:global(.react-datepicker__day:not([aria-disabled=true]):hover), :global(.react-datepicker__day--selected:not([aria-disabled=true]):hover), :global(.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover) { background: bk.$theme-date-picker-background-hover; @@ -123,18 +125,45 @@ $navigation-distance: 1rem; color: bk.$theme-date-picker-text-hover; } +:global(.react-datepicker__day--in-range), +:global(.react-datepicker__day--in-selecting-range:not( + .react-datepicker__month-text--in-range, + .react-datepicker__quarter-text--in-range, + .react-datepicker__year-text--in-range +)) { + background: bk.$theme-date-picker-background-selected; + border-radius: 0; + color: bk.$theme-date-picker-text-selected; +} +:global(.react-datepicker__day--in-range:not([aria-disabled=true]):hover), +:global(.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover) { + background: bk.$theme-date-picker-background-hover; + border-radius: 0; + color: bk.$theme-date-picker-text-hover; +} + +:global(.react-datepicker__day--range-start), +:global(.react-datepicker__day--selecting-range-start), +:global(.react-datepicker__day--range-start:not([aria-disabled=true]):hover) { + border-radius: bk.$border-radius-circle 0 0 bk.$border-radius-circle; +} + +:global(.react-datepicker__day--range-end), +:global(.react-datepicker__day--selecting-range-end), +:global(.react-datepicker__day--range-end:not([aria-disabled=true]):hover) { + border-radius: 0 bk.$border-radius-circle bk.$border-radius-circle 0; +} + +:global(.react-datepicker__day--range-start.react-datepicker__day--range-end), +:global(.react-datepicker__day--range-start.react-datepicker__day--range-end:not([aria-disabled=true]):hover) { + border-radius: bk.$border-radius-circle; +} + :global(.react-datepicker__day:not(&--selected):hover) { background: rgba(bk.$color-blueberry-500, 0.5); // TODO use proper variable border-radius: 50%; } -:global(.react-datepicker__day--in-range), -:global(.react-datepicker__day--in-selecting-range) { - background: transparent; - background-color: transparent; - border-radius: 0; -} - :global(.react-datepicker-popper[data-placement^="bottom"]) { margin-top: 0; } diff --git a/src/components/forms/controls/DatePicker/DatePicker.stories.tsx b/src/components/forms/controls/DatePicker/DatePicker.stories.tsx index e2cd62f..9cccc21 100644 --- a/src/components/forms/controls/DatePicker/DatePicker.stories.tsx +++ b/src/components/forms/controls/DatePicker/DatePicker.stories.tsx @@ -13,6 +13,7 @@ type DatePickerArgs = React.ComponentProps; type Story = StoryObj; export default { + // TODO: Why this error??? component: DatePicker, parameters: { layout: 'centered', @@ -29,12 +30,68 @@ export default { export const DatePickerStory: Story = { name: 'Date Picker', render: (args) => { - const [startDate, setStartDate] = React.useState(new Date()); + const [startDate, setStartDate] = React.useState(new Date()); return (
- setStartDate(date)} /> + setStartDate(date)} + />
); } }; + +export const DatePickerStoryWithRange: Story = { + name: 'Date Picker with Dates Range', + render: (args) => { + const [startDate, setStartDate] = React.useState(new Date()); + const [endDate, setEndDate] = React.useState(new Date()); + const onChange = (dates: (Date | null)[]) => { + let [start, end] = dates; + // TODO: should I make sure start and end are not undefined in a different way? + // apparently linter thinks they can be undefined because of the destructuring. + if (start !== undefined && end !== undefined) { + setStartDate(start); + setEndDate(end); + } + }; + + return ( +
+ +
+ ); + + // const [startDate, setStartDate] = React.useState(new Date()); + // const [endDate, setEndDate] = React.useState(null); + // const onChange = (dates: any) => { + // const [start, end] = dates; + // setStartDate(start); + // setEndDate(end); + // }; + // return ( + // + // ); + } +}; diff --git a/src/components/forms/controls/DatePicker/DatePicker.tsx b/src/components/forms/controls/DatePicker/DatePicker.tsx index 59cbc1b..44025c5 100644 --- a/src/components/forms/controls/DatePicker/DatePicker.tsx +++ b/src/components/forms/controls/DatePicker/DatePicker.tsx @@ -11,16 +11,13 @@ import 'react-datepicker/dist/react-datepicker.css'; import cl from './DatePicker.module.scss'; -export type DatePickerProps = Omit, 'onChange'> & { +// Omit, 'onChange'> & { +export type DatePickerProps = typeof ReactDatePicker & { /** Whether this component should be unstyled. */ unstyled?: undefined | boolean, + /** An optional class name to be appended to the class list. */ className?: ClassNameArgument, - - date: Date, - maxDate?: Date, - minDate?: Date, - onChange: (date: Date) => void, }; /** A wrapper for ReactDatePicker */ @@ -28,10 +25,6 @@ export const DatePicker = (props: DatePickerProps) => { const { unstyled = false, className, - date, - maxDate, - minDate, - onChange, ...propsRest } = props; @@ -46,11 +39,7 @@ export const DatePicker = (props: DatePickerProps) => { cl['bk-date-picker__date'], )} dateFormat="MM/dd/yyyy" - maxDate={maxDate} - minDate={minDate} placeholderText="MM/DD/YYYY" - selected={date} - onChange={onChange} {...propsRest} /> diff --git a/src/styling/variables.scss b/src/styling/variables.scss index 822e324..1368a20 100644 --- a/src/styling/variables.scss +++ b/src/styling/variables.scss @@ -418,6 +418,7 @@ $light-date-picker-background-selected: $color-blueberry-600 !default; $light-date-picker-text-selected: $color-neutral-0 !default; $light-date-picker-background-hover: $color-blueberry-700 !default; $light-date-picker-text-hover: $color-neutral-0 !default; +$light-date-picker-text-unavailable: $color-neutral-50 !default; $light-date-picker-rule-default: $color-blackberry-20 !default; $light-scroll-bar-thumb-default: $color-neutral-90 !default; $light-scroll-bar-slider-default: $color-neutral-50 !default; @@ -659,6 +660,7 @@ $dark-date-picker-background-selected: $color-blueberry-500 !default; $dark-date-picker-text-hover: $color-neutral-10 !default; $dark-date-picker-background-hover: $color-blueberry-600 !default; $dark-date-picker-text-selected: $color-neutral-10 !default; +$dark-date-picker-text-unavailable: $color-neutral-700 !default; $dark-date-picker-rule-default: $color-blackberry-300 !default; $dark-scroll-bar-thumb-default: $color-blackberry-200 !default; $dark-scroll-bar-slider-default: $color-blackberry-800 !default; @@ -899,7 +901,8 @@ $theme-date-picker-text-disabled: #{ld($light-date-picker-text-disabled, $dark-d $theme-date-picker-background-selected: #{ld($light-date-picker-background-selected, $dark-date-picker-background-selected)} !default; $theme-date-picker-text-selected: #{ld($light-date-picker-text-selected, $dark-date-picker-text-selected)} !default; $theme-date-picker-background-hover: #{ld($light-date-picker-background-selected, $dark-date-picker-background-selected)} !default; -$theme-date-picker-text-hover: #{ld($light-date-picker-text-selected, $dark-date-picker-text-selected)} !default; +$theme-date-picker-text-hover: #{ld($light-date-picker-text-hover, $dark-date-picker-text-hover)} !default; +$theme-date-picker-text-unavailable: #{ld($light-date-picker-text-unavailable, $dark-date-picker-text-unavailable)} !default; $theme-date-picker-rule-default: #{ld($light-date-picker-rule-default, $dark-date-picker-rule-default)} !default; $theme-scroll-bar-thumb-default: #{ld($light-scroll-bar-thumb-default, $dark-scroll-bar-thumb-default)} !default; $theme-scroll-bar-slider-default: #{ld($light-scroll-bar-slider-default, $dark-scroll-bar-slider-default)} !default;