DatePicker and Calendar improvements (#2510)

Author: devongovett

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

@@ -17,14 +17,15 @@ governing permissions and limitations under the License.
   --spectrum-calendar-border-width-reset: 0;
   --spectrum-calendar-margin-y: 24px;
   --spectrum-calendar-margin-x: 32px;
-  --spectrum-calendar-width: calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7);
+  --spectrum-calendar-max-width: calc((var(--spectrum-calendar-day-width) * 7) + (var(--spectrum-calendar-day-padding) * 12));
+  --spectrum-calendar-min-width: calc(var(--spectrum-calendar-day-width) * 7);
   --spectrum-calendar-button-gap: var(--spectrum-global-dimension-size-40);
   --spectrum-calendar-title-margin-x: var(--spectrum-global-dimension-size-75);
 }
 
 .spectrum-Calendar {
   display: block;
-  touch-action: none;
+  isolation: isolate;
 }
 
 .spectrum-Calendar--padded {
@@ -44,7 +45,9 @@ governing permissions and limitations under the License.
   grid-template-areas: 'prev title next';
   grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
   align-content: start;
-  width: var(--spectrum-calendar-width);
+  width: 100%;
+  min-width: var(--spectrum-calendar-min-width);
+  max-width: var(--spectrum-calendar-max-width);
   padding: 0 var(--spectrum-calendar-button-gap);
   box-sizing: border-box;
 }
@@ -115,7 +118,9 @@ governing permissions and limitations under the License.
 
 .spectrum-Calendar-table {
   table-layout: fixed;
-  width: var(--spectrum-calendar-width);
+  width: 100%;
+  min-width: var(--spectrum-calendar-min-width);
+  max-width: var(--spectrum-calendar-max-width);
 
   border-collapse: collapse;
   border-spacing: 0;
@@ -133,7 +138,7 @@ governing permissions and limitations under the License.
   box-sizing: content-box;
   height: var(--spectrum-calendar-day-height);
   width: var(--spectrum-calendar-day-width);
-  padding: var(--spectrum-calendar-day-padding);
+  padding: var(--spectrum-calendar-day-padding) 0;
 
   &:focus {
     outline: 0;
@@ -150,8 +155,8 @@ governing permissions and limitations under the License.
   box-sizing: border-box;
 
   height: var(--spectrum-calendar-day-height);
-  width: var(--spectrum-calendar-day-width);
-  margin: var(--spectrum-calendar-day-padding);
+  width: 100%;
+  margin: var(--spectrum-calendar-day-padding) 0;
 
   border-radius: var(--spectrum-calendar-day-width);
 
@@ -165,6 +170,17 @@ governing permissions and limitations under the License.
       color var(--spectrum-global-animation-duration-100) ease-in-out,
       border-color var(--spectrum-global-animation-duration-100) ease-in-out;
 
+  /* compute the "auto" margin to center the date text manually rather than using the keyword to ensure consistent rounding. */
+  --margin: calc((100% - var(--spectrum-calendar-day-width)) / 2);
+
+  .spectrum-Calendar-dateText {
+    display: block;
+    width: var(--spectrum-calendar-day-width);
+    margin: 0 auto;
+    margin-inline-start: auto;
+    margin-inline-end: var(--margin);
+  }
+
   &:focus {
     outline: 0;
   }
@@ -205,73 +221,90 @@ governing permissions and limitations under the License.
     }
   }
 
+  /* 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;
+
+    height: var(--spectrum-calendar-day-height);
+    width: var(--spectrum-calendar-day-width);
+
+    border-radius: var(--spectrum-calendar-day-width);
+
+    content: '';
+    z-index: -1;
+  }
+
   &.is-range-selection {
     /* overrides to make the cells appear connected */
     margin: var(--spectrum-calendar-day-padding) 0;
     border-width: var(--spectrum-calendar-border-width-reset);
     line-height: var(--spectrum-calendar-day-height);
     border-radius: var(--spectrum-calendar-border-radius-reset);
 
