diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3ef474116cd..0516cf7dc8f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -8,7 +8,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: ['12.22.0'] + node-version: ['16.9.1'] steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml index 9533989feb1..d7a02f568d8 100644 --- a/.github/workflows/size-limit.yml +++ b/.github/workflows/size-limit.yml @@ -15,7 +15,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 12 + node-version: 16 cache: yarn - uses: andresz1/size-limit-action@v1.4.0 with: diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 00000000000..325cfa9665a --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1,5 @@ + diff --git a/CHANGELOG.md b/CHANGELOG.md index 263c1ec9069..34a239b0213 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,16 @@ The format is based on [these versioning and changelog guidelines](/documentatio --- +## 8.0.0 - 2022-01-20 + +### Breaking changes + +- Update the base font size to `100%` from `62.5%` and update `rem` values accordingly, along with `pxtorem` `rootValue` ([#4794](https://github.com/Shopify/polaris-react/pull/4794)) + +### Enhancements + +- Removed `_SECRET_INTERNAL_FilterControl` and `_SECRET_INTERNAL_FilterControlProps` exports. These exports have been deprecated since Polaris v5 and are not part of our stable API, which is why we are removing them in a minor release. ([#4905](https://github.com/Shopify/polaris-react/pull/4905)) + ## 7.6.0 - 2022-01-18 ### Enhancements diff --git a/README.md b/README.md index e3d7713ba4d..a7c79918d01 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into ```html ``` @@ -76,7 +76,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi ```html ``` diff --git a/UNRELEASED.md b/UNRELEASED.md index b5f870bdb45..8d028f7cbe4 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -4,7 +4,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Breaking changes -- Removed `_SECRET_INTERNAL_FilterControl` and `_SECRET_INTERNAL_FilterControlProps` exports. These exports have been deprecated since Polaris v5 and are not part of our stable API, which is why we are removing them in a minor release. ([#4905](https://github.com/Shopify/polaris-react/pull/4905)) +### Enhancements ### Enhancements diff --git a/config/postcss-plugins.js b/config/postcss-plugins.js index ee89cfd09a1..b8a0ff5a297 100644 --- a/config/postcss-plugins.js +++ b/config/postcss-plugins.js @@ -4,7 +4,7 @@ const pxtorem = require('postcss-pxtorem'); module.exports = [ postcssShopify, pxtorem({ - rootValue: 10, + rootValue: 16, replace: true, propList: ['*'], }), diff --git a/dev.yml b/dev.yml index 3fd08809ea6..c772de934d9 100644 --- a/dev.yml +++ b/dev.yml @@ -2,7 +2,7 @@ name: polaris-react up: - node: yarn: v1.13.0 - version: v16.9.1 # to be kept in sync with .nvmrc and ci.yml (when v8 has shipped) + version: v16.9.1 # to be kept in sync with .nvmrc and ci.yml - git_hooks: pre-commit: pre-commit diff --git a/package.json b/package.json index e7cff0ef86a..f2e8ed500fd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@shopify/polaris", "description": "Shopify’s admin product component library", - "version": "7.6.0", + "version": "8.0.0", "private": false, "license": "SEE LICENSE IN LICENSE.md", "author": "Shopify ", @@ -43,6 +43,9 @@ ] } }, + "engines": { + "node": ">=16.9.1" + }, "scripts": { "lint": "loom lint", "format": "loom lint --fix", @@ -111,7 +114,7 @@ "@storybook/addon-essentials": "^6.4.7", "@storybook/react": "^6.4.10", "@types/lodash": "^4.14.138", - "@types/node": "^12.7.5", + "@types/node": "^16.11.11", "babel-core": "7.0.0-bridge.0", "babel-loader": "^8.1.0", "chalk": "^2.4.2", diff --git a/playground/DetailsPage.tsx b/playground/DetailsPage.tsx index 838a7aa8c22..e128b078bf3 100644 --- a/playground/DetailsPage.tsx +++ b/playground/DetailsPage.tsx @@ -503,8 +503,7 @@ export function DetailsPage() { alt={file.name} source={ validImageTypes.indexOf(file.type) > 0 - ? // eslint-disable-next-line node/no-unsupported-features/node-builtins - window.URL.createObjectURL(file) + ? URL.createObjectURL(file) : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304' } /> diff --git a/scripts/build-validate.js b/scripts/build-validate.js index 48407a68212..e5a094a9dc3 100644 --- a/scripts/build-validate.js +++ b/scripts/build-validate.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line node/no-unsupported-features/node-builtins const assert = require('assert').strict; const fs = require('fs'); diff --git a/shipit.yml b/shipit.yml index f237dbff5e2..bf363e84a83 100644 --- a/shipit.yml +++ b/shipit.yml @@ -1,11 +1,11 @@ ci: require: - - 'Test (12.22.0)' + - 'Test (16.9.1)' - 'Accessibility test' merge: require: - - 'Test (12.22.0)' + - 'Test (16.9.1)' - 'Accessibility test' deploy: diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index 512dadbe76e..e251e022860 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -32,7 +32,7 @@ button { html { position: relative; - font-size: ($base-font-size / $default-browser-font-size) * 100%; + font-size: 100%; -webkit-font-smoothing: antialiased; // This needs to come after -webkit-font-smoothing diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss index 20cc040d35c..3f7fc7a87bf 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.scss +++ b/src/components/DropZone/components/FileUpload/FileUpload.scss @@ -18,7 +18,7 @@ $slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2; } .small { - padding: 1.25rem; + padding: 12px; } .FileUpload img { diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index 5ec1cba71fe..9f3f8794e7e 100644 --- a/src/components/IndexTable/IndexTable.scss +++ b/src/components/IndexTable/IndexTable.scss @@ -508,8 +508,8 @@ $scroll-bar-border-radius: rem(4px); display: flex; align-items: flex-start; width: 100%; - min-height: 5.6rem; - padding: 1rem spacing(); + min-height: 56px; + padding: 10px spacing(); background-color: var(--p-surface); &.unselectable { @@ -523,7 +523,7 @@ $scroll-bar-border-radius: rem(4px); } .StickyTableHeader-condensed { - padding: 1.6rem spacing() 0.8rem; + padding: 16px spacing() 8px; } .ScrollBarContent { diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md index a0d95520bb0..7d3ddec0545 100644 --- a/src/components/IndexTable/README.md +++ b/src/components/IndexTable/README.md @@ -156,7 +156,7 @@ function SimpleSmallScreenIndexTableExample() { selected={selectedResources.includes(id)} position={index} > -
+

{name}

@@ -759,7 +759,7 @@ function IndexTableWithFilteringExample() { onClearAll={handleClearAll} />
-
+
-
+

{name}

@@ -1338,7 +1338,7 @@ function SmallScreenIndexTableWithAllElementsExample() { onClearAll={handleClearAll} />
-
+