Shopify/polaris v7.0.0

on GitHub

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)