Shopify’s design system to help us work together to build a great experience for all of our merchants.
OTHER License
Bot releases are visible (Hide)
Published by danrosenthal almost 6 years ago
TextField
to no longer use componentWillReceiveProps
(#628)EventListener
to no longer use componentWillUpdate
(#628)Icon
to accept a React Node as a source (#635) (thanks to @mbriggs for the original issue)alignContentFlush
prop to ContextualSaveBar (#654)Pagination
from calling onNext
and onPrevious
while hasNext
and hasPrevious
are false for key press events (#643)FormLayout
Items
and applying it only to Items
used inside a FormLayout.Group
(#650)ChoiceList
when choice has children on selection but is not selected (#665)errorOverlayText
on Dropzone
(#671)InlineError
text color, the error border-color on form fields and the error Icon
color to be the same red. (#676)AppProvider
server side rendering support (#696) (thanks @sbstnmsch for the original issue)TextField
autocomplete disabling by setting autocomplete="nope" when autoComplete
prop is false
(#708)yarn run tophat
has been removed and its functionality has been moved into the yarn run dev
server. Example editing now supports hot-reloading so you don’t need restart the server anymore.@shopify/polaris-tokens
to v2.0.0. This is a breaking change for consumers of color design tokens in languages such as JavaScript and Sass (full release notes)Published by AndrewMusgrave almost 6 years ago
Datepicker
ranges when start
and end
dates are similar but have different references (#601)DataTable
column visibility calculation in production environments by using a data-polaris-header-cell
attribute instead of class-based targeting (#615)Navigation.Item
not calling onClick
on small screens when onNavigationDismiss
is undefined (#603)Autocomplete
empty state example Markdown not parsing correctly (#592)TopBar
’s UserMenu
alignment to be right-aligned when TopBar
isn't passed a searchField
prop (#597)Popover
inconsistent border-radius values (#605)TextStyle
strong variant now uses a span tag instead of b (#606)Toast
or Loading
in an embedded app (#613)Published by danrosenthal almost 6 years ago
Card.Section
when set to full widthPortal
rendering by using componentDidMount
lifecycle hook as opposed to componentWillMount
Link
without a url
in a form would implicitly submit the form. Link
can no longer submit forms. Use <Button submit>
instead.Keys
enum to align with Shopify naming standards. It is now singular and the properties are in PascalCase. Replace import {Keys} from '@shopify/polaris'
with import {Key} from '@shopify/polaris'
and change the casing of the properties, e.g. replace Keys.DOWN_ARROW
with Key.DownArrow
.display: none
in @print-hidden
mixinToast
and Loading
target
prop to all actions which get passed to the Shopify App Bridgesize
and message
props to Modal
which aligns with the Shopify App Bridge APIresourceType
, initialQuery
, and showVariants
props to ResourcePicker
which aligns with the Shopify App Bridge APIResourcePicker
, Modal
, and Page
to the main bundle and removed the embedded bundle. Imports from '@shopify/polaris/embedded'
will no longer work, use '@shopify/polaris'
instead.shopOrigin
prop on AppProvider
optional. It’s now provided by default. If you do provide a shopOrigin
it now needs to be given without the 'https://'
per the Shopify App Bridge API.onSelection
prop on ResourcePicker
. The shape of the selectPayload
data has changed and the product id
is now a gid
. For example, /9019381572
is now gid://shopify/Product/9019381572
. We offer @shopify/admin-graphql-api-utilities to help compose and parse gid
from Shopify admin.ResourcePicker
props to align with the Shopify App Bridge. Set the props showHidden
, allowMultiple={false}
, and showVariants={false}
to get the previous default behavior.target
prop type related to embedded apps, use 'APP'
, 'ADMIN_PATH'
, or 'REMOTE'
icon
prop from Page
. Upload your app’s icon in the Shopify Partners dashboard “App setup” section instead.title
prop from ResourcePicker
as setting a title is no longer supported by the Shopify App Bridgeproducts
prop from ResourcePicker
, use resourceType="Product"
insteadcollections
prop from ResourcePicker
, use resourceType="Collection"
insteadwidth
and height
props from Modal
, use size
insteaddebug
prop from AppProvider
, use Redux DevTools instead. Redux DevTools also has browser extensions.Alert
component, use Modal
with message
prop insteadeasdk
on React context with appBridge
. Access it via this.context.polaris.appBridge
.this.context.easdk.startLoading()
and this.context.easdk.stopLoading()
, use the Loading
component insteadthis.context.easdk.showFlashNotice()
, use the Toast
component insteadthis.context.easdk.pushState()
, use the Shopify App Bridge History
action instead. The History
action requires passing the appBridge
instance which is accessible via this.context.polaris.appBridge
.this.context.easdk.redirect()
, use the Shopify App Bridge Redirect
action instead. The Redirect
action requires passing the appBridge
instance which is accessible via this.context.polaris.appBridge
.We’ve released a suite of new components that, when combined, form the application frame of a stand-alone (or non-embedded) Polaris app.
The frame component, while not visible in the user interface itself, provides the structure for any non-embedded application. It wraps the main elements and houses the following components:
The navigation component is used to display the primary navigation in the sidebar of the frame of any non-embedded application. Navigation includes a list of links that merchants use to move between sections of the application.
The top bar component is always visible at the top of a non-embedded application. Its logo and color can be customized using the app provider component to reflect an application’s brand. Merchants can use it to search an application, access menus, and navigate by clicking on the logo.
The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action.
The loading component is used to indicate to merchants that a page is loading or an upload is processing.
The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.
The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options.
Form
to default the method
to post
in order to prevent accidental leaking of form detailsonPortalCreated
prop to Portal
Badge
stylinglist-style
on List
DataTable
(thanks to @duythien0912 for the original issue)allowedMultiple
prop is falseDatatable
so it resizes with new content (thanks @andrewpye for the original issue)RangeSlider
linear-gradient so it doesn't break the css build (thanks @Ankitjasoliya and @nerfologist for the original issue)Page
, where styling wasn't being applied correctly to Page ActionsModal
’s onClose
propprimaryFooterAction
and secondaryFooterAction
in Card
(thanks @sivakumar-kailasam for the original issue)Banner
Modal
about why it can't be closed by clicking outside the modal and should only be closed by clicking X
or Cancel
ResourceList
into components foldersResourceList
if there are no items and loading
is truePublished by dleroux about 6 years ago
Published by dleroux about 6 years ago
Popover
Popover
transition from 500ms to 100msBadge
.medium
size to Button that renders the same as omiting the size attributeCollapsible
exampleSkeletonPage
to match Page
Page
title and metadataPublished by AndrewMusgrave about 6 years ago
Tab.Item
with a url
prop now renders an UnstyledLink
instead of a Button
when displayed in Popover
and you can now keyboard navigate the disclosure in Tabs
DropZone.FileUpload
ResourceList
DropZone
ExceptionList
documentationPolaris-Modal-Header__CloseButton
and Polaris-Modal-Header--withoutTitle
to Polaris-Modal-CloseButton
and Polaris-Modal-CloseButton--withoutTitle
respectively.d.ts
files to test coverage ignorePage
is no longer self-closing in the playgroundButton
alignment issue caused by unnecessary icon markup rendering (thanks to @mbaumbach for the original issue)DataTable
(thanks to @duythien0912 for the original issue)InlineError
text to align with the ChoiceList
labelsrem
values with globally scalable ones on DataTable
’s collapsed shadow, and TextStyle
code blocksList
for double digitsProgressBar
not showing up in Windows high contrast modeDataTable
ResourceList
Popover
that were disappearing instead of top aligning (thanks to @mbaumbach for the original issue)OptionList
list itemsModal
examples show the modal dialog by defaultTabs
to have equal width when enough space is presentUse withContext
to pass consumer context to a component.
Use withRef
with compose
to forwardRefs to a component.
Published by danrosenthal about 6 years ago
Button
to accept a React.ReactNode
for its icon
propTag
Published by danrosenthal about 6 years ago
placeholder
prop in Select
to be the default selectionloading
prop to ResourceList
that places a spinner overtop items and disables bulk actionsEmptyState
horizontally scrolling when fully condensedPage
being ignored in some browsersurl
prop to breadcrumbs
in Page
component examplesActionList
wrapping text within a Popover
Banner
spacing when inside of a sectionStack
so it doesn't add extra spacing between items in SafariPublished by danrosenthal about 6 years ago
Published by dleroux about 6 years ago
LoadableAction
s and DisableableAction
sPublished by dleroux about 6 years ago
ChoiceChildren
in choice list for readabilityCard.Header
a seperate publically accessible componentResourceList
componentButton
props.TextField
pa11y
and object-hash
from dependencies to devDependenciestest:coverage
script to gather and display test coverage resultsFilterType.DateSelector
in ResourceList
componentcode
as an accepted variation
of the text style component to provide support for accessible markup and styling of inline code snippets and code-like textborder-width
SCSS functionfullWidth
and connectedTop
props on ButtonGroup
label
prop to DropZone
for better accessibilitylabel
singleColumn
prop to the skeleton page componentnextKeys
, previousKeys
, nextTooltip
, and previousTooltip
props to the pagination component to support keypress handling and tooltips in pagination buttons.Progress
type to support downstream typechecking of the badge component progress
propiFrameName
prop to the modal component to support named iframe childrenScrollTo
subcomponent to the scrollable component to support scrolling to a child node programmaticallyoptions
descriptors have a media
propertyoptions
descriptors to accept a block for the label
property$page-max-width
variable to capture page calculated max-width
value and page-when-not-max-width
mixin to trigger when page is resized horizontallyCallbackAction
type as a prop(thanks @dylan for the current issue and everyone who identified this.)disabled
prop to the choice component. Checkbox and radio labels are now styled to reflect their disabled statemultiline
was falseform
Use inline errors to describe custom form inputs or form groups when invalid.
weekStartsOn
prop to Datepickeryarn start:vrt
to yarn tophat
and updated the folder name to matchyarn tophat
’s design, and added a /all-components
routePublished by dleroux over 6 years ago
implicitSubmit
to disable this defaultPublished by AndrewMusgrave over 6 years ago
0
as a max
valueprefix/suffix
spacingPublished by dleroux over 6 years ago
Use Option list to present a group of selectable items outside of the context of a form.
Form
examplesprefix
and suffix
props to RangeSlider
for better layout control@shopify/polaris-tokens
, the single source of truth for colors