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 alex-page over 2 years ago
icon
prop to the Badge
component (#5292)DataTable
component when the increaseTableDensity
prop is set to true
(#5480)ReactNode
on the PageActions
secondaryActions
prop (#5495)video
as DropZoneFileType option on the DropZone
component (#5349)height
prop to Combobox
and Popover.Pane
to support setting a fixed height
and man-height
on the Scrollable
(#5571)Pip
a sub-component of Badge
and exposed it to outside (#5520)Tag
for removable tag with link (#5567)TextField
(#5571)aria-activedescendent
being unset in Combobox
on option select when allowMultiple
is true
(#5584)Combobox
multi-select examples not resetting the input value and list on option select (#5584)Published by romellogoodman over 2 years ago
this is a test of triggering the a release github action via the github release UI
Published by chloerice over 2 years ago
@keyframes
tokens and replacing hardcoded instances (5427)DataTable
totalsName
prop (#5454)verticalContent
prop to TextField
to support rendering markup above the input value (#5392)suggestion
prop on TextField
to support inline autocomplete (5303)ariaAutocomplete
to both
on Combobox.TextField
(5303)willLoadMoreOptions
prop to Combobox
that's passed to Listbox
through context so that onKeyToBottom
is only called if willLoadMoreOptions
is true
(5303)Autocomplete
performance when options are lazy loaded by passing willLoadMoreResults
to the Combobox
willLoadMoreOptions
prop when present (5303)Listbox
scroll UX to behave natively when navigating options with keyboard instead of scrolling the active option to the top of the visible list (5303)Published by alex-page over 2 years ago
Listbox
to only scroll when active option outside of view (#5401)Tag
component for mobile view (#5353)Tag
component (#5312)ReactNode
as an accepted prop type to secondaryActions
on the Page
component (#5258)useCapture
and options
props in KeypressListener
to allow passing through those options to the underlying addEventListener
call (#5221)Thumbnail
component transparent (#5109)transition
values with tokens (5340)font-size
and line-height
values with tokens (5355)border-width
values with tokens, replaced sass var with css custom property, removed unused sass vars, and updated Banner
Secondary action styles (5389)icon-attention
and surface-attention
color tokens (5389)transitions
and animations
with hard coded duration values (5405)DataTable
(#5365)Combobox
and Listbox
(#5298)Listbox
(#5297)Header
in Page
(#5390)disabled
Listbox.TextOption
not setting disabled
on the Checkbox
rendered when allowMultiple
is true
(#5428)calc()
with space token equivalent (#5295)Published by aveline over 2 years ago
SkeletonTabs
component (#5229)ColorPicker
to make it easier to see the draggers (#4948)Navigation
at 769px (#5213)top: 0
to VisuallyHidden
CSS to prevent unexpected scrolling when using a Sheet
(#5208)Form
> VisuallyHidden
markup causing excessive vertical whitespace (#5181)Toast
where it wasn't rendering (#5224)examples
dir and all references (#5207)Published by alex-page over 2 years ago
For instructions on updating from v8 to v9, see our migration guide.
CSS custom properties
--p-badge-font-weight
and --p-button-font-weight
(#4687)--p-duration-1-0-0
and --p-duration-1-5-0
to --p-duration-100
and --p-duration-150
.--p-override-*
--p-non-null-content
--p-badge-mix-blend-mode
--p-range-slider-thumb-scale
custom properties (#4686)nonDesignLangaugeCustomProperties
and designLangaugeCustomProperties
(#4770)--p-icon-size
to --p-icon-size-small
(#4990)--global-ribbon-height
to --pc-frame-global-ribbon-height
(#4804)--p-frame-offset
to --pc-frame-offset
(#4804)--top-bar-*
to --pc-top-bar-*
(#4804)Sass functions and mixins
color()
function (#4696)border-width()
function (#4900)filter()
function (#4676)px()
function (#4751)em()
function (#4937)rem()
function (#4761)color-multiply
function (#4714)z-index()
function (#4753)border()
function (#4934)available-names()
function (#4967)map-extend
function (#4970)spacing()
function and replaced with tokens (#4691)easing()
function and replaced with tokens (#4698)duration()
function and replaced with tokens (#4699)border-radius()
function and replaced with tokens (#4793)shadow()
function and replaced with tokens (#4823)font-family()
function and replaced with tokens (#4940)ms-high-contrast-color()
function and replaced with values (#4938)color-icon()
mixin (#4676)skeleton-shimmer
mixin (#4462)state()
mixin (#4989)skeleton-page-header-layout
mixin (#4991)skeleton-page-secondary-actions-layout
mixin (#4991)unstyled-link()
mixin and replaced with values (#4951)unstyled-list()
mixin and replaced with values (#4960)high-contrast-outline()
and high-contrast-border()
mixins and replaced with tokens and values (#4962)when-printing
, when-not-printing
, hidden-when-printing
, and print-hidden
scss mixins (#4995)icon-size()
function with the --p-icon-size-medium
custom property (#4990)Sass global variables
ThemeProvider
ThemeProvider
component (#4642)logo
from ThemeProvider
to Frame
context (#4667)frameOffset
from ThemeProvider
to offset
prop on Frame
(#4727)Components
secondaryAction
prop on SkeletonPage
(#4742)Development workflow
CustomProperties
component (#4642)0
and 500
with 50ms
increments (#4781)ContextualSaveBar
not registering the secondaryMenu
in the Frame
context (#5116)monochrome
outline
Button
children
being visible when loading
(#5145)@shopify/polaris-tokens
dependency (#4868)/
for division in preparation for dart-sass support #4933)additionalNavigation
in <Page>
componentPublished by kyledurand over 2 years ago
100%
from 62.5%
and update rem
values accordingly, along with pxtorem
rootValue
(#4794)_SECRET_INTERNAL_FilterControl
and _SECRET_INTERNAL_FilterControlProps
exports. These exports have been deprecated since Polaris v5 and are not part of our stable API, which is why we are removing them in a minor release. (#4905)Node 16 is now a requirement to run the styleguide
If your app is using hard coded rems, you'll need to change those to use the rem()
function exported from @shopify/polaris/build/styles/public-api
.
i.e.
1.6rem
would become rem(16px)
32rem
would become rem(320px)
Published by dleroux almost 3 years ago
ActionList
(#4505)ActionList/Section
(#4505)DropZone.FileUpload
(#4813)Page
component Header
(#4770)verticalAlign
prop to OptionList
. (#4800)url
prop in the Tag
component (#4837)children
to take elements other than strings in the Tag
component (#4837)@shopify/storybook-a11y-test
package to the latest version 0.3.0
(#4870)warning
variation to TextStyle
(#4880)TextField
component instead of removing it from the DOM (#4897)Tag
component (#4816)Popover
position in Combobox
when an element is conditionally rendered before the Combobox
(#4825)status
in Badge
(#4840)MutationObserver
of the PositionedOverlay
was calling setState on an unmounted component (#4869);FileUpload
(#4875)Autocomplete
action when allowMultiple
is true (#4887)Listbox.Action
was not treated like an action when used outside Autocomplete
(#4893)Checkbox
in a Combobox
with allowMultiple
would steal focus and close the Popover
when clicked (#4895)Icon
component where examples did not show (#4843)ActionList
(#4505)Popover
and ActionList
(#4505)dev start
command. Thank you to @aaronadamsCA for the contribution (#4876).@shopify/polaris-icons
to v4.11.0 (#4837)@storybook/react
to 6.4.10 (#4796)@shopify/storybook-a11y-test
to 0.4.3 (#4796)serve
. Thank you to @aaronadamsCA for the contribution (#4876).Published by kyledurand almost 3 years ago
Skeleton
components (#4697)Page
header (#4080)Popover
on small viewports (#4114)components
as it slows tests down (#4735, #4739)postcss
to v8.3.1
(#4701)@shopify/postcss-plugin
to v5.0.1
(#4701)postcss-loader
to v4.2.0
(#4701)postcss-modules
to v4.2.2
(#4701)node-sass
to v6.0.1
(#4783)sass-loader
to v10.1.1
(#4783)stylelint
to v14.1.0
and @shopify/stylelint-plugin
to v11.0.0
(#4798)eslint
to v8.3.0
and @shopify/eslint-plugin
to v41.0.1
(#4797)rem()
function from tokens.ts
(#4695)Tokens
in Collapsible
test (#4722).storybook/manager.js
(#4729)Published by lgriffee almost 3 years ago
Published by dfmcphee almost 3 years ago
useIndexTableRowHovered
, useIndexTableRowSelected
, and useIndexTableContainerScroll
to IndexTable
(#4286)Popover
component and its animation (#4580)base
easing curve (#4580)ActionList
(#4571)MediaCard
when card has no actions (thanks to @emilycritter for the pull request)Stack
where vertical spacing was off (#4572)DropZone
documentation 4566
Bumped polaris-icons to v4.10.0 (#4569)
Published by chloerice almost 3 years ago
MediaCard
to ComplexAction
(#4546)Fixed Stack.Item
having margin when empty (#4556)
Fixed Stack
not wrapping valid children in Stack.Item
(#4556) (thanks @benjamindoe for the original issue)
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