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)
variableHeight
prop to DropZone
so children control its height (#4136)Card
, Heading
, Layout
, Layout.Section
, Subheading
, TextStyle
components (#4142)fullWidth
prop to ColorPicker
so the color picker can take the full width (#4152)noScroll
prop to Modal
which prevents modal contents from scrolling (#4153)color
prop to ProgressBar (#3415)requiredIndicator
prop to Label
, Labelled
, Select
and TextField
(#4119)small
prop to Modal
so that width can be decreased to 380px (#4177)status
prop to IndexTable.Row
to allow table rows to specify background colors(#4146)Published by alex-page over 3 years ago
Published by dleroux over 3 years ago
hideOnPrint
prop to Card
and CardSection
(#4071)DropZone
now has plural sentences when allowMultiple
is true #4037
IndexTable
header after scrolling past table body (#4063)IndexTable
to select row when clicked (#4062)Filters
focus state when tabbing into the component from a popover (#4073)isMounted
check from Portal
to only rely on the useEffect for calling onPortalCreated
(#4066)BulkActions
to eliminate flicker (#4081)Select
(#4089)Trapfocus
issue that was preventing tabbing with react forms (#4100)Published by kyledurand over 3 years ago
zIndexOverride
prop to Popover
(#3937)statusAndProgressLabelOverride
prop to Badge
(#4028)onError
hook to the Avatar
component (#4052)IndexTable
Remove parent resource name from bulk select action (#4013)@charset
declaration is the first thing in our styles.css file (#4019)Modal.Section
divider color to match header and footer divider (#4021)IndexTable
sticky header alignment and jank (#4033
<TextField>
to use autocomplete=nope
instead of autocomplete=off
(#4053)@shopify/polaris-tokens
to v3.0.0 (#4030)Published by alex-page over 3 years ago
focus-visible
polyfill and default styles (#3695)removeUnderline
prop to Button
to remove underline when plain
and monochrome
are true (#3998)#AppFrameMainContent
link and updated SkipToContent link to target #AppFrameMain
instead (#3912)color
in unstyled-button
mixin (#4008)IndexTable / IndexProvider
component (#3646)dataHref
prop to ResourceItem
which gets passed to the main li
element as data-href
(#3975)DropZone
so they accept all image types (#3701) (thanks @malanjp for the pull request)Frame
(#3936)Modal
, Navigation
and Sheet
(#3931)Modal
removing focus from internal elements (#3964)Badge
's css (#3950)Tooltip
to open when used as suffix on a TextField
(#3959)ActionList
more clear in high contrast mode (#3971)Tabs
layout issue on browser resize (#3980)ActionList
Item
not disabling properly when url prop is passed (#3979)IndexTable
's checkbox header to be aligned with other headers (#3990)CheckableButton
missing border when focused (#3988)Tabs
disclosure popover on close (#3994)IndexTable
(#4004)Toast
close button alignment for small views (#4006)Collapsible
bug where animation complete logic was being prematurely triggered by transitions in the children (#4000)IndexTable
bug where bulk actions are operable when no rows are selected (#4009)CheckableButton
missing border when focused (#3987)outline
and border
instances of -ms-high-contrast
as it is non-standard (#3962)Autocomplete
popover height not being calculated correctly (#4015)onRemove
prop to Tag
and clarified that no remove button is rendered when onClick
is set (#2987)List
, Tabs.List
, Connected.Item
and Filter.ConnectedFiltterControl.Item
to be functional components (#3961)Published by ashwinnarayanan2001 over 3 years ago
Published by alex-page over 3 years ago
Polaris React v6.0.0 is a major release that introduces breaking changes, primarily due to the new visual style.
For instructions on updating from v5 to v6, read the migration guide.
Link
is underlined by default, added removeUnderline
prop to remove underline (#3705)light
property from Tooltip
as it now defaults to a light background (#3846)title
property required in Modal
(#3803)accessibilityLabel
required on Sheet
(#3852)NewDesignLanguage
, Color
, AnimationProps
exported types (#3868)BaseAction
with Action
type (#3868)frameOffset
prop to accept a string in ThemeProvider
(#3883)Button
and UnstyledButton
's ariaPressed
prop. Consumers should use the pressed
prop instead (#3884)Button
's stretchContent
prop. Consumers should combine the fullWidth
and textAlign="left"
props instead (#3884)Popover
/PopoverOverlay
's preventAutoFocus
prop. Consumers should use autofocusTarget="none"
instead (#3884)button-filled-disabled
and plain-button-background
SASS mixins (#3817)text-emphasis-placeholder
SASS mixin (#3889)skeleton-page-header-has-secondary-actions
Sass mixin (#3919)plain
property in Pagination
as it no longer has any effect. (#3833)separator
property in Page
as it no longer has any effect. (#3918)additionalMetaData
to additionalMetadata
in Header
for consistency with Title
. (#3918)Icon
in Tabs
(#3926)Published by alex-page over 3 years ago
Label
and Labelled
’s label
prop type to React.ReactNode
instead of string
(#3787)focusable
prop to Scrollable
for when child content do not have focus (#3867)accessibilityLabel
in Tooltip
(#3843)Button
s not touching the bottom edge (#3841)Thumbnail
icon color to be subdued (#3846)ResourceList
to support user text zoom settings (#2983)ActionList
not rendering .active
indicator (#3854)Filters
(#3754)Published by alex-page almost 4 years ago
OptionList
selected styles (#3633)disclosure
when using textAlignLeft
for Button
(#3709)Button
(#3709)select
option for disclosure
in Button
(#3709)DatePicker
more clearly to screen readers (#3660)accessibilityLabels
prop to Pagination
(#3667)autofocusTarget
prop to enhance autofocus options on Popover
(#3600)Filters
component using hideQueryField
prop (#3674)tabIndex
to Scrollable
for keyboard focus (#3744)UserMenu
and Menu
subcomponents in TopBar
(#3659)aria-label
to the Loading
bar in Frame
(#3770)Collapsible
to be a functional component (#3779)TooltipOverlay
to a functional component (#3631)ariaDescribedBy
prop for Button
(#3664)Tag
component (#3810)plain
variant children
no longer remain visible while loading
for Button
(#3709)disclosure
180deg when toggling between up
and down
on Button
(#3709)Button
(#3709)FocusManager
from tracking inactive items that prevented trap focusing(#3630)Tooltip
(#3627)DataTable
and added curved edges to footers (#3571)Button
: loading
no longer sets the invalid role="alert"
(#3590)Filters
(#3629)Filters
not announcing applied filters (#3632)tabIndex=-1
from Popover
when preventAutoFocus
is true (#3595)Modal
header border color (#3616)CloseButton
in Modal
(#3628)Filters
duplicated ConnectedFilter
ids (#3651)Banner
secondaryAction
only rendering if action
is set (#2949)alwaysRenderCustomProperties
to ThemeProvider
for elements that render outside of the DOM tree to their parent context (#3652)Tab
component (#3650)TrapFocus
disallowing focus inside Portal
(#3790)::before
colour (#3669)::before
(#3675)aria-selected
from ActionList
as it is not a selectable list (#3725)aria-role="combobox"
in Autocomplete
from the div
to the input
(#3727)aria-multiline
in Input
when false or undefined (#3727)aria-multiselectable
from OptionList (#3729)button
with div
in RangeSlider
for correct semantics when using role="slider"
(#3730)React.Fragment
with li
in ResourceList
spinner for valid markup (#3732)TextField
unintentionally closing Popover
when clicked (#3688)TextField
(#3688)-ms-high-contrast
media query from ms-high-contrast-outline
as it is non-standard and updated the outline color from windowText
to transparent
(#3775).Collapsible
expand and collapse animation (#3779)Page
where re-rendering of secondaryActions
could cause layout jittering (#3641)TagsWrapper
from Filters
for testability (#3688)Published by kyledurand almost 4 years ago
Thumbnail
source
property to support icons
(#3328)Button
: New role
prop for <button />
(#3590)preventFocusOnClose
to Popover
(#3595)focus-ring
mixin (#3626)role="presentational"
to list items for Tabs
(#3647)PortalsManager
(#3644)FocusManager
from tracking inactive items that prevented trap focusing(#3630)Tooltip
(#3627)DataTable
and added curved edges to footers (#3571)Button
: loading
no longer sets the invalid role="alert"
(#3590)Filters
(#3629)Filters
not announcing applied filters (#3632)tabIndex=-1
from Popover
when preventAutoFocus
is true (#3595)Modal
header border color (#3616)CloseButton
in Modal
(#3628)Filters
duplicated ConnectedFilter
ids (#3651)Banner
secondaryAction
only rendering if action
is set (#2949)alwaysRenderCustomProperties
to ThemeProvider
for elements that render outside of the DOM tree to their parent context (#3652)Tab
component (#3650)::before
colour (#3669)preventAutoFocus
prop description for Popover
(#3595)Published by kyledurand almost 4 years ago
color-transformers
(https://github.com/Shopify/polaris-react/pull/3640)Published by kyledurand almost 4 years ago
Published by kyledurand almost 4 years ago
ariaExpanded
prop to TextField
(#3589)MediaCard
to accept ReactNode as title and make primaryAction
optional (thanks to @devchris for the pull request)UnstyledButton
: Added loading
prop to apply role
and aria-busy
attributes (#3494)ThemeProvider
to only output its custom properties in nested ThemeProvider
s when they differ from the parent context (#3550)content
prop's type to not only accept string, but any React.Node
. (#3559)TopBar
to show the logo when there is no navigation or search fields (#3523)Banner
icon to be a diamond (#3567)SkeletonPage
to make the title font size consistent with the Page
component (#3449)Navigation.Item
color change when focused (#3562)connectedDisclosure
prop on Button
component and fix spacing issue (#3588
Button
: Reduced redundant code repeated within UnstyledButton
(#3494)