docs(fieldlabel): adds missing stories and cleans up test cases

- adds missing stories and corresponding documentation
- removes duplicate test case for right-aligned
- adds customStyles to default test to match all other test styles

Author: marissahuysentruyt

components/fieldlabel/stories/fieldlabel.stories.js

@@ -1,7 +1,9 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isRequired, size } from "@spectrum-css/preview/types";
+import { Sizes } from "@spectrum-css/preview/decorators";
 import pkgJson from "../package.json";
 import { FieldLabelGroup } from "./fieldlabel.test.js";
+import { Template } from "./template.js";
 
 /**
  * The field label component is used along with inputs to display a label for that input.
@@ -39,15 +41,95 @@ export default {
 		alignment: "left",
 		isDisabled: false,
 		isRequired: false,
+		label: "Label",
 	},
 	parameters: {
 		packageJson: pkgJson,
 	},
 };
 
+/**
+ * By default, a field label is left-aligned, and is a medium size. For field label text, use a short, catch-all description (1-3 words) of the information that a user needs to provide.
+ * 
+ * The default position of a field label is above an input, but it can alternatively be positioned to the side. Visit the [text field component](/story/components-text-field--default) or [form documentation](/docs/components-form--docs) to see examples of the field label with an input.
+ 
+ */
 export const Default = FieldLabelGroup.bind({});
-Default.args = {
+Default.args = {};
+
+// ********* DOCS ONLY ********* //
+/**
+ * Field labels come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option with medium-sized inputs. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. 
+ * 
+ * Both small and medium field labels have the same font size, but different paddings when used as side labels.
+ */
+export const Sizing = (args, context) => Sizes({
+	Template,
+	withBorder: false,
+	withHeading: false,
+	...args,
+}, context);
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * A right-aligned field label.
+ * 
+ */
+export const RightAligned = Template.bind({});
+RightAligned.args = {
 	label: "Label",
+	alignment: "right",
+	customStyles: {
+		width: "72px",
+	},
+};
+RightAligned.tags = ["!dev"];
+RightAligned.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+RightAligned.storyName = "Right-aligned";
+
+/**
+ * Inputs can be marked as required or optional, depending on the situation, using a necessity indicator. There are two styles for the necessity indicator: icon or text. In a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form.
+ * 
+ * Field labels for required inputs are shown with a default asterisk marked at the end of the label. 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.
+ * 
+ * Alternatively, the necessity indicator can be show with text, appended to the end of the label that reads "(required)".
+ */
+export const Required = Template.bind({});
+Required.args = {
+	isRequired: true,
+};
+Required.tags = ["!dev"];
+Required.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * When the field label is too long for the available horizontal space, it wraps to form another line.
+ */
+export const WrappingAndRequired = Template.bind({});
+WrappingAndRequired.args = {
+	label: "Label example with longer text that will wrap to the next line. And with an asterisk that marks it as required.",
+	isRequired: true,
+	customStyles: { width: "200px" },
+};
+WrappingAndRequired.tags = ["!dev"];
+WrappingAndRequired.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+WrappingAndRequired.storyName = "Wrapping and required";
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	isDisabled: true,
+};
+Disabled.tags = ["!dev"];
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
 };
 
 // ********* VRT ONLY ********* //

components/fieldlabel/stories/fieldlabel.test.js

@@ -5,11 +5,7 @@ export const FieldLabelGroup = Variants({
 	Template,
 	testData: [
 		{
-			testHeading: "Default"
-		},
-		{
-			testHeading: "Right alignment",
-			alignment: "right",
+			testHeading: "Default",
 			customStyles: { width: "200px" },
 		},
 		{
@@ -20,7 +16,7 @@ export const FieldLabelGroup = Variants({
 		{
 			testHeading: "Wrapped",
 			withStates: false,
-			label: "Label example with longer text that will wrap to the next line. And with an asterisk that marks it as required.",
+			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" },
 		},
 	],