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 kyledurand almost 3 years ago
This release has the potential to break stack layouts. Fixed in 7.2.0
Item
in Stack
(#4487)react
and react-dom
to version 16.14.0. This is now the minimum version of React required to use the @shopify/polaris
library.autoComplete
prop in TextField
a required string (#4267). If you do not want the browser to autofill a user's information (for example an email input which is a customer's email, but not the email of the user who is entering the information), we recommend setting autoComplete
to "off"
.Autocomplete
now requires Autocomplete.TextField
to be used (#3910)Autocomplete
(#3910)esnext
folder from the package. If you use Polaris in an app built with sewing-kit, it must use at least sewing-kit 0.152.0 to leverage esnext builds. (#4425)dist/styles.css
to build/esm/styles.css
. Consumers who import styles shall need to update their import path. (#4424)dist/styles/_public-api.scss
to build/styles/_public-api.scss
. Consumers who use our Sass API shall need to update their import path. (#4424)lastColumnSticky
prop to IndexTable
to create a sticky last cell and optional sticky last heading on viewports larger than small (#4150)id
prop to Layout
and Heading
for hash linking (#4307)external
prop to Navigation.Item
component (#4310)ariaLabelledBy
props to Navigation
component to allow a hidden label for accessibility (#4343)ActionList
(#4355)BulkAction
component (#4266)onClick
key to secondaryAction
on Nav/Item
component (#4374)extraSmall
prop to Avatar
(#4371)critical
color option to ProgressBar
component (#4408)forceUpdatePosition()
API to Popover
for programmatically triggering a re-render of the underlying overlay component (#4385)forceUpdatePosition()
API to PositionedOverlay
for programmatically triggering a re-render of the component (#4385)wrapOverflow
prop to AutocompleteProps
props to force text-breakword (#4416)IndexTable
handling of checkboxes when selectable
prop is false
(#4376)compactTitle
prop to Page
which removes margin between title
and subtitle
(#4463)maxHeight
prop to TextField
component to limit the height of multi-line inputs (#4476)Autocomplete
#4221
onClick
property for subNavigationItem
on Nav/Item
component to execute, if provided (#4394)IndexTable
row hover state colour when unselected (#4359)selected
prop having no effect for Navigation.Item
when url
prop is not specified (#4375)TextField
when there is no input (#4369)Option
(#4411)primaryAction
in Banner
(#4338)Popover
not correctly positioning itself (#4357)TextField
in Safari (#4344)Button
text colour after changing state from disabled to enabled (#4270)IndexTable
sticky cells (#4150)IndexTable
sticky z-index to avoid collisions with focused TextField
(#4150)Icon
where aria-label
was used incorrectly (#4414)TextField
component (#4477)Playground
component inside an iframe (4392)Autocomplete
internals using new Combobox
and Listbox
components built on the ARIA 1.2 spec for improved accessibility (#3910)@shopify/react-testing
to v3.2.0 for React 17 support in tests (#4349)KeypressListener
attaching/detaching on every render (#4173)animated
prop in ProgressBar
(#4251)divider
prop to Page
component (#4260)activator
prop to Sheet
so the triggering element will regain focus (#4201)monospaced
prop to TextField
component (#4264)Stack
component(#4273)Button
text is gray instead of white after changing state from disabled to enabled (#4270)DataTable
unmounts (#4249)Sheet
(#4269)Popover
and Scrollable
scroll hinting is complete (#4265)Published by mathildebuenerd over 3 years ago
pointer-events
on the prefix and suffix elements of the TextField
component (#4207)focus-ring
mixin for when unitless addition occurred (#4234)Scrollable
lower bound detection for lower resolution screens (#4218)DropZone
to match current design. (#4123)Loading
setting state after it has unmounted (#4158)Filter
component when used without filters. (#4134)DualThumb
when used with a min value different from 0 #4172
ResourceList
(#4208)DropZone
(#4219)Sheet
component #4210
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 almost 4 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