Update context

UNRELEASED-V4.md

@@ -24,6 +24,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Code quality
 
+- Updated all our context files to export react context rather than a provider and consumer ([#1459](https://github.com/Shopify/polaris-react/pull/1459))
 - Upgraded the `Autocomplete` component from legacy context API to use createContext ([#1403](https://github.com/Shopify/polaris-react/pull/1403))
 - Updated `ThemeProvider` to use the new context api ([#1396](https://github.com/Shopify/polaris-react/pull/1396))
 - Updated `AppProvider` to no longer use `componentWillReceiveProps`([#1255](https://github.com/Shopify/polaris-react/pull/1255))

src/components/AppProvider/AppProvider.tsx

@@ -5,8 +5,8 @@ import {
   ScrollLockManager,
   createAppProviderContext,
 } from './utilities';
-import AppProviderContext from './Context';
-import {AppProviderProps, AppProviderContextType} from './types';
+import AppProviderContext, {AppProviderContextType} from './context';
+import {AppProviderProps} from './types';
 
 interface State {
   context: AppProviderContextType;
@@ -75,16 +75,14 @@ export default class AppProvider extends React.Component<Props, State> {
     });
   }
 
-  get getContext(): AppProviderContextType {
-    return this.state.context;
-  }
-
   render() {
-    const {theme = {logo: null}} = this.props;
+    const {theme = {logo: null}, children} = this.props;
+    const {context} = this.state;
+
     return (
-      <AppProviderContext.Provider value={this.getContext}>
+      <AppProviderContext.Provider value={context}>
         <ThemeProvider theme={theme}>
-          {React.Children.only(this.props.children)}
+          {React.Children.only(children)}
         </ThemeProvider>
       </AppProviderContext.Provider>
     );

src/components/AppProvider/context.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {ClientApplication} from '@shopify/app-bridge';
+import createPolarisContext from './utilities/createPolarisContext';
+import {Intl, Link, StickyManager, ScrollLockManager} from './utilities';
+
+export interface AppProviderContextType {
+  intl: Intl;
+  link: Link;
+  stickyManager: StickyManager;
+  scrollLockManager: ScrollLockManager;
+  appBridge?: ClientApplication<{}>;
+}
+
+const AppProviderContext = React.createContext<AppProviderContextType>(
+  createPolarisContext(),
+);
+
+export default AppProviderContext;

src/components/AppProvider/index.ts

@@ -13,6 +13,6 @@ export {
   ComplexReplacementDictionary,
   CreateAppProviderContext,
 } from './utilities';
-export {AppProviderProps as Props, AppProviderContextType} from './types';
-export {default as AppProviderContext} from './Context';
+export {AppProviderProps as Props} from './types';
+export {default as AppProviderContext, AppProviderContextType} from './context';
 export {default} from './AppProvider';

src/components/AppProvider/tests/AppProvider.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import AppProviderContext from '../Context';
+import AppProviderContext from '../context';
 import AppProvider from '../AppProvider';
 import {mountWithAppProvider} from '../../../test-utilities';
 

src/components/AppProvider/types.ts

@@ -1,13 +1,6 @@
-import {ClientApplication} from '@shopify/app-bridge';
 import {LinkLikeComponent} from '../UnstyledLink';
 import {Theme} from '../ThemeProvider';
-import {
-  Intl,
-  Link,
-  StickyManager,
-  ScrollLockManager,
-  TranslationDictionary,
-} from './utilities';
+import {TranslationDictionary} from './utilities';
 
 export interface AppProviderProps {
   /** A locale object or array of locale objects that overrides default translations */
@@ -27,11 +20,3 @@ export interface AppProviderProps {
   /** Custom logos and colors provided to select components */
   theme?: Theme;
 }
-
-export interface AppProviderContextType {
-  intl: Intl;
-  link: Link;
-  stickyManager: StickyManager;
-  scrollLockManager: ScrollLockManager;
-  appBridge?: ClientApplication<{}>;
-}

src/components/AppProvider/utilities/createAppProviderContext/createAppProviderContext.ts

@@ -3,7 +3,8 @@ import createApp, {
   LifecycleHook,
   DispatchActionHook,
 } from '@shopify/app-bridge';
-import {AppProviderProps, AppProviderContextType} from '../../types';
+import {AppProviderContextType} from '../../context';
+import {AppProviderProps} from '../../types';
 import StickyManager from '../StickyManager';
 import ScrollLockManager from '../ScrollLockManager';
 import Intl from '../Intl';

src/components/AppProvider/utilities/createPolarisContext/createPolarisContext.ts

@@ -1,7 +1,7 @@
 import {PolarisContext} from '../../../types';
 import {
   createThemeContext,
-  ThemeProviderContext as CreateThemeContext,
+  ThemeProviderContextType as CreateThemeContext,
 } from '../../../ThemeProvider';
 import {AppProviderProps} from '../../types';
 import StickyManager from '../StickyManager';

src/components/AppProvider/utilities/withAppProvider/tests/withAppProvider.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {mount} from 'enzyme';
-import AppProviderContext from '../../../Context';
+import AppProviderContext from '../../../context';
 import withAppProvider from '../withAppProvider';
 
 describe('withAppProvider', () => {

src/components/AppProvider/utilities/withAppProvider/withAppProvider.tsx

@@ -6,11 +6,11 @@ import Link from '../Link';
 import StickyManager from '../StickyManager';
 import ScrollLockManager from '../ScrollLockManager';
 import {
+  ThemeProviderContextType,
   ThemeProviderContext,
-  Consumer as ThemeProviderConsumer,
 } from '../../../ThemeProvider';
 import {PolarisContext} from '../../../types';
-import AppProviderContext from '../../Context';
+import AppProviderContext from '../../context';
 
 export type ReactComponent<P, C> =
   | React.ComponentClass<P> & C
@@ -22,7 +22,7 @@ export interface WithAppProviderProps {
     link: Link;
     stickyManager: StickyManager;
     scrollLockManager: ScrollLockManager;
-    theme?: ThemeProviderContext;
+    theme?: ThemeProviderContextType;
     appBridge?: ClientApplication<{}>;
   };
 }
@@ -72,7 +72,7 @@ export default function withAppProvider<OwnProps>({
           <AppProviderContext.Consumer>
             {(polaris) => {
               return (
-                <ThemeProviderConsumer>
+                <ThemeProviderContext.Consumer>
                   {(polarisTheme) => {
                     const polarisContext: PolarisContext = {
                       ...polaris,
@@ -94,7 +94,7 @@ export default function withAppProvider<OwnProps>({
                       />
                     );
                   }}
-                </ThemeProviderConsumer>
+                </ThemeProviderContext.Consumer>
               );
             }}
           </AppProviderContext.Consumer>

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -9,9 +9,9 @@ import ActionList from '../../../ActionList';
 import Popover from '../../../Popover';
 import {PreferredPosition} from '../../../PositionedOverlay';
 import {ActionListItemDescriptor, Key} from '../../../../types';
-import {ComboBoxContext} from '../types';
 import KeypressListener from '../../../KeypressListener';
-import {TextField, Provider} from './components';
+import ComboBoxContext from './context';
+import {TextField} from './components';
 
 import styles from './ComboBox.scss';
 
@@ -119,13 +119,6 @@ export default class ComboBox extends React.PureComponent<Props, State> {
     HTMLDivElement
   > = React.createRef();
 
-  get getContext(): ComboBoxContext {
-    return {
-      comboBoxId: this.state.comboBoxId,
-      selectedOptionId: this.selectedOptionId,
-    };
-  }
-
   componentDidMount() {
     const {options, actionsBefore, actionsAfter} = this.props;
     const comboBoxId = this.getComboBoxId();
@@ -206,6 +199,12 @@ export default class ComboBox extends React.PureComponent<Props, State> {
       onEndReached,
       emptyState,
     } = this.props;
+    const {
+      comboBoxId,
+      navigableOptions,
+      selectedOptions,
+      popoverActive,
+    } = this.state;
 
     const actionsBeforeMarkup = actionsBefore &&
       actionsBefore.length > 0 && (
@@ -221,9 +220,9 @@ export default class ComboBox extends React.PureComponent<Props, State> {
       <OptionList
         role="presentation"
         optionRole="option"
-        options={filterForOptions(this.state.navigableOptions)}
+        options={filterForOptions(navigableOptions)}
         onChange={this.selectOptions}
-        selected={this.state.selectedOptions}
+        selected={selectedOptions}
         title={listTitle}
         allowMultiple={allowMultiple}
       />
@@ -240,14 +239,19 @@ export default class ComboBox extends React.PureComponent<Props, State> {
       options.length === 0 &&
       emptyState && <div className={styles.EmptyState}>{emptyState}</div>;
 
+    const context = {
+      comboBoxId,
+      selectedOptionId: this.selectedOptionId,
+    };
+
     return (
-      <Provider value={this.getContext}>
+      <ComboBoxContext.Provider value={context}>
         <div
           onClick={this.handleClick}
           role="combobox"
-          aria-expanded={this.state.popoverActive}
-          aria-owns={this.state.comboBoxId}
-          aria-controls={this.state.comboBoxId}
+          aria-expanded={popoverActive}
+          aria-owns={comboBoxId}
+          aria-controls={comboBoxId}
           aria-haspopup
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
@@ -268,14 +272,14 @@ export default class ComboBox extends React.PureComponent<Props, State> {
           />
           <Popover
             activator={textField}
-            active={this.state.popoverActive}
+            active={popoverActive}
             onClose={this.handlePopoverClose}
             preferredPosition={preferredPosition}
             fullWidth
             preventAutofocus
           >
             <div
-              id={this.state.comboBoxId}
+              id={comboBoxId}
               role="listbox"
               aria-multiselectable={allowMultiple}
             >
@@ -289,7 +293,7 @@ export default class ComboBox extends React.PureComponent<Props, State> {
             </div>
           </Popover>
         </div>
-      </Provider>
+      </ComboBoxContext.Provider>
     );
   }
 

src/components/Autocomplete/components/ComboBox/components/TextField/TextField.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 
-import {ComboBoxContext} from '../../../types';
+import ComboBoxContext from '../../context';
 import BaseTextField, {Props as TextFieldProps} from '../../../../../TextField';
-import {Consumer} from '../Context';
 
 export default function TextField(props: TextFieldProps) {
   return (
-    <Consumer>
-      {({selectedOptionId, comboBoxId}: ComboBoxContext) => (
+    <ComboBoxContext.Consumer>
+      {({selectedOptionId, comboBoxId}) => (
         <BaseTextField
           {...props}
           autoComplete={false}
@@ -16,6 +15,6 @@ export default function TextField(props: TextFieldProps) {
           ariaControls={comboBoxId}
         />
       )}
-    </Consumer>
+    </ComboBoxContext.Consumer>
   );
 }

src/components/Autocomplete/components/ComboBox/components/index.ts

@@ -1,2 +1 @@
 export {default as TextField} from './TextField';
-export {Provider, Consumer} from './Context';

src/components/Autocomplete/components/ComboBox/context.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface ComboBoxContextType {
+  comboBoxId?: string;
+  selectedOptionId?: string;
+}
+
+const ComboBoxContext = React.createContext<ComboBoxContextType>({});
+
+export default ComboBoxContext;

src/components/Banner/Banner.tsx

@@ -20,7 +20,9 @@ import Heading from '../Heading';
 import ButtonGroup from '../ButtonGroup';
 import UnstyledLink from '../UnstyledLink';
 import Icon, {Props as IconProps} from '../Icon';
-import {Consumer, WithinContentContext} from '../WithinContentContext';
+import WithinContentContext, {
+  WithinContentContextType,
+} from '../WithinContentContext';
 import withContext from '../WithContext';
 import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 
@@ -45,7 +47,7 @@ export interface Props {
   onDismiss?(): void;
 }
 
-export type CombinedProps = Props & WithContextTypes<WithinContentContext>;
+export type CombinedProps = Props & WithContextTypes<WithinContentContextType>;
 
 export class Banner extends React.PureComponent<CombinedProps, never> {
   render() {
@@ -206,6 +208,8 @@ function secondaryActionFrom(action: Action) {
 }
 
 export default compose<Props>(
-  withContext<Props, WithAppProviderProps, WithinContentContext>(Consumer),
+  withContext<Props, WithAppProviderProps, WithinContentContextType>(
+    WithinContentContext.Consumer,
+  ),
   withAppProvider(),
 )(Banner);

src/components/Banner/tests/Banner.test.tsx

@@ -10,7 +10,7 @@ import {
 import {mountWithAppProvider} from 'test-utilities';
 import {Button, Icon, UnstyledLink, Heading} from 'components';
 import Banner from '..';
-import {Provider} from '../../WithinContentContext';
+import WithinContentContext from '../../WithinContentContext';
 
 describe('<Banner />', () => {
   it('renders a title', () => {
@@ -100,15 +100,15 @@ describe('<Banner />', () => {
   };
 
   const bannerWithContentContext = mountWithAppProvider(
-    <Provider value={mockContext}>
+    <WithinContentContext.Provider value={mockContext}>
       <Banner
         action={{
           content: 'Primary action',
         }}
       >
         Some content
       </Banner>
-    </Provider>,
+    </WithinContentContext.Provider>,
   );
 
   it('renders a slim button with contentContext', () => {