polaris

Enhancements

• Added OutlineableAction to the ComplexAction type (#3405)
• Added UnstyledButton component and refactored Banner to use it (#3406)
• Added prefix field to options prop on Select (#3373)

Bug fixes

• Fixed BulkActions from hiding child actions (#3450)

Bug fixes

• Added RefOject as a possible type for the activator prop on Modal (#3395)
• Fixed Button from flashing an icon and changing its width when loading (#3370)

Enhancements

• Update @shopify/polaris-icons to version 4.0.0 (#3327)
• Moved li wrapper on ResourceList to ResourceListItem (#3302)
• Remove button-base mixin from Frame SkipAnchor (#3303)
• Updated Toast to use currentColor for the close icon (#3324)
• Added disclosureText to Tabs (#3331)
• Added underline to links on focus and active (#3335)
• Added spacing prop to ButtonGroup (#3308)
• Added contextControl prop to ContextualSaveBar (#3357)
• Added spacing prop to DescriptionList (#3359)
• Export BannerHandles from Banner (#3368)
• Added prefix prop to ActionList items (#3313)

Bug fixes

• Fixes Badge when it becomes 2 lines due to small viewport (#3315)
• Update DatePicker layout so that Popover can calculate the width correctly (#3330)

5.3.1 - 2020-09-16

Bug fixes

• Add position relative back to FrameContent #3259

Enhancements

• Hide ActionMenu, Actions, RollupActions menu popover overlays when printing (#3277)
• Updated DatePicker component to use semantic HTML table structure (#3303)

Enhancements

• Added position: relative to content container within Frame (#3178)

Enhancements

• Added optional videoProgress and showVideoProgress props to VideoThumbnail for video progress indicator (#3057)
• Enabled much easier tree-shaking in consuming apps by having a multi-file build instead of a single-file build (#3137)
• Labelled component now breaks on long lines of text, regardless of presence of naturally breaking characters (hyphens, whitespace, etc.) (#3156)
• Added optional isFiltered prop to ResourceList to conditionally render more informative select all button label (#3153)
• Exported PositionedOverlay component for use in consuming applications (#3161)
• Updated package.json to use esnext as a custom mainField instead of sewing-kit:esnext to match updated sewing-kit behavior (#3169)
• Updated type restrictions for Tabs to allow its content prop to accept React.ReactNode instead of string (#3171)

Development workflow

• Fixed build-consumer script to handle excludes in package.json's files array (#3136)

Code quality

• Removed the new-top-bar-height sass function and replaced its usage with the --p-top-bar-height custom property (#3158)

Enhancements

• Added a dismissOnMouseOut prop to Tooltip to dismiss Tooltip once pointer is no longer over children (#3086)

Bug fixes

• Fixed case where DatePicker did not translate the weekday name in an aria label (#3113)
• Updated browserslist config to be an explicit list instead of extending an existing config, so that consuming apps don't need to depend upon @shopify/browserslist-config (#3132)

Documentation

• Updated Polaris to the latest version in the CDN Styles example (#3068)
• Updated TextField example to use a number instead of a boolean (#3114)

Code quality

• Updated linting to prefer the fragment shorthand <> instead of <React.Fragment> (#3133)
• Updated how we access React exports such as React.Component and React.PureComponent to help treeshakability (#3133)

Polaris React v5.0.0 is a major release that introduces breaking changes, primarily due to removing integrated App Bridge support as consumers using App Bridge should use the @shopify/app-bridge-react package. We have created the Shopify/shopify-app-bridge repository for issues related to the new app bridge packages.

For instructions on updating from v4 to v5, read the migration guide.

Breaking changes

• Upgraded react and react-dom peer-dependencies to 16.9.0 to enable the use of React.Profiler (#2462)
• Removed NavigationMessageProps as the Message component no longer exists (#2502)
• Removed ResourceList.FilterControl component. The FilterControl component is available under a private name for legacy Shopify applications, but it should not be relied upon and might be deleted at any point (#2047 #3116)
• Removed AppBridge, ResourcePicker and Loading, Modal, Page, Toast App Bridge render delegation (#2046)
• Dropped support for iOS 9 (#2195)
• Moved several of our build artifacts into a dist folder (#2938):
  • styles.css has moved to dist/styles.css
  • styles.min.css has been removed - import dist/styles.css instead. Styles are compacted by default so the performance hit is negligible.
  • styles.scss has been removed - import dist/styles.cssand dist/styles/_public-api.scss instead
• Updated "esnext" build output to ship plain css files instead of scss source files. Apps built using @shopify/sewing-kit will need to update to at least version 0.132.2. (#2938)
• Moved styles from global.scss to AppProvider. This change only affects applications using the esnext build (applications importing @shopify/polaris/styles.css aren’t affected), who no longer need to import the @shopify/polaris/esnext/global.scss file. (#2392)
• Reversed the precedence of the language dictionaries passed into the AppProvider’s i18n prop. When passing an array of dictionaries the first dictionary should be your prefered language, followed by any fallback languages. (#2572)
• Removed centeredLayout prop in EmptyState. All layouts within the new design language context will be center aligned (#3111)
• Updated types of DatePicker component - month,year weekStartsOn are now typed as plain number - functionality remains identical as the former types effectively ended up being aliases of number anyway (#3121)
• Removed Year type export (used by the DatePicker's props). Replace its usage with number. (#3121)
• Removed the Month enum export (used by the DatePicker's props). Replace its usage with a number from 0 to 11, representing the number of the month in question - Month.January becomes 0, Month.December becomes 11 etc. (#3121)
• Removed the TypeOf enum, and GeneralObject, DeepPartial, EffectCallback, DependencyList and Comparator type exports - these were for internal use, and were never documented for external use. (#3123)

Enhancements

• Added an activator prop to Modal so that focus can be returned to it when the Modal is closed (#2206)

Bug fixes

• Fixed case where DatePicker did not translate the month name in an aria label (#3121)

Dependency upgrades

• Updated browserlist to use @shopify/browserslist-config (#3101)

Code quality

• Converted Modal to a functional component (#2376)
• Migrated to use react-transition-group instead of the material-ui fork. (#3094)
• Removed withAppProvider higher-order component. (#3098)
• Removed several dependencies on the deprecated @shopify/javascript-utilities library (#3102)
• Removed dependency on @shopify/useful-types
• Removed dependency on @shopify/javascript-utilities (#3108)

Enhancements

• Removed padding from the details container in EmptyState to account for new illustration size (#3069)
• Added blueDark to the list of possible color values for an Icon with a backdrop (#3076)
• Improved responsive layout for secondary actions in Banner (#3093)

Bug fixes

• Added flex: 1 1 auto to Banner .ContentWrapper CSS selector (#3062)
• Fixed mis-alignment on Page action rollup (#3064)
• Ensured Sass mixins can compile in Dart Sass (#3064)
• Added a border to TextField when focus is lost after autofill is implemented(#3075)
• Fixed alignment of ResourceItem when there is no media (#3080)
• Fixed stacking order of CloseButton on Modal without a title (#3077)

Documentation

• Updated AppProvider test component information (thanks to @jprosevear for the pull request)

Development workflow

• Updated sewing-kit to v0.132.2 and storybook to v5.3.19 (#3072)

Code quality

• Migrated tests using document.activeElement to use react-testing (#3070)
• Reduced file size of the empty search SVG by 50% (from 12k to 6k gzipped) (#3105)

Code quality

• Default to any for ItemType in resource list (#3059)

Enhancements

• Added spacing to EmptyState when within content to account for new illustration styles (#3047)
• Changed Resource List to a generic functional component (thanks to @athornburg)
• Made the renderItem function infer the type of the items prop (thanks to @athornburg)
• Added a fullWidth prop to EmptyState to support full width layout within a content context (#2992)
• Added an emptyState prop to ResourceList to support in context empty states in list views (#2569)
• Set active prop of Popover to true on keyDown in ComboBox to fix Autocomplete suggestions not showing when searching and selecting via keyboard (#3028)
  Set active prop of Popover to true on keyDown in ComboBox to fix Autocomplete suggestions not showing when searching and selecting via keyboard (#3028)
• Increased the max-width of the EmptyState content to 400px (#3040)

Development workflow

• Updated how global animations are referenced, in order to publish a single entrypoint for the public Sass API (styles/_public-api.scss), instead of two (styles/_public-api.scss for “vanilla” SCSS and styles/esnext/_public-api.scss for CSS Modules) (#3032)

Code quality

• Deleted an unused prop and its types in Navigation (#3043)

⚠️ This release was released as a patch version in error. Please use v4.26.0.

Enhancements

• Added spacing to EmptyState when within content to account for new illustration styles (#3047)
• Changed Resource List to a generic functional component (thanks to @athornburg)
• Made the renderItem function infer the type of the items prop (thanks to @athornburg)
• Added a fullWidth prop to EmptyState to support full width layout within a content context (#2992)
• Added an emptyState prop to ResourceList to support in context empty states in list views (#2569)
• Set active prop of Popover to true on keyDown in ComboBox to fix Autocomplete suggestions not showing when searching and selecting via keyboard (#3028)
  Set active prop of Popover to true on keyDown in ComboBox to fix Autocomplete suggestions not showing when searching and selecting via keyboard (#3028)
• Increased the max-width of the EmptyState content to 400px (#3040)

Development workflow

• Updated how global animations are referenced, in order to publish a single entrypoint for the public Sass API (styles/_public-api.scss), instead of two (styles/_public-api.scss for “vanilla” SCSS and styles/esnext/_public-api.scss for CSS Modules) (#3032)

Code quality

• Deleted an unused prop and its types in Navigation (#3043)

• Fix latest release on NPM

Enhancements

• Added ReactNode as an accepted prop type to primaryAction on the Page component (#3002)

Enhancements

• Added a fullWidth prop to EmptyState to support full width layout within a content context (#2992)
• Added an emptyState prop to ResourceList to support in context empty states in list views (#2569)

Enhancements

• Added a fullWidth prop to EmptyState to support full width layout within a content context (#2992)
• Added an emptyState prop to ResourceList to support in context empty states in list views (#2569)
• Improved top bar transitions when theme changes (#3007)

Bug fixes

• Fixed incorrect icon color of Button when destructive and plain (#2958)

Development workflow

• Improved speed of type-check and build by enabling TypeScript's skipLibCheck option (#2981)

Dependency upgrades

• Updated TypeScript to 3.9.2 (#2981)

Enhancements

• Truncated long sort options in ResourceList (#2957
• Updated type restrictions for Pagination to allow its label prop to accept React.ReactNode instead of string (#2972)
• Added an emptySearchState prop to ResourceList to enable the customization of the empty search state (#2971)

Bug fixes

• Added an outline on Banner for Windows high contrast mode (#2878)
• Fixed Autocomplete / ComboBox focus (#1089)
• Fixed missing rounded corners on Banner (#2975)
• Fixed typing for EmptyState action (#2977)

Code quality

• Converted ComboBox to a functional component (#2918)

Deprecations

• Deprecated styles/foundation.scss and styles/shared.scss as entry points to the Polaris Sass public API. They have been replaced with a single file styles/_public-api.scss. By having a single entry point we make it a little easier for consuming applications to use our public API - you only need to import one file instead of two. Any references to these two files should be replaced with a reference to _public-api.scss which lives in the same folder. Consuming applications using sewing-kit should replace references to esnext/styles/foundation.scss and esnext/styles/shared.scss with a single reference to esnext/styles/_public-api.scss. Note the API itself has not changed - only the mechanism by which you access it. (#2974)

Enhancements

• Added additionalNavigation prop to Page (#2942)