polaris

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

• Add variableHeight prop to DropZone so children control its height (#4136)
• Add print styles to Card, Heading, Layout, Layout.Section, Subheading, TextStyle components (#4142)
• Add fullWidth prop to ColorPicker so the color picker can take the full width (#4152)
• Add noScroll prop to Modal which prevents modal contents from scrolling (#4153)
• Added new color prop to ProgressBar (#3415)
• Added requiredIndicator prop to Label, Labelled, Select and TextField (#4119)
• Add small prop to Modal so that width can be decreased to 380px (#4177)
• Add status prop to IndexTable.Row to allow table rows to specify background colors(#4146)

• Add hoverable prop to DataTable (#4074)
• Added interactive color variant to Icon (#4112)
• Update IndexTable hover styles for sticky column (#4113)
• Add colSpan to the cells in DataTable so that cells fill the table width (#4120)

• Reverts to use autocomplete=off instead of autocomplete=nope (#4108)

Bug fixes

• Added hideOnPrint prop to Card and CardSection (#4071)
• DropZone now has plural sentences when allowMultiple is true #4037
• Hide IndexTable header after scrolling past table body (#4063)
• Update IndexTable to select row when clicked (#4062)
• Fixed Filters focus state when tabbing into the component from a popover (#4073)
• Removed the isMounted check from Portal to only rely on the useEffect for calling onPortalCreated (#4066)
• Removed transition from BulkActions to eliminate flicker (#4081)
• update error background color in Select (#4089)
• Fixed Trapfocus issue that was preventing tabbing with react forms (#4100)

Enhancements

• Added zIndexOverride prop to Popover (#3937)
• Added statusAndProgressLabelOverride prop to Badge (#4028)
• Added an onError hook to the Avatar component (#4052)

Bug fixes

• IndexTable Remove parent resource name from bulk select action (#4013)
• Ensured @charset declaration is the first thing in our styles.css file (#4019)
• Fix Modal.Section divider color to match header and footer divider (#4021)
• Fix IndexTable sticky header alignment and jank (#4033
• Remove focus ring on click for ActionList (#4034)
• Updated <TextField> to use autocomplete=nope instead of autocomplete=off (#4053)

Dependency upgrades

• Update @shopify/polaris-tokens to v3.0.0 (#4030)

Documentation

• Replaced mentions of "invalid" with not "valid" (#4056)

Enhancements

• Added focus-visible polyfill and default styles (#3695)
• Added removeUnderline prop to Button to remove underline when plain and monochrome are true (#3998)
• Removed #AppFrameMainContent link and updated SkipToContent link to target #AppFrameMain instead (#3912)
• Reset color in unstyled-button mixin (#4008)
• Added IndexTable / IndexProvider component (#3646)
• Added dataHref prop to ResourceItem which gets passed to the main li element as data-href(#3975)

Bug fixes

• Updated examples for DropZone so they accept all image types (#3701) (thanks @malanjp for the pull request)
• Added focus styles to the dismissiable navigation button in Frame (#3936)
• Fixed virtual cursor leaving dialog in Modal, Navigation and Sheet (#3931)
• Fixed Modal removing focus from internal elements (#3964)
• Simplified output of Badge's css (#3950)
• Fixed click propagation that was preventing the Tooltip to open when used as suffix on a TextField (#3959)
• Made items in ActionList more clear in high contrast mode (#3971)
• Fixed the MediaCard thumbnail’s corner roundness, so it wouldn’t overflow out of the parent Card (#3974)
• Fixed Tabs layout issue on browser resize (#3980)
• Fixed ActionList Item not disabling properly when url prop is passed (#3979)
• Update IndexTable's checkbox header to be aligned with other headers (#3990)
• Fixed CheckableButton missing border when focused (#3988)
• Fixed accessibility issue on Tabs disclosure popover on close (#3994)
• Fixed accessibility issue when tabbing into IndexTable (#4004)
• Fixed an issue where inline code would be hard to select (#4005)
• Update Toast close button alignment for small views (#4006)
• Fixed Collapsible bug where animation complete logic was being prematurely triggered by transitions in the children (#4000)
• Fixed IndexTable bug where bulk actions are operable when no rows are selected (#4009)
• Fixed CheckableButton missing border when focused (#3987)
• Removed all outline and borderinstances of -ms-high-contrast as it is non-standard (#3962)
• Fixed Autocomplete popover height not being calculated correctly (#4015)

Documentation

• Added an example for the onRemove prop to Tag and clarified that no remove button is rendered when onClick is set (#2987)

Development workflow

• Convert List, Tabs.List, Connected.Item and Filter.ConnectedFiltterControl.Item to be functional components (#3961)

Enhancements

• Update Link underline style on print to be lighter (#3943)))

Bug fixes

• Fix issue with currentColor in icons is black instead of white (#3938)

Development workflow

• Fix flakey Tooltip test that fails due to opacity transition (#3940)

Polaris React v6.0.0 is a major release that introduces breaking changes, primarily due to the new visual style.

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

Breaking changes

• Link is underlined by default, added removeUnderline prop to remove underline (#3705)
• Remove light property from Tooltip as it now defaults to a light background (#3846)
• Made title property required in Modal (#3803)
• Made accessibilityLabel required on Sheet (#3852)
• Removed NewDesignLanguage, Color, AnimationProps exported types (#3868)
• Replaced BaseAction with Action type (#3868)
• Changed the frameOffset prop to accept a string in ThemeProvider (#3883)
• Removed Button and UnstyledButton's ariaPressed prop. Consumers should use the pressed prop instead (#3884)
• Removed Button's stretchContent prop. Consumers should combine the fullWidth and textAlign="left" props instead (#3884)
• Removed Popover/PopoverOverlay's preventAutoFocus prop. Consumers should use autofocusTarget="none" instead (#3884)
• Removed button-filled-disabled and plain-button-background SASS mixins (#3817)
• Removed text-emphasis-placeholder SASS mixin (#3889)
• Removed skeleton-page-header-has-secondary-actions Sass mixin (#3919)
• Removed plain property in Pagination as it no longer has any effect. (#3833)
• Removed separator property in Page as it no longer has any effect. (#3918)
• Renamed additionalMetaData to additionalMetadata in Header for consistency with Title. (#3918)

Enhancements

• Removed duplicate color definition from disclosure Icon in Tabs (#3926)

Bug fixes

• Fixed an accessibility issue where high contrast styles wouldn’t be applied to the Tag component (#3810)
• Fixed ColorPicker checker background to remain visible on a white background (#3812)

Bug fixes

• Add support for backdrop to newDesignLanguage colors in icon (#3911)

Enhancements

• Changed Label and Labelled’s label prop type to React.ReactNode instead of string (#3787)
• Added focusable prop to Scrollable for when child content do not have focus (#3867)

Bug fixes

• Fixed an incorrect translation key for accessibilityLabel in Tooltip(#3843)
• Fix shadows on filled Buttons not touching the bottom edge (#3841)
• Adjust Thumbnail icon color to be subdued (#3846)
• Updated ToastManager to use aria-live 'assertive' for accessibility (#3837)
• Fixed responsiveness of empty search state in ResourceList to support user text zoom settings (#2983)
• Fixed ActionList not rendering .active indicator (#3854)
• Prevent loss of focus when clicking clear all filters in Filters (#3754)

Bug fixes

• Fix the Button focus state offset (#3832)

Enhancements

• Updated OptionList selected styles (#3633)
• Added the ability to hide the clear filter button on the filter component (#3049)
• Right-align disclosure when using textAlignLeft for Button (#3709)
• Remove all transitions from Button (#3709)
• New select option for disclosure in Button (#3709)
• Conveyed DatePicker more clearly to screen readers (#3660)
• Added accessibilityLabels prop to Pagination (#3667)
• New autofocusTarget prop to enhance autofocus options on Popover (#3600)
• Added ability to hide query text field in Filters component using hideQueryField prop (#3674)
• Added tabIndex to Scrollable for keyboard focus (#3744)
• Added accessibility label prop to UserMenu and Menu subcomponents in TopBar (#3659)
• Add aria-label to the Loading bar in Frame (#3770)
• Updated Collapsible to be a functional component (#3779)
• Coverted TooltipOverlay to a functional component (#3631)
• New ariaDescribedBy prop for Button (#3664)
• Changed the way sub navigation menus are rendered for improved accessibility (#3661)

Bug fixes

• Fixed an accessibility issue where high contrast styles wouldn’t be applied to the Tag component (#3810)
• plain variant children no longer remain visible while loading for Button (#3709)
• No longer spin disclosure 180deg when toggling between up and down on Button (#3709)
• Prevent layout shift when toggling “filled” variants on Button (#3709)
• Fixed FocusManager from tracking inactive items that prevented trap focusing(#3630)
• Added escape keybind to Tooltip (#3627)
• Removed extra bottom border on the DataTable and added curved edges to footers (#3571)
• Button: loading no longer sets the invalid role="alert" (#3590)
• Added semantic headers to Filters (#3629)
• Fixed Filters not announcing applied filters (#3632)
• Removed tabIndex=-1 from Popover when preventAutoFocus is true (#3595)
• Fixed Tooltip not being read properly by screen readers(#3631)
• Fixed Modal header border color (#3616)
• Added focus styles to CloseButton in Modal (#3628)
• Fixed Filters duplicated ConnectedFilter ids (#3651)
• Fixed Banner secondaryAction only rendering if action is set (#2949)
• Added a alwaysRenderCustomProperties to ThemeProvider for elements that render outside of the DOM tree to their parent context (#3652)
• Fixed keyboard interactions for the Tab component (#3650)
• Fixed TrapFocus disallowing focus inside Portal (#3790)
• Fixed keyboard interaction when selected Tab was focused and rendering the wrong ::before colour (#3669)
• Added focus ring to disclosure tab when tabbing with keyboard(#3675)
• Fixed windows high contrast mode on hover within disclosure menu and displaying active state upon click for ::before (#3675)
• Removed aria-selected from ActionList as it is not a selectable list (#3725)
• Moved aria-role="combobox" in Autocomplete from the div to the input (#3727)
• Removed aria-multiline in Input when false or undefined (#3727)
• Removed aria-multiselectable from OptionList (#3729)
• Replaced button with div in RangeSlider for correct semantics when using role="slider" (#3730)
• Replaced React.Fragment with li in ResourceList spinner for valid markup (#3732)
• Fixed clear button in TextField unintentionally closing Popover when clicked (#3688)
• Added focus styles to the clear button in TextField (#3688)
• Increased contrast of navigation text color (#3742)
• Removed -ms-high-contrast media query from ms-high-contrast-outline as it is non-standard and updated the outline color from windowText to transparent (#3775).
• Fixed Collapsible expand and collapse animation (#3779)
• Fixed a bug in Page where re-rendering of secondaryActions could cause layout jittering (#3641)

Development workflow

• Replaced Travis with GitHub actions (#3739)

Code quality

• Removed skipped accessibility tests and fixes component accessibility issues (#3721)
• Extracted TagsWrapper from Filters for testability (#3688)

Deprecations

• stretchContent has been replaced by textAlign="left" + fullWidth for Button (#3709)
• Deprecated Popover's prop preventAutofocus. Use autofocusTarget instead (#3602)

Enhancements

• Added flush prop to Card.Section (#3645)
• Added stretchContent prop for Button (#3664)
• Added accessibilityLabel to Link component (#3691)

Bug fixes

• Added dependency list to useImperativeHandle in Banner (#3478)
• Internationalized Badge labels (#3655)
• Aligned the ::before 'indicator' to edge of container for ActionList (#3619)

Enhancements

• Allowed Thumbnail source property to support icons (#3328)
• Button: New role prop for <button /> (#3590)
• Added preventFocusOnClose to Popover (#3595)
• Added color fallback values to focus-ring mixin (#3626)
• Added role="presentational" to list items for Tabs (#3647)
• Allowed consumers to set custom container element on PortalsManager (#3644)

Bug fixes

• Fixed FocusManager from tracking inactive items that prevented trap focusing(#3630)
• Added escape keybind to Tooltip (#3627)
• Removed extra bottom border on the DataTable and added curved edges to footers (#3571)
• Button: loading no longer sets the invalid role="alert" (#3590)
• Added semantic headers to Filters (#3629)
• Fixed Filters not announcing applied filters (#3632)
• Removed tabIndex=-1 from Popover when preventAutoFocus is true (#3595)
• Fixed Modal header border color (#3616)
• Added focus styles to CloseButton in Modal (#3628)
• Fixed Filters duplicated ConnectedFilter ids (#3651)
• Fixed Banner secondaryAction only rendering if action is set (#2949)
• Added a alwaysRenderCustomProperties to ThemeProvider for elements that render outside of the DOM tree to their parent context (#3652)
• Fixed keyboard interactions for the Tab component (#3650)
• Fixed keyboard interaction when selected Tab was focused and rendering the wrong ::before colour (#3669)

Documentation

• Fixed preventAutoFocus prop description for Popover (#3595)

Bug fixes

• Increased precision of hue, saturation, lightness, and alpha in HSBLA color-transformers (https://github.com/Shopify/polaris-react/pull/3640)

Bug fixes

• Fixed alignment of Page and TopBar so the search aligns to the page. (#3610)
• Fixed TopBar search clear button alignment on iOS (#3618)
• Fixed HSB brightness conversion by increasing precision from 2 decimals to 4 (#3621)