@react-spectrum/s2 1.3.0 → 1.4.0

package/src/ProgressCircle.tsx

@@ -14,44 +14,56 @@ import {ContextValue} from 'react-aria-components/slots';
 
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
-import {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  staticColor,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {pxToRem} from './progress-utils' with {type: 'macro'};
-import {ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components/ProgressBar';
+import {
+  ProgressBar as RACProgressBar,
+  ProgressBarProps as RACProgressBarProps
+} from 'react-aria-components/ProgressBar';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-const pxToRemDynamic = (px: number): string => (px / 16) + 'rem';
+const pxToRemDynamic = (px: number): string => px / 16 + 'rem';
 export interface ProgressCircleStyleProps {
   /**
    * The size of the ProgressCircle.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L',
+  size?: 'S' | 'M' | 'L';
   /** The static color style to apply. Useful when the button appears over a color background. */
-  staticColor?: 'black' | 'white' | 'auto',
+  staticColor?: 'black' | 'white' | 'auto';
   /**
    * Whether presentation is indeterminate when progress isn't known.
    */
-  isIndeterminate?: boolean
+  isIndeterminate?: boolean;
 }
 
-export const ProgressCircleContext = createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressCircleContext =
+  createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 // Double check the types passed to each style, may not need all for each
-const wrapper = style<ProgressCircleStyleProps>({
-  ...staticColor(),
-  size: {
-    default: 32,
+const wrapper = style<ProgressCircleStyleProps>(
+  {
+    ...staticColor(),
     size: {
-      S: 16,
-      L: 64
-    }
+      default: 32,
+      size: {
+        S: 16,
+        L: 64
+      }
+    },
+    aspectRatio: 'square'
   },
-  aspectRatio: 'square'
-}, getAllowedOverrides({height: true}));
+  getAllowedOverrides({height: true})
+);
 
 const track = style({
   stroke: {
@@ -106,9 +118,23 @@ const hcmStroke = style({
   }
 });
 
-export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className' | 'render' | keyof GlobalDOMAttributes>, ProgressCircleStyleProps, UnsafeStyles {
+export interface ProgressCircleProps
+  extends
+    Omit<
+      RACProgressBarProps,
+      | 'children'
+      | 'style'
+      | 'valueLabel'
+      | 'formatOptions'
+      | 'label'
+      | 'className'
+      | 'render'
+      | keyof GlobalDOMAttributes
+    >,
+    ProgressCircleStyleProps,
+    UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight
+  styles?: StylesPropWithHeight;
 }
 
 const rotationAnimation = keyframes(`
@@ -133,17 +159,15 @@ const dashoffsetAnimation = keyframes(`
 `);
 
 /**
- * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
- * They can represent determinate or indeterminate progress.
+ * ProgressCircles show the progression of a system operation such as downloading, uploading, or
+ * processing, in a visual way. They can represent determinate or indeterminate progress.
  */
-export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(
+  props: ProgressCircleProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);
-  let {
-    size = 'M',
-    staticColor,
-    UNSAFE_style,
-    UNSAFE_className = ''
-  } = props;
+  let {size = 'M', staticColor, UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useDOMRef(ref);
 
   let strokeWidth = 3;
@@ -162,26 +186,21 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + wrapper({
-        ...renderProps,
-        size,
-        staticColor
-      }, props.styles)}>
+      className={renderProps =>
+        UNSAFE_className +
+        wrapper(
+          {
+            ...renderProps,
+            size,
+            staticColor
+          },
+          props.styles
+        )
+      }>
       {({percentage, isIndeterminate}) => (
-        <svg
-          fill="none"
-          width="100%"
-          height="100%">
-          <circle
-            cx="50%"
-            cy="50%"
-            r={radius}
-            className={hcmStroke({size})} />
-          <circle
-            cx="50%"
-            cy="50%"
-            r={radius}
-            className={track({isStaticColor, size})} />
+        <svg fill="none" width="100%" height="100%">
+          <circle cx="50%" cy="50%" r={radius} className={hcmStroke({size})} />
+          <circle cx="50%" cy="50%" r={radius} className={track({isStaticColor, size})} />
           <circle
             cx="50%"
             cy="50%"
@@ -190,14 +209,17 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
             style={{
               // These cubic-bezier timing functions were derived from the previous animation keyframes
               // using a best fit algorithm, and then manually adjusted to approximate the original animation.
-              animation: isIndeterminate ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite` : undefined
+              animation: isIndeterminate
+                ? `${rotationAnimation} 1s cubic-bezier(.6, .1, .3, .9) infinite, ${dashoffsetAnimation} 1s cubic-bezier(.25, .1, .25, 1.3) infinite`
+                : undefined
             }}
             // Normalize the path length to 100 so we can easily set stroke-dashoffset to a percentage.
             pathLength="100"
             // Add extra gap between dashes so 0% works in Chrome.
             strokeDasharray="100 200"
             strokeDashoffset={isIndeterminate || percentage == null ? undefined : 100 - percentage}
-            strokeLinecap="round" />
+            strokeLinecap="round"
+          />
         </svg>
       )}
     </RACProgressBar>

