Esc/polaris-vue pre-release

Current target: Shopify/polaris v1.9.1

Polaris UI components re-implemented in Vue 2. All functionality has been rebuilt from scratch to match the React version, only thing imported directly is the stylesheet and a few snippets of the math / util code.

Project aim is to have complete feature parity with the React version, only making small tweaks in order to stick to Vue conventions -- developers familiar with Vue and the React/Sass Polaris docs should be comfortable using these components without further explaination.

Prop names have been kept the same, but now follow Vue conventions, (i.e. help-text in HTML vs. helpText in JS).

Props that supported ReactNode in Polaris have been implemented as both a string prop and as a slot. For example, to set the help text on a checkbox, you can either use :help-text="warning+'!'" or add <p slot="helpText"><strong>{{ warning }}</strong>!</p> inside the component.
Overridden slots always takes priority over the props.
The children "prop" referenced in the Polaris docsisn't used: just add your content as a child of the component.

The only component with significant changes is the resource list. In the React library, it accepts an item render function as a prop -- in Polaris-Vue we use a scoped slot instead.

PolarisVue-specific

<polaris-vue-fade-transition>

Hi!

<polaris-vue-fade-up-transition>

Hi!

<polaris-vue-collapse-transition>

Hi!

Actions

Actions can be used in many places. They can have icons, on-click callbacks, links, accessibility labels, and affect the disabled & destructive state of their UI component.

Using Action in <polaris-setting-toggle>

This setting is enabled.

<polaris-setting-toggle 
    enabled
    :action="{
        content: 'Disable', 
        onAction: testAlert
    }">
    This setting is <polaris-text-style variation="strong">enabled</polaris-text-style>.
</polaris-setting-toggle>

This setting is enabled.

<polaris-setting-toggle 
        enabled
        :action="{
            content: 'Disable', 
            onAction: testAlert,
            icon: '&lt;svg class=&quot;Polaris-Icon__Svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'
        }">
        This setting is <polaris-text-style variation="strong">enabled</polaris-text-style>.
    </polaris-setting-toggle>
</div>

This setting is enabled.

<polaris-setting-toggle 
    enabled
    :action="{
        content: 'Disable', 
        onAction: testAlert,
        destructive: true
    }">
    This setting is <polaris-text-style variation="strong">enabled</polaris-text-style>.
</polaris-setting-toggle>

This setting is enabled.

<polaris-setting-toggle 
    enabled
    :action="{
        content: 'Disable', 
        onAction: testAlert,
        disabled: true
    }">
    This setting is <polaris-text-style variation="strong">enabled</polaris-text-style>.
</polaris-setting-toggle>

Undocumented / Misc

<polaris-text-container>

Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text containerText container

<polaris-text-container>
     Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text containerText container
</polaris-text-container>

<polaris-text-container spacing="loose">
     Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text container Text containerText container
</polaris-text-container>

<polaris-text-style>

Normal text

<polaris-text-style>
    Normal text
</polaris-text-style>

Subdued text

<polaris-text-style variation="subdued">
    Subdued text
</polaris-text-style>

Strong text

<polaris-text-style variation="strong">
    Strong text
</polaris-text-style>

Positive text

<polaris-text-style variation="positive">
    Positive text
</polaris-text-style>

Negative text

<polaris-text-style variation="negative">
    Negative text
</polaris-text-style>

<polaris-setting-action>

Setting action content

<polaris-setting-action :action="{content:'Products', url: '//google.com?1'}">
    <p slot="children">Setting action content</p>
</polaris-setting-action>

Setting action content

Action

<polaris-setting-action>
    <p slot="children">Setting action content</p>
    <polaris-button slot="action" primary @click="testAlert">
        Action
    </polaris-button>
</polaris-setting-action>

<polaris-image>

<polaris-image src="https://vuejs.org/images/logo.png" alt="normal image">
</polaris-image>

<polaris-image src="https://vuejs.org/images/logo.png" 
               alt="image with source sets"
               :source-set="[
                   { source: 'https://vuejs.org/images/logo.png?1', 
                     descriptor: '800w' },
                   { source: 'https://coligo.io/vuejs-the-basics/cover-850x416.jpg?2', 
                     descriptor: '1200w' },
               ]">
</polaris-image>

<polaris-unstyled-link>

This is an unstyled link.

<polaris-unstyled-link url="http://google.com/" :external="true">
    This is an unstyled link.
</polaris-unstyled-link>

<polaris-breadcrumbs>

