From b8b7aa9288fb0c86822ca744e41c6243ff172a26 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <azizramos@Azizs-MBP.lan>
Date: Wed, 28 Aug 2024 21:15:00 -0400
Subject: [PATCH 1/6] fix: adding picker menu height capabilities

---
 components/picker/index.css              | 12 ++++++++++++
 components/picker/metadata/metadata.json |  4 ++++
 components/picker/metadata/mods.md       |  2 ++
 components/picker/stories/template.js    |  5 -----
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/picker/index.css b/components/picker/index.css
index 9eae5fa7714..b7928fcf183 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -491,3 +491,15 @@
 		color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
 	}
 }
+
+.spectrum-Picker--menu-height-fixed {
+	& + .spectrum-Popover.is-open {
+		max-block-size: var(--mod-picker-menu-height-fixed, 200px);
+	}
+}
+
+.spectrum-Picker--menu-height-full {
+	& + .spectrum-Popover.is-open {
+		height: var(--mod-picker-menu-height-full, calc(100vh - 120px));
+	}
+}
diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json
index a87ea36a42b..55a6b813c9f 100644
--- a/components/picker/metadata/metadata.json
+++ b/components/picker/metadata/metadata.json
@@ -6,6 +6,8 @@
     ".spectrum-Picker .spectrum-Picker-icon",
     ".spectrum-Picker .spectrum-Picker-label",
     ".spectrum-Picker .spectrum-ProgressCircle",
+    ".spectrum-Picker--menu-height-fixed + .spectrum-Popover.is-open",
+    ".spectrum-Picker--menu-height-full + .spectrum-Popover.is-open",
     ".spectrum-Picker--quiet",
     ".spectrum-Picker--quiet .spectrum-Picker-menuIcon",
     ".spectrum-Picker--quiet.is-keyboardFocused",
@@ -124,6 +126,8 @@
     "--mod-picker-icon-color-key-focus",
     "--mod-picker-inline-size",
     "--mod-picker-line-height",
+    "--mod-picker-menu-height-fixed",
+    "--mod-picker-menu-height-full",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
     "--mod-picker-spacing-bottom-to-text",
diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md
index d56fb5c2245..cf2542ceba4 100644
--- a/components/picker/metadata/mods.md
+++ b/components/picker/metadata/mods.md
@@ -47,6 +47,8 @@
 | `--mod-picker-icon-color-key-focus`                    |
 | `--mod-picker-inline-size`                             |
 | `--mod-picker-line-height`                             |
