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 romellogoodman over 2 years ago
https://github.com/Shopify/polaris/compare/tokens-v5.0.0...tokens-v5.0.1
Published by romellogoodman over 2 years ago
Polaris Tokens v5.0.0 features an overhaul of the package and the APIs for accessing tokens. Documentation on all of the available tokens can be found at polaris.shopify.com/tokens/getting-started-with-tokens.
The Sass variables, maps, functions, mixins, and CSS Filters have all been removed. In addition to deprecating access to tokens via the Rails assets pipelines. This new version leverages JavaScript objects for each Token Group which are passed through various build transforms to compose the distributed artifacts.
This new version standardizes the token naming across all of the package outputs. Each token is formatted in kebab-case following common CSS variable name conventions.
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 almost 3 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)