@shopify/polaris-dev

Polaris Experimental

An extended set of React components for use with the public Polaris React package.

Components

Name	Purpose	Links
NotificationBanner	The notification banner is an abstraction layer on top of Polaris' <Banner /> component, that handles both message strings, and error lists.
ContextualNotificationBanner	This component takes care of rendering notification banners list comprised of messages or errors being provided as props.

Installation

yarn add @shopify/polaris-dev

Usage

1. Import the CSS directly into your project (requires build tooling that can load CSS):

import '@shopify/polaris-dev/styles.css';

2. Include the translations and any of the provided components in your project. Note that polaris-dev uses a different set of translations than Polaris, so you have to make sure to import both and pass one set to AppProvider and another to PolarisNextProvider:

import enTranslations from '@shopify/polaris/locales/en.json';
import polarisNextEnTranslations from '@shopify/polaris-dev/locales/en.json';

import {PolarisNextProvider, SampleComponent} from '@shopify/polaris-dev';
import {AppProvider, Layout} from '@shopify/polaris';

3. Tell React to render the element in the DOM:

ReactDOM.render(
  <AppProvider i18n={enTranslations}>
    <PolarisNextProvider i18n={polarisNextEnTranslations}>
      <Layout>
        <Layout.Section>
          <SampleComponent />
        </Layout.Section>
      </Layout>
    </PolarisNextProvider>
  </AppProvider>,
  document.querySelector('#app'),
);

Contributing

Everyone at Shopify is invited to contribute to packages in Patchwork, and to cut releases. Pull requests are welcome. Ship fast, but Shopify’s craft standards for code quality and code review apply.

Development

The Patchwork project uses Lerna to manage multiple packages. The following commands can be run by changing to the package directory (cd packages/polaris-dev) or from the root with lerna run --scope @shopify/polaris-dev COMMAND).

We use Storybook to create a simple, hot-reloading playground so get instant feedback as you work.

1. Edit the playground/Playground.tsx file to import the components you are working on
2. Run yarn start.

Please be aware that you won't be able to commit any changes to Playground.tsx by lint-staged setup. Don't overwrite this setup, as this file needs to remain pristine for other developers to use.

Handling translations

You can add translated strings to your components by using the useI18n hook from the utilities folder:

import {useI18n} from '../../utilities/i18n';

export default function SampleComponent() {
  const intl = useI18n();

  return <p>{intl.translate('PolarisNext.SampleComponent.text')}</p>;
}

Then include the translation string in the corresponding JSON in the locales folder.

{
  "PolarisNext": {
    "SampleComponent": {
      "text": "Some translated text"
    }
  }
}

Testing in a consuming project

NOTE: this may not work yet

1. Build the polaris-dev package with:

yarn build

2. From the consuming project, run:

yarn add file:PATH_TO_BUILD

Releases

Release using patchwork release flow