feat: migrate Picker from FieldButton to Picker... button

BREAKING CHANGE: Picker markup changed completely

Author: lazd

components/picker/index.css

@@ -11,73 +11,99 @@ governing permissions and limitations under the License.
 */
 
 @import "../commons/index.css";
+@import "../commons/basebutton.css";
 @import "../vars/css/components/spectrum-picker.css";
 
-:root {
-  --spectrum-picker-popover-max-width: var(
-    --spectrum-global-dimension-size-3000
-  );
-  --spectrum-picker-width: var(--spectrum-global-dimension-size-2400);
-
-  /* This needs to be a variable so it overrides when using multiStops */
-  --spectrum-picker-quiet-width: auto;
-}
-
 .spectrum-Picker {
-  /* todo: remove when fixed in DNA */
-  --spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);
-
   @remapvars {
     find: /--spectrum-picker-m(.*)/;
     filter: color;
     replace: --spectrum-picker$1;
   }
-  @remapvars {
-    find: /--spectrum-picker-quiet-m(.*)/;
-    filter: color;
-    replace: --spectrum-picker-quiet$1;
-  }
+
+  /* todo: remove when fixed in DNA */
+  --spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);
+
+  /* Todo: fix in DNA, should have been zero */
+  --spectrum-picker-disabled-border-size: 0;
+
+  --spectrum-picker-popover-max-width: var(--spectrum-global-dimension-size-3000);
+  --spectrum-picker-width: var(--spectrum-global-dimension-size-2400);
+
+  /* todo: use real DNA var */
+  --spectrum-picker-border-size-increase-focus: 1px;
 }
 
 .spectrum-Picker {
-  position: relative;
-  display: inline-block;
+  @inherit: %spectrum-BaseButton;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   /* Truncate if menu options make us too wide */
   max-inline-size: 100%;
   inline-size: var(--spectrum-picker-width);
   min-inline-size: var(--spectrum-picker-min-width);
+  block-size: var(--spectrum-picker-height);
 
-  /* Hack to enable select-powered Dropdowns */
-  select {
-    appearance: none;
-    -ms-appearance: none; /* Edge */
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--spectrum-picker-textonly-padding-left) var(--spectrum-picker-textonly-padding-right);
 
-    &::-ms-expand {
-      display: none;
-    }
+  border-width: var(--spectrum-picker-border-size);
+  border-style: solid;
+  border-radius: var(--spectrum-picker-border-radius);
 
-    &::-ms-value {
-      background-color: transparent;
-    }
+  transition: background-color var(--spectrum-global-animation-duration-100),
+    box-shadow var(--spectrum-global-animation-duration-100),
+    border-color var(--spectrum-global-animation-duration-100);
 
-    & + .spectrum-Picker-icon {
-      position: absolute;
-      inset-inline-end: var(--spectrum-picker-icon-gap);
-      inset-block-start: 50%;
-      margin-block-start: calc(
-        var(--spectrum-icon-chevron-down-medium-height) / -2
-      );
-    }
+  &:disabled,
+  &.is-disabled {
+    border-width: var(--spectrum-picker-disabled-border-size);
+    cursor: default;
+  }
+
+  &.is-open {
+    border-width: var(--spectrum-picker-border-size);
+  }
+
+  .spectrum-Picker-icon {
+    flex-shrink: 0;
+
+    margin-inline-start: calc(var(--spectrum-picker-padding-left) - var(--spectrum-picker-textonly-padding-left));
+    margin-inline-end: var(--spectrum-picker-icon-gap);
+  }
+
+  .spectrum-Picker-label + .spectrum-Picker-icon {
+    margin-inline-start: var(--spectrum-picker-icon-gap);
   }
 }
 
