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 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
Published by dleroux over 5 years ago
<Icon source>
Pass in an svg component imported from @shopify/polaris-icons
instead (#1534).action
prop optional on EmptyState
(#1583)resolveItemId
prop to ResourceList
which is used in the new multiselect feature (#1261)actions
prop to <Card.Section>
to allow you to easily define header actions in a card section (#1598)<Card.Subsection>
to allow you to further subdivide <Card.Section>
in a consistent manner (#1611)textAlign
prop to Button (#1576)Button
red when given both the plain
and destructive
props (#1603)Card
and Card.Section
(#1622)Modal
body (#1584)DropZone
, Form
, Modal
, Section
, Page
, Tabs
, TextField
and TopBar
(#1565,#1582).Sheet
(#1569)Banner
title
overflowing when set to a single long word (#1553)CombinedProps
and unneccessary export for Class based components (#1592)TextField
prefix (#1132)ResourcePicker
not updating function references for onSelection
and onCancel
callbacks #1451
TextField
label
being set as the value of the label
node, as well as the aria-label
aria-labelledby
attributes, when only one method will suffice (#1615)Tabs
and Popover
(#1629)Collapsible
component example (#1591)RangeSlider
component (#1630)Collapsible
component (#1631)DescriptionList
component (#1634)Form
component (#1636)ExceptionList
component (#1635)KeyboardKey
component (#1640)Tag
component (#1647)Modal
component (#1648)v5.1.0-rc.4
(#1616)3.5.1
(#1650)Published by tmlayton over 5 years ago
RangeSlider
component (#1436)AnnotatedSection
to allow its title
prop to accept React.ReactNode
instead of string
(#1431)Toast
messages to make them more visible in Windows high contrast mode (#1469)box-shadow
to the Banner
to make it more visible in Windows high contrast mode (#1481)box-shadow
to the Card
to make it more visible in Windows high contrast mode (#1524)Navigation
component hover and active states (#1551)v5.1.0-alpha.39
, improving component search-ability in the sidebar (#1488)Published by danrosenthal over 5 years ago
This release fixes an issue introduced in v3.14.0
that caused the esnext
build not to succeed resulting in build errors for consumers (#1466)
NavigationItem
's color accessibility for active
, focus
, hover
and Selected
states (1304)align
prop to TextField
(#1428)clearButton
prop to TextField
(#1226)Checkbox
from improperly toggling when disabled (#1467)Popover
fade-in flutter on iOS by switching Transition component for CSSTransition (#1400)Link
component. (#1425)Modal
component documentation (#1336)Published by chloerice over 5 years ago
⚠️ This release contains an issue that caused the esnext
build to fail, resulting in errors for consumers of this particular bundle (fixed in 3.15.0).
Sheet
component (#1250)ResourceList
(#1313)withinContentContainer
context to Navigation
(#1393)Tooltip
content to wrap nonbreaking strings #1395
window
call on server
executed code #1427
onClick
from firing three times when using the enter key on a ResourceList
item (#1188)[Intervention]
errors for touch interactions on ColorPicker
(#1414)font-family
to button
elements which were being overridden by User Agent Stylesheet (#1397)Checkbox
being toggled when disabled (#1369)DropZone.FileUpload
from incorrectly displaying action hint and title when the default is used and removed (#1233)ResourceList.Item
interaction states from being incorrectly applied (#1312
Loading
visibility in Windows high contrast mode (#1389)PositionedOverlay
component after scroll (#1382)Pagination
when used with Tooltip
(#1277)TextContainer
having no top margin (#1357)Tooltip
in Windows high contrast mode (#1405)Navigation.Section
rollup collapsing when Navigation.Item
subNavigationItems
expand (#1417)Link
accessibility documentation for the external
prop to reflect new behavior (#1347)VisuallyHidden
(#1348)TextStyle
(#1350)Heading
and Subheading
(#1351)List
and Stack
(#1353)DisplayText
(#1354)ActionList
and OptionList
(#1365)Card
and CalloutCard
(#1366)Badge
(#1364)Icon
(#1404)Popover
(#1408)ContextualSaveBar
guidelines (#1423)devDependencies
(#1327)@shopify/react-utilites
to remove a transitive dependency on core-js
(#1343)typescript
to 3.2.4 (#1388)sewing-kit
to 0.83.1 and babel-preset-shopify to ^18.1.0 (#1344)Published by alex-page over 5 years ago
Item
’s iconBody
prop. Pass a string into the icon
prop instead. (#1299)onChange
handler to CheckableButton
(#1326)Labelled
now wraps its content, no longer causing a label + action
to get unreasonably squished (#1309)polaris-tokens
from 2.3.0
to 2.5.0
and converted all use of duration
values (#1268)text-breakword
mixin (#1306)Link
opens a new tab (#1247)polaris-react
across multiple repos (#1069)frame-with-nav-max-width
variable and matching frame-with-nav-when-not-max-width
mixin (#1311)Resizer
to schedule handleHeightCheck
to run in next animation frame (#1301)ResourceList
actions from show at incorrect breakpoints or while in select mode (#1333)onChange
and value
to select AppProvider
examples to remove console errors (#1320)ResourceList
not properly disabling (#1317) (thanks @jineshshah36 for the issue report)ResourceList
header from displaying when EmptySearchResult
exists (#1286)polaris
context into the div rendered by Scrollable
(#1271)DataTable
(#1273)DropZone
to use the new createRef API (#1063)ResourceList
to no longer use componentWillReceiveProps
(#1235)Tabs
to no longer use componentWillReceiveProps
(#1221)Header
component (#1272)Button
. Prefer passing in the React Component from @shopify/polaris-icons
(#1297)Published by chloerice over 5 years ago
focus
method on Banner
(#1219)onScrollToBottom
prop to Popover.Pane
(#1248)placeholder
prop to FilterControl
(#1257)TextField
autoComplete
prop (#1259)ResourceList
(#1237)Checkbox
from losing focus and not receiving some modified events(#1112)ResourceList
BulkActions
(#1243)Autocomplete
onLoadMoreResults
prop not being called on scrolling to the end of the option list (#1249)button group joined to the bottom of a component
example (#1267)Published by chloerice over 5 years ago
Navigation
badge prop to accept a react node (#1142)Search
to 694px so that it is perfectly centered in the top bar (#1107)action
prop to Toast
(#919)@shopify/javascript-utilities/decorators
, namely autobind
, debounce
, and memoize
(#1148)Empty State
footerContent prop (#1200)TopBar
to enlarge the contextControl
wrapper on wider screens (#1231)ResourceList
not toggling when items are selected programmatically (#1224)TextField
due to unhandled carriage returns (#901)TextField
when setting to readOnly (#1118)Checkbox
, RadioButton
, and ChoiceList
(#1145)_.merge
with a custom merge
function (#1018)_.pick
with a custom pick function (#1020)Icon
. Prefer passing in the React Component from @shopify/polaris-icons
(#1196)onScrolledToBottom
prop to Modal
(#1117)Navigation.Item
to use Icon
when iconBody
prop is passed in. Renders these icons in an img
tag now. (#1094)Button
(#1101)DropZone
height based on inherited wrapper height #1129
Tag
button states (#1078)window.Polaris
, which in some cases could be undefined (#1104)subdued
sections for proper spacing between the header and footer (#1082)Stack
to prevent overflow (#1024)SkeletonThumbnail
and Thumbnail
(#1141) (thanks @mbaumbach for the issue report)ComboBox
tests that were not running (#1137)Page
, PageActions
, and Pagination
(#1103)Modal
documentation for properties only available in a stand-alone app context (#1065)Banner
(#1071)InlineError
(#1073)Loading
(#1075)ariaPressed
prop for Button
(#1097)selected
prop for Autocomplete
(#1053)_.throttle
with debounce
(#1009)_.replace
(#1012)create-react-app
example (#1010)create-react-app
example dependencies (#1010)_.capitalize
with a custom capitalize
function (#1015)_.isObject
with a custom isObject
function (#1011)_.get
with a custom get
function (#1013)Banner
, DropZone
, and ResourceList
to @shopify/polaris-icons (#1042)Image
component instead of an SVG tag to render (#1042)Published by alex-page over 5 years ago
SkeletonThumbnail
for representing thumbnails in loading stateTopBar.UserMenu
interaction states styling (#1006)download
prop to Button
and UnstyledLink
components that enables setting the download attribute (#1027)DatePicker
(#1005)untrusted
prop to Icon
to render SVG strings in an img tag (#926)data-href
to ResourceList.Item
s that have a url
prop (#1054)type="number"
TextField
to prevent conditions where press-and-hold could increment or decrement infinitely (#1029)DataTable
overlapping its container’s border (#975)DataTable
sort direction not reversing on second sort of the initially sorted column (#918) (thanks @tabrez96 for the issue report)Tooltip
between activator and message to be consistent with Popover
(#1019)Card
header not showing when title
empty or not set (#1031)TextField
inside Collapsible
which is inside a scrollable element, the text disappeared if you focused a fully hidden TextField
(#1047)Published by danrosenthal over 5 years ago
TopBar
search input and results with page content (#1008)ResourceList
in the style guide (#978)Published by danrosenthal over 5 years ago
TopBar
logo background (#957)TopBar
search results width to adapt to search input and added a minimum width (#969)Card.Section
to accept React.ReactNode
as title
(#781)contextControl
prop to TopBar
and Navigation
(#966)Collapsible
to use overflow: visible;
once fully open (#951)DataTable
sort direction not reversing on second sort of the initially sorted column (#918) (thanks @tabrez96 for the issue report)TextField
when passing null
to value
(#964) (thanks @mbaumbach for the original issue)showHidden
prop on ResourcePicker
for backward compatibility with legacy EASDK (#981)Card
to add space between action buttons in the header and footer and the card sections. (#962)DataTable
in the style guide (#1003)@shopify/polaris-icons
v2.0.0 (#982)Published by BPScott over 5 years ago
TextField
accepts a showCharacterCount
prop to enable the display of character count (#709)Banner.Header
(#870)activatorWrapper
in Popover
when destructuring props (#916)Banner
secondaryAction content wrapping in Firefox (#719)onKeyPress
, onKeyDown
, and onKeyUp
to Button
(#860)monochrome
prop to Button
and Link
component (#821)Frame
layout and made TopBar.UserMenu
visible on mobile (#852)forceRender
prop to Page
to not delegate to the app bridge TitleBar action (#695)Tabs
example to contain children so the Panel
renders for accessibility (#893)ResourceList
date filter control (#710)TopBar
component (#859)Stack.Item
properties and description to style guide’s (#772)yarn.lock
(#856)Published by danrosenthal almost 6 years ago
Button
components with a url
prop output valid HTML (#773)DropZone
which was unable to add a duplicate file back to back or add a file again once removed #782. Thank you @jzsplk for the contribution #425 and @vladucu for the clear example.safeAreaFor
sass mixin to handle browsers that don't support env
and constant
(#881)Published by danrosenthal almost 6 years ago
oneHalf
and oneThird
props to Layout
component (#724)helpText
prop to ActionList
items (#777)Page
header layout so actions take up less room on small screens (#707)alternateTool
prop to ResourceList
component (#812)ExceptionList
items from dark orange to dark yellow for better differentiation from critical status items (#813)TextField
not showing the correct color while it has focus and an error (#806)ResourceList
not rendering BulkActions
on initial load when items were selected (#746)Badge
component so that it is simpler and easier to read (#751)autocomplete
property on TextField
to nope
when it was false
(#761)CalloutCard
(#353)ResourceList.Item
and make it unactionable while loading (#745)Checkbox
from losing focus when quickly toggled (#717)PositionedOverlay
test environment (#758)ResourceList
not rendering a header after initial load (thanks to @andrewpye for the original issue)TextField
not passing step
to the input (#829)Option
and Group
types in Select
to work around typedoc oddness (#830)@shopify/polaris-tokens
to v2.1.1 (#813)Published by danrosenthal almost 6 years ago
ResourceList.Item
opening a URL in new tab if command or control keys are pressed during click (#690)primaryAction
prop to SkeletonPage
(#488)type="number"
TextField
(#573) (thanks to @andrewpye for the original issue)Avatar
to fall back to initials
when the image fails to load (#712)Popover
not opening in a small Scrollable
container (#658)Page
header component to only render actions wrapper when actions are present (#732)ContextualSaveBarProps
type not being exported (#734)Avatar
proportions when image is not square (#740)