fix(fields): normalize sizes in DatePicker & DateRangePicker

MTES-MCT · Dec 21, 2022 · b76c78e · b76c78e
1 parent 10a581d
commit b76c78e
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 26 deletions.
diff --git 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
@@ -14,7 +14,7 @@ export const IconBox = styled.div<IconBoxProps>`
 
   > 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
@@ -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
@@ -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
@@ -120,6 +120,7 @@ function DateInputWithRef(
     <Box
       ref={boxRef}
       $hasError={hasFormatError || hasValidationError}
+      $isCompact={isCompact}
       $isDisabled={disabled}
       $isFocused={isForcedFocused || isFocused}
       $isLight={isLight}
@@ -194,6 +195,7 @@ export const DateInput = forwardRef(DateInputWithRef)
 
 const Box = styled.div<{
   $hasError: boolean
+  $isCompact: boolean
   $isDisabled: boolean
   $isFocused: boolean
   $isLight: boolean
@@ -208,7 +210,7 @@ const Box = styled.div<{
   display: inline-flex;
   font-size: inherit;
   justify-content: space-between;
-  padding: 5px 8px 7px;
+  padding: ${p => (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
@@ -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
@@ -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
@@ -13,13 +13,28 @@ type RangedTimePickerProps = {
   onChange: (nextTimeTuple: TimeTuple) => Promisable<void>
 }
 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 (
+          <>
+            {' '}
+            <span>{hours}</span>:<span>{minutes}</span>
+          </>
+        )
+      }),
+    [filteredRangedTimeOptions]
+  )
 
   const handleBoxKeyDown = useCallback(
     (event: globalThis.KeyboardEvent) => {
@@ -88,25 +103,27 @@ export function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimeP
           role="option"
           tabIndex={-1}
         >
-          {label}
+          {spannedLabels[index]}
         </Option>
       ))}
     </Box>
   )
 }
 
 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
@@ -172,6 +172,7 @@ function TimeInputWithRef(
     <Box
       ref={boxRef}
       $hasError={hasFormatError || hasValidationError}
+      $isCompact={isCompact}
       $isDisabled={disabled}
       $isFocused={isFocused}
       $isLight={isLight}
@@ -236,6 +237,7 @@ export const TimeInput = forwardRef(TimeInputWithRef)
 
 const Box = styled.div<{
   $hasError: boolean
+  $isCompact: boolean
   $isDisabled: boolean
   $isFocused: boolean
   $isLight: boolean
@@ -248,7 +250,7 @@ const Box = styled.div<{
   color: ${p => (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;
   }
 `