-.spectrum-Picker-trigger {
-  position: relative;
-  inline-size: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.spectrum-Picker--quiet {
+  @remapvars {
+    find: /--spectrum-picker-quiet-m(.*)/;
+    filter: color;
+    replace: --spectrum-picker-$1;
+  }
+
+  /* Todo: fix in DNA, should have been zero */
+  --spectrum-picker-border-size: 0;
+  --spectrum-picker-border-radius: 0;
+  --spectrum-picker-textonly-padding-left: 0;
+  --spectrum-picker-textonly-padding-right: 0;
+}
+
+.spectrum-Picker--quiet {
+  inline-size: auto;
+
+  &:disabled,
+  &.is-disabled {
+    &:focus-ring {
+      box-shadow: none;
+    }
+  }
 }
 
 .spectrum-Picker-label {
@@ -107,93 +133,183 @@ governing permissions and limitations under the License.
 }
 
 /* Only apply margin to the icon if there's a label */
-.spectrum-Picker-label + .spectrum-Picker-icon {
-  margin-inline-start: var(--spectrum-picker-icon-gap);
-}
-
-.spectrum-Icon + .spectrum-Picker-label {
-  /* todo not sure if this is right */
+.spectrum-Picker-label + .spectrum-Picker-validationIcon {
   margin-inline-start: var(--spectrum-picker-icon-gap);
 }
 
 /* Only apply margin if there's a label */
-.spectrum-Picker-label ~ .spectrum-Picker-icon {
+.spectrum-Picker-label ~ .spectrum-Picker-menuIcon {
   margin-inline-start: var(--spectrum-picker-icon-gap);
 }
 
-.spectrum-Picker-icon {
+/* The picker chevron */
+.spectrum-Picker-menuIcon {
   display: inline-block;
   position: relative;
   vertical-align: top;
   transition: color var(--spectrum-global-animation-duration-100) ease-out;
   flex-shrink: 0;
-
-  /* Fix Safari 10 bug where align-items is ignored inside of buttons */
-  margin-block-start: calc(
-    calc(
-        var(--spectrum-picker-height) -
-          calc(var(--spectrum-picker-border-size) * 2) -
-          var(--spectrum-icon-chevron-down-medium-height)
-      ) / 2
-  );
-  margin-block-end: calc(
-    calc(
-        var(--spectrum-picker-height) -
-          calc(var(--spectrum-picker-border-size) * 2) -
-          var(--spectrum-icon-chevron-down-medium-height)
-      ) / 2
-  );
-
-  opacity: 1;
-}
-
-/* Error icons */
-.spectrum-Picker-trigger {
-  .spectrum-Icon:not(.spectrum-Picker-icon) {
-    flex-shrink: 0;
-    /* Fix Safari 10 bug where align-items is ignored inside of buttons */
-    margin-block-start: calc(
-      calc(
-          var(--spectrum-picker-height) -
-            calc(var(--spectrum-picker-border-size) * 2) -
-            var(--spectrum-picker-icon-size)
-        ) / 2
-    );
-    margin-block-end: calc(
-      calc(
-          var(--spectrum-picker-height) -
-            calc(var(--spectrum-picker-border-size) * 2) -
-            var(--spectrum-picker-icon-size)
-        ) / 2
-    );
-  }
-
-  .spectrum-Picker-label + .spectrum-Icon:not(.spectrum-Picker-icon) {
-    margin-inline-start: var(--spectrum-picker-icon-gap);
-  }
 }
 
-.spectrum-Icon + .spectrum-Picker-icon {
+.spectrum-Picker-validationIcon + .spectrum-Picker-menuIcon {
   margin-inline-start: var(--spectrum-picker-icon-gap);
 }
 
-.spectrum-Picker--quiet {
-  @remapvars {
-    find: /--spectrum-picker-quiet-m(.*)/;
-    filter: color;
-    replace: --spectrum-picker$1;
-  }
-
-  inline-size: var(--spectrum-picker-quiet-width);
-}
-
 .spectrum-Picker-popover {
   max-inline-size: var(--spectrum-picker-popover-max-width);
 }
 
 .spectrum-Picker-popover--quiet {
   margin-inline-start: calc(
-    -1 * calc(var(--spectrum-picker-quiet-popover-offset-x) +
+    -1 * calc(var(--spectrum-picker-quiet-m-popover-offset-x) +
           var(--spectrum-popover-border-size))
   );
 }
+
+.spectrum-Picker {
+  color: var(--spectrum-picker-m-text-color);
+  background-color: var(--spectrum-picker-m-background-color);
+  border-color: var(--spectrum-picker-m-border-color);
+
+  &:hover {
+    color: var(--spectrum-picker-m-text-color-hover);
+    background-color: var(--spectrum-picker-m-background-color-hover);
+    border-color: var(--spectrum-picker-m-border-color-hover);
+
+    .spectrum-Picker-menuIcon {
+      color: var(--spectrum-picker-m-icon-color-hover);
+    }
+  }
+
+  &:active,
+  &.is-selected {
+    background-color: var(--spectrum-picker-m-background-color-down);
+    border-color: var(--spectrum-picker-m-border-color-down);
+
+    &.is-placeholder {
+      .spectrum-Picker-label {
+        color: var(--spectrum-picker-m-placeholder-text-color-down);
+      }
+    }
+  }
+
+  &:focus-ring,
+  &.is-focused {
+    background-color: var(--spectrum-picker-m-background-color-key-focus);
+    border-color: var(--spectrum-picker-m-border-color-key-focus);
+    box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-key-focus);
+    color: var(--spectrum-picker-m-text-color-key-focus);
+
+    &.is-placeholder {
+      color: var(--spectrum-picker-m-placeholder-text-color-key-focus);
+    }
+  }
+
+  &.is-invalid {
+    border-color: var(--spectrum-picker-m-border-color-error);
+
+    .spectrum-Picker-validationIcon {
+      color: var(--spectrum-picker-m-validation-icon-color-error);
+    }
+
+    &:hover {
+      border-color: var(--spectrum-picker-m-border-color-error-hover);
+    }
+
+    &:active,
+    &.is-selected {
+      border-color: var(--spectrum-picker-m-border-color-error-down);
+    }
+
+    &:focus-ring,
+    &.is-focused {
+      border-color: var(--spectrum-picker-m-border-color-error-key-focus);
+      box-shadow: 0 0 0 var(--spectrum-picker-border-size-increase-focus) var(--spectrum-picker-m-border-color-error-key-focus);
+    }
+  }
+
+  &:disabled,
+  &.is-disabled {
+    background-color: var(--spectrum-picker-m-background-color-disabled);
+    color: var(--spectrum-picker-m-text-color-disabled);
+
+    .spectrum-Picker-icon,
+    .spectrum-Picker-menuIcon,
+    .spectrum-Picker-validationIcon {
+      color: var(--spectrum-picker-m-icon-color-disabled);
+    }
+
+    .spectrum-Picker-label {
+      &.is-placeholder {
+        color: var(--spectrum-picker-m-placeholder-text-color-disabled);
+      }
+    }
+  }
+}
+
+.spectrum-Picker-menuIcon {
+  color: var(--spectrum-picker-m-icon-color);
+}
+
+.spectrum-Picker-label {
+  &.is-placeholder {
+    color: var(--spectrum-picker-m-placeholder-text-color);
+
+    &:hover {
+      color: var(--spectrum-picker-m-placeholder-text-color-hover);
+    }
+
+    &:active {
+      color: var(--spectrum-picker-m-placeholder-text-color-mouse-focus);
+    }
+  }
+}
+
+.spectrum-Picker--quiet {
+  color: var(--spectrum-picker-m-text-color);
+  border-color: var(--spectrum-picker-quiet-m-border-color);
+  background-color: var(--spectrum-picker-quiet-m-background-color);
+
+  &:hover {
+    background-color: var(--spectrum-picker-quiet-m-background-color-hover);
+    color: var(--spectrum-picker-m-text-color-hover);
+  }
+
+  &:focus-ring,
+  &.is-focused {
+    background-color: var(--spectrum-picker-quiet-m-background-color-key-focus);
+    box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus);
+
+    &.is-placeholder {
+      color: var(--spectrum-picker-quiet-m-placeholder-text-color-key-focus);
+    }
+    .spectrum-Picker-menuIcon {
+      color: var(--spectrum-picker-m-icon-color-key-focus)
+    }
+  }
+
+  &:active,
+  &.is-selected {
+    background-color: var(--spectrum-picker-quiet-m-background-color-down);
+    border-color: var(--spectrum-picker-quiet-m-border-color-down);
+
+    &:focus-ring,
+    &.is-focused {
+      background-color: var(--spectrum-picker-quiet-m-background-color-key-focus);
+      box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-key-focus);
+    }
+  }
+
+  &.is-invalid {
+    &:focus-ring,
+    &.is-focused {
+      box-shadow: 0 2px 0 0 var(--spectrum-picker-m-border-color-error-key-focus);
+    }
+  }
+
+  &:disabled,
+  &.is-disabled {
+    background-color: var(--spectrum-picker-quiet-m-background-color-disabled);
+    color: var(--spectrum-picker-m-text-color-disabled);
+  }
+}