-    /* Todo: Calculate this */
-    width: calc(var(--spectrum-calendar-day-width) + calc(var(--spectrum-calendar-day-padding) * 2));
-
-    &.is-range-start,
-    &.is-range-end,
-    &.is-selection-start,
-    &.is-selection-end {
-      width: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
-    }
-
-    /* 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;
-
-      height: var(--spectrum-calendar-day-height);
-      width: var(--spectrum-calendar-day-width);
-
-      border-radius: var(--spectrum-calendar-day-width);
-
-      content: '';
-      z-index: -1;
-    }
-
     &.is-range-start,
     &.is-selection-start {
-      padding-inline-end: var(--spectrum-calendar-day-padding);
-      margin-inline-start: var(--spectrum-calendar-day-padding);
       border-start-start-radius: var(--spectrum-calendar-day-width);
       border-end-start-radius: var(--spectrum-calendar-day-width);
+      /* reduce the width by the "auto" margin and end align so the background doesn't extend to the left */
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+      width: calc(100% - var(--margin));
 
       &:before,
-      &:after {
+      &:after,
+      .spectrum-Calendar-dateText {
         inset-inline-start: 0;
       }
+
+      &:after,
+      .spectrum-Calendar-dateText {
+        margin-inline-start: 0;
+      }
     }
 
     &.is-range-end,
     &.is-selection-end {
-      padding-inline-start: var(--spectrum-calendar-day-padding);
-      margin-inline-end: var(--spectrum-calendar-day-padding);
       border-start-end-radius: var(--spectrum-calendar-day-width);
       border-end-end-radius: var(--spectrum-calendar-day-width);
+      /* reduce the width by the "auto" margin and start align so the background doesn't extend to the right */
+      /* this must be measured from the right rather than using width to avoid rounding errors in Safari */
+      width: auto;
+      inset-inline-start: 0;
+      inset-inline-end: var(--margin);
 
       &:before,
-      &:after {
+      &:after,
+      .spectrum-Calendar-dateText {
         inset-inline-start: auto;
         inset-inline-end: 0;
       }
+
+      &:after,
+      .spectrum-Calendar-dateText {
+        margin-inline-end: 0;
+      }
     }
 
     &.is-selection-start.is-selection-end,
     &.is-selection-start.is-range-end,
     &.is-selection-end.is-range-start,
     &.is-range-start.is-range-end {
       width: var(--spectrum-calendar-day-width);
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      margin-inline-start: auto;
+      margin-inline-end: var(--margin);
       border-radius: var(--spectrum-calendar-day-width);
+
+      &:after,
+      .spectrum-Calendar-dateText {
+        margin-inline-start: auto;
+        margin-inline-end: var(--margin);
+      }
     }
   }
 }

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

@@ -33,14 +33,12 @@ governing permissions and limitations under the License.
   --spectrum-calendar-day-today-background-color-down: var(--spectrum-global-color-gray-500);
 
   --background: transparent;
-  background: var(--background);
+  &:after {
+    background: var(--background);
+  }
 
   &.is-range-selection {
     background: var(--spectrum-calendar-day-background-color-selected);
-
-    &:after {
-      background: var(--background);
-    }
   }
 
   &.is-today {

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

@@ -61,6 +61,9 @@ governing permissions and limitations under the License.
   max-height: inherit;
 
   outline: none;
+
+  --spectrum-dialog-padding-x: var(--spectrum-dialog-padding);
+  --spectrum-dialog-padding-y: var(--spectrum-dialog-padding);
 }
 
 .spectrum-Dialog--small {
@@ -89,8 +92,8 @@ governing permissions and limitations under the License.
 
 .spectrum-Dialog .spectrum-Dialog-grid {
   display: grid;
-  grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding);
-  grid-template-rows: auto var(--spectrum-dialog-padding) auto auto 1fr auto var(--spectrum-dialog-padding);
+  grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding-x);
+  grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto 1fr auto var(--spectrum-dialog-padding-y);
   grid-template-areas:
     "hero hero    hero    hero        hero        hero"
     ".    .       .       .           .           ."
