chore(fieldlabel,form): pr edits

- added documentation around the "necessity indicator" being text
- included a required state for the wrapping/truncation test changes
- set default args for form items

Author: marissahuysentruyt

components/fieldlabel/stories/fieldlabel.stories.js

@@ -94,6 +94,8 @@ RightAligned.storyName = "Right-aligned";
 
 /**
  * Field labels for required inputs can be marked with an asterisk at the end of the label. Optional inputs would then be understood to not have the asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup. Extra space should not be added in addition to the inline margin.
+ * 
+ * The field label for a required field can display either the text “(required)”, or an asterisk.
  */
 export const Required = Template.bind({});
 Required.args = {

components/fieldlabel/stories/fieldlabel.test.js

@@ -15,14 +15,14 @@ export const FieldLabelGroup = Variants({
 		},
 		{
 			testHeading: "Wrapped",
-			withStates: false,
 			label: "Label example with longer text that will wrap to the next line. Sometimes there is an asterisk that marks it as required.",
 			customStyles: { width: "200px" },
 		},
 	],
 	stateData: [
 		{
 			testHeading: "Disabled",
+			ignore: ["Wrapped"],
 			isDisabled: true,
 			customStyles: { width: "200px" },
 		},

components/fieldlabel/stories/form.stories.js

@@ -42,6 +42,66 @@ export default {
 	args: {
 		rootClass: "spectrum-Form",
 		labelPosition: "top",
+		items: [
+			{
+				label: "Company title",
+				id: "form-example-company",
+				content: [
+					(passthroughs, context) => TextField({
+						...passthroughs,
+						multiline: true,
+						name: "field",
+					}, context),
+				],
+			}, {
+				label: "Email address",
+				id: "form-example-email",
+				content: [
+					(passthroughs, context) => TextField({
+						...passthroughs,
+						type: "email",
+						name: "email",
+					}, context),
+				],
+			}, {
+				label: "Country",
+				id: "form-example-country",
+				content: [
+					(passthroughs, context) => Picker({
+						...passthroughs,
+						placeholder: "Select a country",
+						name: "country",
+					}, context),
+				],
+			}, {
+				label: "Interest",
+				id: "form-example-interests",
+				content: [
+					(passthroughs, context) => Fieldgroup({
+						layout: "horizontal",
+						items: [
+							Checkbox({
+								...passthroughs,
+								label: "Kittens",
+								customClasses: ["spectrum-FieldGroup-item"],
+							}, context),
+							Checkbox({
+								...passthroughs,
+								label: "Puppies",
+								customClasses: ["spectrum-FieldGroup-item"],
+							}, context),]
+					}),
+				],
+			},{
+				label: "Age",
+				id: "form-example-amount",
+				content: [
+					(passthroughs, context) => Stepper({
+						...passthroughs,
+					}, context),
+				]
+			}
+		],
 	},
 	parameters: {
 		packageJson: pkgJson,
@@ -52,68 +112,7 @@ export default {
  * A stacked layout with the labels above the form fields. The class `.spectrum-Form--labelPosition` is applied to the form itself. You do not need to apply a specific class to the field label because `.spectrum-FieldLabel--left` is applied to each to each [field label](/docs/components-field-label--docs) by default.
  */
 export const Default = FormGroup.bind({});
-Default.args = {
-	items: [
-		{
-			label: "Company title",
-			id: "form-example-company",
-			content: [
-				(passthroughs, context) => TextField({
-					...passthroughs,
-					multiline: true,
-					name: "field",
-				}, context),
-			],
-		}, {
-			label: "Email address",
-			id: "form-example-email",
-			content: [
-				(passthroughs, context) => TextField({
-					...passthroughs,
-					type: "email",
-					name: "email",
-				}, context),
-			],
-		}, {
-			label: "Country",
-			id: "form-example-country",
-			content: [
-				(passthroughs, context) => Picker({
-					...passthroughs,
-					placeholder: "Select a country",
-					name: "country",
-				}, context),
-			],
-		}, {
-			label: "Interest",
-			id: "form-example-interests",
-			content: [
-				(passthroughs, context) => Fieldgroup({
-					layout: "horizontal",
-					items: [
-						Checkbox({
-							...passthroughs,
-							label: "Kittens",
-							customClasses: ["spectrum-FieldGroup-item"],
-						}, context),
-						Checkbox({
-							...passthroughs,
-							label: "Puppies",
-							customClasses: ["spectrum-FieldGroup-item"],
-						}, context),]
-				}),
-			],
-		},{
-			label: "Age",
-			id: "form-example-amount",
-			content: [
-				(passthroughs, context) => Stepper({
-					...passthroughs,
-				}, context),
-			]
-		}
-	],
-};
+Default.args = {};
 
 /**
  *  A two column layout with left-aligned label text.