docs(meter): adds missing stories, tests, controls

- expands test coverage to include without label and without value label
- adds stories and documentation to docs page
- adds additional migration guide context to CHANGELOG

components/progressbar/CHANGELOG.md

@@ -292,6 +292,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 - **meter:**update layout tokens ([#2080](https://github.com/adobe/spectrum-css/issues/2080))([da88b3c](https://github.com/adobe/spectrum-css/commit/da88b3c))
 
+### spectrum-Meter class
+
+Meter now uses the class `spectrum-Meter` on the parent `div`
+
 ### 🔙 Reverts
 
 \*gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099)

components/progressbar/stories/meter.stories.js

@@ -1,37 +1,94 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { Sizes } from "@spectrum-css/preview/decorators";
+import { size } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
 import { MeterGroup } from "./meter.test.js";
 import { default as ProgressBar } from "./progressbar.stories";
+import { FillGroup, Template } from "./meter.template.js";
 
 /**
  * The meter component is a visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.
+ * 
+ * Meter is implemented using [the progress bar component](/docs/components-progress-bar--docs). Refer to the progress bar documentation for additional details.
  */
 export default {
 	title: "Meter",
 	component: "ProgressBar",
 	argTypes: {
 		...ProgressBar.argTypes,
+		size: size(["s", "l"]),
+		customWidth: { table: { disable: true } },
 		fill: {
 			name: "Fill color",
 			type: { name: "string" },
+			defaultValue: "info",
 			table: {
 				type: { summary: "string" },
 				category: "Component",
+				defaultValue: { summary: "info" },
 			},
-			options: ["notice", "positive", "negative"],
+			options: ["info", "notice", "positive", "negative"],
 			control: "select",
 		},
 	},
-	args: ProgressBar.args,
+	args: {
+		...ProgressBar.args,
+		label: "Storage space",
+		size: "l",
+		showValueLabel: true,
+	},
 	parameters: {
 		packageJson: pkgJson,
 	},
 };
 
+/**
+ * By default, meters have a blue fill and are the large sizes.
+ * 
+ * Meters should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These meters without a visible label should still include an “aria-label” or “aria-labelledby” in HTML, depending on the context. The label is always placed above the track.
+ * 
+ * When the label is too long for the available horizontal space, it wraps to form another line. The value is always shown in full and never wraps or truncates.
+ */
 export const Default = MeterGroup.bind({});
 Default.args = {
 	value: 50,
-	label: "Storage space",
+};
+
+/**
+ * Meters come in two sizes: large and small. By default, meters are large. Use the small size when there are multiple meters shown at the same time in a more confined space, such as in tables or cards.
+ */
+export const Sizing = (args, context) => Sizes({
+	Template,
+	withBorder: false,
+	withHeading: false,
+	...args,
+}, context);
+Sizing.args = Default.args;
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * By default, the meter has a informative, blue fill to show the value. This can be used to represent a neutral or non-semantic value.
+ * 
+ * The positive variant has a green fill, representing a positive semantic value, such as when there’s a lot of space remaining.
+ * 
+ * The notice variant has an orange fill, and can be used to warn users about a situation that may need to be addressed soon, such as when space remaining is becoming limited.
+ * 
+ * The negative variant has a red fill, and can be used to warn users about a critical situation that needs their urgent attention.
+ */
+export const FillColors = (args, context) => FillGroup({
+	variants: ["info", "positive", "negative", "notice"],
+	...args,
+}, context);
+FillColors.storyName = "Fill colors";
+FillColors.args = {
+	value: 50,
+};
+FillColors.tags = ["!dev"];
+FillColors.parameters = {
+	chromatic: { disableSnapshot: true },
 };
 
 // ********* VRT ONLY ********* //

components/progressbar/stories/meter.template.js

@@ -1,4 +1,6 @@
+import { Container } from "@spectrum-css/preview/decorators";
 import { Template as ProgressBar } from "./template.js";
+import { html } from "lit";
 
 import "../index.css";
 
@@ -17,3 +19,15 @@ export const Template = ({
 	size,
 	...item,
 }, context);
+
+export const FillGroup = (args, context) => Container({
+	withBorder: false,
+	withHeading: false,
+	content: html`${["info", "positive", "negative", "notice"].map((variant) => 
+		Container({
+			withBorder: false,
+			heading: variant,
+			content: Template({...args, fill: variant}, context),
+		})	
+	)}`
+});

components/progressbar/stories/meter.test.js

@@ -20,6 +20,14 @@ export const MeterGroup = Variants({
 			testHeading: "Text overflow",
 			label: "Storage space remaining for XYZ user"
 		},
+		{
+			testHeading: "Without label",
+			label: undefined,
+		},
+		{
+			testHeading: "Without value label",
+			showValueLabel: false,
+		},
 		/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom 
 		linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
 		*/
@@ -29,4 +37,10 @@ export const MeterGroup = Variants({
 			progressBarFill: "linear-gradient(to left, teal, purple)",
 		}
 	],
+	stateData: [
+		{
+			testHeading: "Indeterminate",
+			isIndeterminate: true,
+		}
+	]
 });