Calendar updates (#2264)

* Update styling of Calendar

* Improve RangeCalendar behavior on touch devices

* Support for displaying multiple months in Calendar

* Fast path for date/time conversion

* Optimize performance of mergeProps

* Refactor to handle different visible duration and align selection

* Add tests for different visible durations

* Improve Japanese era handling

* Fix test

* Fix parsing in docs transformer

* Remove eslint suppressions

Author: devongovett

packages/@adobe/spectrum-css-temp/components/calendar/index.css

@@ -19,52 +19,66 @@ governing permissions and limitations under the License.
   --spectrum-calendar-margin-x: 32px;
   --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
   --spectrum-calendar-button-gap: var(--spectrum-global-dimension-size-40);
+  --spectrum-calendar-title-margin-x: var(--spectrum-global-dimension-size-75);
 }
 
 .spectrum-Calendar {
-  width: var(--spectrum-calendar-width);
-  display: inline-block;
+  display: block;
+  touch-action: none;
 }
 
 .spectrum-Calendar--padded {
   margin: var(--spectrum-calendar-margin-x) var(--spectrum-calendar-margin-y);
 }
 
 .spectrum-Calendar-header {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
   width: 100%;
-  align-items: center;
+  gap: var(--spectrum-global-dimension-size-300);
+}
+
+.spectrum-Calendar-monthHeader {
+  display: grid;
+  grid-template-areas: 'prev title next';
+  grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
+  align-content: start;
+  width: var(--spectrum-calendar-width);
+  padding: 0 var(--spectrum-calendar-button-gap);
+  box-sizing: border-box;
 }
 
 .spectrum-Calendar-title {
   font-size: var(--spectrum-calendar-title-text-size);
   font-weight: bold;
 
   line-height: var(--spectrum-calendar-title-height);
-  margin: 0;
-  order: 1;
-  flex-grow: 1;
-
+  margin: 0 var(--spectrum-calendar-title-margin-x);
+  grid-area: title;
 
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.spectrum-Calendar {
-  .spectrum-Calendar-prevMonth,
-  .spectrum-Calendar-nextMonth {
-    margin: 0 var(--spectrum-calendar-button-gap);
-  }
-}
-
 .spectrum-Calendar-prevMonth {
-  order: 0;
+  grid-area: prev;
+  justify-self: start;
 }
 
 .spectrum-Calendar-nextMonth {
-  order: 2;
+  grid-area: next;
+  justify-self: end;
+}
+
+.spectrum-Calendar-months {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: var(--spectrum-global-dimension-size-300);
+  align-items: start;
 }
 
 .spectrum-Calendar-dayOfWeek {
@@ -101,7 +115,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Calendar-table {
   table-layout: fixed;
-  /*width: 100%;*/
+  width: var(--spectrum-calendar-width);
 
   border-collapse: collapse;
   border-spacing: 0;
@@ -140,18 +154,17 @@ governing permissions and limitations under the License.
   margin: var(--spectrum-calendar-day-padding);
 
   border-radius: var(--spectrum-calendar-day-width);
-  border: var(--spectrum-calendar-day-border-size-key-focus) solid transparent;
 
   font-size: var(--spectrum-calendar-day-text-size);
-  line-height: calc(var(--spectrum-calendar-day-width) - var(--spectrum-calendar-day-border-size-key-focus) * 2);
+  line-height: var(--spectrum-calendar-day-height);
   white-space: nowrap;
 
   cursor: default;
 
   transition: background var(--spectrum-global-animation-duration-100) ease-in-out,
       color var(--spectrum-global-animation-duration-100) ease-in-out,
       border-color var(--spectrum-global-animation-duration-100) ease-in-out;
-  
+
   &:focus {
     outline: 0;
   }
@@ -169,31 +182,29 @@ governing permissions and limitations under the License.
     visibility: hidden;
   }
 
+  /* focus ring */
   &:before {
+    border-radius: calc(var(--spectrum-calendar-day-width) + var(--spectrum-alias-focus-ring-gap));
     content: '';
+    display: block;
     position: absolute;
     top: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
     left: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
-    box-sizing: border-box;
-    width: var(--spectrum-calendar-day-width);
-    height: var(--spectrum-calendar-day-height);
-    border-radius: var(--spectrum-calendar-day-width);
-    border: var(--spectrum-calendar-day-border-size-key-focus) solid transparent;
-  }
+    width: calc(var(--spectrum-calendar-day-width) + var(--spectrum-alias-focus-ring-gap) * 2);
+    height: calc(var(--spectrum-calendar-day-height) + var(--spectrum-alias-focus-ring-gap) * 2);
+    margin: 0;
+    transform: translateX(0); /* Forces FF to render on the pixel grid */
 
-  &.is-selected:not(.is-range-selection) {
-    font-weight: var(--spectrum-calendar-day-text-font-weight-selected);
+    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
+                margin var(--spectrum-global-animation-duration-100) ease-out;
+  }
 
+  &.is-focused {
     &:before {
-      /* No highlight for lone selections */
-      display: none;
+      margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
     }
   }
 
-  &.is-today {
-    font-weight: var(--spectrum-calendar-day-today-text-font-weight);
-  }
-
   &.is-range-selection {
     /* overrides to make the cells appear connected */
     margin: var(--spectrum-calendar-day-padding) 0;
@@ -211,23 +222,21 @@ governing permissions and limitations under the License.
       width: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
     }
 
-    &.is-selection-start,
-    &.is-selection-end {
-      font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected);
-
-      &:after {
-        position: absolute;
-        top: 0;
+    /* hover and selected states */
+    &:after {
+      position: absolute;
+      top: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
+      left: calc(50% - calc(var(--spectrum-calendar-day-width) / 2));
 
-        display: block;
+      display: block;
 
-        height: var(--spectrum-calendar-day-height);
-        width: var(--spectrum-calendar-day-width);
+      height: var(--spectrum-calendar-day-height);
+      width: var(--spectrum-calendar-day-width);
 
-        border-radius: var(--spectrum-calendar-day-width);
+      border-radius: var(--spectrum-calendar-day-width);
 
-        content: '';
-      }
+      content: '';
+      z-index: -1;
     }
 
     &.is-range-start,
@@ -266,3 +275,7 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+.spectrum-Calendar-body.is-range-selecting .spectrum-Calendar-date {
+  transition: none;
+}

packages/@adobe/spectrum-css-temp/components/calendar/skin.css

@@ -23,120 +23,105 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Calendar-date {
-  &:hover {
-    color: var(--spectrum-calendar-day-text-color-hover);
-
-    &:not(.is-selection-end):not(.is-selection-start) {
-      &:before {
-        background: var(--spectrum-calendar-day-background-color-hover);
-      }
-    }
-
-    &.is-selected {
-      color: var(--spectrum-calendar-day-text-color-selected-hover);
-      &:not(.is-selection-end):not(.is-selection-start) {
-        &:before {
-          background: var(--spectrum-calendar-day-background-color-selected-hover);
-        }
-      }
-    }
+  --spectrum-calendar-day-background-color-cap-selected: var(--spectrum-global-color-blue-400);
+  --spectrum-calendar-day-background-color-cap-selected-hover: var(--spectrum-global-color-blue-500);
+  --spectrum-calendar-day-background-color-cap-selected-down: var(--spectrum-global-color-blue-600);
+  --spectrum-calendar-day-text-color-cap-selected: white;
+  --spectrum-calendar-day-text-color-cap-selected-hover: white;
+  --spectrum-calendar-day-today-background-color: var(--spectrum-global-color-gray-300);
+  --spectrum-calendar-day-today-background-color-hover: var(--spectrum-global-color-gray-400);
+  --spectrum-calendar-day-today-background-color-down: var(--spectrum-global-color-gray-500);
+
+  --background: transparent;
+  background: var(--background);
+
+  &.is-range-selection {
+    background: var(--spectrum-calendar-day-background-color-selected);
 
-    &.is-range-selection {
-      &:before {
-        background: var(--spectrum-calendar-day-background-color-selected-hover);
-      }
+    &:after {
+      background: var(--background);
     }
   }
 
-  &:active {
-    background-color: var(--spectrum-calendar-day-background-color-down);
-  }
-
-  &.is-selected {
-    color: var(--spectrum-calendar-day-text-color-selected);
-    background: var(--spectrum-calendar-day-background-color-selected);
+  &.is-today {
+    color: var(--spectrum-calendar-day-today-text-color);
+    border-color: var(--spectrum-calendar-day-today-background-color);
+    --background: var(--spectrum-calendar-day-today-background-color);
   }
 
-  &.is-selected:not(.is-range-selection) {
-    background: var(--spectrum-calendar-day-background-color-cap-selected);
+  &.is-selected:not(.is-range-selection),
+  &.is-selection-start,
+  &.is-selection-end {
+    color: var(--spectrum-calendar-day-text-color-cap-selected);
+    --background: var(--spectrum-calendar-day-background-color-cap-selected);
   }
 
-  &.is-today {
-    color: var(--spectrum-calendar-day-today-text-color);
-    border-color: var(--spectrum-calendar-day-today-border-color);
+  &:hover {
+    color: var(--spectrum-calendar-day-text-color-hover);
+    --background: var(--spectrum-calendar-day-background-color-hover);
 
-    &:before {
-      border-color: var(--spectrum-calendar-day-today-border-color);
+    &.is-range-selection {
+      color: var(--spectrum-calendar-day-text-color-selected-hover);
+      --background: var(--spectrum-alias-highlight-selected);
     }
 
-    &:hover {
-      &.is-selected:not(.is-range-selection) {
-        &:before {
-          background: var(--spectrum-calendar-day-today-background-color-selected-hover);
-        }
-      }
+    &.is-today {
+      --background: var(--spectrum-calendar-day-today-background-color-hover);
     }
 
-    &.is-disabled {
-      color: var(--spectrum-calendar-day-today-text-color-disabled);
-      border-color: var(--spectrum-calendar-day-today-border-color-disabled);
-
-      &:before {
-        border-color: var(--spectrum-calendar-day-today-border-color-disabled);
-      }
+    &.is-selected:not(.is-range-selection),
+    &.is-selection-start,
+    &.is-selection-end {
+      color: var(--spectrum-calendar-day-text-color-cap-selected-hover);
+      --background: var(--spectrum-calendar-day-background-color-cap-selected-hover);
     }
   }
 
-  &.is-focused:not(.is-range-selection) {
-    background: var(--spectrum-calendar-day-background-color-key-focus);
-    border-color: var(--spectrum-calendar-day-border-color-key-focus);
-    color: var(--spectrum-calendar-day-text-color-key-focus);
+  &.is-pressed {
+    color: var(--spectrum-calendar-day-text-color-hover);
+    --background: var(--spectrum-calendar-day-background-color-down);
 
-    &.is-today {
-      border-color: var(--spectrum-calendar-day-border-color-key-focus);
+    &.is-range-selection {
+      color: var(--spectrum-calendar-day-text-color-selected-hover);
+      --background:  var(--spectrum-alias-highlight-selected-hover);
+    }
 
-      &:before {
-        border-color: var(--spectrum-calendar-day-border-color-key-focus);
-      }
+    &.is-today {
+      --background: var(--spectrum-calendar-day-today-background-color-down);
     }
 
-    &:active,
-    &.is-selected {
-      color: var(--spectrum-calendar-day-text-color-selected);
-      background: var(--spectrum-calendar-day-background-color-cap-selected);
-      border-color: var(--spectrum-calendar-day-border-color-key-focus);
+    &.is-selected:not(.is-range-selection),
+    &.is-selection-start,
+    &.is-selection-end {
+      color: var(--spectrum-calendar-day-text-color-cap-selected-hover);
+      --background: var(--spectrum-calendar-day-background-color-cap-selected-down);
     }
   }
 
   &.is-focused {
-    &.is-selected {
-      &:before {
-        background: var(--spectrum-calendar-day-background-color-selected-hover);
-      }
-    }
-
-    &.is-range-selection {
-      &:before {
-        border-color: var(--spectrum-calendar-day-border-color-key-focus);
-        background: var(--spectrum-calendar-day-background-color-selected-hover);
-      }
+    &:before {
+      box-shadow: 0 0 0 var(--spectrum-calendar-day-border-size-key-focus) var(--spectrum-calendar-day-border-color-key-focus);
     }
   }
 
   &.is-disabled {
-    color: var(--spectrum-calendar-day-text-color-disabled);
-  }
+    &,
+    &.is-today {
+      --background: var(--spectrum-calendar-day-background-color-disabled);
+    }
 
-  &.is-selection-start,
-  &.is-selection-end {
-    color: var(--spectrum-calendar-day-text-color-cap-selected);
+    &,
+    &.is-today,
+    &.is-selected {
+      color: var(--spectrum-calendar-day-text-color-disabled);
+    }
 
-    &:after {
-      background-color: var(--spectrum-calendar-day-background-color-selected);
+    &.is-range-selection {
+      background: var(--spectrum-global-color-gray-200);
     }
 
-    &.is-disabled {
-      color: var(--spectrum-calendar-day-text-color-disabled);
+    &.is-selected {
+      --background: var(--spectrum-global-color-gray-200);
     }
   }
 }