<polaris-breadcrumbs :breadcrumbs="[
                        {content:'Products', url: '//google.com?1'},
                        {content:'Jar with lid', url: '//google.com?2'}
                     ]">
</polaris-breadcrumbs>

Actions

<polaris-account-connection>

By clicking Connect, you agree to accept Sample App's Terms and conditions. You'll pay a commission rate of 15% on sales made through Example App.

<polaris-account-connection 
    title="Example app"
    :action="{content: 'Connect', onAction: testAlert}"
    details="No account connected">
    <p>
        By clicking Connect, you agree to accept Sample App's 
        <polaris-link url="https://google.com/">Terms and conditions</polaris-link>. 
        You'll pay a commission rate of 15% on sales made through Example App.
    </p>
</polaris-account-connection>

<polaris-account-connection 
    title="Example app"
    :action="{content: 'Disconnect', onAction: testAlert}"
    details="Connected"
    connected
    avatar-url="https://vuejs.org/images/logo.png"
    terms-of-service="You'll pay a commission rate of 15% on sales made through Example App.">
</polaris-account-connection>

Example app

By clicking Connect, you agree to accept Sample App's Terms and conditions. You'll pay a commission rate of 15% on sales made through Example App.

Connected example

<polaris-account-connection 
    :action="{content: 'Disconnect', onAction: testAlert}"
    connected
    avatar-url="https://vuejs.org/images/logo.png">
    <div slot="title">
        Example <strong>app</strong>
    </div>
    <p slot="termsOfService">
        By clicking Connect, you agree to accept Sample App's 
        <polaris-link url="https://google.com/">Terms and conditions</polaris-link>. 
        You'll pay a commission rate of 15% on sales made through Example App.
    </p>
    <span slot="details">
        Connected <i>example</i>
    </span>
</polaris-account-connection>

<polaris-action-list>

 <polaris-action-list :items="[
    {content: 'Import file', onAction: testAlert},
    {content: 'Export file', icon:'&lt;svg class=&quot;Polaris-Icon__Svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;&lt;/svg&gt;' }
]"></polaris-action-list>

<polaris-action-list :sections="[
    {title: 'Section 1', items: [
        {content: 'Import file', onAction: testAlert},
        {content: 'Export file', onAction: testAlert},
    ]},
    {title: 'Section 2', items: [
        {content: 'Import file A', onAction: testAlert},
        {content: 'Export file B', onAction: testAlert},
    ]},
]"></polaris-action-list>

<polaris-button>

Hello World!

<polaris-button primary @click="testAlert">
    Hello World!
</polaris-button>

HTML Content

<polaris-button outline>
    <b><i>HTML</i></b> Content
</polaris-button>

HTML Content

<polaris-button disclosure>
    <b><i>HTML</i></b> Content
</polaris-button>

HTML Content

<polaris-button destructive>
    <b><i>HTML</i></b> Content
</polaris-button>

HTML Content

<polaris-button loading>
    <b><i>HTML</i></b> Content
</polaris-button>

HTML Content

<polaris-button loading primary>
    <b><i>HTML</i></b> Content
</polaris-button>

<polaris-button-group>

Button 1

Button 2

Button 3

<polaris-button-group>
    <polaris-button-group-item>
        <polaris-button>Button 1</polaris-button>
    </polaris-button-group-item>
    <polaris-button-group-item>
        <polaris-button>Button 2</polaris-button>
    </polaris-button-group-item>
    <polaris-button-group-item>
        <polaris-button>Button 3</polaris-button>
    </polaris-button-group-item>
</polaris-button-group>

Button 1

Button 2

Button 3

<polaris-button-group segmented>
    <polaris-button-group-item>
        <polaris-button>Button 1</polaris-button>
    </polaris-button-group-item>
    <polaris-button-group-item>
        <polaris-button>Button 2</polaris-button>
    </polaris-button-group-item>
    <polaris-button-group-item>
        <polaris-button>Button 3</polaris-button>
    </polaris-button-group-item>
</polaris-button-group>

Button 1

Button 2

Button 3

<polaris-button-group>
    <polaris-button slot="1">Button 1</polaris-button>
    <polaris-button slot="2">Button 2</polaris-button>
    <polaris-button slot="3">Button 3</polaris-button>
</polaris-button-group>

Button 1

Button 2

Button 3

<polaris-button-group segmented>
    <polaris-button slot="1">Button 1</polaris-button>
    <polaris-button slot="2">Button 2</polaris-button>
    <polaris-button slot="3">Button 3</polaris-button>
</polaris-button-group>

