Polaris Vue

Polaris Vue is a Shopify Polaris implementation for VueJS 3. It is designed to provide high performance and a small bundle size while maintaining a 99% visual match with the official Shopify Polaris 12 design system.

Key features include:

• Shopify Version Matching: The library is built using Shopify Polaris CSS, ensuring the UI closely matches the official version.
• Built for Shopify: It is compatible with Vue 3.3+ and is optimized to help developers achieve the 'Built for Shopify' (B4S) badge.
• Familiar API: The library follows the patterns of the original Shopify Polaris React library, making it easy for developers transitioning from React to Vue.

The IndexFilters component provides a comprehensive interface for managing list views, searching, filtering, and sorting data. It is designed to help merchants create subsets of list items, search via text input, and control view visibility through tabs.

Key Features

• View Management (Tabs): Allows users to switch between saved views, edit applied filters/searches, and create, rename, duplicate, or delete views.
• Search, Filter, and Sort:
  • A toggle button switches between "View" mode and "Filter" mode, revealing the search field and filter inputs.
  • A sort button opens a popover to select sorting options and order (ascending/descending).
• Filters: A set of form inputs used to include or exclude list items based on data criteria.
• Action Buttons: Includes primary actions (like "Save" or "Save as") and a secondary "Cancel" action.

The Combobox component is used when merchants need to select one or more options from a predefined or editable list. It combines a TextField with a Popover containing a Listbox. As the user types, the list of options is filtered by the input value. Selected options can replace or add to the input value.

Common use cases include:

• Single selection: Selecting one option from a list.
• Manual selection: Allowing users to type and add custom values.
• Multi-select: Selecting one or more options.
• Tags autocomplete: Efficiently adding or removing tags (e.g., for products or orders) using an inline autocomplete pattern.

The Listbox component is a control element used to let merchants select one or more options from a list. It can be composed of individual Options, Dividers (to separate items in complex lists), and Section headers (to call out content at the beginning of a section).

Common use cases include location pickers or selection controls where a merchant needs to browse and choose from a set of values.

Best Practices:

• Ensure the listbox is clearly labeled.
• Limit the number of options displayed at once.
• Use a loading state if option data is being populated asynchronously.

<!-- Basic implementation concept -->
<Listbox>
  <Listbox.Option value="option-1">Traffic referrer source</Listbox.Option>
  <Listbox.Option value="option-2">Another option</Listbox.Option>
</Listbox>

The Filters component allows merchants to view different subsets of items in a list or table. It typically includes a text field for typing queries and a set of filters (such as promoted filters or categories) that can be displayed in various ways. It is designed to be flexible, allowing for custom HTML and additional filter sections.

<!-- Note: The component is used within a layout to provide filtering capabilities for resource lists or data tables. -->
<Filters />

The Scrollable component is a utility used to manage content that exceeds the available vertical space. It is specifically designed to embed long-form content within components like modals and popovers, providing a visual cue that more content exists above or below the fold.

Common Use Cases:

• Making a specific region within a page independently scrollable.
• Preventing content shift when a container becomes scrollable (using the gutter option).
• Providing a container that allows for programmatic scrolling of child components into view.

<!-- Example: Basic usage in a modal or pane -->
<Scrollable>
  <!-- Long content goes here -->
</Scrollable>

Depending on your layout needs, you might use these related components instead of InlineStack:

• InlineGrid: Use for creating large-scale page structures.
• BlockStack: Use when you need to display elements vertically instead of horizontally.

The Checkbox component is used in forms to toggle a state on or off. It can represent selected, unselected, disabled, or indeterminate states. Use this component when users need to make independent selections where choosing one option does not affect others (unlike Radio Buttons or Choice Lists).

<!-- Example usage pattern -->
<Checkbox
  label="Publish store"
  :checked="true"
/>

The Card component is used to group related information and provide structure to your layout. By default, cards feature an 8px border radius, use --p-color-bg-surface for the background, and --p-shadow-300 for the shadow. They include a default padding of space-400 (16px) around children.

Common usage patterns include:

• Subdued backgrounds: Use for content that needs to be deprioritized.
• Sections: Use Section components within a card to break up complex information or communicate distinct pieces of data.
• Actions:
  • Use Header actions for less important or persistent optional actions (e.g., 'Edit').
  • Use Footer actions for the most important actions or next steps after reviewing content.
  • Use Critical actions (header or footer) for destructive operations that are difficult to recover from.