Convert a few simple components to use hooks

UNRELEASED.md

@@ -22,4 +22,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Migrated `ActionMenu.RollupAction`, `Autocomplete`, `Card`, `EmptySearchResult`, `Form`, `SkeletonPage` and `TopBar` to use hooks instead of withAppProvider ([#2065](https://github.com/Shopify/polaris-react/pull/2065))
+
 ### Deprecations

src/components/ActionMenu/components/RollupActions/RollupActions.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 
 import {ActionListSection, ActionListItemDescriptor} from '../../../../types';
+import {useI18n} from '../../../../utilities/i18n';
+import {useToggle} from '../../../../utilities/use-toggle';
 
-import {
-  withAppProvider,
-  WithAppProviderProps,
-} from '../../../../utilities/with-app-provider';
 import {ActionList} from '../../../ActionList';
 import {Button} from '../../../Button';
 import {Popover} from '../../../Popover';
@@ -20,63 +18,40 @@ export interface RollupActionsProps {
   sections?: ActionListSection[];
 }
 
-type ComposedProps = RollupActionsProps & WithAppProviderProps;
+export function RollupActions({items = [], sections = []}: RollupActionsProps) {
+  const i18n = useI18n();
 
-interface State {
-  rollupOpen: boolean;
-}
-
-class RollupActions extends React.PureComponent<ComposedProps, State> {
-  state: State = {
-    rollupOpen: false,
-  };
-
-  render() {
-    const {
-      items = [],
-      sections = [],
-      polaris: {intl},
-    } = this.props;
-    const {rollupOpen} = this.state;
+  const [rollupOpen, toggleRollupOpen] = useToggle(false);
 
-    if (items.length === 0 && sections.length === 0) {
-      return null;
-    }
-
-    const activatorMarkup = (
-      <div className={styles.RollupActivator}>
-        <Button
-          plain
-          icon={HorizontalDotsMinor}
-          accessibilityLabel={intl.translate(
-            'Polaris.ActionMenu.RollupActions.rollupButton',
-          )}
-          onClick={this.handleRollupToggle}
-        />
-      </div>
-    );
-
-    return (
-      <Popover
-        active={rollupOpen}
-        activator={activatorMarkup}
-        preferredAlignment="right"
-        onClose={this.handleRollupToggle}
-      >
-        <ActionList
-          items={items}
-          sections={sections}
-          onActionAnyItem={this.handleRollupToggle}
-        />
-      </Popover>
-    );
+  if (items.length === 0 && sections.length === 0) {
+    return null;
   }
 
-  private handleRollupToggle = () => {
-    this.setState(({rollupOpen}) => ({rollupOpen: !rollupOpen}));
-  };
+  const activatorMarkup = (
+    <div className={styles.RollupActivator}>
+      <Button
+        plain
+        icon={HorizontalDotsMinor}
+        accessibilityLabel={i18n.translate(
+          'Polaris.ActionMenu.RollupActions.rollupButton',
+        )}
+        onClick={toggleRollupOpen}
+      />
+    </div>
+  );
+
+  return (
+    <Popover
+      active={rollupOpen}
+      activator={activatorMarkup}
+      preferredAlignment="right"
+      onClose={toggleRollupOpen}
+    >
+      <ActionList
+        items={items}
+        sections={sections}
+        onActionAnyItem={toggleRollupOpen}
+      />
+    </Popover>
+  );
 }
-
-// Use named export once withAppProvider is refactored away
-// eslint-disable-next-line import/no-default-export
-export default withAppProvider<RollupActionsProps>()(RollupActions);

src/components/ActionMenu/components/RollupActions/index.ts

@@ -1,3 +1 @@
-import RollupActions, {RollupActionsProps} from './RollupActions';
-
-export {RollupActions, RollupActionsProps};
+export {RollupActions, RollupActionsProps} from './RollupActions';

src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx

@@ -11,7 +11,7 @@ import {
   Section as ActionListSection,
 } from '../../../../ActionList/components';
 
-import RollupActions, {RollupActionsProps} from '../RollupActions';
+import {RollupActions, RollupActionsProps} from '../RollupActions';
 
 type Wrapper = ReactWrapper<RollupActionsProps, any>;
 

src/components/Autocomplete/Autocomplete.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
+import {useI18n} from '../../utilities/i18n';
 import {ActionListItemDescriptor} from '../../types';
-import {
-  withAppProvider,
-  WithAppProviderProps,
-} from '../../utilities/with-app-provider';
 import {PreferredPosition} from '../PositionedOverlay';
 import {OptionDescriptor} from '../OptionList';
 import {Spinner} from '../Spinner';
@@ -41,64 +38,55 @@ export interface AutocompleteProps {
   onLoadMoreResults?(): void;
 }
 
-type CombinedProps = AutocompleteProps & WithAppProviderProps;
+export function Autocomplete({
+  id,
+  options,
+  selected,
+  textField,
+  preferredPosition,
+  listTitle,
+  allowMultiple,
+  loading,
+  actionBefore,
+  willLoadMoreResults,
+  emptyState,
+  onSelect,
+  onLoadMoreResults,
+}: AutocompleteProps) {
+  const i18n = useI18n();
 
-class Autocomplete extends React.PureComponent<CombinedProps, never> {
-  static TextField = TextField;
-  static ComboBox = ComboBox;
-
-  render() {
-    const {
-      id,
-      options,
-      selected,
-      textField,
-      preferredPosition,
-      listTitle,
-      allowMultiple,
-      loading,
-      actionBefore,
-      willLoadMoreResults,
-      emptyState,
-      onSelect,
-      onLoadMoreResults,
-      polaris: {intl},
-    } = this.props;
-
-    const spinnerMarkup = loading ? (
-      <div className={styles.Loading}>
-        <Spinner
-          size="small"
-          accessibilityLabel={intl.translate(
-            'Polaris.Autocomplete.spinnerAccessibilityLabel',
-          )}
-        />
-      </div>
-    ) : null;
+  const spinnerMarkup = loading ? (
+    <div className={styles.Loading}>
+      <Spinner
+        size="small"
+        accessibilityLabel={i18n.translate(
+          'Polaris.Autocomplete.spinnerAccessibilityLabel',
+        )}
+      />
+    </div>
+  ) : null;
 
-    const conditionalOptions = loading && !willLoadMoreResults ? [] : options;
-    const conditionalAction =
-      actionBefore && actionBefore !== [] ? [actionBefore] : undefined;
+  const conditionalOptions = loading && !willLoadMoreResults ? [] : options;
+  const conditionalAction =
+    actionBefore && actionBefore !== [] ? [actionBefore] : undefined;
 
-    return (
-      <ComboBox
-        id={id}
-        options={conditionalOptions}
-        selected={selected}
-        textField={textField}
-        preferredPosition={preferredPosition}
-        listTitle={listTitle}
-        allowMultiple={allowMultiple}
-        contentAfter={spinnerMarkup}
-        actionsBefore={conditionalAction}
-        onSelect={onSelect}
-        onEndReached={onLoadMoreResults}
-        emptyState={emptyState}
-      />
-    );
-  }
+  return (
+    <ComboBox
+      id={id}
+      options={conditionalOptions}
+      selected={selected}
+      textField={textField}
+      preferredPosition={preferredPosition}
+      listTitle={listTitle}
+      allowMultiple={allowMultiple}
+      contentAfter={spinnerMarkup}
+      actionsBefore={conditionalAction}
+      onSelect={onSelect}
+      onEndReached={onLoadMoreResults}
+      emptyState={emptyState}
+    />
+  );
 }
 
-// Use named export once withAppProvider is refactored away
-// eslint-disable-next-line import/no-default-export
-export default withAppProvider<AutocompleteProps>()(Autocomplete);
+Autocomplete.TextField = TextField;
+Autocomplete.ComboBox = ComboBox;

src/components/Autocomplete/index.ts

@@ -1,3 +1 @@
-import Autocomplete, {AutocompleteProps} from './Autocomplete';
-
-export {Autocomplete, AutocompleteProps};
+export {Autocomplete, AutocompleteProps} from './Autocomplete';