fix: change workflow icon size to medium for most of the examples (#962)

Co-authored-by: Jian Liao <jianliao@adobe.com>
adobe · Sep 22, 2020 · db7b8b2 · db7b8b2
1 parent c539411
commit db7b8b2
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 43 deletions.
diff --git a/components/divider/metadata/divider.yml b/components/divider/metadata/divider.yml
@@ -4,7 +4,11 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/divider/
 sections:
   - name: Migrating from Rule
     description: |
+      ### Component rename
       Rule is now named Divider. All instances of `.spectrum-Rule` in your code should be replaced with `.spectrum-Divider`, and the `@spectrum-css/divider` package should be used instead of `@spectrum-css/rule`.
+
+      ### Change workflow icon size to medium
+      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 examples:
   - id: divider-large
     name: 'Large'
@@ -32,13 +36,13 @@ examples:
     markup: |
       <div class="spectrum-ButtonGroup">
         <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
+          <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Properties">
             <use xlink:href="#spectrum-icon-18-Properties" />
           </svg>
         </button>
         <div class="spectrum-Divider spectrum-Divider--small spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
         <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
+          <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Select">
             <use xlink:href="#spectrum-icon-18-Select" />
           </svg>
         </button>
@@ -48,13 +52,13 @@ examples:
     markup: |
       <div class="spectrum-ButtonGroup">
         <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
+          <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Properties">
             <use xlink:href="#spectrum-icon-18-Properties" />
           </svg>
         </button>
         <div class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
         <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
+          <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Select">
             <use xlink:href="#spectrum-icon-18-Select" />
           </svg>
         </button>

diff --git a/components/inputgroup/metadata/datepicker.yml b/components/inputgroup/metadata/datepicker.yml
@@ -3,7 +3,12 @@ description: A date picker uses the input group component to display a field wit
 sections:
   - name: Migration Guide
     description: |
-     See the [Combobox migration guide](combobox.html#migrationguide) for migration information.
+      ### Textfiled markup change
+      See the [Combobox migration guide](combobox.html#migrationguide) for migration information.
+      
+      ### Change workflow icon size to medium
+      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
+
 
 examples:
   - id: datepicker
@@ -14,7 +19,7 @@ examples:
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
         </div>
           <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -27,7 +32,7 @@ examples:
           <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
         </div>
           <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -44,7 +49,7 @@ examples:
           <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-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -64,7 +69,7 @@ examples:
           <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-FieldButton is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -81,7 +86,7 @@ examples:
           <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-FieldButton spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -98,7 +103,7 @@ examples:
           <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-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -117,7 +122,7 @@ examples:
           <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-FieldButton spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -134,7 +139,7 @@ examples:
           <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-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -154,7 +159,7 @@ examples:
           <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-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -171,7 +176,7 @@ examples:
           <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-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -187,7 +192,7 @@ examples:
           <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-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>
@@ -206,7 +211,7 @@ examples:
           <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-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" 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>
         </button>

diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml
@@ -1,5 +1,10 @@
 name: Menu
 SpectrumSiteSlug: https://spectrum.adobe.com/page/side-navigation/
+section:
+  - name: Migration Guide
+    description: |
+      ### Change workflow icon size to medium
+      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 examples:
   - id: selectlist
     name: Standard
@@ -48,13 +53,13 @@ examples:
             <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
             <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
               <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
-                <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
                   <use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
                 </svg>
                 <span class="spectrum-Menu-itemLabel">Save</span>
               </li>
               <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
-                <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
+                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
                   <use xlink:href="#spectrum-icon-18-DataDownload"></use>
                 </svg>
                 <span class="spectrum-Menu-itemLabel">Download</span>

diff --git a/components/quickaction/metadata/quickaction.yml b/components/quickaction/metadata/quickaction.yml
@@ -3,6 +3,11 @@ name: Quick Actions
 status: Verified
 description: 'Note that the `.spectrum-QuickActions-overlay` class should be placed on the container where the Quick Actions are displayed, and the `.spectrum-QuickActions--textOnly` class should be applied when the buttons have text only.'
 SpectrumSiteSlug: https://spectrum.adobe.com/page/quick-actions/
+section:
+  - name: Migration Guide
+    description: |
+      ### Change workflow icon size to medium
+      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 examples:
   - id: quickactions
     name: Standard
@@ -11,17 +16,17 @@ examples:
 
         <div class="spectrum-QuickActions is-open">
           <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
           <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Copy">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
               <use xlink:href="#spectrum-icon-18-Copy" />
             </svg>
           </button>
           <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
           </button>