From b76c78e515c58ed421e5ca8cb5e6b5b7ac391092 Mon Sep 17 00:00:00 2001 From: Ivan Gabriele Date: Wed, 21 Dec 2022 11:38:09 +0100 Subject: [PATCH] fix(fields): normalize sizes in DatePicker & DateRangePicker --- .storybook/components/GlobalDecorator.tsx | 2 +- src/elements/IconBox.tsx | 4 +- src/elements/Label.tsx | 2 +- src/fields/DatePicker/CalendarPicker.tsx | 23 +++++++++--- src/fields/DateRangePicker/DateInput.tsx | 6 ++- src/fields/DateRangePicker/NumberInput.tsx | 2 +- .../DateRangePicker/RangeCalendarPicker.tsx | 23 +++++++++--- .../DateRangePicker/RangedTimePicker.tsx | 37 +++++++++++++++---- src/fields/DateRangePicker/TimeInput.tsx | 6 ++- 9 files changed, 79 insertions(+), 26 deletions(-) diff --git a/.storybook/components/GlobalDecorator.tsx b/.storybook/components/GlobalDecorator.tsx index 8ff5a06ab..04eaae4f8 100644 --- a/.storybook/components/GlobalDecorator.tsx +++ b/.storybook/components/GlobalDecorator.tsx @@ -15,7 +15,7 @@ const CustomGlobalStyle: any = createGlobalStyle` body.sb-show-main.sb-main-padded { height: 100%; padding: 0; - width: 100%; + width: 640px; } code { diff --git a/src/elements/IconBox.tsx b/src/elements/IconBox.tsx index 57140c8bb..ab87a1219 100644 --- a/src/elements/IconBox.tsx +++ b/src/elements/IconBox.tsx @@ -14,7 +14,7 @@ export const IconBox = styled.div` > svg { display: block; - height: ${p => p.$size ?? 16}px; - width: ${p => p.$size ?? 16}px; + height: ${p => p.$size ?? 20}px; + width: ${p => p.$size ?? 20}px; } ` diff --git a/src/elements/Label.tsx b/src/elements/Label.tsx index 9bcb16577..68eb348b6 100644 --- a/src/elements/Label.tsx +++ b/src/elements/Label.tsx @@ -14,5 +14,5 @@ export const Label = styled.label<{ display: ${p => (p.isHidden ? 'none' : 'table')}; font-size: 13px; line-height: 1.4; - margin-bottom: 8px; + margin-bottom: 4px; ` diff --git a/src/fields/DatePicker/CalendarPicker.tsx b/src/fields/DatePicker/CalendarPicker.tsx index de39fe736..b7fbe23ae 100644 --- a/src/fields/DatePicker/CalendarPicker.tsx +++ b/src/fields/DatePicker/CalendarPicker.tsx @@ -89,9 +89,9 @@ export const Box = styled.div` } .rs-picker-date-menu { - border: solid 1px ${p => p.theme.color.lightGray}; + box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray}; border-radius: 0; - margin-top: 4px; + margin-top: 2px; .rs-picker-date-header, .rs-calendar-header-time-toolbar, @@ -187,20 +187,33 @@ export const Box = styled.div` border: 0; margin-top: 3px; + .rs-calendar-month-dropdown-year { + color: ${p => p.theme.color.slateGray}; + + &.rs-calendar-month-dropdown-year-active { + color: ${p => p.theme.color.blueYonder[100]}; + } + } + .rs-calendar-month-dropdown-cell { - .rs-calendar-month-dropdown-cell-content { + > .rs-calendar-month-dropdown-cell-content { border-radius: 0 !important; + color: ${p => p.theme.color.gunMetal}; display: inline-flex; height: 33px; justify-content: center; line-height: 1; - padding: 7px 0 0; + padding: 8px 0 0; width: 33px; } - &:hover .rs-calendar-month-dropdown-cell-content { + &:hover > .rs-calendar-month-dropdown-cell-content { background-color: ${p => p.theme.color.blueYonder[25]}; color: ${p => p.theme.color.blueYonder[100]}; } + &.rs-calendar-month-dropdown-cell-active > .rs-calendar-month-dropdown-cell-content { + background-color: ${p => p.theme.color.blueGray[100]}; + color: ${p => p.theme.color.white}; + } } } } diff --git a/src/fields/DateRangePicker/DateInput.tsx b/src/fields/DateRangePicker/DateInput.tsx index f3277e22c..20a43ebfb 100644 --- a/src/fields/DateRangePicker/DateInput.tsx +++ b/src/fields/DateRangePicker/DateInput.tsx @@ -120,6 +120,7 @@ function DateInputWithRef( (p.$isCompact ? '4.5px 8px 7px' : '3px 8px 5px')}; user-select: none; :hover { @@ -225,6 +227,6 @@ const Box = styled.div<{ } > div:nth-child(2) { - margin: 1px 0 0 32px; + margin: 2px 0 0 16px; } ` diff --git a/src/fields/DateRangePicker/NumberInput.tsx b/src/fields/DateRangePicker/NumberInput.tsx index 721671b22..5a65c8eff 100644 --- a/src/fields/DateRangePicker/NumberInput.tsx +++ b/src/fields/DateRangePicker/NumberInput.tsx @@ -166,7 +166,7 @@ const StyledNumberInput = styled.input<{ padding: 0; text-align: center; /* 1 digit = 8px */ - width: ${p => p.$size * 0.5}rem; + width: ${p => p.$size * 8}px; ::placeholder { color: ${p => (p.$isLight ? p.theme.color.slateGray : p.theme.color.slateGray)}; diff --git a/src/fields/DateRangePicker/RangeCalendarPicker.tsx b/src/fields/DateRangePicker/RangeCalendarPicker.tsx index 5efd768f9..a85ec7b64 100644 --- a/src/fields/DateRangePicker/RangeCalendarPicker.tsx +++ b/src/fields/DateRangePicker/RangeCalendarPicker.tsx @@ -104,9 +104,9 @@ const Box = styled.div` } .rs-picker-daterange-menu { - border: solid 1px ${p => p.theme.color.lightGray}; + box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray}; border-radius: 0; - margin-top: 4px; + margin-top: 2px; .rs-picker-daterange-header, .rs-calendar-header-time-toolbar, @@ -208,20 +208,33 @@ const Box = styled.div` border: 0; margin-top: 3px; + .rs-calendar-month-dropdown-year { + color: ${p => p.theme.color.slateGray}; + + &.rs-calendar-month-dropdown-year-active { + color: ${p => p.theme.color.blueYonder[100]}; + } + } + .rs-calendar-month-dropdown-cell { - .rs-calendar-month-dropdown-cell-content { + > .rs-calendar-month-dropdown-cell-content { border-radius: 0 !important; + color: ${p => p.theme.color.gunMetal}; display: inline-flex; height: 33px; justify-content: center; line-height: 1; - padding: 7px 0 0; + padding: 8px 0 0; width: 33px; } - &:hover .rs-calendar-month-dropdown-cell-content { + &:hover > .rs-calendar-month-dropdown-cell-content { background-color: ${p => p.theme.color.blueYonder[25]}; color: ${p => p.theme.color.blueYonder[100]}; } + &.rs-calendar-month-dropdown-cell-active > .rs-calendar-month-dropdown-cell-content { + background-color: ${p => p.theme.color.blueGray[100]}; + color: ${p => p.theme.color.white}; + } } } } diff --git a/src/fields/DateRangePicker/RangedTimePicker.tsx b/src/fields/DateRangePicker/RangedTimePicker.tsx index 9c31b3831..da53c1b20 100644 --- a/src/fields/DateRangePicker/RangedTimePicker.tsx +++ b/src/fields/DateRangePicker/RangedTimePicker.tsx @@ -13,13 +13,28 @@ type RangedTimePickerProps = { onChange: (nextTimeTuple: TimeTuple) => Promisable } export function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimePickerProps) { + const [selectedOptionIndex, setSelectedOptionIndex] = useState(0) + const rangedTimeOptions = useMemo(() => getRangedTimeOptions(minutesRange), [minutesRange]) const filteredRangedTimeOptions = useMemo( () => rangedTimeOptions.filter(({ label }) => filter.test(label)), [filter, rangedTimeOptions] ) - const [selectedOptionIndex, setSelectedOptionIndex] = useState(0) + const spannedLabels = useMemo( + () => + filteredRangedTimeOptions.map(({ label }) => { + const [hours, minutes] = label.split(':') + + return ( + <> + {' '} + {hours}:{minutes} + + ) + }), + [filteredRangedTimeOptions] + ) const handleBoxKeyDown = useCallback( (event: globalThis.KeyboardEvent) => { @@ -88,7 +103,7 @@ export function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimeP role="option" tabIndex={-1} > - {label} + {spannedLabels[index]} ))} @@ -96,17 +111,19 @@ export function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimeP } const Box = styled.div` - background-color: ${p => p.theme.color.gainsboro}; + background-color: ${p => p.theme.color.white}; + box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray}; display: flex; flex-direction: column; - left: -1px; + left: 0; max-height: 160px; overflow: auto; position: absolute; /* Non-WebKit Firefox Compatibility */ scrollbar-color: ${p => p.theme.color.lightGray}; scrollbar-width: thin; - top: 36px; + top: 32px; + width: 100%; z-index: 9999; ::-webkit-scrollbar { @@ -128,12 +145,18 @@ const Option = styled.div<{ isSelected: boolean }>` background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : 'transparent')}; + color: ${p => (p.isSelected ? p.theme.color.white : p.theme.color.gunMetal)}; cursor: pointer; line-height: 1; - padding: 5px 9px 7px 8px; - text-align: center; + padding: 5px 0 7px 6.5px; :hover { background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[25])}; } + + > span { + display: inline-flex; + justify-content: center; + width: 16px; + } ` diff --git a/src/fields/DateRangePicker/TimeInput.tsx b/src/fields/DateRangePicker/TimeInput.tsx index 6da68af9d..8fddbec7c 100644 --- a/src/fields/DateRangePicker/TimeInput.tsx +++ b/src/fields/DateRangePicker/TimeInput.tsx @@ -172,6 +172,7 @@ function TimeInputWithRef( (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.slateGray)}; display: inline-block; font-size: inherit; - padding: 5px 8px 7px; + padding: ${p => (p.$isCompact ? '4.5px 8px 7px' : '3px 8px 5px')}; position: relative; user-select: none; @@ -272,6 +274,6 @@ const InputGroup = styled.div` justify-content: space-between; > div:nth-child(2) { - margin: 1px 0 0 32px; + margin: 2px 0 0 16px; } `