Fix output styles in ProgressBar and Meter (#188)

Author: devongovett

packages/@react-spectrum/s2/src/Field.tsx

@@ -13,7 +13,7 @@
 import {Group, GroupProps, Input as RACInput, InputProps as RACInputProps, Label, LabelProps, FieldErrorProps, FieldError, composeRenderProps, Text, Provider} from 'react-aria-components';
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {ContextualHelpContext} from './ContextualHelp';
-import {StyleProps, UnsafeStyles, fieldInput, focusRing} from './style-utils' with {type: 'macro'};
+import {StyleProps, UnsafeStyles, fieldInput, fieldLabel, focusRing} from './style-utils' with {type: 'macro'};
 import AsteriskIcon from '../ui-icons/Asterisk';
 import AlertIcon from '../s2wf-icons/assets/svg/S2_Icon_AlertTriangle_20_N.svg';
 import {IconContext} from './Icon';
@@ -82,31 +82,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         {...labelProps}
         ref={domRef}
         style={UNSAFE_style}
-        className={UNSAFE_className + mergeStyles(
-          style({
-            fontFamily: 'sans',
-            fontSize: 'control',
-            lineHeight: 'ui',
-            cursor: 'default',
-            color: {
-              default: 'neutral-subdued',
-              isDisabled: 'disabled',
-              staticColor: {
-                white: {
-                  default: 'transparent-white-700'
-                },
-                black: {
-                  default: 'transparent-black-900'
-                }
-              },
-              forcedColors: 'ButtonText'
-            },
-            contain: {
-              labelPosition: {
-                top: 'inline-size'
-              }
-            }
-          })({labelPosition, isDisabled, size, staticColor}), props.styles)}>
+        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, staticColor}), props.styles)}>
         {props.children}
         {(isRequired || necessityIndicator === 'label') && (
           <span className={style({whiteSpace: 'nowrap'})}>

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

@@ -14,7 +14,7 @@ import {bar, track} from './bar-utils'  with {type: 'macro'};
 import {DOMRef} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {forwardRef, ReactNode} from 'react';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   Meter as AriaMeter,
   MeterProps as AriaMeterProps
@@ -53,6 +53,7 @@ const wrapper = style<MeterStyleProps>({
 }, getAllowedOverrides());
 
 const valueStyles = style({
+  ...fieldLabel(),
   gridArea: 'value'
 });
 
@@ -120,7 +121,7 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
       {({percentage, valueText}) => (
         <>
           <FieldLabel size={size} labelAlign="start" labelPosition="top" staticColor={staticColor}>{label}</FieldLabel>
-          <FieldLabel size={size} labelAlign="end" staticColor={staticColor} styles={valueStyles}>{valueText}</FieldLabel>
+          <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>
           <div className={trackStyles({staticColor, size})}>
             <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
           </div>

packages/@react-spectrum/s2/src/ProgressBar.tsx

@@ -20,7 +20,7 @@ import {
 } from 'react-aria-components';
 import {FieldLabel} from './Field';
 import {ReactNode, forwardRef} from 'react';
-import {StyleProps, getAllowedOverrides} from './style-utils' with {type: 'macro'};
+import {StyleProps, fieldLabel, getAllowedOverrides} from './style-utils' with {type: 'macro'};
 import {DOMRef} from '@react-types/shared';
 import {useDOMRef} from '@react-spectrum/utils';
 
@@ -65,6 +65,7 @@ const wrapper = style<ProgressBarStyleProps>({
 }, getAllowedOverrides());
 
 const valueStyles = style({
+  ...fieldLabel(),
   gridArea: 'value'
 });
 
@@ -122,8 +123,7 @@ function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
       {({percentage, valueText}) => (
         <>
           <FieldLabel size={size} labelAlign="start" labelPosition="top" staticColor={staticColor}>{label}</FieldLabel>
-          {/* TODO: this cannot be a label because they will both receive context */}
-          <FieldLabel size={size} labelAlign="end" staticColor={staticColor} styles={valueStyles}>{valueText}</FieldLabel>
+          <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>
           <div className={trackStyles({...props})}>
             <div
               className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}

packages/@react-spectrum/s2/src/style-utils.ts

@@ -83,6 +83,31 @@ export const field = () => ({
   disableTapHighlight: true
 } as const);
 
+export const fieldLabel = () => ({
+  fontFamily: 'sans',
+  fontSize: 'control',
+  lineHeight: 'ui',
+  cursor: 'default',
+  color: {
+    default: 'neutral-subdued',
+    isDisabled: 'disabled',
+    staticColor: {
+      white: {
+        default: 'transparent-white-700'
+      },
+      black: {
+        default: 'transparent-black-900'
+      }
+    },
+    forcedColors: 'ButtonText'
+  },
+  contain: {
+    labelPosition: {
+      top: 'inline-size'
+    }
+  }
+} as const);
+
 export const fieldInput = () => ({
   gridArea: 'input',
   minWidth: 'control',