Remove UNSAFE_ from isPending prop and enable docs (#5150)

* remove UNSAFE_ from isPending prop and enable docs

* Add beta badge

Co-authored-by: Robert Snow <rsnow@adobe.com>

* Add import for beta badge

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>

Author: iamwillpowell

packages/@react-spectrum/button/docs/Button.mdx

@@ -11,7 +11,7 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/button';
-import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import {HeaderInfo, PropTable, PageDescription, VersionBadge} from '@react-spectrum/docs';
 import packageData from '@react-spectrum/button/package.json';
 
 ```jsx import
@@ -83,8 +83,8 @@ function Example() {
   );
 }
 ```
-{/*
-## Pending
+
+## Pending <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
 Buttons can indicate that a quick progress task is taking place (e.g., saving settings on a server). After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon. You can trigger this behavior with the `isPending` prop. Button events are disabled while `isPending` is true.
 
@@ -103,11 +103,10 @@ function Example() {
   };
 
   return (
-    <Button variant="primary" UNSTABLE_isPending={isLoading} onPress={handlePress}>Click me!</Button>
+    <Button variant="primary" isPending={isLoading} onPress={handlePress}>Click me!</Button>
   );
 }
 ```
-*/}
 
 ## Props
 

packages/@react-spectrum/button/src/Button.tsx

@@ -34,8 +34,8 @@ 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) {
+  // Don't allow interaction while isPending is true
+  if (props.isPending) {
     props.onPress = undefined;
     props.onPressStart = undefined;
     props.onPressEnd = undefined;
@@ -60,7 +60,7 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
     style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',
     staticColor,
     isDisabled,
-    UNSTABLE_isPending,
+    isPending,
     autoFocus,
     ...otherProps
   } = props;
@@ -76,20 +76,20 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
 
-    if (UNSTABLE_isPending) {
-      // Start timer when UNSTABLE_isPending is set to true.
+    if (isPending) {
+      // Start timer when isPending is set to true.
       timeout = setTimeout(() => {
         setIsProgressVisible(true);
       }, 1000);
     } else {
-      // Exit loading state when UNSTABLE_isPending is set to false. */
+      // Exit loading state when isPending is set to false. */
       setIsProgressVisible(false);
     }
     return () => {
-      // Clean up on unmount or when user removes UNSTABLE_isPending prop before entering loading state.
+      // Clean up on unmount or when user removes isPending prop before entering loading state.
       clearTimeout(timeout);
     };
-  }, [UNSTABLE_isPending]);
+  }, [isPending]);
 
   if (variant === 'cta') {
     variant = 'accent';
@@ -107,8 +107,8 @@ 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}
+        aria-disabled={isPending || undefined}
+        aria-live={isPending ? 'polite' : undefined}
         className={
           classNames(
             styles,

packages/@react-spectrum/button/stories/Button.stories.tsx

@@ -66,7 +66,7 @@ export default {
       control: 'select',
       options: ['white', 'black']
     },
-    UNSTABLE_isPending: {
+    isPending: {
       control: 'boolean',
       defaultValue: false
     }
@@ -286,27 +286,27 @@ function Pending(props) {
       <Flex wrap="wrap">
         <PendingButtonContainerComponent {...props}>
           <TooltipTrigger offset={2}>
-            <Button {...props} aria-label="Notifications" onPress={() => {window.alert('use storybook control to change this button UNSTABLE_isPending prop');}}>
+            <Button {...props} aria-label="Notifications" onPress={() => {window.alert('use storybook control to change this button isPending prop');}}>
               <Bell />
             </Button>
             <Tooltip>Notifications</Tooltip>
           </TooltipTrigger>
         </PendingButtonContainerComponent>
 
         <PendingButtonContainerComponent {...props}>
-          <Button {...props} aria-label="No tooltip" onPress={() => {window.alert('use storybook control to change this button UNSTABLE_isPending prop');}}>
+          <Button {...props} aria-label="No tooltip" onPress={() => {window.alert('use storybook control to change this button isPending prop');}}>
             <Bell />
           </Button>
         </PendingButtonContainerComponent>
 
         <PendingButtonContainerComponent {...props}>
-          <Button {...props} onPress={() => {window.alert('use storybook control to change this button UNSTABLE_isPending prop');}}>
+          <Button {...props} onPress={() => {window.alert('use storybook control to change this button isPending prop');}}>
             <Bell />
           </Button>
         </PendingButtonContainerComponent>
 
         <PendingButtonContainerComponent {...props}>
-          <Button {...props} UNSTABLE_isPending={props.UNSTABLE_isPending} onPress={() => {window.alert('use storybook control to change this button UNSTABLE_isPending prop');}}>
+          <Button {...props} isPending={props.isPending} onPress={() => {window.alert('use storybook control to change this button isPending prop');}}>
             <Text>Controlled pending</Text>
           </Button>
         </PendingButtonContainerComponent>
@@ -316,7 +316,7 @@ function Pending(props) {
 }
 let timerValue = 5000;
 function PendingButtonComponent(props) {
-  let [UNSTABLE_isPending, setPending] = useState(false);
+  let [isPending, setPending] = useState(false);
 
   let handlePress = (e) => {
     action('press')(e);
@@ -329,15 +329,15 @@ function PendingButtonComponent(props) {
   return (
     <Button
       {...props}
-      UNSTABLE_isPending={UNSTABLE_isPending}
+      isPending={isPending}
       onPress={handlePress}>
       {props.children}
     </Button>
   );
 }
 
 function PendingButtonOnClickComponent(props) {
-  let [UNSTABLE_isPending, setPending] = useState(false);
+  let [isPending, setPending] = useState(false);
 
   let handlePress = (e) => {
     action('click')(e);
@@ -350,7 +350,7 @@ function PendingButtonOnClickComponent(props) {
   return (
     <Button
       {...props}
-      UNSTABLE_isPending={UNSTABLE_isPending}
+      isPending={isPending}
       onClick={handlePress}>
       {props.children}
     </Button>

packages/@react-spectrum/button/test/Button.test.js

@@ -289,7 +289,7 @@ describe('Button', function () {
             setPending(true);
             onPressSpy();
           }}
-          UNSTABLE_isPending={pending}>
+          isPending={pending}>
           Click Me
         </Button>
       );
@@ -317,7 +317,7 @@ describe('Button', function () {
   // isPending anchor element
   it('removes href attribute from anchor element when isPending is true', () => {
     let {getByRole} = render(
-      <Button elementType="a" href="//example.com" UNSTABLE_isPending>
+      <Button elementType="a" href="//example.com" isPending>
         Click Me
       </Button>
     );

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

@@ -76,9 +76,8 @@ export interface SpectrumButtonProps<T extends ElementType = 'button'> extends A
   staticColor?: 'white' | 'black',
   /**
    * Whether to disable events immediately and display a loading spinner after a 1 second delay.
-   * @private
    */
-  UNSTABLE_isPending?: boolean,
+  isPending?: boolean,
   /**
    * Whether the button should be displayed with a quiet style.
    * @deprecated