fix(menu): updated sizing of tray submenu back icon

The updated design spec for the tray submenu back icon uses a larger arrow than it did previously. Also modifies some mod properties slightly to allow more customization, and includes padding to the right of the back item text label.
adobe · Nov 28, 2023 · 3a5aebd · 3a5aebd
1 parent bccb4da
commit 3a5aebd
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/components/menu/index.css b/components/menu/index.css
@@ -798,8 +798,8 @@ governing permissions and limitations under the License.
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  padding-inline-start: var(--mod-menu-back-padding-inline-start, 0);
-  padding-block: var(--mod-menu-back-padding-block, 0);
+  padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
+  padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
 
   .spectrum-Menu-sectionHeading {
     padding: 0;

diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml
@@ -1340,7 +1340,8 @@ examples:
       </div>
   - id: tray-submenus
     name: Tray submenus
-    description: When a menu is displayed within a tray, a submenu will replace the tray content when the parent menu item is selected. A submenu displays a back button (labeled by the title of the parent item) at the top of the tray to return the user to the previous level of the menu.
+    description: "When a menu is displayed within a tray, a submenu will replace the tray content when the parent menu item is selected. A submenu displays a back button (labeled by the title of the parent item) at the top of the tray to return the user to the previous level of the menu.
+      The back arrow size scale used with the various menu sizes are small: `200`, medium: `300`, large: `400`, and extra large: `500`."
     markup: |
       <div class="spectrum-Tray-wrapper spectrum-CSSExample-dialog" style="background: rgba(0,0,0,0.4);">
         <div class="spectrum-Modal spectrum-Tray is-open spectrum-Tray">
@@ -1349,9 +1350,9 @@ examples:
               <div class="spectrum-Menu-back">
                 <button aria-label="Back to previous menu" class="spectrum-Menu-backButton" type="button" role="menuitem">
                   <svg
-                    class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-ArrowLeft100 spectrum-Menu-backIcon"
+                    class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-ArrowLeft200 spectrum-Menu-backIcon"
                     aria-hidden="true"
-                  ><use xlink:href="#spectrum-css-icon-Arrow100" /></svg>
+                  ><use xlink:href="#spectrum-css-icon-Arrow200" /></svg>
                 </button>
                 <span class="spectrum-Menu-backHeading" id="back-menu-heading" aria-hidden="true">Snap to</span>
               </div>

diff --git a/components/menu/metadata/mods.md b/components/menu/metadata/mods.md
@@ -4,7 +4,9 @@
 | `--mod-menu-back-icon-color-default`                               |
 | `--mod-menu-back-icon-margin-block`                                |
 | `--mod-menu-back-icon-margin-inline`                               |
-| `--mod-menu-back-padding-block`                                    |
+| `--mod-menu-back-padding-block-end`                                |
+| `--mod-menu-back-padding-block-start`                              |
+| `--mod-menu-back-padding-inline-end`                               |
 | `--mod-menu-back-padding-inline-start`                             |
 | `--mod-menu-checkmark-display`                                     |
 | `--mod-menu-checkmark-icon-color-default`                          |

diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
@@ -145,6 +145,22 @@ export const MenuItem = ({
   `
 };
 
+/**
+ * Get the tray submenu back arrow name with scale number (defined in design spec).
+ */
+const backArrowWithScale = (size = "m", iconName = "ArrowLeft") => {
+  switch (size) {
+    case "s":
+      return `${iconName}200`;
+    case "l":
+      return `${iconName}400`;
+    case "xl":
+      return `${iconName}500`;
+    default:
+      return `${iconName}300`;
+  }
+}
+
 export const MenuGroup = ({
   heading,
   id,
@@ -171,7 +187,7 @@ export const MenuGroup = ({
           <button aria-label="Back to previous menu" class="spectrum-Menu-backButton" type="button" role="menuitem">
             ${Icon({
               ...globals,
-              iconName: "ArrowLeft",
+              iconName: backArrowWithScale(size),
               size,
               customClasses: [`spectrum-Menu-backIcon`] 
             })}