fix(DatePicker): Fix end date outside of days

End date outside of days is being styled like it is inside which means two end dates are shown in range selection.
Royal-Navy · Mar 24, 2021 · 219540c · 219540c
1 parent cc4a579
commit 219540c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/packages/react-component-library/src/components/DatePicker/DatePicker.stories.tsx b/packages/react-component-library/src/components/DatePicker/DatePicker.stories.tsx
@@ -90,6 +90,8 @@ examples.add('Disabled days', () => {
 examples.add('Range', () => {
   return (
     <DatePicker
+      endDate={new Date(2021, 3, 2)}
+      startDate={new Date(2021, 2, 15)}
       onBlur={action('onBlur')}
       onChange={action('onChange')}
       isRange

diff --git a/packages/react-component-library/src/components/DatePicker/partials/StyledDayPicker.tsx b/packages/react-component-library/src/components/DatePicker/partials/StyledDayPicker.tsx
@@ -4,28 +4,34 @@ import styled, { css } from 'styled-components'
 
 const { color } = selectors
 
-export const StyledDayPicker = styled<any>(DayPicker)`
+interface StyledDayPickerProps {
+  $isRange: boolean
+}
+
+export const StyledDayPicker = styled(DayPicker)<StyledDayPickerProps>`
   ${({ $isRange }) =>
     $isRange &&
     css`
-      .DayPicker-Day {
-        border-radius: 0;
-      }
+      &&&& {
+        .DayPicker-Day {
+          border-radius: 0;
+        }
 
-      .DayPicker-Day--start,
-      .DayPicker-Day--end {
-        background-color: ${color('action', '500')} !important;
-        color: ${color('neutral', 'white')};
-      }
+        .DayPicker-Day--start,
+        .DayPicker-Day--end:not(.DayPicker-Day--outside) {
+          background-color: ${color('action', '500')};
+          color: ${color('neutral', 'white')};
+        }
 
-      .DayPicker-Day--start {
-        border-top-left-radius: 50%;
-        border-bottom-left-radius: 50%;
-      }
+        .DayPicker-Day--start {
+          border-top-left-radius: 50%;
+          border-bottom-left-radius: 50%;
+        }
 
-      .DayPicker-Day--end {
-        border-top-right-radius: 50%;
-        border-bottom-right-radius: 50%;
+        .DayPicker-Day--end {
+          border-top-right-radius: 50%;
+          border-bottom-right-radius: 50%;
+        }
       }
     `}
 `