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 AndrewMusgrave almost 5 years ago
TextField
to no longer render aria-invalid="false"
. Thank you to @alexcleduc for the contribution (#2339).TextField
to only render min
,max
and step
attributes when explicitly passed. Thank you to @alexcleduc for the contribution (#2339).document
in DropZone
(#2560)DropZone
(#2568)DropZone
(#2568)Published by dleroux almost 5 years ago
window
in DropZone
(#2532)TrapFocus
that prevented focus outside of an iframe
(#2530)Shopify/polaris-icons
repository (which is now private) (#2452)Published by dleroux almost 5 years ago
external
prop to ResourceList
(#2408)onMouseEnter
and onTouchStart
props to Button
(#2409)ariaHaspopup
prop to Popover
(#2248)Button
styles from the Buttongroup
CSS file to the Button
CSS file (#2441)footerActionAlignment
prop to control <Card>
footer action alignment, defaults to 'right'
(#2407)MessageIndicator
with a border (#2428)Icon
(#2207)features
prop to AppProvider
(#2204)EmptyState
in a content context (#1570)Page
no longer renders navigation or actions in print mode (#2469)Dropzone
to a functional component and reduced its complexity (#2360)fluidContent
prop to Popover
(#2494)Button
’s disclosure
prop to be boolean | "up" | "down"
, allowing greater control over the direction the disclosure caret faces (#2431)Popover
content in development (#2403)DropZone
component jumped from an extra-large layout to a layout based on the width of its container (#2412)Topbar
in Frame
to ensure the Sticky
components get the correct top position (#2415)merge
utility function from mutating the objects passed as arguments (#2317)Card
footer actions to be right aligned by default again (#2407)EmptyState
styles conditional on the imageContained
prop not being applied (#2477)TrapFocus
to keep focus within the container when tabbing past the last element (#2397)Form
implicit submit was still accessible via keyboard (#2447)Page
so the types can be parsed (#2358)PageActions
example (#2471)Filters
data table example (#2477)EmptyState
(#2477)Tooltip
(#2434)dev test:coverage
as an alias for yarn test:coverage
(#2496)dev open coverage
and yarn open:coverage
commands to open the coverage report (#2496)yarn test:coverage
so it generates a coverage report (#2496)yarn test:coverage
so it automatically opens the coverage report when complete (#2496)Published by dleroux almost 5 years ago
Popover
to focus the correct element when closed (#2255)title
prop in ChoiceList
from string
to ReactNode
(#2355)disabled
prop to Filters
component (#2389)helpText
prop to Filters
component (#2389)yarn dev
to hide yarn splash
reports from the console by running DISABLE_SPLASH=1 yarn dev
(#2372)Popover
to use hooks (#2386)Published by danrosenthal almost 5 years ago
TextField
which caused infinite layout and high CPU load in Safari, related to WebKit Bug 194332 (#2379)TextField
multiline
where aria-multiline
would be set to an invalid type number
(#2351)ResourceItem
(#2370)AppProvider
section in the Polaris v3 to v4 migration guide (#2312)Using translations
section in the AppProvider README (#2312)Published by tmlayton about 5 years ago
Button
which caused infinite layout and high CPU load in Safari, related to WebKit Bug 194332 (#2350)Published by LauraAubin about 5 years ago
OptionList
section title to match ActionList
section title (#2300)pressed
state to Button
(#2148)label
prop in ChoiceList
(nested prop of choices
) from string
to ReactNode
(#2325).actionGroups
to only render MenuActions
when actions are provided in the Page
(#2266)PositionedOverlay
incorrectly calculating Topbar.UserMenu
Popover
width (#2231)recolor-icon
Sass mixin to properly scope $secondary-color
to the child svg
(#2298)ResourceList
component where the plural resource name was not used for totalItemsCount
(#2301)Collapsible
with children having margins (#1980)OptionList
control items (#2313)Published by dleroux about 5 years ago
totalItemsCount
prop to the ResourceList
component (#2233)Header
primary action label on the Page
component from wrapping when the title is too long (#2262)Stack
component where a Stack.Item
was not getting a minimum width (#2273)Filters
applying inconsistent border styles to sibling filters whenaria-disabled
to the Select
component’s content when it is disabled (#2281)DropZone
component (#2243)Spinner
component (#2258)Published by LauraAubin about 5 years ago
showTotalsInFooter
prop to DataTable
for control over placement of “Totals” row (#2200)hasFocusableParent
to Spinner
(#2176)BulkActions
checkbox losing on selection focus (#2138)Popover
overlay to remain in the DOM if it was updated during exiting (#2246)Breadcrumbs
to use accessibilityLabel
prop when passed in (#2254)Improved code quality for the theme provider component (#2225):
theme
prop to ThemeConfig
to distinguish from the type Theme
which is shared over context. A Theme
contains only the logo properties, while ThemeConfig
can contain a colors
property.ThemeProvider
to use hookscolorToHsla
returned HSLA strings instead of HSLA objects when given HSL or HSLA stringscolorToHsla
where RGB colors with no saturation could result in a divide by zero errorcolorToHsla
inconsistently returned an alpha valuelightenColor
and darkenColor
would lighten or darken absolute lightness values (0, 100)Published by dleroux about 5 years ago
TextField
when changing connectedRight/connectedLeft content while user is typing (#2170)type
for clearButton (#2060). Thank you chenxsan for the contribution.onSelect
prop of Tabs
from changing scroll position (#2196)Popover
(#2209)ResourceList
Item
hover state when Item
is deselected (#1952)Subheading
’s font-weight
(#2218)fullWidth
CardSection
s when contained in a page with a Nav
(#2227)SettingToggle
, Sheet
, and Tabs
examples to functional components (#2134)Form
, Frame
, and Loading
examples to functional components (#2130)SettingToggle
, Sheet
, and Tabs
examples to functional components (#2134)DatePicker
, DropZone
, and Filters
examples to functional components (#2129)MediaQueryProvider
to ease the use of media queries and reduce duplication (#2117)Tab
to use hooks instead of withAppProvider
(#2096)yarn splash
on PR diffs and leaves a comment with the output (#2208)Published by dleroux about 5 years ago
Pagination
which is used to insert contextual info between navigation buttons (#2098)trigger
to use act
(#2141)Drop zone
to have better contrast from the background and to be lighter when disabled (#2119)Card
footer actions to be left aligned instead of right by default (#2075)Modal
setting an invalid id
on aria-labelledby
when no title
is set (#2115)Card
and RollupActions
tests (#2125)ResourceItem
(#2097)Page.primaryAction
forcing primary
to be true
(#2137)React.Children.only
from AppProvider
and ThemeProvider
(#2121)text-rendering
to auto
in Select
to prevent Safari 13 from crashing (#2179)Autocomplete
, Banner
, and ChoiceList
examples to functional components (#2127)Collapsible
, ColorPicker
, and DataTable
examples to functional components (#2128)Modal
, OptionList
, and Popover
examples to functional components (#2131)RadioButton
, RangeSlider
, and ResourceItem
examples to functional components (#2132)ResourceList
, ResourcePicker
, and Select
examples to functional components (#2133)TextField
, Toast
, and TopBar
examples to functional components (#2135)withContext
section in the v3 to v4 migration guide (#2124)external
prop on the Link
component (#2153)Popover
activators (#2171)yarn splash
(beta), a command-line interface to observe the splash zone of a change across the component library (#2113)useLazyRef
hook to use while building components (#2166)FilterCreator
to use hooks instead of withAppProvider (#2156)ContextualSaveBar
to use hooks instead of withAppProvider
. Thank you to @sijad for the contribution (#2091).RangeSlider
, ScrollLock
and TopBar.SearchField
to use hooks instead of withAppProvider (#2083)ResourceItem
to no longer rely on withAppProvider (#2094)TextField
and Resizer
to use hooks (#1997)Avatar
to use hooks instead of withAppProvider (#2067)Day
and DatePicker
to use hooks (#2089)Published by chloerice about 5 years ago
TextField
by setting a string on min
and max
props (#1991)title
prop on Page
optional, supporting continued use of Page
for structure in apps using the App Bridge React TitleBar
(#2082)Modal
(#2072)Stack
(#2071)Dropzone
hover, disabled, and focus states (#1994)name
prop to ResourceItem
to fix accessibility labels (#2077)ResourceItem
actions (#2051)withAppProvider
HoC for a better devtools experience (#2093)ActionMenu.RollupAction
, Autocomplete
, Card
, EmptySearchResult
, Form
, SkeletonPage
and TopBar
to use hooks instead of withAppProvider (#2065)useUniqueId
hook that can be used to get a unique id that remains consistent between rerenders and updated components to use it where appropriate (#2079)Published by dleroux about 5 years ago
ResourceItem
to its own component (#1774)ResourceList
sort to show an inline label (#1774)tap-highlight-color
for Buttons
(#1545)Tooltip
on disabled Pagination
buttons (#1963)ResourceList.Item
persistent action disclosure icon (#1973)Autocomplete
where keyboard navigation of options was laggy and skipped options (#1887)Autocomplete
was bubbling up the Enter
key event unexpectedly (#1887)ContextualSaveBar
actions overflowing on small screens (#1967)Tabs
rollup automatically opening from keyboard navigation of tab list (#1933)ResourceList.Item
persistent actions accessibility labels (#1973)FilterControl
documentation and case studies from ResourceList
documentation (#1774)ResourceList
examples to use Filters
(#1774)Filters
showing the use of children
(#1774)RadioButton
guidance to make one option selected by default #2005
FilterControl
. Use Filters
instead (#1774)Published by dleroux about 5 years ago
Polaris React v4.0.0 is a major release that introduces breaking changes, primarily due to updates made to component internals. This builds a stronger foundation that ensures readiness for future React performance improvements.
This release doesn’t include any new components, but it does update some components to use React Hooks. It also deletes several deprecated features and removes dependencies on legacy context and unsafe lifecycle methods. Thanks to these improvements, Polaris React is React Strict Mode compliant.
For instructions on updating from v3 to v4, read the migration guide.
groups
prop on Select
. Pass groups to the options
prop instead. (#1831)Autocomplete.ComboBox.TextField
and Autocomplete.ComboBox.OptionList
. You should use the Autocomplete.TextField
and OptionList
components instead. (#1830)secondaryFooterAction
prop on Card
. Pass an array of secondary actions to the secondaryFooterActions
prop instead. (#1831)iconBody
prop on Navigation.Item
. Pass a string to the icon
prop instead. (#1831)WithContext
component, as it was an undocumented part of the public API meant for internal use only (#1641)WithRef
component, as it was an undocumented part of the public API meant for internal use only (#1610)<Icon source>
to load a bundled icon. You must load the required icon directly from @shopify/polaris-icons
instead. (#1604)SvgSource
shaped object into <Icon source>
to load an icon imported using Shopify’s legacy icon loader. You must update sewing-kit to at least v0.82.0 which replaced the legacy loader with using SVGR. (#1604)<Icon source>
. You must pass in a React Component that returns an SVG element instead. (#1604)<Icon untrusted>
. Passing a string into source
will now always load an untrusted icon, you don't need that additional property. (#1604).Navigation.UserMenu
. Use TopBar.UserMenu
instead. (#1599)title
a required prop on ChoiceList
to improve accessibility. It can be hidden with titleHidden
. (#1575)i18n
a required prop on AppProvider
. Usage instructions are included in the AppProvider
docs. (#1530)react
and react-dom
peer-dependencies to 16.8.6 to enable the use of hooks (#1525)esModuleInterop
in tsconfig.json
. (#1523)LinkLikeComponent
type export. Use AppProviderProps['linkComponent']
instead. (#1864)Modal.Dialog
and Tabs.Panel
subcomponents as they were undocumented parts of our public API meant for internal use only (#1899).create-react-app
example in TypeScript demonstrating use of Polaris with react-testing
(#1937)AppliedFilterInterface
and FilterInterface
from Filters
(#1924)Banner
(#1651)onQueryFocus
callback prop to the Filters
component (#1948)ActionMenu
MenuAction
and MenuGroup.actions
(#1895)Page
actionGroups
not toggling the Popover
active
state on click #1905
Badge
progress
(#1928)BulkActionButton
from throwing an error in componentDidMount
(#1913)ToastManager
from not working correctly in React.StrictMode
(#1741)Tabs
list item presentation role (#1958)Modal
when loading an external app (#1992)PopoverOverlay
causing onClose
to be fired when Popover is opening and trigger was not the activator (#2000)ContextualSaveBar
blocking search when hidden (#2044)AppProvider
app bridge example to use our AppBridgeContext
(#1877)toBeDisabled
, mountWithContext
and added custom testing matchers (#1596)PolarisTestProvider
helper to ease configuration of required Polaris contexts in tests, see polaris examples for usage (#1810)unpkg.com
for our CDN CSS assets, instead of using sdks.shopifycdn.com
. Existing URLs will continue to work but new versions will only be available at unpkg.com
. (#1960)@shopify/polaris
in all examples to 4.0.0-rc.2 (#1937)@material-ui/react-transition-group
and removed react-transition-group
to support React.StrictMode
(#1759)@shopify/react-testing
(#1596)@shopify/css-utilities
(#1586)@types/prop-types
and prop-types
(#1505)react
to 16.8.6 and enzyme
to 3.9.1 (#1392)Collapsible
(#1929)DropZone
, Frame
, Icon
, and Loading
(#1927)withAppProvider
to use a functional component rather than a class component (#1813)Link
to use useI18n
rather than withAppProvider
(#1806)withAppProvider
(#1797)CSSTransition
from PopoverOverlay
(#1756)src/utilities
and src/test-utilities
to named exports (#1717)React.StrictMode
in test components and Storybook (#1709)ReactDOM.findDOMNode
(#1696)react/no-unsafe
ESLint rule with checkAliases
(#1695)Collapsible
to no longer use componentWillReceiveProps
(#1670)PositionedOverlay
to no longer use componentWillReceiveProps
(#1621)WithinContentContainer
context type (#1602)OptionList
to no longer use componentWillReceiveProps
(#1557)RangeSlider
DualThumb
tests (#1548)Sheet
to a functional component (#1548)withContext
from ResourceList.Item
(#1503)withContext
from Navigation.Item
(#1502)withRef
from UnstyledLink
(#1501)withContext
from ResourceList.FilterControl
(#1500)withContext
from Scrollable.ScrollTo
and added a test to boost coverage (#1499)withContext
from Loading
(#1497)withContext
and withAppProvider
from ContextualSaveBar
(#1498)withContext
from Toast
(#1494)withRef
and withContext
from DropZone.FileUpload
(#1491)useAppBridge
hook (#1482)AppProvider
to use the new context API and refactored other instances to follow a new pattern and refactor test utilities (#1424)withSticky
(#1424)Autocomplete
component from legacy context API to use createContext (#1403)Navigation
component from legacy context API to use createContext (#1402)ThemeProvider
to use the new context API (#1396)AppProvider
to no longer use componentWillReceiveProps
(#1255)Scrollable
(#1253)ThemeProvider
to no longer use componentWillReceiveProps
(#1254)Collapsible
(#1114)Frame
and its subcomponents to use the createContext
API instead of legacy context (#803)Banner
, Card
, and Modal
components from legacy context API to use createContext
(#786)singleColumn
onPage
tonarrowWidth
(#1606)