@react-spectrum/button 3.12.3 → 3.13.0

package/src/Button.tsx

@@ -20,18 +20,39 @@ import {
 } from '@react-spectrum/utils';
 import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {mergeProps} from '@react-aria/utils';
-import React, {ElementType, ReactElement} from 'react';
+import {ProgressCircle} from '@react-spectrum/progress';
+import React, {ElementType, ReactElement, useEffect, useState} from 'react';
 import {SpectrumButtonProps} from '@react-types/button';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {Text} from '@react-spectrum/text';
 import {useButton} from '@react-aria/button';
 import {useHover} from '@react-aria/interactions';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
+function disablePendingProps(props) {
+  // Don't allow interaction while UNSTABLE_isPending is true
+  if (props.UNSTABLE_isPending) {
+    props.onPress = undefined;
+    props.onPressStart = undefined;
+    props.onPressEnd = undefined;
+    props.onPressChange = undefined;
+    props.onPressUp = undefined;
+    props.onKeyDown = undefined;
+    props.onKeyUp = undefined;
+    props.onClick = undefined;
+    props.href = undefined;
+  }
+  return props;
+}
+
 function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useSlotProps(props, 'button');
+  props = disablePendingProps(props);
   let {
     elementType: ElementType = 'button',
     children,
@@ -39,15 +60,36 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
     style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',
     staticColor,
     isDisabled,
+    UNSTABLE_isPending,
     autoFocus,
     ...otherProps
   } = props;
   let domRef = useFocusableRef(ref);
   let {buttonProps, isPressed} = useButton(props, domRef);
   let {hoverProps, isHovered} = useHover({isDisabled});
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let {styleProps} = useStyleProps(otherProps);
   let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);
   let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);
+  let [isProgressVisible, setIsProgressVisible] = useState(false);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+
+    if (UNSTABLE_isPending) {
+      // Start timer when UNSTABLE_isPending is set to true.
+      timeout = setTimeout(() => {
+        setIsProgressVisible(true);
+      }, 1000);
+    } else {
+      // Exit loading state when UNSTABLE_isPending is set to false. */
+      setIsProgressVisible(false);
+    }
+    return () => {
+      // Clean up on unmount or when user removes UNSTABLE_isPending prop before entering loading state.
+      clearTimeout(timeout);
+    };
+  }, [UNSTABLE_isPending]);
 
   if (variant === 'cta') {
     variant = 'accent';
@@ -65,15 +107,18 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
         data-variant={variant}
         data-style={style}
         data-static-color={staticColor || undefined}
+        aria-disabled={UNSTABLE_isPending || undefined}
+        aria-live={UNSTABLE_isPending ? 'polite' : undefined}
         className={
           classNames(
             styles,
             'spectrum-Button',
             {
               'spectrum-Button--iconOnly': hasIcon && !hasLabel,
-              'is-disabled': isDisabled,
+              'is-disabled': isDisabled || isProgressVisible,
               'is-active': isPressed,
-              'is-hovered': isHovered
+              'is-hovered': isHovered,
+              'spectrum-Button--pending': isProgressVisible
             },
             styleProps.className
           )
@@ -88,6 +133,12 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
               UNSAFE_className: classNames(styles, 'spectrum-Button-label')
             }
           }}>
+          {isProgressVisible && <ProgressCircle
+            aria-label={stringFormatter.format('loading')}
+            isIndeterminate
+            size="S"
+            UNSAFE_className={classNames(styles, 'spectrum-Button-circleLoader')}
+            variant={staticColor ? 'overBackground' : undefined} />}
           {typeof children === 'string'
             ? <Text>{children}</Text>
             : children}

package/src/FieldButton.tsx

@@ -24,6 +24,7 @@ interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
   isQuiet?: boolean,
   isActive?: boolean,
   validationState?: 'valid' | 'invalid',
+  isInvalid?: boolean,
   focusRingClass?: string
 }
 
@@ -34,6 +35,7 @@ function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
     isQuiet,
     isDisabled,
     validationState,
+    isInvalid,
     children,
     autoFocus,
     isActive,
@@ -58,7 +60,7 @@ function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
               'spectrum-FieldButton--quiet': isQuiet,
               'is-active': isActive || isPressed,
               'is-disabled': isDisabled,
-              'spectrum-FieldButton--invalid': validationState === 'invalid',
+              'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',
               'is-hovered': isHovered
             },
             styleProps.className