+| `--mod-picker-menu-height-fixed`                       |
+| `--mod-picker-menu-height-full`                        |
 | `--mod-picker-placeholder-font-style`                  |
 | `--mod-picker-placeholder-font-weight`                 |
 | `--mod-picker-spacing-bottom-to-text`                  |
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 40b71ffb7b2..52243d463cb 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -88,7 +88,6 @@ export const Template = ({
 	withSwitch = false,
 	fieldLabelStyle = {},
 	customClasses = [],
-	customStyles = {},
 	content = [],
 	id = getRandomId("picker"),
 } = {}, context = {}) => {
@@ -136,10 +135,6 @@ export const Template = ({
 				isDisabled,
 				isReadOnly,
 				customClasses,
-				customStyles: {
-					"display": labelPosition == "left" ? "inline-block" : undefined,
-					...customStyles,
-				},
 				content,
 				iconName,
 				labelPosition,

From f0cfb1e10bf3a63e71e1f5998b8f2b80d1b0ae70 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <azizramos@Azizs-MBP.lan>
Date: Thu, 29 Aug 2024 11:23:08 -0400
Subject: [PATCH 2/6] fix: adding max height or full height picker menu

---
 .changeset/yellow-bags-smash.md             | 5 +++++
 components/picker/index.css                 | 2 ++
 components/picker/stories/picker.stories.js | 9 +++++++++
 components/picker/stories/template.js       | 4 ++++
 4 files changed, 20 insertions(+)
 create mode 100644 .changeset/yellow-bags-smash.md

diff --git a/.changeset/yellow-bags-smash.md b/.changeset/yellow-bags-smash.md
new file mode 100644
index 00000000000..ee773825eb5
--- /dev/null
+++ b/.changeset/yellow-bags-smash.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/picker": major
+---
+
+Adding max height to picker menu
diff --git a/components/picker/index.css b/components/picker/index.css
index b7928fcf183..e36a4140e74 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -492,12 +492,14 @@
 	}
 }
 
+/* Fixed menu height */
 .spectrum-Picker--menu-height-fixed {
 	& + .spectrum-Popover.is-open {
 		max-block-size: var(--mod-picker-menu-height-fixed, 200px);
 	}
 }
 
+/* Full viewport height menu */
 .spectrum-Picker--menu-height-full {
 	& + .spectrum-Popover.is-open {
 		height: var(--mod-picker-menu-height-full, calc(100vh - 120px));
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index 0bfc67be051..4fdcc4f31b0 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -96,6 +96,15 @@ export default {
 			},
 			control: "boolean",
 		},
+		menuHeight: {
+			name: "Menu Height",
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["fixed", "full"],
+			control: "select",
+		},
 		isInvalid,
 		content: { table: { disable: true } },
 	},
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 52243d463cb..30ac961a8e2 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -26,6 +26,7 @@ export const Picker = ({
 	customClasses = [],
 	customStyles = {},
 	onclick,
+	menuHeight = "fixed",
 } = {}, context = {}) => {
 	return html`
 		<button
@@ -39,6 +40,7 @@ export const Picker = ({
 				["is-open"]: isOpen,
 				["is-loading"]: isLoading,
 				["is-keyboardFocused"]: isKeyboardFocused,
+				[`${rootClass}--menu-height-${menuHeight}`]: typeof menuHeight !== "undefined",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			?disabled=${isDisabled}
@@ -89,6 +91,7 @@ export const Template = ({
 	fieldLabelStyle = {},
 	customClasses = [],
 	content = [],
+	menuHeight = "fixed",
 	id = getRandomId("picker"),
 } = {}, context = {}) => {
 	const { updateArgs } = context;
@@ -138,6 +141,7 @@ export const Template = ({
 				content,
 				iconName,
 				labelPosition,
+				menuHeight,
 				id,
 				onclick: function() {
 					updateArgs({ isOpen: !isOpen });

From 0cb94965acc605ef3a3cb28e6aafdb8cbcba3c3b Mon Sep 17 00:00:00 2001
From: Aziz Ramos <azizramos@Azizs-MBP.lan>
Date: Thu, 29 Aug 2024 11:42:12 -0400
Subject: [PATCH 3/6] fix: changing height property to block-size

---
 components/picker/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/picker/index.css b/components/picker/index.css
index e36a4140e74..fd94f638f06 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -502,6 +502,6 @@
 /* Full viewport height menu */
 .spectrum-Picker--menu-height-full {
 	& + .spectrum-Popover.is-open {
-		height: var(--mod-picker-menu-height-full, calc(100vh - 120px));
+		block-size: var(--mod-picker-menu-height-full, calc(100vh - 120px));
 	}
 }

From dc77410f3eb1c560748ba50369081086e9ae87da Mon Sep 17 00:00:00 2001
From: Aziz Ramos <azizramos@Azizs-MBP.lan>
Date: Thu, 29 Aug 2024 16:46:55 -0400
Subject: [PATCH 4/6] fix: adding max height toggle in storybook and removing
 full height class

---
 .changeset/unlucky-wasps-sit.md             |  5 +++++
 components/picker/index.css                 |  7 -------
 components/picker/metadata/metadata.json    |  2 --
 components/picker/metadata/mods.md          |  1 -
 components/picker/stories/picker.stories.js | 11 ++++++-----
 components/picker/stories/template.js       |  6 +++---
 6 files changed, 14 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/unlucky-wasps-sit.md

diff --git a/.changeset/unlucky-wasps-sit.md b/.changeset/unlucky-wasps-sit.md
new file mode 100644
index 00000000000..5ef4cbfd9fe
--- /dev/null
+++ b/.changeset/unlucky-wasps-sit.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/picker": major
+---
+
+Removing full height mod and keeping max block size for fixed menu height
diff --git a/components/picker/index.css b/components/picker/index.css
index fd94f638f06..4e6f2f9be1f 100644
--- a/components/picker/index.css
+++ b/components/picker/index.css
@@ -498,10 +498,3 @@
 		max-block-size: var(--mod-picker-menu-height-fixed, 200px);
 	}
 }
-
-/* Full viewport height menu */
-.spectrum-Picker--menu-height-full {
-	& + .spectrum-Popover.is-open {
-		block-size: var(--mod-picker-menu-height-full, calc(100vh - 120px));
-	}
-}
diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json
index 55a6b813c9f..ed670a7b252 100644
--- a/components/picker/metadata/metadata.json
+++ b/components/picker/metadata/metadata.json
@@ -7,7 +7,6 @@
     ".spectrum-Picker .spectrum-Picker-label",
     ".spectrum-Picker .spectrum-ProgressCircle",
     ".spectrum-Picker--menu-height-fixed + .spectrum-Popover.is-open",
-    ".spectrum-Picker--menu-height-full + .spectrum-Popover.is-open",
     ".spectrum-Picker--quiet",
     ".spectrum-Picker--quiet .spectrum-Picker-menuIcon",
     ".spectrum-Picker--quiet.is-keyboardFocused",
@@ -127,7 +126,6 @@
     "--mod-picker-inline-size",
     "--mod-picker-line-height",
     "--mod-picker-menu-height-fixed",
-    "--mod-picker-menu-height-full",
     "--mod-picker-placeholder-font-style",
     "--mod-picker-placeholder-font-weight",
     "--mod-picker-spacing-bottom-to-text",
diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md
index cf2542ceba4..7f119be7ce2 100644
--- a/components/picker/metadata/mods.md
+++ b/components/picker/metadata/mods.md
@@ -48,7 +48,6 @@
 | `--mod-picker-inline-size`                             |
 | `--mod-picker-line-height`                             |
 | `--mod-picker-menu-height-fixed`                       |
-| `--mod-picker-menu-height-full`                        |
 | `--mod-picker-placeholder-font-style`                  |
 | `--mod-picker-placeholder-font-weight`                 |
 | `--mod-picker-spacing-bottom-to-text`                  |
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index 4fdcc4f31b0..5c3d46ca698 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -97,13 +97,14 @@ export default {
 			control: "boolean",
 		},
 		menuHeight: {
-			name: "Menu Height",
+			name: "Max Menu Height",
+			type: {name: "boolean"},
 			table: {
-				type: { summary: "string" },
-				category: "Component",
+				type: { name: "boolean" },
+				category: "State",
 			},
-			options: ["fixed", "full"],
-			control: "select",
+			if: { arg: "isOpen", eq: true },
+			control: "boolean",
 		},
 		isInvalid,
 		content: { table: { disable: true } },
diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
index 30ac961a8e2..fd42c6ebcb3 100644
--- a/components/picker/stories/template.js
+++ b/components/picker/stories/template.js
@@ -26,7 +26,7 @@ export const Picker = ({
 	customClasses = [],
 	customStyles = {},
 	onclick,
-	menuHeight = "fixed",
+	menuHeight = false,
 } = {}, context = {}) => {
 	return html`
 		<button
@@ -40,7 +40,7 @@ export const Picker = ({
 				["is-open"]: isOpen,
 				["is-loading"]: isLoading,
 				["is-keyboardFocused"]: isKeyboardFocused,
-				[`${rootClass}--menu-height-${menuHeight}`]: typeof menuHeight !== "undefined",
+				[`${rootClass}--menu-height-fixed`]: menuHeight,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			?disabled=${isDisabled}
@@ -91,7 +91,7 @@ export const Template = ({
 	fieldLabelStyle = {},
 	customClasses = [],
 	content = [],
-	menuHeight = "fixed",
+	menuHeight = false,
 	id = getRandomId("picker"),
 } = {}, context = {}) => {
 	const { updateArgs } = context;

From 5d313e70e5f9f93b747f0d2dd0832afc8352a2bf Mon Sep 17 00:00:00 2001
From: Aziz Ramos <azizramos@Azizs-MBP.lan>
Date: Thu, 5 Sep 2024 12:50:43 -0400
Subject: [PATCH 5/6] feat: update popover utility and extend to other
 components

---
 .changeset/yellow-ghosts-allow.md         | 6 ++++++
 components/picker/index.css               | 3 +--
 components/picker/metadata/metadata.json  | 4 ++--
 components/picker/metadata/mods.md        | 1 -
 components/popover/index.css              | 2 +-
 components/popover/metadata/metadata.json | 2 ++
 components/popover/metadata/mods.md       | 1 +
 7 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/yellow-ghosts-allow.md

diff --git a/.changeset/yellow-ghosts-allow.md b/.changeset/yellow-ghosts-allow.md
new file mode 100644
index 00000000000..7df6940a361
--- /dev/null
+++ b/.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
diff --git a/components/picker/index.css b/components/picker/index.css
index 390a55a1a80..40afc11f6b2 100644
--- a/components/picker/index.css
+++ b/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;
 	}
 }
diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json
index ed670a7b252..cb95cea95e6 100644
--- a/components/picker/metadata/metadata.json
+++ b/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",
diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md
index 7f119be7ce2..d56fb5c2245 100644
--- a/components/picker/metadata/mods.md
+++ b/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`                  |
diff --git a/components/popover/index.css b/components/popover/index.css
index 672c88dbcff..4c46ee149bf 100644
--- a/components/popover/index.css
+++ b/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 */
diff --git a/components/popover/metadata/metadata.json b/components/popover/metadata/metadata.json
index c0ec791c2b5..463050edd65 100644
--- a/components/popover/metadata/metadata.json
+++ b/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",
diff --git a/components/popover/metadata/mods.md b/components/popover/metadata/mods.md
index 25cb283e785..a11ca3048f9 100644
--- a/components/popover/metadata/mods.md
+++ b/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`                 |

From 1e39eff73e4648d33664ca40670d3d222f27d9e8 Mon Sep 17 00:00:00 2001
From: Aziz Ramos <azizramos@Azizs-MBP.lan>
Date: Thu, 5 Sep 2024 13:00:08 -0400
Subject: [PATCH 6/6] fix: removing unused variable in popover index.css

---
 components/popover/index.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/popover/index.css b/components/popover/index.css
index 4c46ee149bf..4e6b6c7d185 100644
--- a/components/popover/index.css
+++ b/components/popover/index.css
@@ -43,9 +43,7 @@
 	/* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */
 	--spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2));
 
-	/* Max menu block size */
-	--spectrum-popover-max-block-size: 300px;
-	
+	/* Max menu block size */	
 	max-block-size: var(--mod-popover-max-block-size, --spectrum-popover-max-block-size);
 }