docs(progressbar,meter): pr fixes and edits

- removes some duplicative docs language for pgoress bar
- adds correct punctuation to CHANGELOG
- passes default value for customWidth in args for progress bar
- uses passive voice in meter documentation
- removes repetitive StaticWhiteDocs story in favor of previous
StaticWhite story
- removes Chromatic snapshot for WithoutLabel progress bar story

Author: marissahuysentruyt

components/progressbar/CHANGELOG.md

@@ -294,7 +294,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### spectrum-Meter class
 
-Meter now uses the class `spectrum-Meter` on the parent `div`
+Meter now uses the class `spectrum-Meter` on the parent `div`.
 
 ### 🔙 Reverts
 

components/progressbar/stories/meter.stories.js

@@ -71,7 +71,7 @@ Sizing.parameters = {
 };
 
 /**
- * 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.
+ * 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 accurate expectations are set for 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.
 */

components/progressbar/stories/progressbar.stories.js

@@ -86,6 +86,7 @@ export default {
 		label: "Loading",
 		labelPosition: "top",
 		value: 0,
+		customWidth: 192,
 		isIndeterminate: false,
 		showValueLabel: true,
 	},
@@ -143,7 +144,7 @@ CustomWidth.parameters = {
 };
 
 /**
- * The example below shows a progress bar without its label. Progress bars typically have a label, but in rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined.
+ * The example below shows a progress bar without its label.
  */
 export const WithoutLabel = Template.bind({});
 WithoutLabel.storyName = "Without label";
@@ -158,7 +159,7 @@ WithoutLabel.parameters = {
 };
 
 /**
- * The example below shows a progress bar without its value label. This value label works in conjunction with the label, and should not be displayed if the label itself is not displayed.
+ * The example below shows a progress bar without its value label.
  */
 export const WithoutValue = Template.bind({});
 WithoutValue.storyName = "Without value";
@@ -168,20 +169,18 @@ WithoutValue.args = {
 };
 WithoutValue.tags = ["!dev"];
 WithoutValue.parameters = {
-	chromatic: {
-		modes: disableDefaultModes
-	},
+	chromatic: { disableSnapshot: true },
 };
 
-export const StaticWhiteDocs = Template.bind({});
-StaticWhiteDocs.storyName = "Static white";
-StaticWhiteDocs.args = {
+export const StaticWhite = ProgressBarGroup.bind({});
+StaticWhite.storyName = "Static white";
+StaticWhite.tags = ["!dev"];
+StaticWhite.args = {
 	staticColor: "white",
 	label: "Loading your fonts, images, and icons",
 	value: 50,
 };
-StaticWhiteDocs.tags = ["!dev"];
-StaticWhiteDocs.parameters = {
+StaticWhite.parameters = {
 	chromatic: {
 		modes: disableDefaultModes
 	},
@@ -197,16 +196,3 @@ WithForcedColors.parameters = {
 		modes: disableDefaultModes
 	},
 };
-
-export const StaticWhite = ProgressBarGroup.bind({});
-StaticWhite.tags = ["!autodocs", "!dev"];
-StaticWhite.args = {
-	staticColor: "white",
-	label: "Loading your fonts, images, and icons",
-	value: 50,
-};
-StaticWhite.parameters = {
-	chromatic: {
-		modes: disableDefaultModes
-	},
-};