API Reference octantis v0.1.13

View Source

Modules

The entrypoint for defining your web interface, such as controllers, components, channels, and so on.

AppBridge Components

Renders Shopify toast notices.

Renders the AppBridge navigation menu <ui-nav-menu/>. This adds navigation elements for your app in the Shopify side bar.

The stylesheet to make polaris work.

Interactions with components.

Polaris Components These components are an implementation of the Shopify Polaris design system. Style attributes are taken from Polaris Tokens. https://polaris.shopify.com/tokens/color See https://polaris.shopify.com/components

The AppBridge Modal API allows you to display an overlay that prevents interaction with the rest of the app until dismissed.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style. ## Examples

Use to convey general information or actions that aren’t critical. For example, you might show a banner that asks for merchant feedback. Default banners contain lower priority information and should always be dismissible.

Applies negative margin to allow content to bleed out into the surrounding layout.

Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.

Box Box is the most primitive layout component.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.

Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Consumed by Checkbox and Radio button. Undocumented by Shopify.

A choice list lets you create a list of grouped radio buttons or checkboxes. Use this component if you need to group together a related list of interactive choices.

The collapsible component is used to put long sections of information under a block that merchants can expand or collapse.

Complex actions are an implied component in Polaris... Usually it is a button.

Use to separate or group content.

Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help merchants progress. The empty state component is intended for use when a full page in the admin is empty, and not for individual elements or areas in the interface.

Filters is a composite component that filters the items of a list or table.

The struct for holding a filter.

Create complex layouts based on CSS Grid.

Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.

Selected Polaris Icons. Used with PolarisComponents.Icon

An index table displays a collection of objects of the same type, like orders or products. The main job of an index table is to help merchants get an at-a-glance of the objects to perform actions or navigate to a full-page representation of it.

Inline errors are brief, in-context messages that tell merchants something went wrong with a single or group of inputs in a form. Use inline errors to help merchants understand why a form input may not be valid and how to fix it.

Use to lay out children horizontally with equal gap between columns. Based on CSS Grid.

Use to display children horizontally in a row. Based on CSS Flexbox.

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Media cards provide a consistent layout to present visual information to merchants. Visual media is used to provide additional context to the written information it's paired with.

Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly.

Use to build the outer wrapper of a page, including the page title and associated actions.

Use pagination to let merchants move through an ordered collection of items that has been split into pages. On the web, pagination uses buttons to move back and forth between pages. On iOS and Android, pagination uses infinite scrolling.

Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.

Use radio buttons to present each item in a list of options where merchants must make a single selection.

Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.

ShadowBevel A building block for other components such as Card See

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Use for thumbnails in or outside of a card.

Spinners are used to notify merchants that their action is being processed. For loading states, spinners should only be used for content that can’t be represented with skeleton loading components, like for data charts.

Use to alternate among related views within the same context.

Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by merchants.

Text Typography helps establish hierarchy and communicate important content by creating clear visual patterns.

A text field is an input field that merchants can type into. It has a range of options and supports several text formats including numbers.

Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context.

Captures the Polaris Border Tokens. Allows enforcing of component attributes See https://polaris.shopify.com/tokens/border

Captures the Polaris Color Tokens. Allows enforcing of component attributes See https://polaris.shopify.com/tokens/color

Captures the Polaris Shaddow Tokens. Allows enforcing of component attributes See https://polaris.shopify.com/tokens/shaddow

Captures the Polaris Space Tokens. Allows enforcing of component attributes See https://polaris.shopify.com/tokens/space

Underlying button. Button is implemented with this and sometimes Polaris uses this directly instead of button

Core Functionality for Polaris Components.

Storybook Modle to Power PhoenixStorybook

Create Storybook stories with the Polaris style sheet loaded in.