Add isPending prop to Button component which triggers a spinner. (#4900)

iamwillpowell · snowystinger · web-flow · commit 53ddbb660b22 · 2023-08-29T11:55:26.000-05:00
* Add `isPending` prop to `Button` component which triggers a spinner.

* Fix lint errors

* Added test

* Only import the necessary package from react-aria

* Remove unnecessary timeout ref.

* Remove pointer events override

* Update test

* Add hook to filter out interactions during pending

* Added cases to story

* update pending story

* whitespace fix

* update pending story

* update pending story

* remove spacing override on loader icon

* make anchor button-like things disabled when pending

* update button docs

* Simplify button story

* Update isPending tests

* Apply progressCircle overBackground to static color buttons

* Style display with visibility instead of opacity

* Improve vertical centering of spinner

* Remove extra dependency

* Added more disabled props while pending

* Update Pending docs

* Rename function so it doesn't sound like a hook

* Defense

* Use proper naming convention

* Simplify story naming

* Update test

* Add aria-live to pending button when pending

* Add check that spinner isn't in document

* Remove cruft

* Move progressCircle props to component

* Fix typos

Co-authored-by: Robert Snow &lt;rsnow@adobe.com&gt;

* change story action

* fix typo

* Add additional info to isPending type comment

* Fix lint problem

* Remove focus and blur from blocked events

* prefix isPending with UNSTABLE

* remove doc changes for now

* Revert unintended change

---------

Co-authored-by: Robert Snow &lt;rsnow@adobe.com&gt;
diff --git a/packages/@adobe/spectrum-css-temp/components/button/index.css b/packages/@adobe/spectrum-css-temp/components/button/index.css
@@ -157,6 +157,20 @@ governing permissions and limitations under the License.
     min-inline-size: unset;
     padding: var(--spectrum-global-dimension-size-65);
   }
+
+  &.spectrum-Button--pending {
+    .spectrum-Button-circleLoader {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .spectrum-Button-label,
+    .spectrum-Icon {
+      visibility: hidden;
+    }
+  }
 }
 
 a.spectrum-Button,
