From 394da2ca203050fa7cca6a0138b3a1d3004629be Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 9 Dec 2021 09:47:37 -0800 Subject: [PATCH 1/8] Update root font size (#4794) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update root font size * try a fix for chromatic diffs 🧪 * Update rem values for chromatic snapshots * Update rem values for Chromatic snapshots * Update token values to px * Update rem values to px * Update rems to px * Update px to rem * Update UNRELEASED.md From a57f5c84a48600632c13f4572afd111685ccde7d Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Fri, 3 Dec 2021 10:41:11 -0500 Subject: [PATCH 2/8] Bump node to v16 (#4778) * Bump node to v16 * Bump @types/node * bump node-sass, sass-loader * add engines entry to package.json * Remove unused eslint disable, add jsx flag to tsconfig * bump size-limit-action, specify node-version * Remove engines for now, incompatible with size-limit-action * fix lint warnings, add engines * remove jsx flag * wrong action version --- .github/workflows/ci.yml | 2 +- .github/workflows/size-limit.yml | 2 +- .nvmrc | 2 +- dev.yml | 2 +- package.json | 5 ++++- playground/DetailsPage.tsx | 3 +-- scripts/build-validate.js | 1 - yarn.lock | 8 ++++---- 8 files changed, 13 insertions(+), 12 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 3ef474116cd..c503b5c31c0 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.13.0'] 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/.nvmrc b/.nvmrc index 49a625d6908..ff650592a1e 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v12.22.0 +v16.13.0 diff --git a/dev.yml b/dev.yml index e740ce9aa11..628d06c7f2c 100644 --- a/dev.yml +++ b/dev.yml @@ -2,7 +2,7 @@ name: polaris-react up: - node: yarn: v1.13.0 - version: v12.22.0 # to be kept in sync with .nvmrc and ci.yml + version: v16.13.0 # 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 18661c7ae52..7ec99d37cae 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,9 @@ ] } }, + "engines": { + "node": ">=16.13.0" + }, "scripts": { "lint": "loom lint", "format": "loom lint --fix", @@ -112,7 +115,7 @@ "@storybook/addon-essentials": "^6.3.7", "@storybook/react": "^6.3.7", "@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/yarn.lock b/yarn.lock index 8e5bf02612c..c20a6bc266a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3188,10 +3188,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.10.tgz#93f4b095af275a0427114579c10ec7aa696729d7" integrity sha512-09x2d6kNBwjHgyh3jOUE2GE4DFoxDriDvWdu6mFhMP1ysynGYazt4ecZmJlL6/fe4Zi2vtYvTvtL7epjQQrBhA== -"@types/node@^12.7.5": - version "12.12.47" - resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.47.tgz#5007b8866a2f9150de82335ca7e24dd1d59bdfb5" - integrity sha512-yzBInQFhdY8kaZmqoL2+3U5dSTMrKaYcb561VU+lDzAYvqt+2lojvBEy+hmpSNuXnPTx7m9+04CzWYOUqWME2A== +"@types/node@^16.11.11": + version "16.11.11" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.11.tgz#6ea7342dfb379ea1210835bada87b3c512120234" + integrity sha512-KB0sixD67CeecHC33MYn+eYARkqTheIRNuu97y2XMjR7Wu3XibO1vaY6VBV6O/a89SPI81cEUIYT87UqUWlZNw== "@types/normalize-package-data@^2.4.0": version "2.4.0" From 65c936504eefaadc07baaf421e798fbd899557a3 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Mon, 13 Dec 2021 14:16:19 -0500 Subject: [PATCH 3/8] node 16.10 (#4831) Co-authored-by: Kyle Durand --- .github/workflows/ci.yml | 2 +- .nvmrc | 2 +- dev.yml | 2 +- package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c503b5c31c0..d5fcc38ccfb 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -8,7 +8,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: ['16.13.0'] + node-version: ['16.10.0'] steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 diff --git a/.nvmrc b/.nvmrc index ff650592a1e..56bfee434b3 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.13.0 +v16.10.0 diff --git a/dev.yml b/dev.yml index 628d06c7f2c..51bc9b57bba 100644 --- a/dev.yml +++ b/dev.yml @@ -2,7 +2,7 @@ name: polaris-react up: - node: yarn: v1.13.0 - version: v16.13.0 # to be kept in sync with .nvmrc and ci.yml + version: v16.10.0 # 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 7ec99d37cae..c776bad3e44 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ } }, "engines": { - "node": ">=16.13.0" + "node": ">=16.10.0" }, "scripts": { "lint": "loom lint", From d2d8b2890895b40ba761bb2550713086d06d8f9e Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 16 Dec 2021 14:46:29 -0500 Subject: [PATCH 4/8] Test(16.10.0) (#4847) --- shipit.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/shipit.yml b/shipit.yml index f237dbff5e2..cf905c48cd0 100644 --- a/shipit.yml +++ b/shipit.yml @@ -1,11 +1,11 @@ ci: require: - - 'Test (12.22.0)' + - 'Test (16.10.0)' - 'Accessibility test' merge: require: - - 'Test (12.22.0)' + - 'Test (16.10.0)' - 'Accessibility test' deploy: From f1a0e360f9b77b9a94dc78a4b62109747f518263 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Fri, 17 Dec 2021 14:58:23 -0500 Subject: [PATCH 5/8] Node 16.9.1 (#4853) --- .github/workflows/ci.yml | 2 +- .nvmrc | 2 +- dev.yml | 2 +- package.json | 2 +- shipit.yml | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d5fcc38ccfb..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: ['16.10.0'] + node-version: ['16.9.1'] steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 diff --git a/.nvmrc b/.nvmrc index 56bfee434b3..4be2b935c50 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.10.0 +v16.9.1 diff --git a/dev.yml b/dev.yml index 51bc9b57bba..992268c382f 100644 --- a/dev.yml +++ b/dev.yml @@ -2,7 +2,7 @@ name: polaris-react up: - node: yarn: v1.13.0 - version: v16.10.0 # to be kept in sync with .nvmrc and ci.yml + 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 c776bad3e44..6358311dde1 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ } }, "engines": { - "node": ">=16.10.0" + "node": ">=16.9.1" }, "scripts": { "lint": "loom lint", diff --git a/shipit.yml b/shipit.yml index cf905c48cd0..bf363e84a83 100644 --- a/shipit.yml +++ b/shipit.yml @@ -1,11 +1,11 @@ ci: require: - - 'Test (16.10.0)' + - 'Test (16.9.1)' - 'Accessibility test' merge: require: - - 'Test (16.10.0)' + - 'Test (16.9.1)' - 'Accessibility test' deploy: From 7cae15ca7fcefcf745f1839d1844c06820d3dd08 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 9 Dec 2021 09:47:37 -0800 Subject: [PATCH 6/8] Cherry pick "Update root font size" PR #4794 --- .storybook/preview-body.html | 5 ++++ UNRELEASED.md | 2 ++ config/postcss-plugins.js | 2 +- src/components/AppProvider/AppProvider.scss | 2 +- .../components/FileUpload/FileUpload.scss | 2 +- src/components/IndexTable/IndexTable.scss | 6 ++-- src/components/IndexTable/README.md | 10 +++---- src/components/Sheet/README.md | 6 ++-- src/styles/foundation/_utilities.scss | 2 +- src/utilities/theme/tokens.ts | 30 +++++++++---------- 10 files changed, 37 insertions(+), 30 deletions(-) create mode 100644 .storybook/preview-body.html 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/UNRELEASED.md b/UNRELEASED.md index 28fb76d9be1..181ecad8d9e 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -4,6 +4,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### 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 - Keyboard arrow navigation support added in `ActionList` ([#4505](https://github.com/Shopify/polaris-react/pull/4505)) 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/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 3d8365b5ffa..2f2dd57b389 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} />
-
+