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,91 @@
 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.
+ * The meter component is a visual representations of a quantity or an achievement. The 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. 
+ * 
+ * When determining whether or use a progress bar or meter, remember that a progress bar just indicates how long users must wait for the process to finish- their actions do not affect the progress bar. A meter indicates how much users have completed or how far they are in a continuum.
  */
 export default {
 	title: "Meter",
 	component: "ProgressBar",
 	argTypes: {
 		...ProgressBar.argTypes,
+		size: size(["s", "l"]),
+		isIndeterminate: { 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,
+		size: "l",
+		label: "Storage space",
+	},
 	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 },
+};
+
+/**
+ * Meter variants can be used to represent semantic values by switching variants as the value changes, from positive, to notice, and then to negative. This kind of variant switching should be handled appropriately within the context of your product so that you’re setting accurate expectations for your users about the semantic meaning.
+ * 
+ * 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. The notice variant has an orange fill, and can be used to warn users about a situation that may need to be addressed soon. 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,16 @@ export const Template = ({
 	size,
 	...item,
 }, context);
+
+/* FillGroup showcases all semantic variants in a single story. */
+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,15 @@ export const MeterGroup = Variants({
 			testHeading: "Text overflow",
 			label: "Storage space remaining for XYZ user"
 		},
+		{
+			testHeading: "Without label",
+			label: undefined,
+			showValueLabel: false,
+		},
+		{
+			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.
 		*/