polaris

• 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)

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)