polaris

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)

Unsafe to use

This release has the potential to break stack layouts. Fixed in 7.2.0

Enhancements

• Added the ariaControls prop to Checkbox (#4509)
• Reduced vertical spacing in Page (#4541)

Bug fixes

• Fixed empty children being wrapped with Item in Stack (#4487)

Documentation

• Created an example for an IndexTable with multiple promoted bulk actions (4497)
• Light edits to the best practices for Modal and Banner (#4501)
• Removed banner in navigation example (#4533)

Breaking changes

• Updated react and react-dom to version 16.14.0. This is now the minimum version of React required to use the @shopify/polaris library.
• Dropping support for node 10.x
• Dropped support for Desktop Safari versions less than 13.1, and ios Safari versions less than 13.6. (#4304)
• Made 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)
• Removed ComboBox as a named export on Autocomplete (#3910)
• Remove the 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)
• The component styles have moved fromm dist/styles.css to build/esm/styles.css. Consumers who import styles shall need to update their import path. (#4424)
• The public Sass API has moved from 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)

Enhancements

• Add lastColumnSticky prop to IndexTable to create a sticky last cell and optional sticky last heading on viewports larger than small (#4150)
• Added id prop to Layout and Heading for hash linking (#4307)
• Added external prop to Navigation.Item component (#4310)
• Added ariaLabelledBy props to Navigation component to allow a hidden label for accessibility (#4343)
• Added consistent spacing to ActionList (#4355)
• Added support for promoted actions to be rendered as a menu on the BulkAction component (#4266)
• Added optional onClick key to secondaryAction on Nav/Item component (#4374)
• Added extraSmall prop to Avatar (#4371)
• Added critical color option to ProgressBar component (#4408)
• Added an imperative forceUpdatePosition() API to Popover for programmatically triggering a re-render of the underlying overlay component (#4385)
• Added an imperative forceUpdatePosition() API to PositionedOverlay for programmatically triggering a re-render of the component (#4385)
• Added wrapOverflow prop to AutocompleteProps props to force text-breakword (#4416)
• Improved IndexTable handling of checkboxes when selectable prop is false (#4376)
• [Accessibility] - Removed skeleton shimmer animation on devices that have Reduced motion setting enabled #4460
• Added optional compactTitle prop to Page which removes margin between title and subtitle (#4463)
• Added maxHeight prop to TextField component to limit the height of multi-line inputs (#4476)
• Added support for React 17 (#4432)
• Added support for multi-sectioned options in Autocomplete #4221
• Enables optional onClick property for subNavigationItem on Nav/Item component to execute, if provided (#4394)

Bug fixes

• Fixed IndexTable row hover state colour when unselected (#4359)
• Fixed selected prop having no effect for Navigation.Item when url prop is not specified (#4375)
• Fixed screen readers reading out the clear button in TextField when there is no input (#4369)
• Fixed label causing scrollbars to appear instead of wrapping Option (#4411)
• Fixed loading state not being passed to primaryAction in Banner (#4338)
• Fixed Popover not correctly positioning itself (#4357)
• Fixed text colour of disabled TextField in Safari (#4344)
• Fixed Button text colour after changing state from disabled to enabled (#4270)
• Re-added borders on the IndexTable sticky cells (#4150)
• Adjust IndexTable sticky z-index to avoid collisions with focused TextField (#4150)
• Fixed an accessibility bug in Icon where aria-label was used incorrectly (#4414)
• Restored pointing device interactivity to prefix and suffix slots of the TextField component (#4477)

Documentation

• Fixed incorrect url for tophatting the Playground component inside an iframe (4392)
• Simplified content guidelines section for text field component and linked out to thorough guidelines on the text fields experience page (#4422)

Development workflow

• Use loom for test and linting harnesses. (#4402, #4471)

Code quality

• Rebuilt Autocomplete internals using new Combobox and Listbox components built on the ARIA 1.2 spec for improved accessibility (#3910)
• Updated @shopify/react-testing to v3.2.0 for React 17 support in tests (#4349)
• Modernized tests for Avatar, Backdrop, Badge, Banner components(#4306)
• Modernized tests for Card: Subsection, Header, Sections and Card (#4325).
• Modernized tests for Item, Panel, List, Tab, TabMeasurer (from Tabs components). (#4313)
• Modernized tests for Tooltip, Toast components(#4314)
• Modernized tests for AccountConnection, ActionList components(#4316)
• Modernized tests for ActionMenu and its subcomponents (#4318)
• Modernized tests for Loading-List-Item-Label components(#4321)
• Modernized tests for DiscardConfirmationModal, ContextualSaveBar, Loading, Toast, ToastManager, Frame (from Frame components) (#4324)
• Modernized tests for Truncate and UnstyledButton (#4327).
• Modernized tests for PageActions, Page and its components (#4326)
• Modernized tests for FormLayout and some components of ColorPicker (#4330)
• Modernized tests for Breadcrumbs, BulkActions, Button, ButtonGroup/Item, and ButtonGroup components(#4315)
• Modernized tests for DualThumb (#4341)
• Modernized tests for AppProvider, AfterInitialMount components(#4331)
• Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components (#4353)
• Modernized tests for CalloutCard, Caption, CheckableButton, Resizer, VideoThumbnail (#4387)
• Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. (#4311)
• Modernized tests for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog (#4407).
• Modernized tests for Konami, Labelled, and Link components(#4389)
• Modernized tests for TextStyle, Collapsible, Tabs (#4453)
• Modernized tests for Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components(#4386)
• Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. (#4311)
• Modernized tests for ResourceItem, ResourceList (#4362)
• Modernized tests for MediaCard, and Layout components (#4393)
• Modernized tests for Image and Icon components (#4418)
• Modernized tests for EventListener and EmptySearch components(#4423)
• Modernized tests for Pane, Section, PositionedOverlay, SingleThumb, RangeSlider, and ConnectedFilter components (#4429)
• Modernized tests for ContextualSaveBar and DataTable and its subcomponents (#4397)
• Modernized tests for IndexTable, Indicator, InlineError, KeyboardKey, and KeypressListener components(#4431)
• Modernized tests for Form and Filters components (#4434 and #4458)
• Modernized tests for OptionList and its subcomponents (#4441)
• Modernized tests for Modal (#4433)
• Modernized tests for Navigation and Navigation.Section (#4440)
• Modernized tests for EmptyState component (#4427)
• Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components (#4438)
• Modernized tests for PopoverOverlay component(#4430)
• Modernized tests for Dropzone, ExceptionList, and ConnectedFilterControl > Item components(#4412)
• Modernized tests for Checkbox and Choicelist (#4457)
• Modernized tests for DatePicker, DescriptionList, and DisplayText (#4360)
• Modernized tests for TextField (#4456)

Enhancements

• Prevented KeypressListener attaching/detaching on every render (#4173)
• Added animated prop in ProgressBar (#4251)
• Added divider prop to Page component (#4260)
• Added activator prop to Sheet so the triggering element will regain focus (#4201)
• Renamed and exposed Card compound components types (#4261)
• Added monospaced prop to TextField component (#4264)
• Added base tight spacing option to Stack component(#4273)

Bug fixes

• Fix Safari issue where Button text is gray instead of white after changing state from disabled to enabled (#4270)
• Fix console warnings when DataTable unmounts (#4249)
• Fix console warnings displaying multiple times in Sheet (#4269)
• Remove top shadow when Popover and Scrollable scroll hinting is complete (#4265)

Enhancements

• Disabled pointer-events on the prefix and suffix elements of the TextField component (#4207)

Bug fixes

• Fixed focus-ring mixin for when unitless addition occurred (#4234)
• Fixed Scrollable lower bound detection for lower resolution screens (#4218)
• Fixed a bug where the inner nested drop zone was not available during a dragging event. (#4123)
• Fixed border misalignment and updated color of DropZone to match current design. (#4123)
• Fixed heading overflow issue on dismissible CalloutCard (#4135)
• Fixed Loading setting state after it has unmounted (#4158)
• Prevent extra right margin being added to the Filter component when used without filters. (#4134)
• Fixed off-center image in EmptyState within page context (#4140)
• Fixed offset in DualThumb when used with a min value different from 0 #4172
• Fixed loading state stacking in ResourceList (#4208)
• Fixed focus order of visually hidden input in DropZone (#4219)

Deprecations

• Deprecate Sheet component #4210