Polaris autocomponents

The Polaris autocomponents are a set of components that are styled using Shopify's Polaris design system and are designed to be used in Shopify apps. These components have the base autocomponent props and the Polaris design system overrides.

For more information on the autocomponents, see the @gadgetinc/react/auto references.

Installing

If you did not select the Shopify app type when creating your app, you will need to install Shopify Polaris and set up the Polaris provider and stylesheet in your app.

Install the following dependencies:

install the Polaris library and the latest version of @gadgetinc/react
yarn add @shopify/polaris @shopify/polaris-icons

Now import the Polaris provider and required style.css file. Add the following imports to the top of your web/components/App.jsx file:

web/components/App.jsx

React

import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/build/esm/styles.css";

import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/build/esm/styles.css";

Then replace your Layout component in the same file with the following code to make use of the Polaris provider:

web/components/App.jsx

React

1const Layout = () => {
2  const navigate = useNavigate();
3
4  return (
5    <AppProvider>
6      <Provider api={api} navigate={navigate} auth={window.gadgetConfig.authentication}>
7        <Header />
8        <div className="app">
9          <div className="app-content">
10            <div className="main">
11              <Outlet />
12            </div>
13          </div>
14        </div>
15      </Provider>
16    </AppProvider>
17  );
18};

1const Layout = () => {
2  const navigate = useNavigate();
3
4  return (
5    <AppProvider>
6      <Provider api={api} navigate={navigate} auth={window.gadgetConfig.authentication}>
7        <Header />
8        <div className="app">
9          <div className="app-content">
10            <div className="main">
11              <Outlet />
12            </div>
13          </div>
14        </div>
15      </Provider>
16    </AppProvider>
17  );
18};

Usage

Import Shopify Polaris autocomponents from @gadgetinc/react/auto/polaris:

React

import { AutoForm, AutoTable, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";

import { AutoForm, AutoTable, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";

For example, to use the AutoForm component:

React

1import { AutoForm, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
2import { api } from "../api";
3
4export default function () {
5  return (
6    <AutoForm action={api.widget.create}>
7      <AutoInput field="name" />
8      <AutoSubmit />
9    </AutoForm>
10  );
11}

1import { AutoForm, AutoInput, AutoSubmit } from "@gadgetinc/react/auto/polaris";
2import { api } from "../api";
3
4export default function () {
5  return (
6    <AutoForm action={api.widget.create}>
7      <AutoInput field="name" />
8      <AutoSubmit />
9    </AutoForm>
10  );
11}

Input components map 1:1 to the corresponding Polaris input and can accept any parameters that the Polaris input could:

example using Polaris params on an AutoStringInput

React

1() => (
2  <AutoForm action={api.widget.create}>
3    <AutoStringInput field="name" selectTextOnFocus clearButton />
4    <AutoSubmit />
5  </AutoForm>
6);

1() => (
2  <AutoForm action={api.widget.create}>
3    <AutoStringInput field="name" selectTextOnFocus clearButton />
4    <AutoSubmit />
5  </AutoForm>
6);

To render a custom popup when a user selects an action, create a custom action and use it to show a modal:

action with a custom render

React

1import { AutoTable } from "@gadgetinc/react/auto/polaris";
2import { api } from "../api";
3import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";
4
5export default function () {
6  const shopify = useAppBridge();
7
8  return (
9    <>
10      <AutoTable
11        model={api.product}
12        actions={[
13          {
14            label: "Export",
15            action: async (records) => {
16              // show the modal when the action is clicked
17              shopify.modal.show("my-modal");
18            },
19          },
20        ]}
21      />
22      {/** use the Shopify AppBridge modal component */}
23      <Modal id="my-modal">
24        <p>Message</p>
25        <TitleBar title="My modal">
26          <button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
27        </TitleBar>
28      </Modal>
29    </>
30  );
31}

1import { AutoTable } from "@gadgetinc/react/auto/polaris";
2import { api } from "../api";
3import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";
4
5export default function () {
6  const shopify = useAppBridge();
7
8  return (
9    <>
10      <AutoTable
11        model={api.product}
12        actions={[
13          {
14            label: "Export",
15            action: async (records) => {
16              // show the modal when the action is clicked
17              shopify.modal.show("my-modal");
18            },
19          },
20        ]}
21      />
22      {/** use the Shopify AppBridge modal component */}
23      <Modal id="my-modal">
24        <p>Message</p>
25        <TitleBar title="My modal">
26          <button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
27        </TitleBar>
28      </Modal>
29    </>
30  );
31}

If you want to use AutoComponents within a modal, you should make sure to add the AppProvider component from Shopify's Polaris library as a wrapper for the component. Without the app provider, popovers and dropdowns won't render properly.

action with a custom render

React

1import { AutoTable } from "@gadgetinc/react/auto/polaris";
2import { api } from "../api";
3import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";
4import { AppProvider, Button } from "@shopify/polaris";
5
6export default function () {
7  const shopify = useAppBridge();
8
9  return (
10    <>
11      <Modal id="my-modal">
12        <AppProvider>
13          <TitleBar title="My modal">
14            <button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
15          </TitleBar>
16          <AutoTable model={api.product} />
17        </AppProvider>
18      </Modal>
19      <Button onClick={() => shopify.modal.show("my-modal")}>Show modal</Button>
20    </>
21  );
22}

1import { AutoTable } from "@gadgetinc/react/auto/polaris";
2import { api } from "../api";
3import { Modal, TitleBar, useAppBridge } from "@shopify/app-bridge-react";
4import { AppProvider, Button } from "@shopify/polaris";
5
6export default function () {
7  const shopify = useAppBridge();
8
9  return (
10    <>
11      <Modal id="my-modal">
12        <AppProvider>
13          <TitleBar title="My modal">
14            <button onClick={() => shopify.modal.hide("my-modal")}>Close</button>
15          </TitleBar>
16          <AutoTable model={api.product} />
17        </AppProvider>
18      </Modal>
19      <Button onClick={() => shopify.modal.show("my-modal")}>Show modal</Button>
20    </>
21  );
22}

For more information on passing input to modals, see Shopify's documentation on AppBridge modals.

Polaris autocomponents

Installing

Usage

Custom action Polaris modal

Was this page helpful?