Merge branch 'main' into polaris-release

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '10.15.0'
+          node-version: '10.24.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -45,7 +45,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '10.15.0'
+          node-version: '10.24.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -73,7 +73,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '10.15.0'
+          node-version: '10.24.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -104,7 +104,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '10.15.0'
+          node-version: '10.24.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.nvmrc

@@ -1 +1 @@
-v10.15.0
+v10.24.0

.storybook/manager.js

@@ -1,6 +1,6 @@
 import {addons} from '@storybook/addons';
 import {create} from '@storybook/theming';
-import tokens from '@shopify/polaris-tokens';
+import {colorSkyLight, colorInk} from '@shopify/polaris-tokens';
 
 addons.setConfig({
   panelPosition: 'bottom',
@@ -10,9 +10,9 @@ addons.setConfig({
     brandUrl: '/',
     brandImage: null,
     appBorderRadius: 0,
-    appBg: tokens.colorSkyLight,
-    contentBg: tokens.colorSkyLight,
-    textColor: tokens.colorInk,
+    appBg: colorSkyLight,
+    contentBg: colorSkyLight,
+    textColor: colorInk,
     // TODO more pretty brand colors?
     // SEE https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/theming/index.md
   }),

UNRELEASED.md

@@ -6,37 +6,29 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added `statusAndProgressLabelOverride` prop to `Badge` ([#4028](https://github.com/Shopify/polaris-react/pull/4028))
+- Added an `onError` hook to the `Avatar` component ([#4052](https://github.com/Shopify/polaris-react/pull/4052))
+- Added `zIndexOverride` prop to `Popover` ([#3937](https://github.com/Shopify/polaris-react/pull/3937))
+
 ### Bug fixes
 
-- Updated examples for `DropZone` so they accept all image types ([ #3700 ](https://github.com/Shopify/polaris-react/issues/3700))
-- Added focus styles to the dismissiable navigation button in `Frame` ([#3936](https://github.com/Shopify/polaris-react/pull/3936))
-- Fixed virtual cursor leaving dialog in `Modal`, `Navigation` and `Sheet` ([#3931](https://github.com/Shopify/polaris-react/pull/3931))
-- Fixed `Modal` removing focus from internal elements ([#3964](https://github.com/Shopify/polaris-react/pull/3964))
-- Simplified output of `Badge`'s css ([#3950](https://github.com/Shopify/polaris-react/pull/3950))
-- Fixed click propagation that was preventing the `Tooltip` to open when used as suffix on a `TextField` ([#3956](https://github.com/Shopify/polaris-react/issues/3956))
-- Made items in `ActionList` more clear in high contrast mode ([#3971](https://github.com/Shopify/polaris-react/pull/3971))
-- Fixed the MediaCard thumbnail’s corner roundness, so it wouldn’t overflow out of the parent Card ([#3974](https://github.com/Shopify/polaris-react/issues/3974))
-- Fixed `Tabs` layout issue on browser resize ([#3976](https://github.com/Shopify/polaris-react/issues/3976))
-- Fixed `ActionList` `Item` not disabling properly when url prop is passed ([#3979](https://github.com/Shopify/polaris-react/pull/3979))
-- Update `IndexTable`'s checkbox header to be aligned with other headers ([#3990](https://github.com/Shopify/polaris-react/issues/3990))
-- Fixed `CheckableButton` missing border when focused ([#3988](https://github.com/Shopify/polaris-react/pull/3988))
-- Fixed accessibility issue on `Tabs` disclosure popover on close ([#3994](https://github.com/Shopify/polaris-react/pull/3994))
-- Fixed accessibility issue when tabbing into `IndexTable` ([#4004](https://github.com/Shopify/polaris-react/pull/4004))
-- Fixed an issue where inline code would be hard to select ([#4005](https://github.com/Shopify/polaris-react/pull/4005))
-- Update `Toast` close button alignment for small views ([#4006](https://github.com/Shopify/polaris-react/pull/4006))
-- Fixed `Collapsible` bug where animation complete logic was being prematurely triggered by transitions in the children ([#4000](https://github.com/Shopify/polaris-react/pull/4000))
-- Fixed `IndexTable` bug where bulk actions are operable when no rows are selected ([#4009](https://github.com/Shopify/polaris-react/pull/4009))
-- Fixed `CheckableButton` missing border when focused ([#3987](https://github.com/Shopify/polaris-react/issues/3987))
-- Removed all `outline` and `border`instances of `-ms-high-contrast` as it is non-standard ([#3962](https://github.com/Shopify/polaris-react/pull/3962)).
-- Fixed `Autocomplete` popover height not being calculated correctly ([#4015](https://github.com/Shopify/polaris-react/pull/4015)).
+- `IndexTable` Remove parent resource name from bulk select action ([#4013](https://github.com/Shopify/polaris-react/pull/4013))
 - Ensured `@charset` declaration is the first thing in our styles.css file ([#4019](https://github.com/Shopify/polaris-react/pull/4019))
+- Fix `Modal.Section` divider color to match header and footer divider ([#4021](https://github.com/Shopify/polaris-react/pull/4021))
+- Fix `IndexTable` sticky header alignment and jank ([#4033](https://github.com/Shopify/polaris-react/pull/4033)
+- Remove focus ring on click for ActionList ([#4034](https://github.com/Shopify/polaris-react/pull/4034))
+- Updated `<TextField>` to use `autocomplete=nope` instead of `autocomplete=off` ([#4053](https://github.com/Shopify/polaris-react/pull/4053))
 
 ### Documentation
 
+- Replaced mentions of "invalid" with not "valid" ([#4056](https://github.com/Shopify/polaris-react/pull/4056))
+
 ### Development workflow
 
 ### Dependency upgrades
 
+- Update `@shopify/polaris-tokens to v3.0.0 ([#4030](https://github.com/Shopify/polaris-react/pull/4030))
+
 ### Code quality
 
 ### Deprecations

dev.yml

@@ -2,7 +2,7 @@ name: polaris-react
 up:
   - node:
       yarn: v1.13.0
-      version: v10.15.0 # to be kept in sync with .nvmrc and ci.yml
+      version: v10.24.0 # to be kept in sync with .nvmrc and ci.yml
   - git_hooks:
       pre-commit: pre-commit
 

documentation/Color system.md

@@ -52,7 +52,7 @@ The onSurface role is made up of elements which appear on top of a surface, incl
 
 | CSS variable                          | Description                                                                          | Light mode                                                                                                                      | Dark mode                                                                                                                       |
 | ------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| <pre>--p-on-surface-background</pre>  | For use as a background color, in components on surface elements such as SearchField | ![](https://www.gifpng.com/64x64/f1f2f3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#f1f2f3 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#2f3133 |
+| <pre>--p-surface-search-field</pre>   | For use as a background color, in components on surface elements such as SearchField | ![](https://www.gifpng.com/64x64/f1f2f3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#f1f2f3 | ![](https://www.gifpng.com/64x64/2f3133/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#2f3133 |
 | <pre>--p-border</pre>                 | For use as the default border on elements.                                           | ![](https://www.gifpng.com/64x64/8c9196/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#8c9196 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#505356 |
 | <pre>--p-border-neutral-subdued</pre> | For use as the border on banners.                                                    | ![](https://www.gifpng.com/64x64/babfc3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#babfc3 | ![](https://www.gifpng.com/64x64/82878b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#82878b |
 | <pre>--p-border-hovered</pre>         | Used for borders on hovered interactive elements                                     | ![](https://www.gifpng.com/64x64/999ea4/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#999ea4 | ![](https://www.gifpng.com/64x64/505356/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#505356 |

locales/cs.json

@@ -306,7 +306,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Položka",
       "defaultItemPlural": "Položky",
-      "allItemsSelected": "V obchodě bylo vybráno veškeré zboží typu {resourceNamePlural} ({itemsLength}+).",
+      "allItemsSelected": "Bylo vybráno veškeré zboží typu {resourceNamePlural} ({itemsLength} a více).",
       "selected": "Vybráno: {selectedItemsCount}",
       "a11yCheckboxDeselectAllSingle": "Zrušit výběr: {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Vybrat: {resourceNameSingular}",
@@ -321,7 +321,7 @@
       "selectAllLabel": "Vybrat vše: {resourceNamePlural}",
       "selected": "Vybráno: {selectedItemsCount}",
       "undo": "Vrátit zpět",
-      "selectAllItems": "Vybrat v obchodě všechno zboží typu {resourceNamePlural} ({itemsLength}+)",
+      "selectAllItems": "Vybrat všechno zboží typu {resourceNamePlural} ({itemsLength} a více)",
       "selectItem": "Vybrat: {resourceName}",
       "selectButtonText": "Vybrat"
     }

locales/da.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Vare",
       "defaultItemPlural": "Varer",
-      "allItemsSelected": "Al {itemsLength} + {resourceNamePlural} i din butik er valgt.",
+      "allItemsSelected": "Alle {itemsLength}+ {resourceNamePlural} er valgt.",
       "selected": "{selectedItemsCount} valgt",
       "a11yCheckboxDeselectAllSingle": "Fravælg {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Vælg {resourceNameSingular}",
@@ -319,7 +319,7 @@
       "selectAllLabel": "Vælg alle {resourceNamePlural}",
       "selected": "{selectedItemsCount} valgt",
       "undo": "Fortryd",
-      "selectAllItems": "Vælg alle {itemsLength} + {resourceNamePlural} i butikken",
+      "selectAllItems": "Vælg alle {itemsLength}+ {resourceNamePlural}",
       "selectItem": "Vælg {resourceName}",
       "selectButtonText": "Vælg"
     }

locales/de.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Artikel",
       "defaultItemPlural": "Artikel",
-      "allItemsSelected": "Alle {itemsLength}+ {resourceNamePlural} in deinem Shop sind ausgewählt.",
+      "allItemsSelected": "Alle {itemsLength}+ {resourceNamePlural} wurden ausgewählt.",
       "selected": "{selectedItemsCount} ausgewählt",
       "a11yCheckboxDeselectAllSingle": "Auswahl für {resourceNameSingular} aufheben",
       "a11yCheckboxSelectAllSingle": "{resourceNameSingular} auswählen",
@@ -319,7 +319,7 @@
       "selectAllLabel": "Alle {resourceNamePlural} auswählen",
       "selected": "{selectedItemsCount} ausgewählt",
       "undo": "Rückgängig machen",
-      "selectAllItems": "Alle {itemsLength}+ {resourceNamePlural} in deinem Shop auswählen",
+      "selectAllItems": "Alle {itemsLength}+ {resourceNamePlural} auswählen",
       "selectItem": "{resourceName} auswählen",
       "selectButtonText": "Auswählen"
     }

locales/en.json

@@ -137,7 +137,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Item",
       "defaultItemPlural": "Items",
-      "allItemsSelected": "All {itemsLength}+ {resourceNamePlural} in your store are selected.",
+      "allItemsSelected": "All {itemsLength}+ {resourceNamePlural} are selected.",
       "selected": "{selectedItemsCount} selected",
       "a11yCheckboxDeselectAllSingle": "Deselect {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Select {resourceNameSingular}",
@@ -152,7 +152,7 @@
       "selectAllLabel": "Select all {resourceNamePlural}",
       "selected": "{selectedItemsCount} selected",
       "undo": "Undo",
-      "selectAllItems": "Select all {itemsLength}+ {resourceNamePlural} in your store",
+      "selectAllItems": "Select all {itemsLength}+ {resourceNamePlural}",
       "selectItem": "Select {resourceName}",
       "selectButtonText": "Select"
     },

locales/es.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Artículo",
       "defaultItemPlural": "Artículos",
-      "allItemsSelected": "Todos los {itemsLength}+ {resourceNamePlural} en tu tienda están seleccionados.",
+      "allItemsSelected": "Todos los {itemsLength}+ {resourceNamePlural} están seleccionados.",
       "selected": "{selectedItemsCount} seleccionados",
       "a11yCheckboxDeselectAllSingle": "Deseleccionar {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Seleccionar {resourceNameSingular}",
@@ -319,7 +319,7 @@
       "selectAllLabel": "Seleccionar todos los {resourceNamePlural}",
       "selected": "{selectedItemsCount} seleccionados",
       "undo": "Deshacer",
-      "selectAllItems": "Seleccionar todos los {itemsLength}+ {resourceNamePlural} en tu tienda",
+      "selectAllItems": "Seleccionar todos los {itemsLength}+{resourceNamePlural}",
       "selectItem": "Seleccionar {resourceName}",
       "selectButtonText": "Seleccionar"
     }

locales/fi.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Tuote",
       "defaultItemPlural": "Tuotteet",
-      "allItemsSelected": "Kaikki {itemsLength}+ {resourceNamePlural} kaupassasi on valittu.",
+      "allItemsSelected": "Kaikki {itemsLength} ja {resourceNamePlural} on valittu.",
       "selected": "{selectedItemsCount} valittu",
       "a11yCheckboxDeselectAllSingle": "Poista valinta {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Valitse {resourceNameSingular}",
@@ -319,7 +319,7 @@
       "selectAllLabel": "Valitse kaikki {resourceNamePlural}",
       "selected": "{selectedItemsCount} valittu",
       "undo": "Peru",
-      "selectAllItems": "Valitse kaikki {itemsLength}+ {resourceNamePlural} kaupassasi",
+      "selectAllItems": "Valitse kaikki {itemsLength} ja {resourceNamePlural}",
       "selectItem": "Valitse {resourceName}",
       "selectButtonText": "Valitse"
     }

locales/fr.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Article",
       "defaultItemPlural": "Articles",
-      "allItemsSelected": "La totalité des {itemsLength}+ {resourceNamePlural} de votre boutique sont sélectionnés.",
+      "allItemsSelected": "La totalité des {itemsLength}+ {resourceNamePlural} est sélectionnée.",
       "selected": "{selectedItemsCount} sélectionné(s)",
       "a11yCheckboxDeselectAllSingle": "Désélectionner {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Sélectionner {resourceNameSingular}",
@@ -319,7 +319,7 @@
       "selectAllLabel": "Sélectionner la totalité des {resourceNamePlural}",
       "selected": "{selectedItemsCount} sélectionné(s)",
       "undo": "Annuler",
-      "selectAllItems": "Sélectionner la totalité des {itemsLength}+ {resourceNamePlural} de votre boutique",
+      "selectAllItems": "Sélectionner la totalité des {itemsLength}+ {resourceNamePlural}",
       "selectItem": "Sélectionner {resourceName}",
       "selectButtonText": "Sélectionner"
     }

locales/it.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Articolo",
       "defaultItemPlural": "Articoli",
-      "allItemsSelected": "Tutti i {itemsLength}+ {resourceNamePlural} nel tuo negozio sono selezionati.",
+      "allItemsSelected": "Tutti i {itemsLength}+ {resourceNamePlural} sono selezionati.",
       "selected": "{selectedItemsCount} selezionati",
       "a11yCheckboxDeselectAllSingle": "Deseleziona {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Seleziona {resourceNameSingular}",
@@ -319,7 +319,7 @@
       "selectAllLabel": "Seleziona tutti gli {resourceNamePlural}",
       "selected": "{selectedItemsCount} selezionati",
       "undo": "Annulla",
-      "selectAllItems": "Seleziona tutti i {itemsLength}+ {resourceNamePlural} nel tuo negozio",
+      "selectAllItems": "Seleziona tutti i {itemsLength}+ {resourceNamePlural}",
       "selectItem": "Seleziona {resourceName}",
       "selectButtonText": "Seleziona"
     }

locales/ja.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "アイテム",
       "defaultItemPlural": "アイテム",
-      "allItemsSelected": "ストアにあるすべての{itemsLength}以上の{resourceNamePlural}が選択されています。",
+      "allItemsSelected": "すべての{itemsLength}+{resourceNamePlural}が選択されています。",
       "selected": "{selectedItemsCount}を選択済み",
       "a11yCheckboxDeselectAllSingle": "{resourceNameSingular}の選択を解除する",
       "a11yCheckboxSelectAllSingle": "{resourceNameSingular}を選択する",
@@ -319,7 +319,7 @@
       "selectAllLabel": "すべての{resourceNamePlural}を選択する",
       "selected": "{selectedItemsCount}を選択済み",
       "undo": "元に戻す",
-      "selectAllItems": "ストアにあるすべての{itemsLength}以上の{resourceNamePlural}を選択する",
+      "selectAllItems": "すべての{itemsLength}+{resourceNamePlural}を選択する",
       "selectItem": "{resourceName}を選択する",
       "selectButtonText": "選択"
     }

locales/ko.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "품목",
       "defaultItemPlural": "품목",
-      "allItemsSelected": "스토어에서 길이가 {itemsLength}보다 긴 {resourceNamePlural}을(를) 모두 선택했습니다.",
+      "allItemsSelected": "길이가 {itemsLength} 이상인 모든 {resourceNamePlural}이(가) 선택되었습니다.",
       "selected": "{selectedItemsCount}개 선택됨",
       "a11yCheckboxDeselectAllSingle": "{resourceNameSingular} 선택 취소",
       "a11yCheckboxSelectAllSingle": "{resourceNameSingular} 선택",
@@ -319,7 +319,7 @@
       "selectAllLabel": "{resourceNamePlural} 모두 선택",
       "selected": "{selectedItemsCount}개 선택됨",
       "undo": "실행 취소",
-      "selectAllItems": "스토어에서 길이가 {itemsLength}보다 긴 모든 {resourceNamePlural} 선택",
+      "selectAllItems": "길이가 {itemsLength} 이상인 모든 {resourceNamePlural} 선택",
       "selectItem": "{resourceName} 선택",
       "selectButtonText": "선택"
     }

locales/nb.json

@@ -304,7 +304,7 @@
     "IndexProvider": {
       "defaultItemSingular": "Vare",
       "defaultItemPlural": "Varer",
-      "allItemsSelected": "Alle {itemsLength}+ {resourceNamePlural} i butikken din er valgt.",
+      "allItemsSelected": "Alle {itemsLength} + {resourceNamePlural} er valgt.",
       "selected": "{selectedItemsCount} valgt",
       "a11yCheckboxDeselectAllSingle": "Opphev valg av {resourceNameSingular}",
       "a11yCheckboxSelectAllSingle": "Velg {resourceNameSingular}",
@@ -319,7 +319,7 @@
       "selectAllLabel": "Velg alle {resourceNamePlural}",
       "selected": "{selectedItemsCount} valgt",
       "undo": "Angre",
-      "selectAllItems": "Velg alle {itemsLength}+ {resourceNamePlural} i butikken din",
+      "selectAllItems": "Velg alle {itemsLength} {resourceNamePlural}",
       "selectItem": "Velg {resourceName}",
       "selectButtonText": "Velg"
     }