chore(datepicker) add hover styles (#4664)

* chore(datepicker): add new states, add tests, fix a11y issue with table, adjust storybook example height for VRT

* chore(date and time pickers): add required and error states, tests

* chore(datepicker) add hover styles

* chore(datepicker) Jesse is right about deprecation

Author: kflournoy-sf

RELEASENOTES.md

@@ -15,13 +15,15 @@
 ### [Datepickers](https://www.lightningdesignsystem.com/components/datepickers)
 #### Added
 - Added examples for Required, Required with Error states
+- Added hover style for dates
 - Added `aria-label` to provide the full `DD MM YYYY` text of the date
 #### Fixed
 - Fixed missing attribute `aria-current="date"` when today's date falls inside of a selected range
 
 ### [Datetime Picker](https://www.lightningdesignsystem.com/components/datetime-picker)
 #### Added
 - Added `aria-label` to provide the full `DD MM YYYY` text of the date
+
 #### Changed
 - Removed the usage of the deprecated combobox. The Datetime Picker now uses the current combobox.
 

ui/components/datepickers/RELEASENOTES.md

@@ -9,6 +9,7 @@
 ### Added
 
 - Added examples for Required, Required with Error states
+- Added hover style for dates
 - Added `aria-label` to provide the full `DD MM YYYY` text of the date
 
 ### Fixed

ui/components/datepickers/base/_deprecate.scss

@@ -11,4 +11,16 @@
   .slds-disabled-text {
     color: $color-text-button-default-disabled;
   }
+
+  .slds-datepicker {
+
+    td {
+
+      &:hover:not(.slds-disabled-text) > .slds-day,
+      &:focus:not(.slds-disabled-text) > .slds-day,
+      &.slds-is-today > .slds-day {
+        cursor: pointer;
+      }
+    }
+  }
 }

ui/components/datepickers/base/_index.scss

@@ -53,8 +53,8 @@
      * @selector .slds-is-today
      * @restrict .slds-datepicker td
      */
-    &:hover:not(.slds-disabled-text) > .slds-day,
-    &:focus:not(.slds-disabled-text) > .slds-day,
+    &:hover > .slds-day,
+    &:focus > .slds-day,
     &.slds-is-today > .slds-day {
       cursor: pointer;
     }
@@ -71,6 +71,13 @@
       }
     }
 
+    &:hover {
+
+      > .slds-day {
+        background-color: $color-background-row-hover;
+      }
+    }
+
     /**
      * @summary Indicates selected days
      *

ui/components/datetime-picker/RELEASENOTES.md

@@ -9,6 +9,10 @@
 
 - Added `aria-label` to provide the full `DD MM YYYY` text of the date
 
+### Added
+
+- Added hover style for dates
+
 ### Changed
 
 - Removed the usage of the deprecated combobox. The Datetime Picker now uses the current combobox.