<polaris-setting-toggle>

This setting is disabled.

<polaris-setting-toggle :action="{content: 'Enabled', onAction: testAlert}">
    This setting is <polaris-text-style variation="strong">disabled</polaris-text-style>.
</polaris-setting-toggle>

This setting is enabled.

<polaris-setting-toggle :action="{content: 'Disabled', onAction: testAlert}" enabled>
    This setting is <polaris-text-style variation="strong">enabled</polaris-text-style>.
</polaris-setting-toggle>

Images and icons

<polaris-avatar>

<polaris-avatar 
    source="https://vuejs.org/images/logo.png"
    accessibility-label="avatar test">
</polaris-avatar>

<polaris-avatar 
    initials="ESC"
    accessibility-label="avatar test">
</polaris-avatar>

<polaris-avatar 
    customer
    name="Kiran Price"
    size="large"
    accessibility-label="avatar test">
</polaris-avatar>

<polaris-avatar 
    customer
    name="John Smith"
    size="small"
    accessibility-label="avatar test">
</polaris-avatar>

<polaris-badge>

Fulflled

<polaris-badge>
    Fulflled
</polaris-badge>

Published

<polaris-badge status="info">
    Published
</polaris-badge>

SSL Unavailable

<polaris-badge status="warning">
    SSL Unavailable
</polaris-badge>

<polaris-icon>

<polaris-icon 
    accessibility-label="Example icon"
    color="teal"
    source="&lt;svg class=&quot;Polaris-Icon__Svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;&lt;/svg&gt;">
</polaris-icon>

<polaris-icon 
    accessibility-label="Example icon"
    backdrop
    color="tealDark"
    source="&lt;svg class=&quot;Polaris-Icon__Svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;&lt;/svg&gt;">
</polaris-icon>

<polaris-icon 
    accessibility-label="Example icon"
    backdrop
    color="ink"
    source="&lt;svg class=&quot;Polaris-Icon__Svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;&lt;/svg&gt;">
</polaris-icon>

<polaris-keyboard-key>

Ctrl

<polaris-keyboard-key>
    Ctrl
</polaris-keyboard-key>

<polaris-thumbnail>

<polaris-thumbnail 
    source="https://vuejs.org/images/logo.png" 
    alt="Example">
</polaris-thumbnail>

<polaris-thumbnail 
    source="https://vuejs.org/images/logo.png" 
    alt="Example"
    size="small">
</polaris-thumbnail>

<polaris-thumbnail 
    source="https://vuejs.org/images/logo.png" 
    alt="Example"
    size="large">
</polaris-thumbnail>

Feedback indicators

<polaris-banner>

This order was archived on March 7, 2017 at 3:12pm EDT.

<polaris-banner title="Order archived">
    <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
</polaris-banner>

This order was archived on March 7, 2017 at 3:12pm EDT.

<polaris-banner 
    title="Order archived"
    icon="&lt;svg class=&quot;Polaris-Icon__Svg&quot; viewBox=&quot;0 0 20 20&quot;&gt;&lt;path d=&quot;M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;&lt;/svg&gt;"
    status="warning">
    <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
</polaris-banner>

This order was archived on March 7, 2017 at 3:12pm EDT.

<polaris-banner 
    title="Order archived"
    :action="{content: 'Action', onAction: testAlert}"
    status="success">
    <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
</polaris-banner>

<polaris-banner 
    title="Order archived"
    :action="{content: 'Action', onAction: testAlert}"
    status="success"
    children="This order was archived on March 7, 2017 at 3:12pm EDT.">
</polaris-banner>

This order was archived on March 7, 2017 at 3:12pm EDT.

<polaris-banner 
    title="Order archived"
    :action="{content: 'Action', onAction: testAlert}"
    :secondary-action="{content: 'Secondary', onAction: testAlert}"
    @dismiss="testAlert">
    <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
</polaris-banner>

<polaris-spinner>

<polaris-spinner
    size="large"
    color="teal"/>

<polaris-spinner
    accessibility-label="Loading products"
    size="large"
    color="teal"/>

<polaris-spinner
    size="small"
    color="teal"/>

<polaris-spinner
    size="large"
    color="white"/>

<polaris-progress-bar>

Structure

<polaris-callout-card>

Upload your store's logo, change colors and fonts, and more.

<polaris-callout-card 
    title="Customize the style of your checkout"
    illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
    :primary-action="{content:'Customize', onAction: testAlert}"
    :secondary-action="{content:'Not now', onAction: testAlert}">
    <p>Upload your store's logo, change colors and fonts, <b>and more</b>.</p>
