components

322 notes in this subject, read out of this brain and free to use. This is page 6 of 6.

Free text inputs definition

Free text inputs are fields that accept short strings of text without any particular structure. They are often used for SKUs, barcodes, and titles. Only provide example text if you know how the text should be structured, such as a tracking number or discount code.

Multiline text inputs definition

Multiline text inputs are fields that are rendered as multiline textarea elements, as well as text input elements that accept long strings of text. They are often used for product descriptions, order comments, and customer notes. Users can write whatever they want, so providing example text is less useful.

Text field anatomy and structure

Text fields combine a field label (the title) and an input area. Text fields can be grouped in a form or placed individually in the UI. Inputs can vary from typed text to URLs to date pickers.

Multiline text inputs types

Multiline fields have several versions: plain textarea elements with no formatting options, formatted textarea elements with what-you-see-is-what-you-get (WYSIWYG) menus, plain text input elements that accept long strings of text, and plain text input elements that accept long strings of text and expand as the user types.

v12 component API changes color and space props

Component APIs were simplified by renaming various color control props to tone and space control props to gap, creating more consistent APIs across components.

Polaris v12 introduces new design language

Polaris version 12 introduces a new design language for Shopify's admin. This includes a style uplift for all components, updates to token values, and a new web font called Inter.

v12 component API changes directional naming

Component APIs were simplified by renaming directional components to use Inline and Block, which are defined by CSS logical properties.

v12 component API changes border radius naming

Component APIs were simplified by renaming border radius properties to align with CSS border radius constituent properties.

v12 component API changes boolean consolidation

Component APIs were simplified by consolidating boolean props to a single variant prop on various components to make logical combinations more intentional.

Sandbox tool status and maturity

The Sandbox tool is in Alpha status and is in development. There could be breaking changes made to it in a non-major release of Polaris, so it should be used with caution.

Sandbox tool purpose

The Sandbox is a tool for effortless prototyping with Polaris components.

LegacyCard heading size enforcement

LegacyCard now enforces that h1 and h2 content uses the Text headingSm variant (--p-font-size-325). For custom heading sizes, refactor to use Card instead.

Badge status prop replaced with tone

In v12, the Badge component's status prop is replaced with tone. Also replace Badge.pip status with tone. The migration changes <Badge status="success" /> to <Badge tone="success" />.

Badge statusAndProgressLabelOverride prop replaced with toneAndProgressLabelOverride

The Badge component's statusAndProgressLabelOverride prop is replaced with toneAndProgressLabelOverride. For example, <Badge statusAndProgressLabelOverride="My string" /> becomes <Badge toneAndProgressLabelOverride="My string" />.

ButtonGroup spacing prop replaced with gap

The ButtonGroup component's spacing prop is replaced with gap. For example, <ButtonGroup spacing="tight" /> becomes <ButtonGroup gap="tight" />.

ButtonGroup segmented prop replaced with variant

The ButtonGroup component's segmented boolean prop is replaced with variant="segmented". For example, <ButtonGroup segmented /> becomes <ButtonGroup variant="segmented" />.

List spacing prop replaced with gap

The List component's spacing prop is replaced with gap. For example, <List spacing="loose" /> becomes <List gap="loose" />.

Modal large prop replaced with size

The Modal component's large boolean prop is replaced with size="large". For example, <Modal large /> becomes <Modal size="large" />.

Modal fullScreen prop replaced with size

The Modal component's fullScreen boolean prop is replaced with size="fullScreen". For example, <Modal fullScreen /> becomes <Modal size="fullScreen" />.

Z-index elevations for shadow bevels in components

The new design language introduces shadow bevels in components. Children cannot be above the bevel's z-index elevation. Card has bevel z-index 32, LegacyCard has bevel z-index 101, Popover has bevel z-index 2, TooltipOverlay has bevel z-index 1.

LegacyCard spacing and visual hierarchy changes

LegacyCard has tighter spacing in v12 and no dividers between sections and subsections. Resolve visual hierarchy issues by: using Card and BlockStack (recommended), removing custom content spacing wrappers and using LegacyCard.Section, LegacyCard.Header, or LegacyCard.Section flush, updating custom content padding from --p-space-500 to --p-space-400 or adjust InlineStack gap from '5' to '4', adding dividers with Divider component where needed, or using Box or Bleed for space adjustment.

TextField borderless prop replaced with variant

The TextField component's borderless boolean prop is replaced with variant="borderless". For example, <TextField borderless /> becomes <TextField variant="borderless" />.

Give your agent this brain