Shopify’s design system to help us work together to build a great experience for all of our merchants.
OTHER License
Bot releases are hidden (Show)
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 almost 5 years ago
Button
which caused infinite layout and high CPU load in Safari, related to WebKit Bug 194332 (#2350)Published by LauraAubin almost 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)Published by alex-page about 5 years ago
subtitle
and thumbnail
prop to Page
(#1880)Tab
aria-controls
pointing to a non-existent Panel
id
(#1869)Toast
accessibility issue by moving aria-live
prop to ToastManager
(#1873)@shopify/typescript-configs
as the base of tsconfig.json
for the project (#1829)Published by dleroux over 5 years ago
verticalAlign
prop to DataTable
(#1790)Navigation
(#1822)SearchInput
clear button which was overflowing the search bar in Firefox 65+ (#1795)Tooltip
when cursor enters from a disabled element (#1783)Filters
component to use import * as React
for projects that don't use esModuleInterop
(#1820)tabIndex
on main
element causing event delegation issues (#1821)autoComplete
prop onAutocomplete.TextField
(#1839)Published by dleroux over 5 years ago
Filters
: Use to filter the items of a list or table (#1718)Disclosure
button on Tabs
(#1755)ChoiceList
(#1758)styles
folder) are now precompiled to avoid the chance of accidentally overwriting any of our global variables, mixins and functions (#1764)Skip to content
to render an anchor instead of a button to meet accessibility level A guidelines (#1785)Link
would always be recolored to match the text color (#1729)DiscardConfirmationModal
not closing when the discard button is clicked (#1784)Navigation.Item
secondaryAction
wrapping when content wraps (#1678)Published by dleroux over 5 years ago
ActionMenu
: Use for display of actions and action groups within the context of a header (#1653)stopAnnouncements
prop to Banner
, which disables screen reader announcements when content changes (#1719)selectable
prop to ResourceList
component (thanks to @vict-shevchenko for the pull request)Link
and Button
interactions when rendered as prefix/suffix
within <TextField />
(#1394)TextField
so that character count is only announced on focus. (#1720)ActionList
can now pass a unique accessibilityLabel
to each Item
(#1653)Page > Header
(#1653)Page > Header
breadcrumb labels will now truncate instead of breaking layout (#1653)TabMeasure
component (#1544)secondaryFooterActions
prop to Card
which adds an action list of secondary actions to the footer #1625
monochrome
variant of Link
and Button
components to support multi-line link text (#1686)DataTable
not rendering in iOS Safari (#1605)TextField
Spinner
(#1740)Card
for custom action layout with a secondary action and a plain button (thanks to @sharoonthomas for the pull request)v5.1.9
(#1728)PositionedOverlay
to no longer use componentWillReceiveProps
(#1621)Card
secondaryFooterAction
is now deprecated. Set an array of secondary actions on the secondaryFooterActions
prop instead #1625