</polaris-callout-card>

<polaris-callout-card 
    title="Customize the style of your checkout"
    illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
    :primary-action="{content:'Customize', onAction: testAlert}"
    :secondary-action="{content:'Not now', onAction: testAlert}"
    children="Upload your store's logo, change colors and fonts, and more.">
</polaris-callout-card>

<polaris-card>

View a summary of your online store's performance.

<polaris-card 
    sectioned
    title="Online store dashboard">
    <p>View a summary of your online store's performance.</p>
</polaris-callout-card>

View a summary of your online store's performance.

<polaris-card
    title="Online store dashboard"
    :primary-footer-action="{content: 'View dashboard', onAction: testAlert}"
    :actions="[
        {content: 'Edit', onAction: testAlert},
        {content: 'Clone', onAction: testAlert},
    ]">
    <polaris-card-section>
        <p>View a summary of your online store's performance.</p>
    </polaris-card-section>
</polaris-card>

View a summary of your online store's performance.

View a summary of your online store's performance, including sales, visitors, top products, and referrals.

<polaris-card
    title="Online store dashboard">
    <polaris-card-section>
        <p>View a summary of your online store's performance.</p>
    </polaris-card-section>
    <polaris-card-section>
        <p>View a summary of your online store's performance, including sales, visitors, top products, and referrals.</p>
    </polaris-card-section>
</polaris-callout-card>

View a summary of your online store's performance.

View a summary of your online store's performance, including sales, visitors, top products, and referrals.

<polaris-card
    title="Online store dashboard">
    <polaris-card-section title="Staff accounts">
        <p>View a summary of your online store's performance.</p>
    </polaris-card-section>
    <polaris-card-section subdued title="Deactivated staff accounts">
        <p>View a summary of your online store's performance, including sales, visitors, top products, and referrals.</p>
    </polaris-card-section>
</polaris-card>

<polaris-empty-state>

Track and receive your incoming inventory from suppliers.

<polaris-empty-state
    heading="Manage your inventory transfers"
    :action="{content: 'Add transfer', onAction: testAlert}"
    :secondary-action="{
        content: 'Learn more',
        url: 'https://help.shopify.com',
    }"
    image="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg">
    <p>Track and receive your incoming inventory from suppliers.</p>
</polaris-empty-state>

<polaris-layout>

View a summary of your order.

Add tags to your order.

<polaris-layout>
    <polaris-layout-section>
        <polaris-card title="Order details" sectioned>
            <p>View a summary of your order.</p>
        </polaris-card>
    </polaris-layout-section>
    <polaris-layout-section secondary>
        <polaris-card title="Tags" sectioned>
            <p>Add tags to your order.</p>
        </polaris-card>
    </polaris-layout-section>
</polaris-layout>

View a summary of your order.

<polaris-layout>
    <polaris-layout-annotated-section
        title="Store details"
        description="Shopify and your customers will use this information to contact you.">
        <polaris-card title="Order details" sectioned>
            <p>View a summary of your order.</p>
        </polaris-card>
    </polaris-layout-annotated-section>
</polaris-layout>

View a summary of your order.

<polaris-layout>
    <polaris-layout-annotated-section
        title="Store details">
        <template slot="description">
            <p>Shopify and your customers will use this information to contact you.</p>
            <polaris-button outline>
                View contact form
            </polaris-button>
        </template>
        <polaris-card title="Order details" sectioned>
            <p>View a summary of your order.</p>
        </polaris-card>
    </polaris-layout-annotated-section>
</polaris-layout>

<polaris-page>

Page content

<polaris-page
    :breadcrumbs="[
        {content: 'Products', accessibilityLabel: 'Test', url: 'http://google.com/'}
    ]"
    title="Jar with lock-lid"
    :primary-action="{content: 'Save', disabled: true}"
    :secondary-actions="[
        {content: 'Duplicate', onAction: testAlert},
        {content: 'View on your store'},
    ]"
    :pagination="{hasNext: true, hasPrevious: false}">
    <p>Page content</p>
</polaris-page>

Page content

<polaris-page
    title="Jar with lock-lid"
    :primary-action="{content: 'Save'}"
    :secondary-actions="[
        {content: 'Duplicate', onAction: testAlert},
    ]"
    :pagination="{hasNext: true, hasPrevious: false}"
    full-width>
    <p>Page content</p>
</polaris-page>

Page content

<polaris-page-actions>

