fix(menu): update menu item border radius (#3504)

* chore(menu): remove mod property and add fallback for spectrum classic
adobe · Jan 21, 2025 · 005b0c7 · 005b0c7
1 parent 7f24248
commit 005b0c7
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/shiny-files-chew.md b/.changeset/shiny-files-chew.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/menu": patch
+---
+
+Updated the menu item border radius in Spectrum 2.
diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json
@@ -250,6 +250,7 @@
     "--spectrum-menu-item-checkmark-width-medium",
     "--spectrum-menu-item-checkmark-width-small",
     "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
+    "--spectrum-menu-item-corner-radius",
     "--spectrum-menu-item-description-color-default",
     "--spectrum-menu-item-description-color-disabled",
     "--spectrum-menu-item-description-color-down",
@@ -332,6 +333,7 @@
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
+    "--spectrum-corner-radius-100",
     "--spectrum-disabled-content-color",
     "--spectrum-divider-thickness-medium",
     "--spectrum-divider-thickness-small",
@@ -376,7 +378,8 @@
   "system-theme": [
     "--system-menu-item-background-color-down",
     "--system-menu-item-background-color-hover",
-    "--system-menu-item-background-color-key-focus"
+    "--system-menu-item-background-color-key-focus",
+    "--system-menu-item-corner-radius"
   ],
   "passthroughs": [
     "--mod-checkbox-text-to-control",

diff --git a/components/menu/index.css b/components/menu/index.css
@@ -370,6 +370,8 @@
 	position: relative;
 	align-items: center;
 
+	border-radius: var(--spectrum-menu-item-corner-radius);
+
 	box-sizing: border-box;
 
 	background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));

diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css
@@ -16,5 +16,6 @@
 		--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100);
 	}
 }
diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css
@@ -20,5 +20,6 @@
 		--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-corner-radius: 0;
 	}
 }