chore: update S2 picker "isLoading" API to "loadingState" for consistency (#8255)

* replace isLoading with loadingState for consistency

* adding codemod and updating migration

* fix tests

* fix chromatic story

* forgot to remove outdated snapshot

Author: LFDanLu

.storybook-s2/docs/Migrating.jsx

@@ -277,6 +277,7 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>PickerItem</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>isLoading</Code> to <Code>loadingState</Code> and provide the appropriate loading state.</li>
         </ul>
 
         <H3>ProgressBar</H3>

packages/@react-spectrum/s2/chromatic/Picker.stories.tsx

@@ -72,7 +72,7 @@ export const ContextualHelp = {
 
 export const EmptyAndLoading = {
   render: () => (
-    <Picker label="loading" isLoading>
+    <Picker label="loading" loadingState="loading">
       {[]}
     </Picker>
   ),

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

@@ -27,12 +27,11 @@ import {
   ListLayout,
   Provider,
   SectionProps,
-  SelectStateContext,
   SelectValue,
   UNSTABLE_ListBoxLoadingSentinel,
   Virtualizer
 } from 'react-aria-components';
-import {AsyncLoadable, FocusableRef, FocusableRefValue, HelpTextProps, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
+import {AsyncLoadable, FocusableRef, FocusableRefValue, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
 import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {
@@ -71,7 +70,7 @@ import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useRef, useState} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useGlobalListeners, useSlotId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -100,8 +99,7 @@ export interface PickerProps<T extends object> extends
   HelpTextProps,
   Pick<ListBoxProps<T>, 'items'>,
   Pick<AriaPopoverProps, 'shouldFlip'>,
-  AsyncLoadable
-   {
+  Pick<AsyncLoadable, 'onLoadMore'> {
     /** The contents of the collection. */
     children: ReactNode | ((item: T) => ReactNode),
     /**
@@ -117,7 +115,9 @@ export interface PickerProps<T extends object> extends
      */
     align?: 'start' | 'end',
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
-    menuWidth?: number
+    menuWidth?: number,
+    /** The current loading state of the Picker. */
+    loadingState?: LoadingState
 }
 
 interface PickerButtonProps extends PickerStyleProps, ButtonRenderProps {}
@@ -232,7 +232,7 @@ const iconStyles = style({
     value: 'currentColor'
   },
   color: {
-    isInitialLoad: 'disabled'
+    isLoading: 'disabled'
   }
 });
 
@@ -286,7 +286,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     UNSAFE_style,
     placeholder = stringFormatter.format('picker.placeholder'),
     isQuiet,
-    isLoading,
+    loadingState,
     onLoadMore,
     ...pickerProps
   } = props;
@@ -304,12 +304,13 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
   }
 
   let renderer;
-  let spinnerId = useSlotId([isLoading]);
+  let showButtonSpinner = useMemo(() => loadingState === 'loading', [loadingState]);
+  let spinnerId = useSlotId([showButtonSpinner]);
 
   let listBoxLoadingCircle = (
     <UNSTABLE_ListBoxLoadingSentinel
       className={loadingWrapperStyles}
-      isLoading={isLoading}
+      isLoading={loadingState === 'loadingMore'}
       onLoadMore={onLoadMore}>
       <PickerProgressCircle size={size} aria-label={stringFormatter.format('table.loadingMore')} />
     </UNSTABLE_ListBoxLoadingSentinel>
@@ -360,7 +361,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
               {label}
             </FieldLabel>
             <PickerButton
-              isLoading={isLoading}
+              loadingState={loadingState}
               isOpen={isOpen}
               isQuiet={isQuiet}
               isFocusVisible={isFocusVisible}
@@ -454,7 +455,7 @@ function PickerProgressCircle(props) {
   );
 }
 
-interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>, Pick<PickerProps<T>, 'isLoading'> {
+interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>, Pick<PickerProps<T>, 'loadingState'> {
   loadingCircle: ReactNode,
   buttonRef: RefObject<HTMLButtonElement | null>
 }
@@ -468,13 +469,10 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
     size,
     isInvalid,
     isDisabled,
-    isLoading,
+    loadingState,
     loadingCircle,
     buttonRef
   } = props;
-  let state = useContext(SelectStateContext);
-  // If it is the initial load, the collection either hasn't been formed or only has the loader so apply the disabled style
-  let isInitialLoad = (state?.collection.size == null || state?.collection.size <= 1) && isLoading;
 
   // For mouse interactions, pickers open on press start. When the popover underlay appears
   // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
@@ -538,10 +536,10 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
               }}
             </SelectValue>
             {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
-            {isInitialLoad && !isOpen && loadingCircle}
+            {loadingState === 'loading' && !isOpen && loadingCircle}
             <ChevronIcon
               size={size}
-              className={iconStyles({isInitialLoad})} />
+              className={iconStyles({isLoading: loadingState === 'loading'})} />
             {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
             {isInvalid && !isDisabled && !isQuiet &&
               // @ts-ignore known limitation detecting functions from the theme

packages/@react-spectrum/s2/stories/Picker.stories.tsx

@@ -251,7 +251,7 @@ const AsyncPicker = (args: any) => {
   });
 
   return (
-    <Picker {...args} isLoading={list.isLoading} onLoadMore={list.loadMore} items={list.items}>
+    <Picker {...args} loadingState={list.loadingState} onLoadMore={list.loadMore} items={list.items}>
       {(item: Character) => <PickerItem id={item.name} textValue={item.name}>{item.name}</PickerItem>}
     </Picker>
   );
@@ -279,7 +279,7 @@ let list = useAsyncList({
 
 return (
   <Picker
-    isLoading={list.isLoading}
+    loadingState={list.loadingState}
     onLoadMore={list.loadMore}
     items={list.items}>
     {item => <PickerItem id={item.name} textValue={item.name}>{item.name}</PickerItem>}

packages/@react-spectrum/s2/test/Picker.test.tsx

@@ -18,13 +18,13 @@ import {User} from '@react-aria/test-utils';
 describe('Picker', () => {
   let testUtilUser = new User();
   function DynamicPicker(props) {
-    let {items, isLoading, onLoadMore, ...otherProps} = props;
+    let {items, loadingState, onLoadMore, ...otherProps} = props;
     return (
       <Picker
         {...otherProps}
         label="Test picker"
         items={items}
-        isLoading={isLoading}
+        loadingState={loadingState}
         onLoadMore={onLoadMore}>
         {(item: any) => <PickerItem id={item.name} textValue={item.name}>{item.name}</PickerItem>}
       </Picker>
@@ -55,7 +55,7 @@ describe('Picker', () => {
     });
 
     let tree = render(
-      <Picker label="test" isLoading onLoadMore={onLoadMore}>
+      <Picker label="test" loadingState="loadingMore" onLoadMore={onLoadMore}>
         <PickerItem>Chocolate</PickerItem>
         <PickerItem>Mint</PickerItem>
         <PickerItem>Strawberry</PickerItem>
@@ -104,7 +104,7 @@ describe('Picker', () => {
       expect(option).toHaveAttribute('aria-posinset', `${index + 1}`);
     }
 
-    tree.rerender(<DynamicPicker items={items} isLoading />);
+    tree.rerender(<DynamicPicker items={items} loadingState="loadingMore" />);
     options = selectTester.options();
     for (let [index, option] of options.entries()) {
       expect(option).toHaveAttribute('aria-posinset', `${index + 1}`);

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap

@@ -7,38 +7,24 @@ let options = [
   {id: 2, name: 'Vanilla'}
 ];
 <div>
-  <Picker 
+  <Picker
     label="Ice Cream"
     items={options}>
     {(item) => <PickerItem id={item.id}>{item.name}</PickerItem>}
   </Picker>
-  <Picker 
+  <Picker
     label="Ice Cream"
     items={options}>
     {(item) => <PickerItem id={item.id}>{item.name}</PickerItem>}
   </Picker>
-  <Picker 
+  <Picker
     label="Ice Cream"
     items={options}>
     {(item) => <PickerItem>{item.name}</PickerItem>}
   </Picker>
 </div>"
 `;
 
-exports[`Keeps isLoading and onLoadMore 1`] = `
-"import { PickerItem, Picker } from "@react-spectrum/s2";
-    <>
-      <Picker label="Ice Cream" isLoading onLoadMore={() => {}}>
-        <PickerItem>Red Panda</PickerItem>
-        <PickerItem>Cat</PickerItem>
-      </Picker>
-      <Picker label="Ice Cream" isLoading={false} onLoadMore={() => {}}>
-        <PickerItem>Red Panda</PickerItem>
-        <PickerItem>Cat</PickerItem>
-      </Picker>
-    </>"
-`;
-
 exports[`Static - Converts menuWidth to px value 1`] = `
 "import { PickerItem, Picker } from "@react-spectrum/s2";
 let menuWidth = 'size-10';
@@ -162,3 +148,19 @@ exports[`handles sections 1`] = `
   </PickerSection>
 </Picker>"
 `;
+
+exports[`replaces isLoading with loadingState and keeps onLoadMore 1`] = `
+"import { PickerItem, Picker } from "@react-spectrum/s2";
+    <>
+      // TODO(S2-upgrade): Replace boolean passed to isLoading with appropriate loadingState.
+      <Picker label="Ice Cream" loadingState onLoadMore={() => {}}>
+        <PickerItem>Red Panda</PickerItem>
+        <PickerItem>Cat</PickerItem>
+      </Picker>
+      // TODO(S2-upgrade): Replace boolean passed to isLoading with appropriate loadingState.
+      <Picker label="Ice Cream" loadingState={false} onLoadMore={() => {}}>
+        <PickerItem>Red Panda</PickerItem>
+        <PickerItem>Cat</PickerItem>
+      </Picker>
+    </>"
+`;

packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts

@@ -33,17 +33,17 @@ let options = [
   {id: 2, name: 'Vanilla'}
 ];
 <div>
-  <Picker 
+  <Picker
     label="Ice Cream"
     items={options}>
     {(item) => <Item id={item.id}>{item.name}</Item>}
   </Picker>
-  <Picker 
+  <Picker
     label="Ice Cream"
     items={options}>
     {(item) => <Item key={item.id}>{item.name}</Item>}
   </Picker>
-  <Picker 
+  <Picker
     label="Ice Cream"
     items={options}>
     {(item) => <Item>{item.name}</Item>}
@@ -149,7 +149,7 @@ import {Picker, Section, Item} from '@adobe/react-spectrum';
 </Picker>
 `);
 
-test('Keeps isLoading and onLoadMore', `
+test('replaces isLoading with loadingState and keeps onLoadMore', `
   import {Picker, Section, Item} from '@adobe/react-spectrum';
     <>
       <Picker label="Ice Cream" isLoading onLoadMore={() => {}}>

packages/dev/codemods/src/s1-to-s2/src/codemods/components/Picker/transform.ts

@@ -1,6 +1,7 @@
 import {
   convertDimensionValueToPx,
   removeProp,
+  updatePropName,
   updatePropNameAndValue
 } from '../../shared/transforms';
 import {NodePath} from '@babel/traverse';
@@ -12,6 +13,7 @@ import * as t from '@babel/types';
  * - Remove isQuiet (it is no longer supported in Spectrum 2).
  * - Change validationState="invalid" to isInvalid.
  * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ * - Replace isLoading with loadingState.
  */
 export default function transformPicker(path: NodePath<t.JSXElement>) {
   // Change menuWidth value from a DimensionValue to a pixel value
@@ -30,4 +32,11 @@ export default function transformPicker(path: NodePath<t.JSXElement>) {
 
   // Remove validationState="valid"
   removeProp(path, {propName: 'validationState', propValue: 'valid'});
-} 
+
+  // Replace isLoading with loadingState
+  updatePropName(path, {
+    oldPropName: 'isLoading',
+    newPropName: 'loadingState',
+    comment: 'Replace boolean passed to isLoading with appropriate loadingState.'
+  });
+}