<polaris-page-actions 
    :primary-action="{content: 'Save'}">
</polaris-page-actions>

<polaris-page-actions 
    :primary-action="{content: 'Save'}"
    :secondary-actions="[
        {content: 'Duplicate', onAction: testAlert},
    ]">
</polaris-page-actions>

<polaris-page-actions 
    :primary-action="{content: 'Save'}"
    :secondary-actions="[
        {content: 'Duplicate', onAction: testAlert},
        {content: 'View on your store'},
    ]">
</polaris-page-actions>

<polaris-stack>

Paid

Fulfilled

<polaris-stack>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Paid

Fulfilled

<polaris-stack spacing="loose">
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Order #1136

Paid

Fulfilled

<polaris-stack alighment="center">
    <polaris-heading>Order #1136</polaris-heading>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Paid

Fulfilled

Paid

Fulfilled

Paid

Fulfilled

Paid

Fulfilled

Paid

Fulfilled

<polaris-stack wrap>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Order #1136

Paid

Fulfilled

<polaris-stack distribution="fill">
    <polaris-heading>Order #1136</polaris-heading>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Order #1136

Paid

Fulfilled

<polaris-stack distribution="fillEvenly">
    <polaris-heading>Order #1136</polaris-heading>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Order #1136

Paid

Fulfilled

<polaris-stack>
    <polaris-stack-item fill>
        <polaris-heading>Order #1136</polaris-heading>
    </polaris-stack-item>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Order #1136

Paid

Fulfilled

<polaris-stack vertical>
    <polaris-heading>Order #1136</polaris-heading>
    <polaris-badge>Paid</polaris-badge>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Order #1136

Paid

Fulfilled

<polaris-stack>
    <polaris-stack-item>
        <polaris-heading>Order #1136</polaris-heading>
        <polaris-badge>Paid</polaris-badge>
    </polaris-stack-item>
    <polaris-badge>Fulfilled</polaris-badge>
</polaris-stack>

Titles and text

<polaris-caption>

Test caption

<polaris-caption>
    Test caption
</polaris-caption>

<polaris-display-text>

Test display text

<polaris-display-text>
    Test display text
</polaris-display-text>

Test display text large as h1

<polaris-display-text element="h1" size="extraLarge">
    Test display text large as h1
</polaris-display-text>

Test display text small

<polaris-display-text size="small">
    Test display text small
</polaris-display-text>

<polaris-footer-help>

Learn more about fulfilling orders.

<polaris-footer-help>
    Learn more about 
    <polaris-link url="https://help.shopify.com/manual/orders/fulfill-orders">fulfilling orders</polaris-link>.
</polaris-footer-help>

<polaris-heading>

Test heading

<polaris-heading>
    Test heading
</polaris-heading>

Test heading as h1

<polaris-heading tag="h1">
    Test heading as h1
</polaris-heading>

<polaris-subheading>

Test subheading

<polaris-subheading>
    Test subheading
</polaris-subheading>

Test subheading as h4

<polaris-subheading tag="h4">
    Test subheading as h4
</polaris-subheading>

<polaris-visually-hidden>

Hidden text for screen readers

<polaris-visually-hidden>
        Hidden text for screen readers
</polaris-visually-hidden>

<polaris-skeleton-body-text>

<polaris-skeleton-display-text>

<polaris-skeleton-page>

Forms

<polaris-checkbox>

v-model value: {{ value0 }}

<polaris-checkbox label="Basic checkbox" v-model="value0">
</polaris-checkbox>

<polaris-checkbox label="Basic checkbox" label-hidden>
</polaris-checkbox>

<polaris-checkbox label="Basic checkbox" indeterminate>
</polaris-checkbox>

<polaris-checkbox label="Basic checkbox" checked>
</polaris-checkbox>

<polaris-checkbox label="Basic checkbox" checked disabled>
</polaris-checkbox>

<polaris-checkbox 
    label="Basic checkbox" 
    name="checkboxName"
    value="on"
    help-text="Help text">
</polaris-checkbox>

HTML help text

<polaris-checkbox 
    label="Basic checkbox" 
    name="checkboxName"
    value="on"
    help-text="Help text">
</polaris-checkbox>

<polaris-checkbox 
    label="Basic checkbox"
    :error="true">
</polaris-checkbox>

<polaris-checkbox 
    label="Basic checkbox"
    error="You must agree to the terms and conditions.">
</polaris-checkbox>

<polaris-choice-list>

Value: {{ value1 }}

