v8.0.0

.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

.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:

.nvmrc

@@ -1 +1 @@
-v12.22.0
+v16.9.1

.storybook/preview-body.html

@@ -0,0 +1,5 @@
+<style>
+  .sb-show-main.sb-main-padded {
+    padding: 10px;
+  }
+</style>

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

config/postcss-plugins.js

@@ -4,7 +4,7 @@ const pxtorem = require('postcss-pxtorem');
 module.exports = [
   postcssShopify,
   pxtorem({
-    rootValue: 10,
+    rootValue: 16,
     replace: true,
     propList: ['*'],
   }),

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.9.1 # to be kept in sync with .nvmrc and ci.yml
   - git_hooks:
       pre-commit: pre-commit
 

package.json

@@ -43,6 +43,9 @@
       ]
     }
   },
+  "engines": {
+    "node": ">=16.9.1"
+  },
   "scripts": {
     "lint": "loom lint",
     "format": "loom lint --fix",
@@ -113,7 +116,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",

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'
             }
           />

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');
 

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:

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

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 {

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 {

src/components/IndexTable/README.md

@@ -156,7 +156,7 @@ function SimpleSmallScreenIndexTableExample() {
         selected={selectedResources.includes(id)}
         position={index}
       >
-        <div style={{padding: '1.2rem 1.6rem'}}>
+        <div style={{padding: '12px 16px'}}>
           <p>
             <TextStyle variation="strong">{name}</TextStyle>
           </p>
@@ -759,7 +759,7 @@ function IndexTableWithFilteringExample() {
             onClearAll={handleClearAll}
           />
         </div>
-        <div style={{paddingLeft: '0.4rem'}}>
+        <div style={{paddingLeft: '0.25rem'}}>
           <Select
             labelInline
             label="Sort by"
@@ -1151,7 +1151,7 @@ function IndexTableWithAllElementsExample() {
             onClearAll={handleClearAll}
           />
         </div>
-        <div style={{paddingLeft: '0.4rem'}}>
+        <div style={{paddingLeft: '0.25rem'}}>
           <Select
             labelInline
             label="Sort by"
@@ -1312,7 +1312,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
         selected={selectedResources.includes(id)}
         position={index}
       >
-        <div style={{padding: '1.2rem 1.6rem'}}>
+        <div style={{padding: '.75rem 1rem'}}>
           <p>
             <TextStyle variation="strong">{name}</TextStyle>
           </p>
@@ -1338,7 +1338,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
               onClearAll={handleClearAll}
             />
           </div>
-          <div style={{paddingLeft: '0.4rem'}}>
+          <div style={{paddingLeft: '0.25rem'}}>
             <Select
               labelInline
               label="Sort by"

src/components/Sheet/README.md

@@ -157,7 +157,7 @@ function SheetExample() {
               borderBottom: '1px solid #DFE3E8',
               display: 'flex',
               justifyContent: 'space-between',
-              padding: '1.6rem',
+              padding: '1rem',
               width: '100%',
             }}
           >
@@ -169,7 +169,7 @@ function SheetExample() {
               plain
             />
           </div>
-          <Scrollable style={{padding: '1.6rem', height: '100%'}}>
+          <Scrollable style={{padding: '1rem', height: '100%'}}>
             <ChoiceList
               title="Select a sales channel"
               name="salesChannelsList"
@@ -186,7 +186,7 @@ function SheetExample() {
               borderTop: '1px solid #DFE3E8',
               display: 'flex',
               justifyContent: 'space-between',
-              padding: '1.6rem',
+              padding: '1rem',
               width: '100%',
             }}
           >

src/styles/foundation/_utilities.scss

@@ -1,5 +1,5 @@
 $default-browser-font-size: 16px;
-$base-font-size: 10px;
+$base-font-size: 16px;
 
 /// Returns the value in rem for a given pixel value.
 /// @param {Number} $value - The pixel value to be converted.

src/utilities/theme/tokens.ts

@@ -1,8 +1,8 @@
 export const Tokens = {
   // Border Radiuses
-  borderRadiusSlim: '0.2rem',
-  borderRadiusBase: '0.4rem',
-  borderRadiusWide: '0.8rem',
+  borderRadiusSlim: '2px',
+  borderRadiusBase: '4px',
+  borderRadiusWide: '8px',
   borderRadiusFull: '50%',
 
   // Shadows
@@ -26,31 +26,31 @@ export const Tokens = {
   overrideLoadingZIndex: '514',
   buttonFontWeight: '500',
   nonNullContent: "''",
-  choiceSize: '2rem',
-  iconSize: '1rem',
-  choiceMargin: '0.1rem',
-  controlBorderWidth: '0.2rem',
+  choiceSize: '20px',
+  iconSize: '10px',
+  choiceMargin: '1px',
+  controlBorderWidth: '2px',
   bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'),
   bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'),
   bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'),
   bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'),
   bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'),
   badgeMixBlendMode: 'luminosity',
-  thinBorderSubdued: '0.1rem solid var(--p-border-subdued)',
-  textFieldSpinnerOffset: '0.2rem',
-  textFieldFocusRingOffset: '-0.4rem',
-  textFieldFocusRingBorderRadius: '0.7rem',
-  buttonGroupItemSpacing: '-0.1rem',
+  thinBorderSubdued: '1px solid var(--p-border-subdued)',
+  textFieldSpinnerOffset: '2px',
+  textFieldFocusRingOffset: '-4px',
+  textFieldFocusRingBorderRadi: '7px',
+  buttonGroupItemSpacing: '-1px',
   duration100: '100ms',
   duration150: '150ms',
   easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
   ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)',
-  rangeSliderThumbSizeBase: '1.6rem',
-  rangeSliderThumbSizeActive: '2.4rem',
+  rangeSliderThumbSizeBase: '16px',
+  rangeSliderThumbSizeActive: '24px',
   rangeSliderThumbScale: '1.5',
   badgeFontWeight: '400',
 };
 
 function buildBannerBorder(cssVar: string) {
-  return `inset 0 0.1rem 0 0 var(${cssVar}), inset 0 0 0 0.1rem var(${cssVar})`;
+  return `inset 0 1px 0 0 var(${cssVar}), inset 0 0 0 1px var(${cssVar})`;
 }

yarn.lock

@@ -3835,10 +3835,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"