From bab8e2630e961044ea5d04a733860f9089c8e170 Mon Sep 17 00:00:00 2001
From: Brandon Ferrua <bferrua@gmail.com>
Date: Mon, 7 Aug 2017 13:53:22 -0700
Subject: [PATCH] fix(datepicker): provide styles when adjacent month is
 selected within a week range

---
 ui/components/datepickers/base/_index.scss  |  8 +-
 ui/components/datepickers/base/example.jsx  | 85 +++++++++++++++------
 ui/components/datepickers/range/example.jsx | 74 ++++++++++++++----
 3 files changed, 126 insertions(+), 41 deletions(-)

diff --git a/ui/components/datepickers/base/_index.scss b/ui/components/datepickers/base/_index.scss
index d4dfb5ae43..48318c09a1 100644
--- a/ui/components/datepickers/base/_index.scss
+++ b/ui/components/datepickers/base/_index.scss
@@ -58,7 +58,7 @@
       cursor: pointer;
     }
 
-    &:focus:not(.slds-disabled-text) {
+    &:focus {
       outline: 0;
 
       > .slds-day {
@@ -72,13 +72,15 @@
      * @selector .slds-is-selected
      * @restrict .slds-datepicker td
      */
-    &.slds-is-selected:not(.slds-disabled-text):not(.slds-is-today) > .slds-day {
+    &.slds-is-selected:not(.slds-is-today) > .slds-day {
       background: $color-background-button-brand-hover;
       color: $color-text-button-brand-hover;
     }
 
-    &.slds-is-selected:not(.slds-disabled-text):focus > .slds-day {
+    &.slds-is-selected:focus > .slds-day {
+      background: $color-background-row-hover;
       box-shadow: $color-border-brand-dark 0 0 3px;
+      color: currentColor;
     }
   }
 
diff --git a/ui/components/datepickers/base/example.jsx b/ui/components/datepickers/base/example.jsx
index addabf47ed..21aac693fa 100644
--- a/ui/components/datepickers/base/example.jsx
+++ b/ui/components/datepickers/base/example.jsx
@@ -135,29 +135,29 @@ export let DatePicker = props =>
         </Week>
         <Week className={classNames(
           {
-            'slds-has-multi-selection': props.dateRange == 'week',
-            'slds-has-multi-row-selection': props.dateRange == 'weeks'
+            'slds-has-multi-selection': props.dateRange == 'week-4',
+            'slds-has-multi-row-selection': props.dateRangeMulti
           }
         )}>
           <Day aria-selected="false">21</Day>
           <Day aria-selected="false">22</Day>
           <Day aria-selected="false">23</Day>
           <Day
-            aria-selected={props.dateSelected ? 'true' : 'false'}
+            aria-selected={props.dateSelected && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
             className={classNames(
               {
-                'slds-is-selected': props.dateSelected,
-                'slds-is-selected-multi': props.dateSelected && props.dateRange
+                'slds-is-selected': props.dateSelected === 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5'),
+                'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5')
               }
             )}
           >
             24
           </Day>
           <Day
-            aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
+            aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
             className={classNames(
               {
-                'slds-is-selected slds-is-selected-multi': props.dateSelected && props.dateRange,
+                'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5'),
                 'slds-is-today': props.todayActiveInRange
               }
             )}
@@ -165,36 +165,75 @@ export let DatePicker = props =>
             25
           </Day>
           <Day
-            aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
-            className={props.dateSelected && props.dateRange ? 'slds-is-selected slds-is-selected-multi' : null}
+            aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
+            className={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
           >
             26
           </Day>
           <Day
-            aria-selected={props.dateSelected && props.dateRange ? 'true' : 'false'}
-            className={props.dateSelected && props.dateRange ? 'slds-is-selected slds-is-selected-multi' : null}
+            aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
+            className={props.dateSelected != 'single' && (props.dateRange === 'week-4' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
           >
             27
           </Day>
         </Week>
-        <Week className={props.dateRange == 'weeks' ? 'slds-has-multi-row-selection' : null}>
+        <Week className={classNames(
+          {
+            'slds-has-multi-selection': props.dateRange == 'week-5',
+            'slds-has-multi-row-selection': props.dateRangeMulti
+          }
+        )}>
           <Day
-            aria-selected={props.dateSelected && props.dateRange == 'weeks' ? 'true' : 'false'}
-            className={props.dateSelected && props.dateRange == 'weeks' ? 'slds-is-selected slds-is-selected-multi' : null}
+            aria-selected={props.dateSelected && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
+            className={classNames(
+              {
+                'slds-is-selected': props.dateSelected === 'single' && props.dateRange === 'week-5',
+                'slds-is-selected slds-is-selected-multi': props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5')
+              }
+            )}
           >
             28
           </Day>
           <Day
-            aria-selected={props.dateSelected && props.dateRange == 'weeks' ? 'true' : 'false'}
-            className={props.dateSelected && props.dateRange == 'weeks' ? 'slds-is-selected slds-is-selected-multi' : null}
+            aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
+            className={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
           >
             29
           </Day>
-          <Day aria-selected="false">30</Day>
-          <Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">1</Day>
-          <Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">2</Day>
-          <Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">3</Day>
-          <Day aria-disabled="true" aria-selected="false" className="slds-disabled-text">4</Day>
+          <Day
+            aria-selected={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'true' : 'false'}
+            className={props.dateSelected != 'single' && (props.dateRange === 'week-5' || props.dateRange === 'week-4-5') ? 'slds-is-selected slds-is-selected-multi' : null}
+          >
+            30
+          </Day>
+          <Day
+            aria-disabled="true"
+            aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
+            className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
+          >
+            1
+          </Day>
+          <Day
+            aria-disabled="true"
+            aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
+            className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
+          >
+            2
+          </Day>
+          <Day
+            aria-disabled="true"
+            aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
+            className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
+          >
+            3
+          </Day>
+          <Day
+            aria-disabled="true"
+            aria-selected={props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'true' : 'false'}
+            className={classNames('slds-disabled-text', props.dateSelected != 'single' && props.dateRange === 'week-5' ? 'slds-is-selected slds-is-selected-multi' : null)}
+          >
+            4
+          </Day>
         </Week>
       </tbody>
     </table>
@@ -237,9 +276,9 @@ export let states = [
         label="Date"
         inputId={dateInputId}
         inputIcon="right"
-        dropdown={<DatePicker todayActive dateSelected />}
+        dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
       >
-        <Input id={dateInputId} placeholder=" " value="06/23/2014" />
+        <Input id={dateInputId} placeholder=" " value="06/24/2014" />
         <ButtonIcon
           className="slds-input__icon slds-input__icon_right"
           symbol="event"
diff --git a/ui/components/datepickers/range/example.jsx b/ui/components/datepickers/range/example.jsx
index 8b5b3e4814..1090e22364 100644
--- a/ui/components/datepickers/range/example.jsx
+++ b/ui/components/datepickers/range/example.jsx
@@ -84,9 +84,9 @@ export let states = [
                 label="Start Date"
                 inputId={dateRangeInputId01}
                 inputIcon="right"
-                dropdown={<DatePicker todayActive dateSelected />}
+                dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
               >
-                <Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
+                <Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
                 <ButtonIcon
                   className="slds-input__icon slds-input__icon--right"
                   symbol="event"
@@ -99,7 +99,7 @@ export let states = [
                 label="End Date"
                 inputId={dateRangeInputId02}
                 inputIcon="right"
-                dropdown={<DatePicker todayActive dateSelected />}
+                dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" />}
               >
                 <Input id={dateRangeInputId02} placeholder=" " />
                 <ButtonIcon
@@ -128,9 +128,9 @@ export let states = [
                 label="Start Date"
                 inputId={dateRangeInputId01}
                 inputIcon="right"
-                dropdown={<DatePicker todayActive dateSelected />}
+                dropdown={<DatePicker todayActive dateSelected dateRange="week-4" />}
               >
-                <Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
+                <Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
                 <ButtonIcon
                   className="slds-input__icon slds-input__icon--right"
                   symbol="event"
@@ -143,7 +143,7 @@ export let states = [
                 label="End Date"
                 inputId={dateRangeInputId02}
                 inputIcon="right"
-                dropdown={<DatePicker todayActive dateSelected dateRange="week" />}
+                dropdown={<DatePicker todayActive dateSelected dateRange="week-4" />}
               >
                 <Input id={dateRangeInputId02} placeholder=" " value="06/27/2014" />
                 <ButtonIcon
@@ -168,13 +168,13 @@ export let states = [
           <div className="slds-form-element__group">
             <div className="slds-form-element__row">
               <FormElement
-                className="slds-dropdown-trigger slds-dropdown-trigger--click"
+                className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
                 label="Start Date"
                 inputId={dateRangeInputId01}
                 inputIcon="right"
-                dropdown={<DatePicker todayActive dateSelected />}
+                dropdown={<DatePicker todayActive dateSelected="single" dateRange="week-4" dateRangeMulti />}
               >
-                <Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
+                <Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
                 <ButtonIcon
                   className="slds-input__icon slds-input__icon--right"
                   symbol="event"
@@ -187,9 +187,9 @@ export let states = [
                 label="End Date"
                 inputId={dateRangeInputId02}
                 inputIcon="right"
-                dropdown={<DatePicker todayActive dateSelected dateRange="weeks" />}
+                dropdown={<DatePicker todayActive dateSelected dateRange="week-4-5" dateRangeMulti />}
               >
-                <Input id={dateRangeInputId02} placeholder=" " value="06/29/2014" />
+                <Input id={dateRangeInputId02} placeholder=" " value="06/30/2014" />
                 <ButtonIcon
                   className="slds-input__icon slds-input__icon--right"
                   symbol="event"
@@ -216,9 +216,53 @@ export let states = [
                 label="Start Date"
                 inputId={dateRangeInputId01}
                 inputIcon="right"
-                dropdown={<DatePicker todayActiveInRange dateSelected />}
+                dropdown={<DatePicker todayActiveInRange dateSelected="single" dateRange="week-4" dateRangeMulti />}
+              >
+                <Input id={dateRangeInputId01} placeholder=" " value="06/24/2014" />
+                <ButtonIcon
+                  className="slds-input__icon slds-input__icon--right"
+                  symbol="event"
+                  assistiveText="Select a date"
+                  title="Select a date"
+                />
+              </FormElement>
+              <FormElement
+                className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
+                label="End Date"
+                inputId={dateRangeInputId02}
+                inputIcon="right"
+                dropdown={<DatePicker todayActiveInRange dateSelected dateRange="week-4-5" dateRangeMulti />}
+              >
+                <Input id={dateRangeInputId02} placeholder=" " value="06/30/2014" />
+                <ButtonIcon
+                  className="slds-input__icon slds-input__icon--right"
+                  symbol="event"
+                  assistiveText="Select a date"
+                  title="Select a date"
+                />
+              </FormElement>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+  },
+  {
+    id: 'span-across-month-in-range',
+    label: 'Current and adjacent month in selected range',
+    element:
+      <div className="slds-form slds-form--compound">
+        <fieldset className="slds-form-element">
+          <legend className="slds-form-element__label">Start and End Date</legend>
+          <div className="slds-form-element__group">
+            <div className="slds-form-element__row">
+              <FormElement
+                className="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open"
+                label="Start Date"
+                inputId={dateRangeInputId01}
+                inputIcon="right"
+                dropdown={<DatePicker dateSelected="single" dateRange="week-5" />}
               >
-                <Input id={dateRangeInputId01} placeholder=" " value="06/23/2014" />
+                <Input id={dateRangeInputId01} placeholder=" " value="06/28/2014" />
                 <ButtonIcon
                   className="slds-input__icon slds-input__icon--right"
                   symbol="event"
@@ -231,9 +275,9 @@ export let states = [
                 label="End Date"
                 inputId={dateRangeInputId02}
                 inputIcon="right"
-                dropdown={<DatePicker todayActiveInRange dateSelected dateRange="weeks" />}
+                dropdown={<DatePicker dateSelected dateRange="week-5" />}
               >
-                <Input id={dateRangeInputId02} placeholder=" " value="06/29/2014" />
+                <Input id={dateRangeInputId02} placeholder=" " value="07/04/2014" />
                 <ButtonIcon
                   className="slds-input__icon slds-input__icon--right"
                   symbol="event"