[Emotion] Convert EuiDatePicker

packages/eui/src/components/date_picker/date_picker.stories.tsx

@@ -175,6 +175,27 @@ export const TimeSelectOnly: Story = {
   args: { ...TimeSelect.args, showTimeSelectOnly: true },
 };
 
+export const RestrictedDaySelect: Story = {
+  parameters: {
+    controls: {
+      include: [
+        'minDate',
+        'maxDate',
+        'includeDates',
+        'excludeDates',
+        'filterDate',
+        'highlightDates',
+      ],
+    },
+  },
+  args: {
+    autoFocus: true, // Open the datepicker automatically for Lok VRT,
+    selected: moment('01/02/1970'),
+    maxDate: moment('01/01/1970'),
+    minDate: moment('12/31/1969'),
+  },
+};
+
 const StatefulDatePicker = ({
   selected,
   onChange,

packages/eui/src/components/date_picker/date_picker_range.stories.tsx

@@ -8,6 +8,7 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import moment from 'moment';
 
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
 import {
@@ -35,7 +36,6 @@ const meta: Meta<EuiDatePickerRangeProps> = {
     prepend: '',
   },
 };
-enableFunctionToggleControls(meta, ['onFocus', 'onBlur']);
 
 export default meta;
 type Story = StoryObj<EuiDatePickerRangeProps>;
@@ -52,27 +52,82 @@ export const Playground: Story = {
   },
   render: (args) => <StatefulPlayground {...args} />,
 };
+enableFunctionToggleControls(Playground, ['onFocus', 'onBlur']);
+
+export const Inline: Story = {
+  parameters: {
+    controls: {
+      include: [
+        'inline',
+        'shadow',
+        'disabled',
+        'readOnly',
+        'isInvalid',
+        'isLoading',
+      ],
+    },
+  },
+  args: {
+    startDateControl: (
+      <EuiDatePicker showTimeSelect={true} selected={moment('01/01/1970')} />
+    ),
+    endDateControl: (
+      <EuiDatePicker showTimeSelect={true} selected={moment('01/07/1970')} />
+    ),
+    inline: true,
+  },
+  render: (args) => <StatefulPlayground {...args} />,
+};
+
+export const RestrictedSelection: Story = {
+  parameters: {
+    controls: {
+      include: [],
+    },
+  },
+  args: {
+    startDateControl: (
+      <EuiDatePicker
+        selected={moment('01/01/1970')}
+        maxDate={moment('01/04/1970')}
+        highlightDates={[moment('12/30/1969')]}
+      />
+    ),
+    endDateControl: (
+      <EuiDatePicker
+        selected={moment('01/07/1970')}
+        maxDate={moment('01/04/1970')}
+      />
+    ),
+    inline: true,
+  },
+  render: (args) => <StatefulPlayground {...args} />,
+};
 
 const StatefulPlayground = ({
   startDateControl,
   endDateControl,
   ...rest
 }: EuiDatePickerRangeProps) => {
-  const [selectedStartDate, setSelectedStartDate] = useState<
-    moment.Moment | null | undefined
-  >();
-  const [selectedEndDate, setSelectedEndDate] = useState<
-    moment.Moment | null | undefined
-  >();
+  const [selectedStartDate, setSelectedStartDate] = useState<moment.Moment>(
+    startDateControl.props.selected
+  );
+  const [selectedEndDate, setSelectedEndDate] = useState<moment.Moment>(
+    endDateControl.props.selected
+  );
 
   const startControl = React.cloneElement(startDateControl, {
     selected: selectedStartDate,
     onChange: setSelectedStartDate,
+    startDate: selectedStartDate,
+    endDate: selectedEndDate,
   });
 
   const endControl = React.cloneElement(endDateControl, {
     selected: selectedEndDate,
     onChange: setSelectedEndDate,
+    startDate: selectedStartDate,
+    endDate: selectedEndDate,
   });
 
   return (

packages/eui/src/components/date_picker/react_date_picker.styles.ts

@@ -19,6 +19,7 @@ import {
   mathWithUnits,
 } from '../../global_styling';
 import {
+  euiButtonColor,
   euiButtonEmptyColor,
   euiButtonFillColor,
 } from '../../themes/amsterdam/global_styling/mixins';
@@ -130,11 +131,141 @@ export const euiReactDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         }
       }
 
+      ${_dayCalendarStyles(euiThemeContext)}
       ${_timeSelectStyles(euiThemeContext)}
     `,
   };
 };
 
+export const _dayCalendarStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { gapSize } = euiDatePickerVariables(euiThemeContext);
+
+  const daySize = euiTheme.size.xl;
+  const dayMargin = mathWithUnits(gapSize, (x) => x / 2);
+  const rangeBackgroundColor = euiButtonColor(
+    euiThemeContext,
+    'primary'
+  ).backgroundColor;
+  const rangeMarginOffset = mathWithUnits(dayMargin, (x) => x * 1.5);
+
+  const animationSpeed = euiTheme.animation.fast;
+
+  return css`
+    .react-datepicker__day-names,
+    .react-datepicker__week {
+      display: flex;
+      justify-content: space-between;
+      flex-grow: 1;
+      color: ${euiTheme.colors.subduedText};
+    }
+
+    .react-datepicker__day-name,
+    .react-datepicker__day {
+      display: inline-block;
+      ${logicalCSS('width', daySize)}
+      line-height: ${daySize};
+      margin: ${dayMargin};
+      font-weight: ${euiTheme.font.weight.medium};
+      text-align: center;
+    }
+
+    .react-datepicker__day {
+      color: ${euiTheme.colors.title};
+      border-radius: ${euiTheme.border.radius.small};
+
+      ${euiCanAnimate} {
+        transition: transform ${animationSpeed} ease-in-out,
+          background-color ${animationSpeed} ease-in;
+      }
+
+      &:hover {
+        ${euiButtonColor(euiThemeContext, 'primary')}
+        text-decoration: underline;
+        cursor: pointer;
+
+        /* Setting the transform under can animate because its jarring */
+        ${euiCanAnimate} {
+          transform: scale(1.1);
+        }
+      }
+
+      &--today {
+        color: ${euiTheme.colors.primary};
+        font-weight: ${euiTheme.font.weight.bold};
+      }
+
+      &--outside-month {
+        color: ${euiTheme.colors.subduedText};
+      }
+
+      &--highlighted,
+      &--highlighted:hover {
+        ${euiButtonColor(euiThemeContext, 'success')};
+      }
+
+      &--in-range,
+      &--in-range:hover {
+        ${euiButtonColor(euiThemeContext, 'primary')};
+      }
+
+      /* Ranges use 2 side box-shadows that are the same as the button
+       * background to fill the gap between margins */
+      &--in-range:not(&--selected):not(:hover):not(&--disabled) {
+        box-shadow: -${rangeMarginOffset} 0 ${rangeBackgroundColor},
+          ${rangeMarginOffset} 0 ${rangeBackgroundColor};
+        border-radius: 0;
+
+        &:first-child {
+          box-shadow: ${rangeMarginOffset} 0 ${rangeBackgroundColor};
+        }
+
+        &:last-child {
+          box-shadow: -${rangeMarginOffset} 0 ${rangeBackgroundColor};
+        }
+      }
+      /* Animate smoothly on hover */
+      &--in-range:not(&--selected) {
+        ${euiCanAnimate} {
+          transition: transform ${animationSpeed} ease-in-out,
+            box-shadow ${animationSpeed} ease-in-out,
+            border-radius ${animationSpeed} ease-in-out,
+            background-color ${animationSpeed} ease-in;
+        }
+      }
+
+      &--selected,
+      &--selected:hover,
+      &--in-selecting-range,
+      &--in-selecting-range:hover {
+        ${euiButtonFillColor(euiThemeContext, 'primary')}
+      }
+
+      &--disabled,
+      &--disabled:hover {
+        ${euiButtonColor(euiThemeContext, 'disabled')}
+        cursor: not-allowed;
+        text-decoration: none;
+        transform: none;
+      }
+
+      &--disabled.react-datepicker__day--in-range:not(&--selected) {
+        &,
+        &:hover {
+          background-color: ${euiButtonEmptyColor(euiThemeContext, 'primary')
+            .backgroundColor};
+        }
+      }
+
+      &--in-selecting-range:not(&--in-range),
+      &--disabled.react-datepicker__day--selected,
+      &--disabled.react-datepicker__day--selected:hover {
+        ${euiButtonColor(euiThemeContext, 'danger')}
+      }
+    }
+  `;
+};
+
 export const _timeSelectStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   const { gapSize } = euiDatePickerVariables(euiThemeContext);