fix(datepicker): invalid icon overlap

Author: jenndiaz

components/datepicker/index.css

@@ -13,7 +13,6 @@ governing permissions and limitations under the License.
 .spectrum-DatePicker {
   --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
   --spectrum-datepicker-min-width: var(--spectrum-field-width);
-  --spectrum-datepicker-initial-width: 128px;  /* 160px */
   --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); /* for express component-height-75 */
   --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); /* 12px; 15px; */
   --spectrum-datepicker-icon-size: 18px; /* 22px */
@@ -34,6 +33,9 @@ governing permissions and limitations under the License.
   --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
 
   --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
+  --spectrum-datepicker-invalid-icon-to-button: 8px; /* 10 */
+  --spectrum-datepicker-invalid-icon-to-button-quiet: 0;
+  --spectrum-datepicker-invalid-text-to-icon: var(--spectrum-field-text-to-alert-icon-medium);
 
   --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
   --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
@@ -88,6 +90,13 @@ governing permissions and limitations under the License.
   inset-inline-end: 0;
 }
 
+/* positions invlaid icon to be left of picker button */
+.spectrum-PickerButton-icon {
+  --datepicker-button-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-icon-size-m));
+  --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--datepicker-button-width)  + var(--spectrum-datepicker-invalid-icon-to-button));
+  --mod-textfield-icon-spacing-inline-end-quiet-invalid: var(--spectrum-datepicker-button-width);
+}
+
 .spectrum-DatePicker-input {
   /* todo: when we add t-shirt sizing, this will be wrong ❤️ */
   padding-inline-end: var(--mod-datepicker-input-padding-right, var(--spectrum-datepicker-input-padding-right));
@@ -194,8 +203,9 @@ governing permissions and limitations under the License.
       inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
     }
     &.is-invalid {
-      .spectrum-DatePicker-input {
-        padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
+      .spectrum-DatePicker-endField {
+        padding-inline-end: calc(60px + var(--mod-datepicker-invalid-text-to-icon, var(--spectrum-datepicker-invalid-text-to-icon)));
+        };
       }
     }
   }
@@ -217,7 +227,7 @@ governing permissions and limitations under the License.
     }
   }
 
-  /* Em dash */
+  /* "-" between inputs */
   .spectrum-DatePicker-rangeDash {
     line-height: var(--mod-datepicker-range-dash-line-height, var(--spectrum-datepicker-range-dash-line-height));
     padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
@@ -235,7 +245,6 @@ governing permissions and limitations under the License.
       inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
     }
   }
-}
 
 .spectrum-DatePicker--quiet {
   .spectrum-DatePicker-button {

components/datepicker/metadata/mods.md

@@ -1,21 +1,32 @@
-| Modifiable Custom Properties                        |
-| --------------------------------------------------- |
-| `--mod-combobox-quiet-fieldbutton-border-radius`    |
-| `--mod-datepicker-border-color-disabled`            |
-| `--mod-datepicker-border-radius`                    |
-| `--mod-datepicker-dash-color-disabled`              |
-| `--mod-datepicker-dash-font-size`                   |
-| `--mod-datepicker-datetime-quiet-input-width`       |
-| `--mod-datepicker-datetime-quiet-input-width-first` |
-| `--mod-datepicker-generic-padding`                  |
-| `--mod-datepicker-icon-to-text-right`               |
-| `--mod-datepicker-input-padding-right`              |
-| `--mod-datepicker-input-width`                      |
-| `--mod-datepicker-input-width-quiet`                |
-| `--mod-datepicker-invalid-quiet-color`              |
-| `--mod-datepicker-min-width`                        |
-| `--mod-datepicker-quiet-border-color-hover`         |
-| `--mod-datepicker-range-dash-line-height`           |
-| `--mod-datepicker-range-dash-margin-left`           |
-| `--mod-datepicker-range-dash-padding-top`           |
-| `--mod-datepicker-range-input-width-first`          |
+| Modifiable Custom Properties                            |
+| ------------------------------------------------------- |
+| `--mod-combobox-quiet-fieldbutton-border-radius`        |
+| `--mod-datepicker-border-color-disabled`                |
+| `--mod-datepicker-border-radius`                        |
+| `--mod-datepicker-dash-color-disabled`                  |
+| `--mod-datepicker-dash-font-size`                       |
+| `--mod-datepicker-datetime-input-width`                 |
+| `--mod-datepicker-datetime-input-width-first`           |
+| `--mod-datepicker-datetime-quiet-input-width`           |
+| `--mod-datepicker-datetime-quiet-input-width-first`     |
+| `--mod-datepicker-focus-animation`                      |
+| `--mod-datepicker-focus-line-gap`                       |
+| `--mod-datepicker-focus-ring-color`                     |
+| `--mod-datepicker-focus-ring-gap`                       |
+| `--mod-datepicker-focus-ring-width`                     |
+| `--mod-datepicker-generic-padding`                      |
+| `--mod-datepicker-icon-to-text-right`                   |
+| `--mod-datepicker-input-padding-right`                  |
+| `--mod-datepicker-input-width`                          |
+| `--mod-datepicker-input-width-quiet`                    |
+| `--mod-datepicker-invalid-quiet-color`                  |
+| `--mod-datepicker-invalid-text-to-icon`                 |
+| `--mod-datepicker-min-width`                            |
+| `--mod-datepicker-quiet-border-color-hover`             |
+| `--mod-datepicker-range-dash-line-height`               |
+| `--mod-datepicker-range-dash-margin-left`               |
+| `--mod-datepicker-range-dash-padding-top`               |
+| `--mod-datepicker-range-input-width-first`              |
+| `--mod-datepicker-range-input-width-quiet-first`        |
+| `--mod-textfield-icon-spacing-inline-end-invalid`       |
+| `--mod-textfield-icon-spacing-inline-end-quiet-invalid` |

components/datepicker/package.json

@@ -26,7 +26,7 @@
     "@spectrum-css/component-builder-simple": "^2.0.17",
     "@spectrum-css/icon": "^4.0.2",
     "@spectrum-css/menu": "^4.0.50",
-    "@spectrum-css/pickerbutton": "^3.0.34",
+    "@spectrum-css/pickerbutton": "^4.0.14",
     "@spectrum-css/popover": "^6.0.76",
     "@spectrum-css/textfield": "^6.0.22",
     "@spectrum-css/tokens": "^11.3.3",

yarn.lock

@@ -2540,11 +2540,6 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-4.0.50.tgz#d72467542b0cab858062c6fd5cb2950e8bbb0bc4"
   integrity sha512-CBg8mUe4BFR0pKsMLWkAQW9/7tOp1V9QQkQzc8ZnT3Ayz5uFGy9saEErN5mSWxf2+22Ab5UftMU2uzgFo762eA==
 
-"@spectrum-css/pickerbutton@^3.0.34":
-  version "3.0.34"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-3.0.34.tgz#987c639a281f0a54e72695cf38127faa60b9fcce"
-  integrity sha512-D8cfc9nvGNiLlY/y6TsgyZpj6zdGMh2ENUQi846DYS6ONRtDh9M2xoigpRcbIXc6Cm8kgCiZcTFsk07B/TT+pg==
-
 "@spectrum-css/tokens@^10.1.2":
   version "10.2.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-10.2.2.tgz#461697381575446542bbce8ae6d8ea948195ab3f"