feat: added t-shirt sizes to picker

BREAKING CHANGES: picker requires t-shirt size. closes #940.
adobe · Feb 2, 2021 · 35bf08f · 35bf08f
1 parent ce8e77f
commit 35bf08f
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 48 deletions.
diff --git a/components/fieldlabel/metadata/form.yml b/components/fieldlabel/metadata/form.yml
@@ -25,7 +25,7 @@ examples:
         <div class="spectrum-Form-item">
           <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
           <div class="spectrum-Form-itemField">
-            <button class="spectrum-Picker" aria-haspopup="true">
+            <button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
               <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -107,7 +107,7 @@ examples:
         <div class="spectrum-Form-item">
           <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Country</label>
           <div class="spectrum-Form-itemField">
-            <button class="spectrum-Picker" aria-haspopup="true">
+            <button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
               <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -189,7 +189,7 @@ examples:
         <div class="spectrum-Form-item">
           <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Country</label>
           <div class="spectrum-Form-itemField">
-            <button class="spectrum-Picker" aria-haspopup="true">
+            <button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
               <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
               <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Chevron100" />

diff --git a/components/inputgroup/metadata/combobox.yml b/components/inputgroup/metadata/combobox.yml
@@ -44,7 +44,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -56,7 +56,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -87,7 +87,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
         </div>
-        <button class="spectrum-Picker spectrum-InputGroup-button" aria-haspopup="true" disabled>
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" aria-haspopup="true" disabled>
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -102,7 +102,7 @@ examples:
           </svg>
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -116,7 +116,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -128,7 +128,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -159,7 +159,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
         </div>
-        <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>
@@ -174,7 +174,7 @@ examples:
           </svg>
           <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
         </div>
-        <button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
+        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Chevron100" />
           </svg>

diff --git a/components/inputgroup/metadata/datepicker.yml b/components/inputgroup/metadata/datepicker.yml
@@ -20,7 +20,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
         </div>
-          <button type="button" class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1">
+          <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1">
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
               <use xlink:href="#spectrum-icon-18-Calendar" />
             </svg>
@@ -33,7 +33,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -50,7 +50,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -70,7 +70,7 @@ examples:
           </svg>
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="">
         </div>
-        <button type="button" class="spectrum-Picker is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -87,7 +87,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="" disabled>
         </div>
-        <button type="button" class="spectrum-Picker spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -104,7 +104,7 @@ examples:
         <div class="spectrum-Textfield spectrum-InputGroup-textfield">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -123,7 +123,7 @@ examples:
           </svg>
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -140,7 +140,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -160,7 +160,7 @@ examples:
           </svg>
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-Picker--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -177,7 +177,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled spectrum-InputGroup-textfield">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30" disabled>
         </div>
-        <button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -193,7 +193,7 @@ examples:
         <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>
@@ -212,7 +212,7 @@ examples:
           </svg>
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
         </div>
-        <button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+        <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
             <use xlink:href="#spectrum-icon-18-Calendar" />
           </svg>

diff --git a/components/picker/index.css b/components/picker/index.css
@@ -14,12 +14,6 @@ governing permissions and limitations under the License.
 @import "../vars/css/components/spectrum-picker.css";
 
 .spectrum-Picker {
-  @remapvars {
-    find: /--spectrum-picker-m(.*)/;
-    filter: color;
-    replace: --spectrum-picker$1;
-  }
-
   /* todo: remove when fixed in DNA */
   --spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);
 
@@ -77,6 +71,38 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Picker--sizeS {
+  @remapvars {
+    find: /--spectrum-picker-s(.*)/;
+    filter: color;
+    replace: --spectrum-picker$1;
+  }
+}
+
+.spectrum-Picker--sizeM {
+  @remapvars {
+    find: /--spectrum-picker-m(.*)/;
+    filter: color;
+    replace: --spectrum-picker$1;
+  }
+}
+
+.spectrum-Picker--sizeL {
+  @remapvars {
+    find: /--spectrum-picker-l(.*)/;
+    filter: color;
+    replace: --spectrum-picker$1;
+  }
+}
+
+.spectrum-Picker--sizeXL {
+  @remapvars {
+    find: /--spectrum-picker-xl(.*)/;
+    filter: color;
+    replace: --spectrum-picker$1;
+  }
+}
+
 .spectrum-Picker--quiet {
   @remapvars {
     find: /--spectrum-picker-quiet-m(.*)/;
@@ -303,4 +329,4 @@ governing permissions and limitations under the License.
     background-color: var(--spectrum-picker-quiet-m-background-color-disabled);
     color: var(--spectrum-picker-m-text-color-disabled);
   }
-}
+}