<polaris-choice-list 
    name="test0"
    title="Company name"
    :choices="[
        { label: 'Hidden', value: 'hidden' },
        { label: 'Optional', value: 'optional' },
        { label: 'Required', value: 'required' }
    ]"
    v-model="value1">
</polaris-choice-list>

<polaris-choice-list 
    name="test0"
    title="Company name"
    :title-hidden="true"
    :choices="[
        { label: 'Hidden', value: 'hidden' },
        { label: 'Optional', value: 'optional' },
        { label: 'Required', value: 'required' }
    ]"
    v-model="value1">
</polaris-choice-list>

Value: {{ value2 }}

<polaris-choice-list 
    name="test1"
    title="While the customer is checking out"
    :choices="[
        { 
            label: 'Use the shipping address as the billing address by default', 
            value: 'shipping',
            helpText: 'Reduces the number of fields required to check out. The billing address can still be edited.'
        },
        { 
            label: 'Require a confirmation step', 
            value: 'confirmation',
            helpText: 'Customers must review their order details before purchasing.'
        },
    ]"
    :allow-multiple="true"
    v-model="value2">
</polaris-choice-list>

<polaris-color-picker>

<polaris-color-picker v-model="colorValue">
</polaris-color-picker>

Color: {{ colorValue }}

<polaris-color-picker v-model="colorValue" allow-alpha>
</polaris-color-picker>

<polaris-date-picker>

Value: {{ testDateRange }}

<polaris-date-picker
    :month="pickerMonth"
    :year="pickerYear"
    v-model="testDateRange"
    @monthchange="pickerMonth = $event.month; pickerYear = $event.year;">
</polaris-date-picker>

Value: {{ testDate }}

<polaris-date-picker
    :month="pickerMonth"
    :year="pickerYear"
    v-model="testDate"
    @monthchange="pickerMonth = $event.month; pickerYear = $event.year;">
</polaris-date-picker>

<polaris-date-picker
    :month="pickerMonth"
    :year="pickerYear"
    v-model="testDate"
    @monthchange="pickerMonth = $event.month; pickerYear = $event.year;"
    :disable-dates-before="new Date(2017, 04, 03)"
    :disable-dates-after="new Date(2017, 04, 21)">
</polaris-date-picker>

<polaris-date-picker
    :month="pickerMonth"
    :year="pickerYear"
    v-model="testDateRange"
    @monthchange="pickerMonth = $event.month; pickerYear = $event.year;"
    :disable-dates-before="new Date(2017, 04, 02)"
    :disable-dates-after="new Date(2017, 05, 15)"
    multi-month>
</polaris-date-picker>

<polaris-form-layout>

<polaris-form-layout>
    <polaris-text-field 
        label="Store name">
    </polaris-text-field>
    <polaris-text-field 
        label="Account email"
        type="email"
        disabled>
    </polaris-text-field>
</polaris-form-layout>

<polaris-form-layout>
    <polaris-form-layout-group>
        <polaris-text-field 
            label="Store name">
        </polaris-text-field>
        <polaris-text-field 
            label="Account email"
            type="email">
        </polaris-text-field>
        <polaris-text-field 
            label="Store name">
        </polaris-text-field>
        <polaris-text-field 
            label="Account email"
            type="email">
        </polaris-text-field>
    </polaris-form-layout-group>
</polaris-form-layout>

<polaris-form-layout>
    <polaris-form-layout-group condensed>
        <polaris-text-field 
            label="Store name">
        </polaris-text-field>
        <polaris-text-field 
            label="Account email"
            type="email">
        </polaris-text-field>
        <polaris-text-field 
            label="Store name">
        </polaris-text-field>
        <polaris-text-field 
            label="Account email"
            type="email">
        </polaris-text-field>
    </polaris-form-layout-group>
</polaris-form-layout>

HTML help text

<polaris-form-layout>
    <polaris-form-layout-group 
        condensed
        title="Basic options"
        help-text="Helpful hint text">
        <polaris-text-field 
            label="Store name">
        </polaris-text-field>
        <polaris-text-field 
            label="Account email"
            type="email">
        </polaris-text-field>
    </polaris-form-layout-group>
    <polaris-form-layout-group
        title="Advanced">
        <p slot="helpText">
            <a href="#">HTML</a> help text
        </p>
        <polaris-text-field 
            label="Store name">
        </polaris-text-field>
        <polaris-text-field 
            label="Account email"
            type="email">
        </polaris-text-field>
    </polaris-form-layout-group>
</polaris-form-layout>

<polaris-radio-button