package/src/Provider.tsx

@@ -24,37 +24,40 @@ import {UnsafeStyles} from './style-utils' with {type: 'macro'};
 
 export type ColorScheme = 'light' | 'dark';
 interface Router {
-  navigate: (path: string, routerOptions: RouterOptions | undefined) => void,
-  useHref?: (href: Href) => string
+  navigate: (path: string, routerOptions: RouterOptions | undefined) => void;
+  useHref?: (href: Href) => string;
 }
 
 export interface ProviderProps extends UnsafeStyles, DOMProps {
   /** The content of the Provider. */
-  children: ReactNode,
+  children: ReactNode;
   /**
-   * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code.
-   * Defaults to the browser/OS language setting.
+   * The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language
+   * code. Defaults to the browser/OS language setting.
+   *
    * @default 'en-US'
    */
-  locale?: string,
+  locale?: string;
   /**
-   * Provides a client side router to all nested React Spectrum links to enable client side navigation.
+   * Provides a client side router to all nested React Spectrum links to enable client side
+   * navigation.
    */
-  router?: Router,
+  router?: Router;
   /**
    * The color scheme for your application.
    * Defaults to operating system preferences.
    */
-  colorScheme?: ColorScheme,
+  colorScheme?: ColorScheme;
   /** The background for this provider. If not provided, the background is transparent. */
-  background?: 'base' | 'layer-1' | 'layer-2',
+  background?: 'base' | 'layer-1' | 'layer-2';
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StyleString,
+  styles?: StyleString;
   /**
    * The DOM element to render.
+   *
    * @default div
    */
-  elementType?: keyof JSX.IntrinsicElements
+  elementType?: keyof JSX.IntrinsicElements;
 }
 
 export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
