fix: updated icon sizes for picker examples

adobe · Feb 2, 2021 · ad054f6 · ad054f6
1 parent 35bf08f
commit ad054f6
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml
@@ -31,6 +31,8 @@ sections:
       ### T-shirt sizing
       Picker now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Picker--size*` class.
       Using the classes `.spectrum-Picker .spectrum-Picker--sizeM` will get result in the previous default picker size.
+      Also, use the correct icon size for chevron icons.
+      `sizeS` uses `spectrum-css-icon-Chevron75`, `sizeM` uses `spectrum-css-icon-Chevron100`, `sizeL` uses `spectrum-css-icon-Chevron200`, `sizeXL` uses `spectrum-css-icon-Chevron300`.
 examples:
   - id: picker
     name: Standard
@@ -215,8 +217,8 @@ examples:
       <h4>S</h4>
       <button class="spectrum-Picker spectrum-Picker--sizeS" aria-haspopup="listbox" style="width: 240px">
         <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" />
+        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-Chevron75" />
         </svg>
       </button>
 
@@ -231,16 +233,16 @@ examples:
       <h4>L</h4>
       <button class="spectrum-Picker spectrum-Picker--sizeL" aria-haspopup="listbox" style="width: 240px">
         <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" />
+        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown200 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-Chevron200" />
         </svg>
       </button>
 
       <h4>XL</h4>
       <button class="spectrum-Picker spectrum-Picker--sizeXL" aria-haspopup="listbox" style="width: 240px">
         <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" />
+        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown300 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-Chevron300" />
         </svg>
       </button>
   - id: picker-quiet