Example using two-way props:
accounts value: {{ accounts }}
accountsAreDisabled computed value: {{ accountsAreDisabled }}
accountsAreEnabled computed value: {{ accountsAreEnabled }}

<polaris-radio-button
    v-model="accountsAreDisabled"
    name="accounts"
    value="disable"
    label="Accounts are disabled"
    help-text="Customers will only be able to check out as guests.">
</polaris-radio-button>

<polaris-radio-button
    v-model="accountsAreEnabled"
    name="accounts"
    value="enable"
    label="Accounts are optional">
    <template slot="helpText">
        Customers <em>may</em> log in to checkout.
    </template>
</polaris-radio-button>

<polaris-radio-button
    label="Accounts are required"
    label-hidden>
</polaris-radio-button>

<polaris-radio-button
    label="Accounts are required"
    disabled>
</polaris-radio-button>

<polaris-select>

<polaris-select
    v-model="value6"
    label="Count"
    :options="[
        'one',
        'two',
        'three'
    ]"
    placeholder="Select">
</polaris-select>

<polaris-select
    v-model="value6"
    label="Count"
    :options="[
        {label: 'Only one', value: 'one'},
        {label: 'Two', value: 'two'},
        {label: 'The whole lot', value: 'three', disabled: true}
    ]"
    placeholder="Select an amount">
</polaris-select>

<polaris-select
    v-model="value6"
    label="count"
    :options="['one', 'two', 'three']"
    placeholder="Select an amount"
    error="Required">
</polaris-select>

<polaris-select
    v-model="value6"
    label="count"
    :options="['one', 'two', 'three']"
    placeholder="Select an amount"
    disabled>
</polaris-select>

<polaris-tag>

Wholesale

<polaris-tag>Wholesale</polaris-tag>

<polaris-text-field>

<polaris-text-field 
    v-model="value8"
    label="Store name">
</polaris-text-field>

<polaris-text-field
    label="Quantity"
    type="number"
    v-model="value7">
</polaris-text-field>

<polaris-text-field
    label="Email"
    type="email">
</polaris-text-field>

<polaris-text-field
    label="Shipping address"
    multiline>
</polaris-text-field>

<polaris-text-field
    label="Gift cards expire after"
    label-hidden
    value="12">
    <polaris-select 
        slot="connectedRight"
        label="Unit of time"
        label-hidden
        value="months"
        :options="[
            'months',
            'days'
        ]">
    </polaris-select>
</polaris-text-field>

<polaris-text-field
    label="Zone name"
    placeholder="e.g. North America, Europe">
</polaris-text-field>

<polaris-text-field
    label="Account email"
    type="email"
    help-text="We'll use this if we need to contact you.">
</polaris-text-field>

<polaris-text-field
    label="Account email"
    type="email">
    <template slot="helpText">
        We'll use this if we need to contact you.
        <a href="#">Learn more</a>.
    </template>
</polaris-text-field>

<polaris-text-field
    label="Price"
    type="number"
    prefix="$">
</polaris-text-field>

<polaris-text-field
    label="Multiplier"
    type="number"
    suffix="x">
</polaris-text-field>

<polaris-text-field
    label="Store name"
    error="Store name is required">
</polaris-text-field>

Behaviors

<polaris-collapsible>

Toggle

Example content

<polaris-button @click="value9 = !value9">
    Toggle
</polaris-button>
<polaris-collapsible :open="value9">
    <p>Example content</p>
</polaris-collapsible>

<polaris-scrollable>

By signing up for the Shopify service ("Service") or any of the services of Shopify Inc. ("Shopify") you are agreeing to be bound by the following terms and conditions ("Terms of Service"). The Services offered by Shopify under the Terms of Service include various products and services to help you create and manage a retail store, whether an online store (Online Services), a physical retail store (POS Services), or both. Any new features or tools which are added to the current Service shall be also subject to the Terms of Service. You can review the current version of the Terms of Service at any time at https://www.shopify.com/legal/terms. Shopify reserves the right to update and change the Terms of Service by posting updates and changes to the Shopify website. You are advised to check the Terms of Service from time to time for any updates or changes that may impact you.

<polaris-card title="Terms of Service" sectioned>
    <polaris-scrollable 
        shadow 
        :style="{ height: '100px' }">
        <p>By signing up for the Shopify service ("Service") or any of the services of Shopify Inc. ("Shopify") you are agreeing to be bound by the following terms and conditions ("Terms of Service"). The Services offered by Shopify under the Terms of Service include various products and services to help you create and manage a retail store, whether an online store (Online Services), a physical retail store (POS Services), or both. Any new features or tools which are added to the current Service shall be also subject to the Terms of Service. You can review the current version of the Terms of Service at any time at https://www.shopify.com/legal/terms. Shopify reserves the right to update and change the Terms of Service by posting updates and changes to the Shopify website. You are advised to check the Terms of Service from time to time for any updates or changes that may impact you.</p>
    </polaris-scrollable>