@@ -123,10 +126,7 @@ function ProviderInner(props: ProviderProps) {
       lang={locale}
       dir={direction}
       style={UNSAFE_style}
-      className={UNSAFE_className + mergeStyles(
-        styles,
-        providerStyles({background, colorScheme})
-      )}>
+      className={UNSAFE_className + mergeStyles(styles, providerStyles({background, colorScheme}))}>
       <Fonts />
       {children}
     </Element>

package/src/RadioGroup.tsx

@@ -11,18 +11,32 @@
  */
 
 import {
-  Radio as AriaRadio,
   RadioGroup as AriaRadioGroup,
   RadioGroupProps as AriaRadioGroupProps,
   RadioProps as AriaRadioProps,
+  RadioButton,
+  RadioField,
   RadioRenderProps
 } from 'react-aria-components/RadioGroup';
-
 import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {ContextValue} from 'react-aria-components/slots';
-import {controlFont, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {DOMRef, DOMRefValue, FocusableRef, GlobalDOMAttributes, HelpTextProps, Orientation, SpectrumLabelableProps} from '@react-types/shared';
+import {
+  controlFont,
+  controlSize,
+  field,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
+import {
+  DOMRef,
+  DOMRefValue,
+  FocusableRef,
+  GlobalDOMAttributes,
+  HelpTextProps,
+  Orientation,
+  SpectrumLabelableProps
+} from '@react-types/shared';
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {pressScale} from './pressScale';
@@ -30,36 +44,48 @@ import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'r
 import {useDOMRef, useFocusableRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface RadioGroupProps
+  extends
+    Omit<
+      AriaRadioGroupProps,
+      'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes
+    >,
+    StyleProps,
+    SpectrumLabelableProps,
+    HelpTextProps {
   /**
    * The Radios contained within the RadioGroup.
    */
-  children: ReactNode,
+  children: ReactNode;
   /**
    * The size of the RadioGroup.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /**
    * The axis the radio elements should align with.
    *
    * @default 'vertical'
    */
-  orientation?: Orientation,
+  orientation?: Orientation;
   /**
    * Whether the RadioGroup should be displayed with an emphasized style.
    */
-  isEmphasized?: boolean
+  isEmphasized?: boolean;
 }
 
-export const RadioGroupContext = createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const RadioGroupContext =
+  createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * Radio groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(
+  props: RadioGroupProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -86,18 +112,27 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
       orientation={orientation}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + style({
-        ...field(),
-        // Double the usual gap because of the internal padding within checkbox that spectrum has.
-        '--field-gap': {
-          type: 'rowGap',
-          value: 'calc(var(--field-height) - 1lh)'
-        }
-      }, getAllowedOverrides())({
-        size,
-        labelPosition,
-        isInForm: !!formContext
-      }, props.styles)}>
+      className={
+        UNSAFE_className +
+        style(
+          {
+            ...field(),
+            // Double the usual gap because of the internal padding within checkbox that spectrum has.
+            '--field-gap': {
+              type: 'rowGap',
+              value: 'calc(var(--field-height) - 1lh)'
+            }
+          },
+          getAllowedOverrides()
+        )(
+          {
+            size,
+            labelPosition,
+            isInForm: !!formContext
+          },
+          props.styles
+        )
+      }>
       {({isDisabled, isInvalid}) => (
         <>
           <FieldLabel
@@ -106,6 +141,7 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
             size={size}
             labelPosition={labelPosition}
             labelAlign={labelAlign}
+            isQuiet // Make the label affect the width of the group
             necessityIndicator={necessityIndicator}
             contextualHelp={props.contextualHelp}>
             {label}
@@ -120,7 +156,11 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
                   horizontal: 'row'
                 }
               },
-              flexWrap: 'wrap',
+              flexWrap: {
+                orientation: {
+                  horizontal: 'wrap'
+                }
+              },
               // Spectrum uses a fixed spacing value for horizontal (column),
               // but the gap changes depending on t-shirt size in vertical (row).
               columnGap: 16,
@@ -144,11 +184,27 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
   );
 });
 
-export interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface RadioProps
+  extends
+    Omit<
+      AriaRadioProps,
+      | 'className'
+      | 'style'
+      | 'render'
+      | 'children'
+      | 'onHover'
+      | 'onHoverStart'
+      | 'onHoverEnd'
+      | 'onHoverChange'
+      | 'onClick'
+      | keyof GlobalDOMAttributes
+    >,
+    StyleProps,
+    Pick<HelpTextProps, 'description'> {
   /**
    * The label for the element.
    */
-  children?: ReactNode
+  children?: ReactNode;
 }
 
 interface ContextProps {
@@ -157,23 +213,53 @@ interface ContextProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /**
    * Whether the Radio within a RadioGroup should be displayed with an emphasized style.
    */
-  isEmphasized?: boolean
+  isEmphasized?: boolean;
 }
 
 interface RadioContextProps extends RadioProps, ContextProps {}
 
 interface RenderProps extends RadioRenderProps, ContextProps {}
 
+const radioField = style(
+  {
+    display: 'grid',
+    gridTemplateColumns: {
+      default: ['max-content', '1fr'],
+      isNoVisibleLabel: ['max-content']
+    },
+    columnGap: 'text-to-control',
+    alignContent: 'start',
+    font: controlFont(),
+    '--field-height': {
+      type: 'height',
+      value: controlSize()
+    },
+    rowGap: {
+      size: {
+        S: space(1),
+        M: space(1),
+        L: 2,
+        XL: 2
+      }
+    },
+    gridColumnStart: {
+      isInForm: 'field'
+    }
+  },
+  getAllowedOverrides()
+);
+
 const wrapper = style({
-  display: 'flex',
+  display: 'grid',
+  gridTemplateColumns: 'subgrid',
+  gridColumnStart: 1,
+  gridColumnEnd: -1,
   position: 'relative',
-  columnGap: 'text-to-control',
   alignItems: 'baseline',
-  font: controlFont(),
   transition: 'colors',
   color: {
     default: baseColor('neutral'),
@@ -182,11 +268,8 @@ const wrapper = style({
       forcedColors: 'GrayText'
     }
   },
-  gridColumnStart: {
-    isInForm: 'field'
-  },
   disableTapHighlight: true
-}, getAllowedOverrides());
+});
 
 const circle = style<RenderProps>({
   ...focusRing(),
@@ -223,44 +306,70 @@ const circle = style<RenderProps>({
   }
 });
 
+const smallerSize = {
+  S: 'XS',
+  M: 'S',
+  L: 'M',
+  XL: 'L'
+} as const;
+
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Radio = /*#__PURE__*/ forwardRef(function Radio(
+  props: RadioProps,
+  ref: FocusableRef<HTMLInputElement, HTMLDivElement>
+) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
   let domRef = useFocusableRef(ref, inputRef);
   let isInForm = !!useContext(FormContext);
-  let {
-    size = 'M',
-    ...allProps
-  } = useFormProps<RadioContextProps>(props);
+  let {size = 'M', ...allProps} = useFormProps<RadioContextProps>(props);
 
   return (
-    <AriaRadio
+    <RadioField
       {...allProps}
       ref={domRef}
       inputRef={inputRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size}, allProps.styles)}>
+      className={renderProps =>
+        UNSAFE_className +
+        radioField({...renderProps, isInForm, size, isNoVisibleLabel: !children}, allProps.styles)
+      }>
       {renderProps => (
         <>
-          <CenterBaseline>
-            <div
-              ref={circleRef}
-              style={pressScale(circleRef)(renderProps)}
-              className={circle({
-                ...renderProps,
-                isEmphasized: allProps.isEmphasized,
-                isSelected: renderProps.isSelected,
-                size
-              })} />
-          </CenterBaseline>
-          {children}
+          <RadioButton className={renderProps => wrapper({...renderProps, isInForm, size})}>
+            {renderProps => (
+              <>
+                <CenterBaseline>
+                  <div
+                    ref={circleRef}
+                    style={pressScale(circleRef)(renderProps)}
+                    className={circle({
+                      ...renderProps,
+                      isEmphasized: allProps.isEmphasized,
+                      isSelected: renderProps.isSelected,
+                      size
+                    })}
+                  />
+                </CenterBaseline>
+                {children}
+              </>
+            )}
+          </RadioButton>
+          <HelpText
+            size={smallerSize[size]}
+            styles={style({
+              gridColumnStart: 2,
+              paddingTop: 0
+            })}
+            isDisabled={renderProps.isDisabled}
+            description={props.description}
+          />
         </>
       )}
-    </AriaRadio>
+    </RadioField>
   );
 });