polaris

Enhancements

• Added ariaExpanded prop to TextField (#3589)
• Updated MediaCard to accept ReactNode as title and make primaryAction optional (thanks to @devchris for the pull request)
• UnstyledButton: Added loading prop to apply role and aria-busy attributes (#3494)
• Optimized ThemeProvider to only output its custom properties in nested ThemeProviders when they differ from the parent context (#3550)
• Generalized Tooltip's content prop's type to not only accept string, but any React.Node. (#3559)
• Updated TopBar to show the logo when there is no navigation or search fields (#3523)
• Updated critical Banner icon to be a diamond (#3567)

Bug fixes

• Fixed SkeletonPage to make the title font size consistent with the Page component (#3449)
• Removed Navigation.Item color change when focused (#3562)
• Adds monochrome styling to connectedDisclosure prop on Button component and fix spacing issue (#3588

Development workflow

• Updated our CI accessibility checks to use the axe runnner provided by Storybook's a11y addon. Now now errors match between CI and local runs in Storybook (#3284)
• Updated sewing-kit to 0.140.0 and TypeScript to 4.0.0 (#3566)

Code quality

• Button: Reduced redundant code repeated within UnstyledButton (#3494)

Bug fixes

• Fixed Button connected disclosure height when button text has more than 2 lines (#3536)

Enhancements

• Updated Textfield with a type of number to not render a spinner if step is set to 0 (#3477)

Bug fixes

• Fixed Filters overflow (#3532)
• Refactored Portal to render all Portals in a single container (#3544)

Bug fixes

• Fixed alignment of badges in navigation items (#3440)

Documentation

• The Details Page in Storybook now renders the SearchDismissOverlay when typing in the search field. (#3471)

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)