diff --git a/packages/@react-spectrum/button/intl/ar-AE.json b/packages/@react-spectrum/button/intl/ar-AE.json
@@ -0,0 +1,3 @@
+{
+  "loading": "جارٍ التحميل..."
+}
diff --git a/packages/@react-spectrum/button/intl/bg-BG.json b/packages/@react-spectrum/button/intl/bg-BG.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Зареждане..."
+}
diff --git a/packages/@react-spectrum/button/intl/cs-CZ.json b/packages/@react-spectrum/button/intl/cs-CZ.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Načítání..."
+}
diff --git a/packages/@react-spectrum/button/intl/da-DK.json b/packages/@react-spectrum/button/intl/da-DK.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Indlæser ..."
+}
diff --git a/packages/@react-spectrum/button/intl/de-DE.json b/packages/@react-spectrum/button/intl/de-DE.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Laden..."
+}
diff --git a/packages/@react-spectrum/button/intl/el-GR.json b/packages/@react-spectrum/button/intl/el-GR.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Φόρτωση..."
+}
diff --git a/packages/@react-spectrum/button/intl/en-US.json b/packages/@react-spectrum/button/intl/en-US.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Loading…"
+}
diff --git a/packages/@react-spectrum/button/intl/es-ES.json b/packages/@react-spectrum/button/intl/es-ES.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Cargando…"
+}
diff --git a/packages/@react-spectrum/button/intl/et-EE.json b/packages/@react-spectrum/button/intl/et-EE.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Laadimine..."
+}
diff --git a/packages/@react-spectrum/button/intl/fi-FI.json b/packages/@react-spectrum/button/intl/fi-FI.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Ladataan…"
+}
diff --git a/packages/@react-spectrum/button/intl/fr-FR.json b/packages/@react-spectrum/button/intl/fr-FR.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Chargement..."
+}
diff --git a/packages/@react-spectrum/button/intl/he-IL.json b/packages/@react-spectrum/button/intl/he-IL.json
@@ -0,0 +1,3 @@
+{
+  "loading": "טוען..."
+}
diff --git a/packages/@react-spectrum/button/intl/hr-HR.json b/packages/@react-spectrum/button/intl/hr-HR.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Učitavam..."
+}
diff --git a/packages/@react-spectrum/button/intl/hu-HU.json b/packages/@react-spectrum/button/intl/hu-HU.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Betöltés folyamatban…"
+}
diff --git a/packages/@react-spectrum/button/intl/it-IT.json b/packages/@react-spectrum/button/intl/it-IT.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Caricamento..."
+}
diff --git a/packages/@react-spectrum/button/intl/ja-JP.json b/packages/@react-spectrum/button/intl/ja-JP.json
@@ -0,0 +1,3 @@
+{
+  "loading": "読み込み中..."
+}
diff --git a/packages/@react-spectrum/button/intl/ko-KR.json b/packages/@react-spectrum/button/intl/ko-KR.json
@@ -0,0 +1,3 @@
+{
+  "loading": "로드 중"
+}
diff --git a/packages/@react-spectrum/button/intl/lt-LT.json b/packages/@react-spectrum/button/intl/lt-LT.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Įkeliama..."
+}
diff --git a/packages/@react-spectrum/button/intl/lv-LV.json b/packages/@react-spectrum/button/intl/lv-LV.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Notiek ielāde..."
+}
diff --git a/packages/@react-spectrum/button/intl/nb-NO.json b/packages/@react-spectrum/button/intl/nb-NO.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Laster inn ..."
+}
diff --git a/packages/@react-spectrum/button/intl/nl-NL.json b/packages/@react-spectrum/button/intl/nl-NL.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Laden..."
+}
diff --git a/packages/@react-spectrum/button/intl/pl-PL.json b/packages/@react-spectrum/button/intl/pl-PL.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Ładowanie..."
+}
diff --git a/packages/@react-spectrum/button/intl/pt-BR.json b/packages/@react-spectrum/button/intl/pt-BR.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Carregando..."
+}
diff --git a/packages/@react-spectrum/button/intl/pt-PT.json b/packages/@react-spectrum/button/intl/pt-PT.json
@@ -0,0 +1,3 @@
+{
+  "loading": "A carregar..."
+}
diff --git a/packages/@react-spectrum/button/intl/ro-RO.json b/packages/@react-spectrum/button/intl/ro-RO.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Se încarcă..."
+}
diff --git a/packages/@react-spectrum/button/intl/ru-RU.json b/packages/@react-spectrum/button/intl/ru-RU.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Загрузка..."
+}
diff --git a/packages/@react-spectrum/button/intl/sk-SK.json b/packages/@react-spectrum/button/intl/sk-SK.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Načítava sa..."
+}
diff --git a/packages/@react-spectrum/button/intl/sl-SI.json b/packages/@react-spectrum/button/intl/sl-SI.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Nalaganje..."
+}
diff --git a/packages/@react-spectrum/button/intl/sr-SP.json b/packages/@react-spectrum/button/intl/sr-SP.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Učitavam..."
+}
diff --git a/packages/@react-spectrum/button/intl/sv-SE.json b/packages/@react-spectrum/button/intl/sv-SE.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Läser in..."
+}
diff --git a/packages/@react-spectrum/button/intl/tr-TR.json b/packages/@react-spectrum/button/intl/tr-TR.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Yükleniyor..."
+}
diff --git a/packages/@react-spectrum/button/intl/uk-UA.json b/packages/@react-spectrum/button/intl/uk-UA.json
@@ -0,0 +1,3 @@
+{
+  "loading": "Завантаження…"
+}
diff --git a/packages/@react-spectrum/button/intl/zh-CN.json b/packages/@react-spectrum/button/intl/zh-CN.json
@@ -0,0 +1,3 @@
+{
+  "loading": "正在加载..."
+}
diff --git a/packages/@react-spectrum/button/intl/zh-TW.json b/packages/@react-spectrum/button/intl/zh-TW.json
@@ -0,0 +1,3 @@
+{
+  "loading": "正在載入"
+}
diff --git a/packages/@react-spectrum/button/package.json b/packages/@react-spectrum/button/package.json
@@ -38,12 +38,15 @@
   "dependencies": {
     "@react-aria/button": "^3.8.1",
     "@react-aria/focus": "^3.14.0",
+    "@react-aria/i18n": "^3.8.1",
     "@react-aria/interactions": "^3.17.0",
     "@react-aria/utils": "^3.19.0",
+    "@react-spectrum/progress": "^3.6.1",
     "@react-spectrum/text": "^3.4.4",
     "@react-spectrum/utils": "^3.10.1",
     "@react-stately/toggle": "^3.6.1",
     "@react-types/button": "^3.7.4",
+    "@react-types/progress": "^3.4.2",
     "@react-types/shared": "^3.19.0",
     "@spectrum-icons/ui": "^3.5.4",
     "@swc/helpers": "^0.5.0"
diff --git a/packages/@react-spectrum/button/src/Button.tsx b/packages/@react-spectrum/button/src/Button.tsx
@@ -20,34 +20,76 @@ 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,
     variant,
     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}
diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx
@@ -15,7 +15,7 @@ import Bell from '@spectrum-icons/workflow/Bell';
 import {Button} from '../';
 import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Flex} from '@react-spectrum/layout';
-import React, {ElementType} from 'react';
+import React, {ElementType, useState} from 'react';
 import {SpectrumButtonProps} from '@react-types/button';
 import {Text} from '@react-spectrum/text';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
@@ -62,6 +62,10 @@ export default {
     staticColor: {
       control: 'select',
       options: ['white', 'black']
+    },
+    UNSTABLE_isPending: {
+      control: 'boolean',
+      defaultValue: false
     }
   }
 } as ComponentMeta<typeof Button>;
@@ -102,6 +106,10 @@ export const UserSelect: ButtonStory = {
   }
 };
 
+export const PendingSpinner: ButtonStory = {
+  render: (args) => <Pending {...args} />
+};
+
 function render<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'primary'}) {
   let buttons = (
     <Flex gap="size-200">
@@ -224,3 +232,77 @@ function Example() {
     </Flex>
   );
 }
+
+function Pending(props) {
+
+  return (
+    <>
+      <View backgroundColor={props.variant === 'overBackground' ? 'static-blue-700' : undefined} padding={16}>
+        <PendingButtonComponent {...props}>click me!</PendingButtonComponent>
+      </View>
+
+      <View backgroundColor={props.variant === 'overBackground' ? 'static-blue-700' : undefined} padding={16}>
+        <PendingButtonComponent
+          {...props}>
+          <Bell />
+          <Text>I have an icon</Text>
+        </PendingButtonComponent>
+      </View>
+
+      <View backgroundColor={props.variant === 'overBackground' ? 'static-blue-700' : undefined} padding={16}>
+        <PendingButtonOnClickComponent
+          {...props}>
+          <Text>with onClick</Text>
+        </PendingButtonOnClickComponent>
+      </View>
+
+      <View padding={16}>
+        <Button variant="primary" UNSTABLE_isPending={props.UNSTABLE_isPending} onPress={() => {window.alert('use storybook control to change this button UNSTABLE_isPending prop');}}>
+          <Text>Controlled pending</Text>
+        </Button>
+      </View>
+    </>
+  );
+}
+let timerValue = 5000;
+function PendingButtonComponent(props) {
+  let [UNSTABLE_isPending, setPending] = useState(false);
+
+  let handlePress = (e) => {
+    action('press')(e);
+    setPending(true);
+    setTimeout(() => {
+      setPending(false);
+    }, timerValue);
+  };
+
+  return (
+    <Button
+      {...props}
+      UNSTABLE_isPending={UNSTABLE_isPending}
+      onPress={handlePress}>
+      {props.children}
+    </Button>
+  );
+}
+
+function PendingButtonOnClickComponent(props) {
+  let [UNSTABLE_isPending, setPending] = useState(false);
+
+  let handlePress = (e) => {
+    action('click')(e);
+    setPending(true);
+    setTimeout(() => {
+      setPending(false);
+    }, timerValue);
+  };
+
+  return (
+    <Button
+      {...props}
+      UNSTABLE_isPending={UNSTABLE_isPending}
+      onClick={handlePress}>
+      {props.children}
+    </Button>
+  );
+}
diff --git a/packages/@react-spectrum/button/test/Button.test.js b/packages/@react-spectrum/button/test/Button.test.js
diff --git a/packages/@react-types/button/src/index.d.ts b/packages/@react-types/button/src/index.d.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "جارٍ التحميل..."`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "Зареждане..."`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "Načítání..."`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "Indlæser ..."`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "Φόρτωση..."`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "Loading…"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "Cargando…"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "loading": "Laadimine..."`
	`3`	`+}`