</polaris-card>

Lists

<polaris-description-list>

<polaris-description-list
    :items="[
                { 
            term: 'Logistics',
            description: 'The management of products or other resources as they travel between a point of origin and a destination.',
        },
        {
            term: 'Sole proprietorship',
            description: 'A business structure where a single individual both owns and runs the company.',
        },
        {
            term: 'Discount code',
            description: 'A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.',
        },
    ]">
</polaris-description-list>

<polaris-list>

Yellow shirt

Red shirt

Green shirt

<polaris-list type="bullet">
    <polaris-list-item>Yellow shirt</polaris-list-item>
    <polaris-list-item>Red shirt</polaris-list-item>
    <polaris-list-item>Green shirt</polaris-list-item>
</polaris-list>

Yellow shirt

Red shirt

Green shirt

<polaris-list type="number">
    <polaris-list-item>Yellow shirt</polaris-list-item>
    <polaris-list-item>Red shirt</polaris-list-item>
    <polaris-list-item>Green shirt</polaris-list-item>
</polaris-list>

<polaris-resource-list>

Important: Unlike React Polaris, resource list has a default item template:

<polaris-resource-list
    :items="[
                {
                    url: '#',
                    attributeOne: 'How to Get Value from Wireframes',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Today, 7:14pm',
                },
                {
                    url: '#',
                    attributeOne: 'Test blog post',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Jan 14, 2016, 8:24am',
                    badges: [
                        {content: 'Hidden'},
                    ],
                },
            ]">
</polaris-resource-list>

Important: In React Polaris, this component accepts an item render function. The closest thing in Vue are scoped slots, so we use those instead:

<polaris-resource-list
    :items="[
                {
                    url: '#',
                    attributeOne: 'How to Get Value from Wireframes',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Today, 7:14pm',
                },
                {
                    url: '#',
                    attributeOne: 'Test blog post',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Jan 14, 2016, 8:24am',
                    badges: [
                        {content: 'Hidden'},
                    ],
                },
            ]">
    <template slot="item" scope="props">
        Item {{ props.index }} : {{ props.item.attributeOne }}
    </template>
</polaris-resource-list>

<polaris-resource-list
    :items="[
                {
                    url: '#',
                    attributeOne: 'How to Get Value from Wireframes',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Today, 7:14pm',
                },
                {
                    url: '#',
                    attributeOne: 'Test blog post',
                    attributeTwo: 'by Jonathan Mangrove',
                    attributeThree: 'Jan 14, 2016, 8:24am',
                    badges: [
                        {content: 'Hidden'},
                    ],
                },
            ]">
    <template slot="item" scope="props">
        <polaris-resource-list-item 
            :url="props.item.url"
            :media="props.item.media"
            :attribute-one="props.item.attributeOne"
            :attribute-three="props.item.attributeThree"
            :badges="props.item.badges"
            :exceptions="props.item.exceptions"
            :actions="props.item.actions"
            :persist-actions="props.item.persistActions">
            <polaris-text-style 
                slot="attributeThree"
                variation="subdued">
                {{ props.item.attributeThree }}
            </polaris-text-style>
        </polaris-resource-list-item>
    </template>
</polaris-resource-list>

Navigation

<polaris-link>

a link

<polaris-link url="//google.com" external>a link</polaris-link>

a external link

<polaris-link url="//google.com" external>a external link</polaris-link>

<polaris-pagination>

<polaris-pagination
    has-previous
    has-next
    @next="testAlert"
    @previous="testAlert">
</polaris-pagination>

<polaris-pagination
    has-next
    next-url="#">
</polaris-pagination>

<polaris-tabs>

<polaris-popover>

<polaris-popover 
    :active="value9" 
    @close="value9 = false">
    <template slot="activator" scope="props">
        <polaris-button @click="value9 = !value9">
            More actions
        </polaris-button>
    </template>
    <template slot="content" scope="props">
        <polaris-action-list
            :items="[
                {content: 'Import'},
                {content: 'Export'}
            ]">
        </polaris-action-list>
    </template>
</polaris-popover>

To do

<polaris-link>

This is a link test.