feat(Meter): support informative variant in Meter (#6282)

Author: reidbarber

packages/@react-spectrum/meter/chromatic/Meter.chromatic.tsx

@@ -22,7 +22,7 @@ const meta: Meta<SpectrumMeterProps> = {
 export default meta;
 
 export const Default = {
-  args: {label: 'Meter label', value: 50, variant: 'positive'}
+  args: {label: 'Meter label', value: 50}
 };
 
 export const SizeS = {
@@ -37,6 +37,10 @@ export const LabelPositionSide = {
   args: {...Default.args, labelPosition: 'side'}
 };
 
+export const Positive = {
+  args: {...Default.args, variant: 'positive'}
+};
+
 export const Critical = {
   args: {...Default.args, variant: 'critical'}
 };

packages/@react-spectrum/meter/docs/Meter.mdx

@@ -36,7 +36,7 @@ category: Status
 ## Example
 
 ```tsx example
-<Meter label="Storage space" variant="positive" value={35} />
+<Meter label="Storage space" value={35} />
 ```
 
 ## Value
@@ -47,8 +47,7 @@ By default, the `value` prop represents the current percentage of progress, as t
 ```tsx example
 <Meter
   label="Storage space"
-  value={25}
-  variant="positive" />
+  value={25} />
 ```
 
 Alternatively, a different scale can be used by setting the `minValue` and `maxValue` props.
@@ -58,8 +57,7 @@ Alternatively, a different scale can be used by setting the `minValue` and `maxV
   label="Widgets Used"
   minValue={50}
   maxValue={150}
-  value={100}
-  variant="positive" />
+  value={100} />
 ```
 
 Values are formatted as a percentage by default, but this can be modified by using the `formatOptions` prop to specify a different format.
@@ -69,8 +67,7 @@ Values are formatted as a percentage by default, but this can be modified by usi
 <Meter
   label="Currency"
   formatOptions={{style: 'currency', currency: 'JPY'}}
-  value={60}
-  variant="positive" />
+  value={60} />
 ```
 
 ## Labeling
@@ -145,10 +142,11 @@ Meter automatically uses the current locale to format the value label.
 ```
 
 ### Variants
-[View guidelines](https://spectrum.adobe.com/page/meter/#Semantic-colors)
+[View guidelines](https://spectrum.adobe.com/page/meter/#Options)
 
 ```tsx example
 <Flex direction="column" gap="size-300">
+  <Meter label="Space used" value={25} variant="informative" />
   <Meter label="Space used" value={25} variant="positive" />
   <Meter label="Space used" value={90} variant="critical" />
   <Meter label="Space used" value={70} variant="warning" />

packages/@react-spectrum/meter/src/Meter.tsx

@@ -19,7 +19,7 @@ import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';
 import {useMeter} from '@react-aria/meter';
 
 function Meter(props: SpectrumMeterProps, ref: DOMRef<HTMLDivElement>) {
-  let {variant, ...otherProps} = props;
+  let {variant = 'informative', ...otherProps} = props;
   const {
     meterProps,
     labelProps

packages/@react-spectrum/meter/stories/Meter.stories.tsx

@@ -25,7 +25,7 @@ export default {
   title: 'Meter',
   component: Meter,
   args: {
-    variant: 'positive'
+    variant: 'informative'
   },
   argTypes: {
     value: {
@@ -38,7 +38,7 @@ export default {
     variant: {
       control: {
         type: 'radio',
-        options: ['positive', 'warning', 'critical']
+        options: ['informative', 'positive', 'warning', 'critical']
       }
     },
     size: {

packages/@react-types/meter/src/index.d.ts

@@ -15,6 +15,9 @@ import {AriaProgressBarBaseProps, ProgressBarBaseProps, SpectrumProgressBarBaseP
 export type MeterProps = ProgressBarBaseProps;
 export interface AriaMeterProps extends AriaProgressBarBaseProps {}
 export interface SpectrumMeterProps extends SpectrumProgressBarBaseProps {
-  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter. */
-  variant: 'positive' | 'warning' | 'critical'
+  /** 
+   * The [visual style](https://spectrum.adobe.com/page/meter/#Options) of the Meter. 
+   * @default 'informative'
+   */
+  variant?: 'informative' | 'positive' | 'warning' | 'critical'
 }