fix(picker)!: update spacing tokens and storybook (#1804)

BREAKING CHANGE: removes `--mod-picker-min-inline-size` Additionally: * chore(picker,pickerbutton): update stories - update stories to include label * chore(picker,pickerbutton): add loading state to stories * chore(picker): update icon size in stories * chore(picker): fixing label padding for story * style(picker): update spacing tokens * feat(picker): update spacing tokens * chore(picker): update storybook to match docs * fix(pickerbutton): undo changes to pickerbutton * chore(picker): get defaults set for storybook * chore(picker): updating stories to include express specific styling - adding express and spectrum specific styling to storybook - fixing loading spacing * chore(picker): update storybook - add invalid story - add click functionality * chore(picker): add focused story and fix icon focus color * docs(picker): update mods file --------- Co-authored-by: Patrick Fulton <[email protected]>
adobe · May 3, 2023 · 1097b23 · 1097b23
1 parent cafd1a3
commit 1097b23
Show file tree

Hide file tree

Showing 4 changed files with 269 additions and 67 deletions.
diff --git a/components/picker/index.css b/components/picker/index.css
@@ -26,13 +26,12 @@ governing permissions and limitations under the License.
   --spectrum-picker-font-size: var(--spectrum-font-size-100);
   --spectrum-picker-font-weight: var(--spectrum-regular-font-weight);
   --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style);
+  --spectrum-picker-line-height: var(--spectrum-line-height-100);
 
-  /* height and width */
-  --spectrum-picker-min-inline-size: var(--spectrum-picker-minimum-width-multiplier);
+  /* height */
   --spectrum-picker-block-size: var(--spectrum-component-height-100);
 
   /* border */
-  --spectrum-picker-border-width: var(--spectrum-border-width-100);
   --spectrum-picker-border-radius: var(--spectrum-corner-radius-100);
 
   /* spacing */
@@ -43,6 +42,9 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-medium);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
+  --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
+  --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
+  --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);
 
   & + .spectrum-Popover--bottom.is-open {
     --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
@@ -92,7 +94,8 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-small);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
-
+  --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
+  --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
 
   & + .spectrum-Popover--bottom.is-open {
     --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small);
@@ -106,6 +109,8 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-medium);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
+  --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
+  --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
 
   & + .spectrum-Popover--bottom.is-open {
     --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
@@ -119,6 +124,8 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-large);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
+  --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
+  --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
 
   & + .spectrum-Popover--bottom.is-open {
     --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large);
@@ -132,6 +139,8 @@ governing permissions and limitations under the License.
   --spectrum-picker-spacing-text-to-alert-icon-inline-start: var(--spectrum-field-text-to-alert-icon-extra-large);
   --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large);
   --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
+  --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
+  --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
 
   & + .spectrum-Popover--bottom.is-open {
     --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
@@ -189,14 +198,14 @@ governing permissions and limitations under the License.
   /* Layout */
   display: flex;
 
-  /* Truncate if menu options make us too wide */
+  /* Minimum width is 2 times the height */
   max-inline-size: 100%;
-  min-inline-size: var(--mod-picker-min-inline-size, var(--spectrum-picker-min-inline-size));
+  min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)));
   block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size));
   padding-block: 0;
 
-  /* Start with text-only padding */
-  padding-inline: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text));
+  padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text));
+  padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon));
 
   border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width));
   border-style: solid;
@@ -240,17 +249,6 @@ governing permissions and limitations under the License.
     );
   }
 
-  &:focus-ring,
-  &:focus-visible {
-    /* Remove native outline */
-    outline: none;
-
-    /* Focus ring */
-    &::after {
-      border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
-    }
-  }
-
   &:hover {
     color: var(--highcontrast-picker-font-color-default, var(--mod-picker-font-color-hover, (--spectrum-picker-font-color-hover)));
     background-color: var(--highcontrast-picker-background-color-default, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover)));
@@ -279,22 +277,32 @@ governing permissions and limitations under the License.
   &:focus-visible,
   &:focus-ring,
   &.is-focused {
+    outline: none;
     background-color: var(--highcontrast-picker-background-color-default, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus)));
-
     border-color: var(--highcontrast-picker-border-color-key-focus, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus)));
     border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width));
 
     color: var(--highcontrast-picker-font-color-key-focus, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
 
+    /* Focus ring */
+    &::after {
+      border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
+    }
+
     &.is-placeholder {
       color: var(--highcontrast-picker-font-color-key-focus, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
     }
+
+    .spectrum-Picker-menuIcon {
+      color: var(--highcontrast-picker-icon-color-key-focus, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus)));
+    }
   }
 
   &.is-open {
     color: var(--highcontrast-picker-font-color-default-open, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open)));
     background-color: var(--highcontrast-picker-background-default-open, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open)));
     border-color: var(--highcontrast-picker-border-color-default-open, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open)));
