polaris

4.20.1 - 2020-04-23

Bug fixes

• Fixed performance of ResourceItem due to inclusion of children in deep prop comparison within shouldComponentUpdate (#2936)

4.20.0 - 2020-04-22

Enhancements

• Removed max-height property from Tooltip (thanks to @thayannevls for the pull request)
• Update TopBar.Menu to be properly themed in active, hover and focused state (#2928)
• Added a centeredLayout prop to EmptyState (#2939)

Bug fixes

• Fixed Tag submitting forms when onClick is set (#2895)
• Fixed DescriptionList content overflowing when term or description have long unbroken words (#2880)
• Fixed focusing bug on Filters where a newly opened filter would not initially focus the first input, and a newly opened filter would incorrectly focus after an input selection (#2871)

Development workflow

• Fixed automatic pull request generation for web and styleguide when updating Polaris (#2892)
• Added an example to Layout that showcases how to space a banner (#2929)

Enhancements

• Updated Filters to only show the "More filters" button if necessary (#2856).
• Updated TopBar component to show secondaryMenu on small screens (#2913)
• Badge adds critical status prop styling (#2902)

Bug fixes

• Added border-radius to the MediaCard container (#2919)

Code quality

• Set importsNotUsedAsValues to error in TypeScript configuration to force us to be explicit when importing types (#2901)

New components

• Added MediaCard and VideoThumbnail (#2725)
• Added VideoThumbnail (#2725)

Enhancements

• Added utilities for parsing video duration (https://polaris.shopify.com/components/images-and-icons/video-thumbnail) (#2725)

Bug fixes

• TopBar navigation icon to use the var(--top-bar-color) (#2898).

Documentation

• Fixed two typos in the Form documentation (#2879)

Code quality

• Don't use export * when exporting from type-only files as importing empty files causes webpack to produce unwanted boilerplate (#2897)

Enhancements

• Added showFocusBorder prop to the TopBar.SearchField to allow users to add show a border on focus (#2886).
• Added a theme prop for frameOffset (#2887)
• Updated the font stack to put Segoe UI before Roboto (#2891)

Bug fixes

• Fixed right padding styling issue with the Tag component and remove right padding on a removable Tag (#2860).
• Fixed secondary navigation spacing when no icon is present (#2874).

Dependency upgrades

• Updated sewing-kit to v0.120.0, and typescript to 3.8.3 (#2873)

Code quality

• Use downlevel-dts to produce compatible type definitions for consuming apps using older TypeScript versions (#2875)

Enhancements

• Added optional onClick prop to Tag (#2774)
• Added transition properties to Collapsible (#2835)

Bug fixes

• Fixed issue with passed to ComboBox component options prop was mutated (#2818)
• Fixed an issue which caused Popover to close when clicking on a descendant SVG (#2827)

Code quality

• Removed redundant null check in TextField (#2783)

Code quality

• Updated shrink-ray to v2 (#2800)

Bug fixes

• Reverted const context type to support older versions of typescript in consuming apps (e7c5e16)
• Fixed broken link in ThemeProvider docs (0ff672d)

Enhancements

• Added high contrast outline to Popover, Card and Indicator (#2792)
• Removed overflow: hidden from Card (#2806)
• Truncated long sort options in ResourceList (#2809

Bug fixes

• Fixed incorrect used while importing from polaris-tokens (#2778)
• Fixed DropZone not supporting new file selection when allowMultiple is false (#2737)
• Fixed Pagination sizing on small screens with tooltips (2747)
• Fixed Popover setting a tabindex and other accessibility attributes on the activator wrapper when the activator is disabled (#2473)
• Added a verticalAlignment prop to ResourceItem to support control of content alignment (#2743

Development workflow

• Added check:custom-property job in travis (#2778)
• Exported missing OptionListProps (#2777)
• Omitted the Storybook AppProvider decorator for component examples which already contain an AppProvider (#2807)
• Added an omitAppProvider front matter concept to prevent automatic wrapping of component examples with an AppProvider (#2815)

Code quality

• Removed various type assertions and bumped test coverage (#2638)

Enhancements

• Added high contrast outline to ActionList (#2713)
• Added high contrast border to Button (#2712)
• Added styled placeholder image to Avatar when initials are blank (#2693)
• Added a preferInputActivator prop to Popover to allow better positioning of the overlay (#2754)

Bug fixes

• Updated Polaris Tokens, which now builds modern tokens using TypeScript, fixing issues where Edge threw errors related to modern JavaScript features (#2763)
• Fixed TrapFocus stealing focus from other TrapFocus's (#2681)
• Fixed focus state color on monochrome Buttons (#2684)
• Fixed container's width on Modal (#2692)
• Fixed the position property for the backdrop on Select from being overwritten by the focus ring (#2748)
• Fixed ResourceItem Actions visibility on mouse out (#2742)
• Fixed initial server / client render mismatch in Avatar (#2751)

Development workflow

• Added first implementation of custom property validation (#2616)
• Refactored consumer build test (renamed to system integration test) (#2735)
• Added Storybook Knobs for customizing theme (#2674)

Code quality

• Updated dependencies in example apps (#2722)
• Fixed Tabs tests that were preventing React updates (#2702)
• Moved to Travis for CI (#2652)

*** Please note that this release required an upgrade to @shopify/polaris-tokens that we have since found breaks in the Edge browser. We are currently working on a fix, and advise you to remain at or downgrade to v4.12.0 until this gets resolved and a new release is available with the fix.

Bug fixes

• Fixed a Sass build error (2703)

Enhancements

• Replaced customer avatar images (#2453)
• Added an optional totalsName prop to DataTable to support custom headings in the totals row (#2660)
• Added cursor: pointer to Choice (#2491)

Bug fixes

• Fixed Uncaught TypeError: Cannot read property 'rightEdge' of undefined in DataTable (#2672)
• Fixed excessive rendering in DatePicker (#2671)
• Fixed plurality of DataTable totals row heading (#2660)

Documentation

• Changed placeholder product names in Card code examples (#2677)

Enhancements

• Added a split variant to Button (#2329)
• Allow DataTable headers to be React Elements (#2635)
• Added support for explicit order of items in ActionMenu (2057)
• Made the DataTable horizontal Navigation optional (#2647)

Bug fixes

• Fixed ReferenceError: React is not defined in Button for the esnext build (#2657)
• Fixed scrolling with scrollbar not working in Popover when content changes on scroll (#2627)
• Fixed side-effects from being create during Modals render (#2644)
• Work around a build crash when using create-react-app due to a bug in css parsing in postcss-custom-properties (#2643)
• Removed the visited CSS styling for tabs using the url prop (#2639)

Development workflow

• Reworked the yarn splash Github comment and added average splash zone information (#2649)
• Re-enabled the web unit tests in the consumer build test (#2663)

Code quality

• Converted /tests/build.test.js to TypeScript (#2617)
• Use export * to rexport component content in component indexs and subcomponent listings (#2625)
• Use export * to rexport utility content (#2636)

Breaking changes

• Remove unstable telemetry API for icons (#2561)

Enhancements

• Added hideTags prop to Filters (#2573)
• Added searchResultsOverlayVisible prop to TopBar which adds a translucent background to the search dismissal overlay when results are displayed (#2440)

Bug fixes

• Fixed a bug where Navigation calls onNavigationDismiss on large screens when focused and the escape key is pressed (#2607)

• Fixed issue with Filters component displaying an undesired margin top and bottom on the button element on Safari (#2292)

• Fixed RangeSlider focus state style issues (#1926)

• Ensure passing {key: undefined} into i18n will throw a runtime error in the same way as not passing in the key at all (this was ensured through type-checking at the TypeScript level but people could force through with casting to any) (#2598)

• Ensure the normalizedValue within TextField is a string (this was already ensured through type-checking at the TypeScript level, but people could force through with casting to any, which caused problems) (#2598)

• Fixed an issue with the Filters component where the aria-expanded attribute was undefined on mount (#2589)

• Fixed TrapFocus from tabbing out of the container (#2555)

• Fixed PositionedOverlay not correctly getting its position when aligned to the right of the activator (#2587)

• Search dismissal overlay now covers the entire screen (#2440)

• Search results component will no longer unmount when hidden (#2440)

• Search results will now match the width of the search field (#2440)

Documentation

• Updated Card with custom footer actions example to be right-aligned (#2603)
• Updated styleguide links in the docs (#2521)
• Updated Subheading documentation to be more consistent and accurate (#2591)

Development workflow

• Updated Storybook to v5.3.2 (#2618)

Dependency upgrades

• Updated @shopify/polaris-icons to v3.9.0 (#2610)

Code quality

• Converted MenuGroup into a functional component (#2536)
• Converted Layout into a functional component (#2538)
• Converted FormLayout into a functional component (#2539)
• Converted Stack into a functional component (#2534)
• Converted BulkActionButton into a functional component (#2542)
• Converted Focus into a functional component (#2540)
• Converted Tabmeasurer into a functional component (#2535)
• Converted Section into a functional component (#2537)
• Converted Tooltip into a functional component (#2543)
• Converted Option into a functional component (#2541)
• Avoided unneeded work in TextField if character count is not rendered (#2598)

Bug fixes

• Fixed errors when consuming apps manage to pass undefined as a value into an translation replacements object (#2579)

Bug fixes

• Fixed type-error in TrapFocus that caused querySelector to run on null (#2574)

Development workflow

• Refactored I18n class (#2562)

4.10.0 - 2019-12-18

Bug fixes

• Fixed TextField to no longer render aria-invalid="false". Thank you to @alexcleduc for the contribution (#2339).
• Fixed TextField to only render min ,max and step attributes when explicitly passed. Thank you to @alexcleduc for the contribution (#2339).
• Removed reference to document in DropZone (#2560)
• Fixed Firefox issue in in DropZone (#2568)
• Fixed layout issue DropZone (#2568)

Dependency upgrades

• Updated to TypeScript 3.7 (#2549)
• Updated stylelint-config-shopify to 7.4.0 (#2558)

Bug fixes

• Removed reference to window in DropZone (#2532)
• Fixed a regression in TrapFocus that prevented focus outside of an iframe (#2530)

Documentation

• Changed a link to the Polaris icons documentation so it would point to npm (a public resource) rather than the Shopify/polaris-icons repository (which is now private) (#2452)

Enhancements

• Added external prop to ResourceList (#2408)
• Added onMouseEnter and onTouchStart props to Button (#2409)
• Added ariaHaspopup prop to Popover (#2248)
• Moved Button styles from the Buttongroup CSS file to the Button CSS file (#2441)
• Added footerActionAlignment prop to control <Card> footer action alignment, defaults to 'right' (#2407)
• Improved contrast of MessageIndicator with a border (#2428)
• Removed the need for z-indexes in Icon (#2207)
• Added features prop to AppProvider (#2204)
• Added support for using EmptyState in a content context (#1570)
• Page no longer renders navigation or actions in print mode (#2469)
• Migrated Dropzone to a functional component and reduced its complexity (#2360)
• Added fluidContent prop to Popover (#2494)
• Changed Button’s disclosure prop to be boolean | "up" | "down", allowing greater control over the direction the disclosure caret faces (#2431)

Bug fixes

• Prevented scrolling to Popover content in development (#2403)
• Fixed an issue where the DropZone component jumped from an extra-large layout to a layout based on the width of its container (#2412)
• Fixed an issue which caused HSL colors to not display in Edge (#2418)
• Added the top bar height to the Topbar in Frame to ensure the Sticky components get the correct top position (#2415)
• Stopped the merge utility function from mutating the objects passed as arguments (#2317)
• Updated Card footer actions to be right aligned by default again (#2407)
• Fixed the EmptyState styles conditional on the imageContained prop not being applied (#2477)
• Fixed TrapFocus to keep focus within the container when tabbing past the last element (#2397)
• Fixed an accessibility issue where the Form implicit submit was still accessible via keyboard (#2447)

Documentation

• Added a details page and kitchen sink example to Storybook (#2402)
• Combined the interface used by Page so the types can be parsed (#2358)
• Updated the PageActions example (#2471)
• Fixed spacing of the Filters data table example (#2477)
• Fixed duplicate and unclear prop descriptions of EmptyState (#2477)
• Added an example for a light Tooltip (#2434)

Development workflow

• Updated splash Github Action to the latest Docker beta version (#2474)
• Updated local splash script to use npm package @shopify/splash (#2474)
• Added dev test:coverage as an alias for yarn test:coverage (#2496)
• Added dev open coverage and yarn open:coverage commands to open the coverage report (#2496)
• Fixed yarn test:coverage so it generates a coverage report (#2496)
• Updated yarn test:coverage so it automatically opens the coverage report when complete (#2496)

Dependency upgrades

• Upgraded to @shopify/react-testing v1.8.0 (#2465)
• Upgraded to Prettier to v1.19.1 (#2443)

Code quality

• Changed TextField to use a custom hook (#2464)
• Changed aria-labelledby to always exist on TextField (#2401)
• Converted ButtonGroup > Item into a functional component (#2441)
• Refactored BulkActions to make use of ButtonGroup (#2441)