From 18c5af54a02e373a7ec9c301bb62e2e13b7d1a3a Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 12 Mar 2025 10:11:18 -0400
Subject: [PATCH 1/2] chore(checkbox): add isHovered state to checkbox

- adds isHovered shared type and control to checkbox stories
- adds several isHovered test cases
- updates checkbox template to include isHovered arg
---
 .../checkbox/stories/checkbox.stories.js      |  4 +++-
 components/checkbox/stories/checkbox.test.js  | 22 +++++++++++++++++++
 components/checkbox/stories/template.js       |  2 ++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
index ecee4a4b383..cbcad99494f 100644
--- a/components/checkbox/stories/checkbox.stories.js
+++ b/components/checkbox/stories/checkbox.stories.js
@@ -1,6 +1,6 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
+import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CheckboxGroup } from "./checkbox.test.js";
@@ -30,6 +30,7 @@ export default {
 			control: { type: "text" },
 		},
 		isEmphasized,
+		isHovered,
 		isInvalid,
 		isDisabled,
 		isChecked,
@@ -43,6 +44,7 @@ export default {
 		isChecked: false,
 		isDisabled: false,
 		isEmphasized: false,
+		isHovered: false,
 		isIndeterminate: false,
 		isInvalid: false,
 		isReadOnly: false,
diff --git a/components/checkbox/stories/checkbox.test.js b/components/checkbox/stories/checkbox.test.js
index 4de9e4eed46..a7c3efcaaf3 100644
--- a/components/checkbox/stories/checkbox.test.js
+++ b/components/checkbox/stories/checkbox.test.js
@@ -27,6 +27,11 @@ export const CheckboxGroup = Variants({
 			testHeading: "Checked",
 			isChecked: true,
 		},
+		{
+			testHeading: "Checked, hovered",
+			isChecked: true,
+			isHovered: true,
+		},
 		{
 			testHeading: "Indeterminate",
 			isIndeterminate: true,
@@ -40,6 +45,12 @@ export const CheckboxGroup = Variants({
 			isInvalid: true,
 			isChecked: true,
 		},
+		{
+			testHeading: "Invalid, checked, hovered",
+			isInvalid: true,
+			isChecked: true,
+			isHovered: true,
+		},
 		{
 			testHeading: "Invalid, indeterminate",
 			isInvalid: true,
@@ -54,6 +65,11 @@ export const CheckboxGroup = Variants({
 			isDisabled: true,
 			isChecked: true,
 		},
+		{
+			testHeading: "Disabled, checked, hovered",
+			isDisabled: true,
+			isChecked: true,
+		},
 		{
 			testHeading: "Disabled, indeterminate",
 			isDisabled: true,
@@ -68,6 +84,12 @@ export const CheckboxGroup = Variants({
 			isReadOnly: true,
 			isChecked: true,
 		},
+		{
+			testHeading: "Read-only, checked, hovered",
+			isReadOnly: true,
+			isChecked: true,
+			isHovered: true,
+		},
 		{
 			testHeading: "Read-only, indeterminate",
 			isReadOnly: true,
diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js
index 9c778259f7d..ebeaba0e276 100644
--- a/components/checkbox/stories/template.js
+++ b/components/checkbox/stories/template.js
@@ -17,6 +17,7 @@ export const Template = ({
 	label,
 	isChecked = false,
 	isEmphasized = false,
+	isHovered = false,
 	isIndeterminate = false,
 	isDisabled = false,
 	isInvalid = false,
@@ -55,6 +56,7 @@ export const Template = ({
 				["is-indeterminate"]: isIndeterminate,
 				["is-disabled"]: isDisabled,
 				["is-invalid"]: isInvalid,
+				["is-hover"]: isHovered && !isDisabled,
 				["is-readOnly"]: isReadOnly,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}

From 801059153b52732280758784c1f5a9b8ff445708 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 12 Mar 2025 12:17:42 -0400
Subject: [PATCH 2/2] chore(form): fix the fieldgroup component input and
 labels

---
 components/form/stories/form.stories.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js
index 0d2438b9ab9..233f18adb21 100644
--- a/components/form/stories/form.stories.js
+++ b/components/form/stories/form.stories.js
@@ -1,4 +1,3 @@
-import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
 import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js";
 import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
@@ -80,18 +79,19 @@ export default {
 				content: [
 					(passthroughs, context) => Fieldgroup({
 						layout: "horizontal",
+						inputType: "checkbox",
 						items: [
-							Checkbox({
+							{
 								...passthroughs,
 								label: "Kittens",
 								customClasses: ["spectrum-FieldGroup-item"],
-							}, context),
-							Checkbox({
+							},
+							{
 								...passthroughs,
 								label: "Puppies",
 								customClasses: ["spectrum-FieldGroup-item"],
-							}, context),]
-					}),
+							}]
+					}, context),
 				],
 			},{
 				label: "Age",