+
     &:hover {
       color: var(--highcontrast-picker-font-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open)));
       background-color: var(--highcontrast-picker-background-color-hover-open, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open)));
@@ -321,7 +329,6 @@ governing permissions and limitations under the License.
       border-color: var(--highcontrast-picker-border-color-error-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover)));
     }
 
-
     &:active {
       border-color: var(--highcontrast-picker-border-color-error-active, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active)));
     }
@@ -393,14 +400,12 @@ governing permissions and limitations under the License.
   white-space: nowrap;
   overflow: hidden;
 
-  block-size: calc(
-    var(--mod-picker-block-size, var(--spectrum-picker-block-size)) - calc(var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)
-  );
   line-height: calc(
     var(--mod-picker-block-size, var(--spectrum-picker-block-size)) - calc(var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)
   );
 
   font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size));
+  line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height));
 
   text-overflow: ellipsis;
   text-align: start;
@@ -429,21 +434,18 @@ governing permissions and limitations under the License.
   vertical-align: top;
   transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out;
   flex-shrink: 0;
+
   margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
+  margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon));
 
   color: var(--highcontrast-picker-icon-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default)));
 
-  &:focus-ring,
-  &:focus-visible {
-    color: var(--highcontrast-picker-icon-color-key-focus, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus)));
-  }
-
   &:active {
     color: var(--highcontrast-picker-icon-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active)));
   }
 }
 
-.spectrum-Picker-validationIcon {
+.spectrum-Picker-validationIcon, .spectrum-Picker .spectrum-ProgressCircle {
   margin-inline-start: var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-alert-icon-inline-start));
 }
 
@@ -467,6 +469,10 @@ governing permissions and limitations under the License.
   color: var(--highcontrast-picker-font-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
   background-color: transparent;
 
+  .spectrum-Picker-menuIcon {
+    margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet));
+  }
+
   &::after {
     border: none;
     block-size: auto;

diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md
@@ -1,17 +1,16 @@
 | Modifiable Custom Properties |
 | --- |
 |`--mod-picker-border-width`|
-|`--mod-picker-min-inline-size`|
 |`--mod-picker-block-size`|
 |`--mod-picker-spacing-edge-to-text`|
+|`--mod-picker-spacing-edge-to-disclosure-icon`|
 |`--mod-picker-border-radius`|
 |`--mod-picker-animation-duration`|
 |`--mod-picker-font-color-default`|
 |`--mod-picker-background-color-default`|
 |`--mod-picker-border-color-default`|
 |`--mod-picker-focus-indicator-gap`|
 |`--mod-picker-focus-indicator-thickness`|
-|`--mod-picker-focus-indicator-color`|
 |`--mod-picker-font-color-hover`|
 |`--mod-picker-background-color-hover`|
 |`--mod-picker-border-color-hover`|
@@ -22,6 +21,8 @@
 |`--mod-picker-background-color-key-focus`|
 |`--mod-picker-border-color-key-focus`|
 |`--mod-picker-font-color-key-focus`|
+|`--mod-picker-focus-indicator-color`|
+|`--mod-picker-icon-color-key-focus`|
 |`--mod-picker-font-color-default-open`|
 |`--mod-picker-background-color-default-open`|
 |`--mod-picker-border-default-open`|
@@ -42,14 +43,16 @@
 |`--mod-picker-font-color-disabled`|
 |`--mod-picker-spacing-text-to-icon`|
 |`--mod-picker-font-size`|
+|`--mod-picker-line-height`|
 |`--mod-picker-font-weight`|
 |`--mod-picker-placeholder-font-style`|
 |`--mod-picker-spacing-icon-to-disclosure-icon`|
+|`--mod-picker-spacing-top-to-disclosure-icon`|
 |`--mod-picker-icon-color-default`|
-|`--mod-picker-icon-color-key-focus`|
 |`--mod-picker-icon-color-active`|
 |`--mod-picker-spacing-text-to-alert-icon-inline-start`|
 |`--mod-picker-spacing-picker-to-popover`|
 |`--mod-picker-popover-quiet-offset-x`|
 |`--mod-picker-spacing-edge-to-text-quiet`|
-|`--mod-picker-spacing-label-to-picker-quiet`|
+|`--mod-picker-spacing-label-to-picker-quiet`|
+|`--mod-picker-spacing-edge-to-disclosure-icon-quiet`|