fix(field-group): addresses regressions in field groups. (#3227)

* fix(field-group): fix fieldgroup template rendering logic
- reverts story file
- moves rendering logic to template file allowing story controls to
  update input type
- add placeholder input content to template

* fix(field-group): pass isRequired through to FieldLabel

* fix(field-group): update indentation + field description

* fix(field-group): adjust label casing

Author: cdransf

components/fieldgroup/stories/fieldgroup.stories.js

@@ -1,7 +1,6 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isInvalid, isReadOnly, isRequired } from "@spectrum-css/preview/types";
 import { default as RadioSettings } from "@spectrum-css/radio/stories/radio.stories.js";
-import { Template as Radio } from "@spectrum-css/radio/stories/template.js";
 import metadata from "../metadata/metadata.json";
 import packageJson from "../package.json";
 import { FieldGroupSet } from "./fieldgroup.test.js";
@@ -21,6 +20,11 @@ export default {
 	title: "Field group",
 	component: "FieldGroup",
 	argTypes: {
+		label: {
+			name: "Label",
+			description: "The label for the field group component.",
+			type: { name: "string" },
+		},
 		inputType: {
 			name: "Input type",
 			type: { name: "string" },
@@ -63,26 +67,24 @@ export default {
 		inputType: "radio",
 		labelPosition: "top",
 		layout: "vertical",
-		label: "Select one of the following options:",
+		label: "Field group label",
+		helpText: "Select an option.",
 		items: [
-			(passthroughs, context) => Radio({
-				...passthroughs,
+			{
 				id: "apple",
 				label: "Apples are best",
 				customClasses: ["spectrum-FieldGroup-item"],
-			}, context),
-			(passthroughs, context) => Radio({
-				...passthroughs,
+			},
+			{
 				id: "banana",
 				label: "Bananas forever",
 				customClasses: ["spectrum-FieldGroup-item"],
-			}, context),
-			(passthroughs, context) => Radio({
-				...passthroughs,
+			},
+			{
 				id: "pear",
 				label: "Pears or bust",
 				customClasses: ["spectrum-FieldGroup-item"],
-			}, context),
+			}
 		],
 		isInvalid: false,
 		isRequired: false,

components/fieldgroup/stories/template.js

@@ -1,6 +1,7 @@
+import { Template as CheckBox } from "@spectrum-css/checkbox/stories/template.js";
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
-import { renderContent } from "@spectrum-css/preview/decorators";
+import { Template as Radio } from "@spectrum-css/radio/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -43,6 +44,7 @@ export const Template = (
 					{
 						size: "m",
 						label,
+						isRequired,
 						alignment: labelPosition === "side" ? "right" : "top",
 					},
 					context,
@@ -53,7 +55,23 @@ export const Template = (
 					[`${rootClass}InputLayout`]: true,
 				})}
 			>
-				${renderContent(items, { args: { isReadOnly, isRequired }, context })}
+				${inputType === "radio" ?
+					items.map((item) =>
+						Radio({
+							...item,
+							isReadOnly,
+							isRequired,
+							name: "field-group-example",
+							customClasses: [`${rootClass}-item`],
+						}, context))
+						: items.map((item) =>
+						CheckBox({
+							...item,
+							isReadOnly,
+							isRequired,
+							customClasses: [`${rootClass}-item`],
+						}, context)
+				)}
 				${when(helpText, () =>
 					HelpText(
 						{