[ThemeProvider] Remove componentWillReceiveProps

[AndrewMusgrave]

WHY are these changes introduced?

Remove deprecated lifecycle methods. This is in preparation for using the new context api.

WHAT is this pull request doing?

Storing context on state, getChildContext will be ran every time state changes and making use of componentDidUpdate.

How to 🎩

• try out theming examples
• https://github.com/Shopify/polaris-react-deprecated/pull/1947 has quite a few playgrounds from when the theme provider was originally added

[AndrewMusgrave]

Additional coverage to bring us to 💯

[chloerice]

🎩 👀 solid 🎉👍

@alex-page added you because I figure you might have/want a bit more context on the current theming stuff. Here's some playground code that updates and combines the different ones from the old PR Andrew linked to (you can checkout tp-rm-cwrp-w-latest-master if you want to tophat in the new storybook, I just couldn't go back to the pre-v5 version 😅):

Click to view collapsed playground code

import * as React from 'react';
import {
  Page,
  AppProvider,
  ThemeProvider,
  TopBar,
  Frame,
  Card,
  ActionList,
  Button,
  ChoiceList,
} from '../src';

interface State {}

enum ThemeChoice {
  AppProviderThemed,
  ThemeProviderThemed,
  AppAndThemeProviderThemed,
  AppProviderThemedSubscription,
  ThemeProviderThemedSubscription,
}

export default class Playground extends React.Component<never, State> {
  state = {
    backgroundOne: '#00848E',
    backgroundTwo: '#BADA55',
    selected: [ThemeChoice.AppProviderThemed],
  };

  handleChange = (selected) => {
    this.setState({selected});
  };

  render() {
    const {backgroundOne, backgroundTwo, selected} = this.state;

    const topBarMarkup = (
      <TopBar
        showNavigationToggle
        userMenu={
          <TopBar.UserMenu
            open={false}
            actions={[
              {
                items: [
                  {content: 'Your profile', icon: 'profile'},
                  {content: 'Log out', icon: 'logOut'},
                ],
              },
              {
                items: [
                  {content: 'Shopify help center'},
                  {content: 'Community forums'},
                ],
              },
            ]}
            name="Ellen Ochoa"
            detail="Ochoa Crafts"
            initials="EO"
            onToggle={() => {}}
          />
        }
        searchField={
          <TopBar.SearchField
            onChange={() => {}}
            value=""
            placeholder="Search"
          />
        }
      />
    );

    const themeApp = {
      colors: {
        topBar: {
          background: '#108043',
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const themeTheme = {
      colors: {
        topBar: {
          background: '#BADA55',
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const themeSubscriptionOne = {
      colors: {
        topBar: {
          background: backgroundOne,
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const themeSubscriptionTwo = {
      colors: {
        topBar: {
          background: backgroundTwo,
        },
      },
      logo: {
        width: 130,
        topBarSource:
          'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg',
      },
    };

    const choiceList = (
      <ChoiceList
        title="Choose how to theme"
        choices={[
          {
            label: 'App provider themed',
            value: ThemeChoice.AppProviderThemed,
          },
          {
            label: 'Theme provider themed',
            value: ThemeChoice.ThemeProviderThemed,
          },
          {
            label: 'App provider and theme provider themed',
            value: ThemeChoice.AppAndThemeProviderThemed,
            helpText: 'Theme provider theme overrides app provider theme',
          },
          {
            label: 'App provider themed with subscription',
            value: ThemeChoice.AppProviderThemedSubscription,
            renderChildren: (isSelected) => {
              return (
                isSelected && (
                  <Button
                    onClick={() => {
                      this.setState(({backgroundOne}) => ({
                        backgroundOne:
                          backgroundOne === '#50248F' ? '#00848E' : '#50248F',
                      }));
                    }}
                  >
                    Toggle theme
                  </Button>
                )
              );
            },
          },
          {
            label: 'Theme provider themed with subscription',
            value: ThemeChoice.ThemeProviderThemedSubscription,
            renderChildren: (isSelected) => {
              return (
                isSelected && (
                  <Button
                    onClick={() => {
                      this.setState(({backgroundTwo}) => ({
                        backgroundTwo:
                          backgroundTwo === '#50248F' ? '#BADA55' : '#50248F',
                      }));
                    }}
                  >
                    Toggle theme
                  </Button>
                )
              );
            },
          },
        ]}
        selected={selected}
        onChange={this.handleChange}
      />
    );

    const appProviderThemed = selected[0] === ThemeChoice.AppProviderThemed && (
      <AppProvider theme={themeApp}>
        <Frame topBar={topBarMarkup}>
          <Page title="Playground">{choiceList}</Page>
        </Frame>
      </AppProvider>
    );

    const themeProviderThemed = selected[0] ===
      ThemeChoice.ThemeProviderThemed && (
      <AppProvider>
        <ThemeProvider theme={themeTheme}>
          <Frame topBar={topBarMarkup}>
            <Page title="Playground">{choiceList}</Page>
          </Frame>
        </ThemeProvider>
      </AppProvider>
    );

    const appAndThemeProviderThemed = selected[0] ===
      ThemeChoice.AppAndThemeProviderThemed && (
      <AppProvider theme={themeApp}>
        <ThemeProvider theme={themeTheme}>
          <Frame topBar={topBarMarkup}>
            <Page title="Playground">{choiceList}</Page>
          </Frame>
        </ThemeProvider>
      </AppProvider>
    );

    const appProviderThemedSubscription = selected[0] ===
      ThemeChoice.AppProviderThemedSubscription && (
      <AppProvider theme={themeSubscriptionOne}>
        <Frame topBar={topBarMarkup}>
          <Page title="Playground">{choiceList}</Page>
        </Frame>
      </AppProvider>
    );

    const themeProviderThemedSubscription = selected[0] ===
      ThemeChoice.ThemeProviderThemedSubscription && (
      <AppProvider>
        <ThemeProvider theme={themeSubscriptionTwo}>
          <Frame topBar={topBarMarkup}>
            <Page title="Playground">{choiceList}</Page>
          </Frame>
        </ThemeProvider>
      </AppProvider>
    );

    return (
      <React.Fragment>
        {appProviderThemed}
        {themeProviderThemed}
        {appAndThemeProviderThemed}
        {appProviderThemedSubscription}
        {themeProviderThemedSubscription}
      </React.Fragment>
    );
  }
}

[alex-page]

Thanks @chloerice and great work @AndrewMusgrave.

I am interested why there is a slight delay in changing the search bar colour. I feel like we could look into that in the future though.

[AndrewMusgrave]

I am interested why there is a slight delay in changing the search bar colour. I feel like we could look into that in the future though.

Without pulling this down to check, I'm pretty sure it's our animation that causing the delay.

[AndrewMusgrave]

Thanks for putting all the examples into one @chloerice , it was a great idea ❤️