fix: make Picker work again

adobe · Dec 1, 2020 · 91f6e09 · 91f6e09
1 parent 56423cd
commit 91f6e09
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/components/picker/index.css b/components/picker/index.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 */
 
 @import "../commons/index.css";
+@import "../vars/css/components/spectrum-picker.css";
 
 :root {
   --spectrum-picker-popover-max-width: var(
@@ -22,6 +23,17 @@ governing permissions and limitations under the License.
   --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;
+  }
+}
+
 .spectrum-Picker {
   position: relative;
   display: inline-block;
@@ -46,7 +58,7 @@ governing permissions and limitations under the License.
 
     & + .spectrum-Picker-icon {
       position: absolute;
-      inset-inline-end: var(--spectrum-picker-padding-x);
+      inset-inline-end: var(--spectrum-picker-icon-gap);
       inset-block-start: 50%;
       margin-block-start: calc(
         var(--spectrum-icon-chevron-down-medium-height) / -2
@@ -91,16 +103,17 @@ 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-margin-left);
+  margin-inline-start: var(--spectrum-picker-icon-gap);
 }
 
 .spectrum-Icon + .spectrum-Picker-label {
-  margin-inline-start: var(--spectrum-listitem-thumbnail-image-padding-x);
+  /* todo not sure if this is right */
+  margin-inline-start: var(--spectrum-picker-icon-gap);
 }
 
 /* Only apply margin if there's a label */
 .spectrum-Picker-label ~ .spectrum-Picker-icon {
-  margin-inline-start: var(--spectrum-picker-icon-margin-left);
+  margin-inline-start: var(--spectrum-picker-icon-gap);
 }
 
 .spectrum-Picker-icon {
@@ -151,7 +164,7 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Picker-label + .spectrum-Icon:not(.spectrum-Picker-icon) {
-    margin-inline-start: var(--spectrum-picker-icon-margin-left);
+    margin-inline-start: var(--spectrum-picker-icon-gap);
   }
 }
 
@@ -160,8 +173,13 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Picker--quiet {
+  @remapvars {
+    find: /--spectrum-picker-quiet-m(.*)/;
+    filter: color;
+    replace: --spectrum-picker$1;
+  }
+
   inline-size: var(--spectrum-picker-quiet-width);
-  min-inline-size: var(--spectrum-picker-quiet-min-width);
 }
 
 .spectrum-Picker-popover {

diff --git a/components/picker/skin.css b/components/picker/skin.css
@@ -13,27 +13,27 @@ governing permissions and limitations under the License.
 .spectrum-Picker {
   .spectrum-Picker-trigger:hover {
     .spectrum-Picker-icon {
-      color: var(--spectrum-picker-icon-color-hover);
+      color: var(--spectrum-picker-m-icon-color-hover);
     }
   }
 
   .spectrum-Picker-trigger {
     &.is-selected {
       .is-placeholder {
-        color: var(--spectrum-picker-placeholder-text-color-down);
+        color: var(--spectrum-picker-m-placeholder-text-color-down);
       }
     }
   }
 
   &.is-invalid {
     .spectrum-Icon:not(.spectrum-Picker-icon):not(.spectrum-Menu-checkmark) {
-      color: var(--spectrum-picker-validation-icon-color-error);
+      color: var(--spectrum-picker-m-validation-icon-color-error);
     }
 
     &.is-disabled {
       .spectrum-Icon,
       .spectrum-Icon:not(.spectrum-Picker-icon):not(.spectrum-Menu-checkmark) {
-        color: var(--spectrum-picker-icon-color-disabled);
+        color: var(--spectrum-picker-m-icon-color-disabled);
       }
     }
   }
@@ -42,39 +42,39 @@ governing permissions and limitations under the License.
     &,
     .spectrum-Picker-trigger:hover {
       .spectrum-Picker-icon {
-        color: var(--spectrum-picker-icon-color-disabled);
+        color: var(--spectrum-picker-m-icon-color-disabled);
       }
     }
     .spectrum-Picker-label {
       &.is-placeholder {
-        color: var(--spectrum-picker-placeholder-text-color-disabled);
+        color: var(--spectrum-picker-m-placeholder-text-color-disabled);
       }
     }
   }
 }
 
 .spectrum-Picker-icon {
-  color: var(--spectrum-picker-icon-color);
+  color: var(--spectrum-picker-m-icon-color);
 }
 
 .spectrum-Picker-label {
   &.is-placeholder {
-    color: var(--spectrum-picker-placeholder-text-color);
+    color: var(--spectrum-picker-m-placeholder-text-color);
 
     &:hover {
-      color: var(--spectrum-picker-placeholder-text-color-hover);
+      color: var(--spectrum-picker-m-placeholder-text-color-hover);
     }
 
     &:active {
-      color: var(--spectrum-picker-placeholder-text-color-mouse-focus);
+      color: var(--spectrum-picker-m-placeholder-text-color-mouse-focus);
     }
   }
 }
 .spectrum-Picker-trigger.focus-ring {
   .spectrum-Picker-label.is-placeholder {
-    color: var(--spectrum-picker-placeholder-text-color-key-focus);
+    color: var(--spectrum-picker-m-placeholder-text-color-key-focus);
   }
   .spectrum-Picker-icon {
-    color: var(--spectrum-picker-icon-color-key-focus)
+    color: var(--spectrum-picker-m-icon-color-key-focus)
   }
 }