polaris

https://github.com/Shopify/polaris/compare/tokens-v5.0.0...tokens-v5.0.1

Fixes

• https://github.com/Shopify/polaris/pull/5689 Exposes .scss file
• https://github.com/Shopify/polaris/pull/5686 Fixes and issue with ESM interoperability

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.

Bug fixes

• Fixed documentation example for ComboBox (#5622)

Bug fixes

• Fixed default Pip color in Badge (#5616)

Enhancements

• Added icon prop to the Badge component (#5292)
• Improved styling for the DataTable component when the increaseTableDensity prop is set to true (#5480)
• Added support for setting a ReactNode on the PageActions secondaryActions prop (#5495)
• Added support for NodeJS v14 (#5551)
• Add video as DropZoneFileType option on the DropZone component (#5349)
• Removed whitespace from CustomProperties output (#5570)
• Added a height prop to Combobox and Popover.Pane to support setting a fixed height and man-height on the Scrollable (#5571)
• Made Pip a sub-component of Badge and exposed it to outside (#5520)

Bug fixes

• Fixed focus and hover style on Tag for removable tag with link (#5567)
• Fixed border size on vertical content on TextField (#5571)
• Fixed aria-activedescendent being unset in Combobox on option select when allowMultiple is true (#5584)

Documentation

• Fixed Combobox multi-select examples not resetting the input value and list on option select (#5584)

this is a test of triggering the a release github action via the github release UI

9.4.0 - 2022-04-08

Enhancements

• Increased token coverage by creating @keyframes tokens and replacing hardcoded instances (5427)
• Added support for setting a ReactNode on DataTable totalsName prop (#5454)
• Added a verticalContent prop to TextField to support rendering markup above the input value (#5392)
• Added a suggestion prop on TextField to support inline autocomplete (5303)
• Added support for setting ariaAutocomplete to both on Combobox.TextField (5303)
• Added a willLoadMoreOptions prop to Combobox that's passed to Listbox through context so that onKeyToBottom is only called if willLoadMoreOptions is true (5303)
• Improved Autocomplete performance when options are lazy loaded by passing willLoadMoreResults to the Combobox willLoadMoreOptions prop when present (5303)
• Updated 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)

Bug fixes

• Fixed automatic selection of first navigable Listbox.Option not resetting in Listbox (5303)
• Fixed subdued styles not applying to Listbox.TextOption when disabled (5303)
• Fixed Listbox.TextOption keyboard focus ring flashing when focus moves to an option being scrolled into view (5303)

Enhancements

• Updated Listbox to only scroll when active option outside of view (#5401)
• Added visual density updates to Tag component for mobile view (#5353)
• Added visual density updates to Tag component (#5312)
• Added ReactNode as an accepted prop type to secondaryActions on the Page component (#5258)
• Added useCapture and options props in KeypressListener to allow passing through those options to the underlying addEventListener call (#5221)
• Add option to make Thumbnail component transparent (#5109)
• Replaced hard coded transition values with tokens (5340)
• Replaced hard coded font-size and line-height values with tokens (5355)
• Replaced hard coded spacing values with tokens (5364)
• Simplified usage of color tokens (5360)
• Increased token coverage by replacing hard coded border-width values with tokens, replaced sass var with css custom property, removed unused sass vars, and updated Banner Secondary action styles (5389)
• Created icon-attention and surface-attention color tokens (5389)
• Increased token coverage by removing unnecessary transitions and animations with hard coded duration values (5405)
• Added optional visual density updates and zebra striping to DataTable (#5365)

Bug fixes

• Fixed accessibility issues on focus and option create in Combobox and Listbox (#5298)
• Fixed accessibility issues and logic to set active descendant in Listbox (#5297)
• Fixed alignment of right-hand side of Header in Page (#5390)
• Fixed disabled Listbox.TextOption not setting disabled on the Checkbox rendered when allowMultiple is true (#5428)

Dependency upgrades

• Bumped @shopify/polaris-icons to v4.18.2 (#5312)
• Bumped marked from 0.7.0 to 4.0.10 (#4898)

Code quality

• Replace calc() with space token equivalent (#5295)

Bug fixes

• Passed TextField event object to onFocus callback to address failing admin unit tests (#5265)

Bug fixes

• Moved all CSS custom properties to be defined under the Polaris color-scheme selector (#5257)

Enhancements

• Added SkeletonTabs component (#5229)
• Added an inset box-shadow to ColorPicker to make it easier to see the draggers (#4948)

Bug fixes

• Fixed logo appearing in Navigation at 769px (#5213)
• Reintroduced top: 0 to VisuallyHidden CSS to prevent unexpected scrolling when using a Sheet (#5208)
• Fixed Form > VisuallyHidden markup causing excessive vertical whitespace (#5181)
• Fixed a bug in Toast where it wasn't rendering (#5224)

Documentation

• Removed examples dir and all references (#5207)

Enhancements

• Added the selectTextOnFocus prop to TextField (#5216)

Bug fixes

• Fixed Sheet animation by replacing deprecated easing() with css custom property (#5251)

9.0.0 - 2022-02-15

For instructions on updating from v8 to v9, see our migration guide.

Breaking changes

CSS custom properties

• Removed --p-badge-font-weight and --p-button-font-weight (#4687)
• Renamed --p-duration-1-0-0 and --p-duration-1-5-0 to --p-duration-100 and --p-duration-150.
• Removed --p-override-* --p-non-null-content --p-badge-mix-blend-mode --p-range-slider-thumb-scale custom properties (#4686)
• Removed nonDesignLangaugeCustomProperties and designLangaugeCustomProperties (#4770)
• Renamed shadow custom properties (#4823)
• Renamed border radius custom properties (#4763)
• Renamed --p-icon-size to --p-icon-size-small (#4990)
• Updated --global-ribbon-height to --pc-frame-global-ribbon-height (#4804)
• Updated --p-frame-offset to --pc-frame-offset (#4804)
• Updated --top-bar-* to --pc-top-bar-* (#4804)

Sass functions and mixins

• Removed the color() function (#4696)
• Removed the border-width() function (#4900)
• Removed the filter() function (#4676)
• Removed the px() function (#4751)
• Removed the em() function (#4937)
• Removed the rem() function (#4761)
• Removed the color-multiply function (#4714)
• Removed the z-index() function (#4753)
• Removed the border() function (#4934)
• Removed the available-names() function (#4967)
• Removed the map-extend function (#4970)
• Removed the spacing() function and replaced with tokens (#4691)
• Removed the easing() function and replaced with tokens (#4698)
• Removed the duration() function and replaced with tokens (#4699)
• Removed the border-radius() function and replaced with tokens (#4793)
• Removed the shadow() function and replaced with tokens (#4823)
• Removed the font-family() function and replaced with tokens (#4940)
• Removed the ms-high-contrast-color() function and replaced with values (#4938)
• Removed the color-icon() mixin (#4676)
• Removed the skeleton-shimmer mixin (#4462)
• Removed the state() mixin (#4989)
• Removed the skeleton-page-header-layout mixin (#4991)
• Removed the skeleton-page-secondary-actions-layout mixin (#4991)
• Removed the unstyled-link() mixin and replaced with values (#4951)
• Removed the unstyled-list() mixin and replaced with values (#4960)
• Removed the high-contrast-outline() and high-contrast-border() mixins and replaced with tokens and values (#4962)
• Removed the when-printing, when-not-printing, hidden-when-printing, and print-hidden scss mixins (#4995)
• Replaced the icon-size() function with the --p-icon-size-medium custom property (#4990)
• Removed the public scss api (#4993)

Sass global variables

• Removed $color-palette-data (#4714)
• Removed $easing-data (#4698)
• Removed $duration-data (#4699)

ThemeProvider

• Removed ThemeProvider component (#4642)
• Moved logo from ThemeProvider to Frame context (#4667)
• Moved frameOffset from ThemeProvider to offset prop on Frame (#4727)

Components

• Removed the deprecated secondaryAction prop on SkeletonPage (#4742)

Development workflow

• Removed build/styles directory from build output (#4728)
• Dropped support for node < 16 (#4778)

New components

• Added CustomProperties component (#4642)

Enhancements

• Added duration token values between 0 and 500 with 50ms increments (#4781)
• Aligned easing tokens and values with CSS defaults (#4790)

Bug fixes

• Fixed ContextualSaveBar not registering the secondaryMenu in the Frame context (#5116)
• Fixed monochrome outline Button children being visible when loading (#5145)

Dependency upgrades

• Removed @shopify/polaris-tokens dependency (#4868)

Code quality

• Replaced font-weight values with tokens (#4599)
• Replaced hardcoded spacing values with spacing tokens (#4775)
• Avoid some usage of / for division in preparation for dart-sass support #4933)

Deprecations

• Deprecated additionalNavigation in <Page> component

Breaking changes

• Update the base font size to 100% from 62.5% and update rem values accordingly, along with pxtorem rootValue (#4794)

Enhancements

• Removed _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)

Migrating from < v8.0.0

Node

Node 16 is now a requirement to run the styleguide

Change to root font size

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)

7.6.0 - 2022-01-18

Enhancements

• Keyboard arrow navigation support added in ActionList (#4505)
• Menu role attribute value support added in ActionList/Section (#4505)
• Updated the styling of DropZone.FileUpload (#4813)
• Added a minimum height to Page component Header (#4770)
• Added a verticalAlign prop to OptionList. (#4800)
• Added suppport for a url prop in the Tag component (#4837)
• Added support for children to take elements other than strings in the Tag component (#4837)
• Bumped the @shopify/storybook-a11y-test package to the latest version 0.3.0 (#4870)
• Added a warning variation to TextStyle (#4880)
• Added a class to hide the clear button in the TextField component instead of removing it from the DOM (#4897)

Bug fixes

• Fixed a bug where remove button could shrink in the Tag component (#4816)
• Fixed incorrect Popover position in Combobox when an element is conditionally rendered before the Combobox (#4825)
• Reverted the deprecation of the "attention" status in Badge (#4840)
• Fixed an issue where the MutationObserver of the PositionedOverlay was calling setState on an unmounted component (#4869);
• Fixed a color contrast issue in FileUpload (#4875)
• Fixed a bug where a checkbox showed on an Autocomplete action when allowMultiple is true (#4887)
• Fixed a bug where the Listbox.Action was not treated like an action when used outside Autocomplete (#4893)
• Fixed a bug where the Checkbox in a Combobox with allowMultiple would steal focus and close the Popover when clicked (#4895)

Documentation

• Fixed a bug in the Icon component where examples did not show (#4843)
• Added arrow navigation instructions in keyboard support for ActionList (#4505)
• Updated examples to properly support JAWS screen reader for Popover and ActionList (#4505)

Development workflow

• Removed dev start command. Thank you to @aaronadamsCA for the contribution (#4876).

Dependency upgrades

• Bumped @shopify/polaris-icons to v4.11.0 (#4837)
• Bumped @storybook/react to 6.4.10 (#4796)
• Bumped @shopify/storybook-a11y-test to 0.4.3 (#4796)
• Removed dependency serve. Thank you to @aaronadamsCA for the contribution (#4876).

7.5.0 - 2021-12-09

Enhancements

• Removed animation from Skeleton components (#4697)
• Remove duplicate duration(fast) usage. (#4682)
• Updated the accessability label for the rollup actions in the Page header (#4080)

Bug fixes

• Centered full width Popover on small viewports (#4114)

Development workflow

• Remove analyze custom properties check. (#4718)
• Removed support for importing from components as it slows tests down (#4735, #4739)

Dependency upgrades

• Bumped postcss to v8.3.1 (#4701)
• Bumped @shopify/postcss-plugin to v5.0.1 (#4701)
• Bumped postcss-loader to v4.2.0 (#4701)
• Bumped postcss-modules to v4.2.2 (#4701)
• Bumped node-sass to v6.0.1 (#4783)
• Bumped sass-loader to v10.1.1 (#4783)
• Bumped stylelint to v14.1.0 and @shopify/stylelint-plugin to v11.0.0 (#4798)
• Bumped eslint to v8.3.0 and @shopify/eslint-plugin to v41.0.1 (#4797)

Code quality

• Removed rem() function from tokens.ts (#4695)
• Remove unnecessary import of Tokens in Collapsible test (#4722)
• Remove legacy tokens and use default theme for .storybook/manager.js (#4729)

Deprecations

• Deprecated thumbnail property for Page (#4733)
• Deprecated secondaryActions property for SkeletonPage (#4740)

Bug fixes

• Added back miscellaneous css custom properties (#4679)
• Added back custom and unnecessary font weight properties (#4677)
• Fixed an issue with Popover where the transform property interfered with descendants positioning (#4685)
• Fixed screen reader accessibility issue of the Checkbox component (#4631)

Bug fixes

• Reverted exit timeout in Popover to avoid race conditions (#4633)

Enhancements

• Added helper hooks useIndexTableRowHovered, useIndexTableRowSelected, and useIndexTableContainerScroll to IndexTable (#4286)
• Added token for slim border radius (#4573)
• Improved Popover component and its animation (#4580)
• Improved base easing curve (#4580)
• Removed vertical padding from wrapping div of ActionList (#4571)

Bug fixes

• Removed extraneous space in MediaCard when card has no actions (thanks to @emilycritter for the pull request)
• Fixed a bug in Stack where vertical spacing was off (#4572)

Documentation

• Fixed typo in DropZone documentation 4566

Development workflow

• Updated Loom to v1 (#950)

Dependency upgrades

Bumped polaris-icons to v4.10.0 (#4569)

Enhancements

• Updated the primary and secondary action type on MediaCard to ComplexAction (#4546)

Bug fixes

• Fixed Stack.Item having margin when empty (#4556)

• Fixed Stack not wrapping valid children in Stack.Item (#4556) (thanks @benjamindoe for the original issue)