feat: update popover utility and extend to other components

Author: Aziz Ramos

.changeset/yellow-ghosts-allow.md

@@ -0,0 +1,6 @@
+---
+"@spectrum-css/popover": minor
+"@spectrum-css/picker": minor
+---
+
+Adding max block size utility in popover so that other components such as picker can use it

components/picker/index.css

@@ -13,7 +13,6 @@
 
 @import "./themes/express.css";
 @import "@spectrum-css/commons/basebutton.css";
-@import "../components/popover/index.css";
 
 .spectrum-Picker {
 	/* font */
@@ -496,6 +495,6 @@
 /* Fixed menu height */
 .spectrum-Picker--menu-height-fixed {
 	& + .spectrum-Popover.is-open {
-		--spectrum-popover-max-block-size: var(--mod-picker-popover-max-block-size, 200px);
+		--mod-popover-max-block-size: 200px;
 	}
 }

components/picker/metadata/metadata.json

@@ -125,7 +125,6 @@
     "--mod-picker-icon-color-key-focus",
     "--mod-picker-inline-size",
     "--mod-picker-line-height",
-    "--mod-picker-menu-height-fixed",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
     "--mod-picker-spacing-bottom-to-text",
@@ -322,7 +321,8 @@
   "passthroughs": [
     "--mod-button-animation-duration",
     "--mod-button-font-family",
-    "--mod-button-line-height"
+    "--mod-button-line-height",
+    "--mod-popover-max-block-size"
   ],
   "high-contrast": [
     "--highcontrast-picker-background-color",

components/picker/metadata/mods.md

@@ -47,7 +47,6 @@
 | `--mod-picker-icon-color-key-focus`                    |
 | `--mod-picker-inline-size`                             |
 | `--mod-picker-line-height`                             |
-| `--mod-picker-menu-height-fixed`                       |
 | `--mod-picker-placeholder-font-style`                  |
 | `--mod-picker-placeholder-font-weight`                 |
 | `--mod-picker-spacing-bottom-to-text`                  |

components/popover/index.css

@@ -46,7 +46,7 @@
 	/* Max menu block size */
 	--spectrum-popover-max-block-size: 300px;
 
-	max-block-size: var(--spectrum-popover-max-block-size);
+	max-block-size: var(--mod-popover-max-block-size, --spectrum-popover-max-block-size);
 }
 
 /* windows high contrast mode */

components/popover/metadata/metadata.json

@@ -107,6 +107,7 @@
     "--mod-popover-content-area-spacing-vertical",
     "--mod-popover-corner-radius",
     "--mod-popover-filter",
+    "--mod-popover-max-block-size",
     "--mod-popover-pointer-edge-spacing",
     "--mod-popover-pointer-height",
     "--mod-popover-pointer-width",
@@ -123,6 +124,7 @@
     "--spectrum-popover-content-area-spacing-vertical",
     "--spectrum-popover-corner-radius",
     "--spectrum-popover-filter",
+    "--spectrum-popover-max-block-size",
     "--spectrum-popover-pointer-edge-offset",
     "--spectrum-popover-pointer-edge-spacing",
     "--spectrum-popover-pointer-height",

components/popover/metadata/mods.md

@@ -9,6 +9,7 @@
 | `--mod-popover-content-area-spacing-vertical` |
 | `--mod-popover-corner-radius`                 |
 | `--mod-popover-filter`                        |
+| `--mod-popover-max-block-size`                |
 | `--mod-popover-pointer-edge-spacing`          |
 | `--mod-popover-pointer-height`                |
 | `--mod-popover-pointer-width`                 |