@@ -214,8 +217,8 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
-  grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding);
-  grid-template-rows: auto var(--spectrum-dialog-padding) auto auto 1fr auto var(--spectrum-dialog-padding);
+  grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding-x);
+  grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto 1fr auto var(--spectrum-dialog-padding-y);
   grid-template-areas:
     "hero hero    hero    hero        hero        hero        hero"
     ".    .       .       .           .           closeButton closeButton"
@@ -266,8 +269,8 @@ governing permissions and limitations under the License.
 
   &.spectrum-Dialog .spectrum-Dialog-grid {
     display: grid;
-    grid-template-columns: var(--spectrum-dialog-padding) 1fr auto auto var(--spectrum-dialog-padding);
-    grid-template-rows: var(--spectrum-dialog-padding) auto auto 1fr var(--spectrum-dialog-padding);
+    grid-template-columns: var(--spectrum-dialog-padding-x) 1fr auto auto var(--spectrum-dialog-padding-x);
+    grid-template-rows: var(--spectrum-dialog-padding-y) auto auto 1fr var(--spectrum-dialog-padding-y);
     grid-template-areas:
       ".    .       .       .            ."
       ".    heading header  buttonGroup  ."
@@ -305,8 +308,8 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Dialog .spectrum-Dialog-grid {
-    grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding);
-    grid-template-rows: auto var(--spectrum-dialog-padding) auto auto auto 1fr auto var(--spectrum-dialog-padding);
+    grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding-x);
+    grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto auto 1fr auto var(--spectrum-dialog-padding-y);
     grid-template-areas:
       "hero hero    hero    hero        hero        hero"
       ".    .       .       .           .           ."
@@ -319,8 +322,8 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid {
-    grid-template-columns: var(--spectrum-dialog-padding) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding);
-    grid-template-rows: auto var(--spectrum-dialog-padding) auto auto auto 1fr auto var(--spectrum-dialog-padding);
+    grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) minmax(0, var(--spectrum-dialog-close-button-size)) var(--spectrum-dialog-padding-x);
+    grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto auto 1fr auto var(--spectrum-dialog-padding-y);
     grid-template-areas:
       "hero hero    hero    hero        hero        hero        hero"
       ".    .       .       .           .           closeButton closeButton"
@@ -341,8 +344,8 @@ governing permissions and limitations under the License.
 
     &.spectrum-Dialog .spectrum-Dialog-grid {
        display: grid;
-       grid-template-columns: var(--spectrum-dialog-padding) 1fr var(--spectrum-dialog-padding);
-       grid-template-rows: var(--spectrum-dialog-padding) auto auto auto 1fr auto var(--spectrum-dialog-padding);
+       grid-template-columns: var(--spectrum-dialog-padding-x) 1fr var(--spectrum-dialog-padding-x);
+       grid-template-rows: var(--spectrum-dialog-padding-y) auto auto auto 1fr auto var(--spectrum-dialog-padding-y);
        grid-template-areas:
          ".    .            ."
          ".    heading      ."

packages/@internationalized/date/src/DateFormatter.ts

@@ -162,7 +162,10 @@ function getResolvedHourCycle(locale: string, options: Intl.DateTimeFormatOption
   // Format the minimum possible hour and maximum possible hour in a day and parse the results.
   locale = locale.replace(/(-u-)?-nu-[a-zA-Z0-9]+/, '');
   locale += (locale.includes('-u-') ? '' : '-u') + '-nu-latn';
-  let formatter = getCachedDateFormatter(locale, options);
+  let formatter = getCachedDateFormatter(locale, {
+    ...options,
+    timeZone: undefined // use local timezone
+  });
 
   let min = parseInt(formatter.formatToParts(new Date(2020, 2, 3, 0)).find(p => p.type === 'hour').value, 10);
   let max = parseInt(formatter.formatToParts(new Date(2020, 2, 3, 23)).find(p => p.type === 'hour').value, 10);