Shopify · kyledurand · Feb 3, 2022 · Jan 12, 2022 · Jan 12, 2022 · Jan 13, 2022
diff --git a/.prettierignore b/.prettierignore
@@ -3,4 +3,4 @@ node_modules
 /build
 /build-internal
 
-/package.json
+/package.json
diff --git a/.storybook/polaris-readme-loader.js b/.storybook/polaris-readme-loader.js
@@ -182,6 +182,7 @@ import {
   CirclePlusOutlineMinor,
   ConversationMinor,
   CustomersMajor,
+  CustomersMinor,
   DeleteMinor,
   CircleDisableMinor,
   DisputeMinor,
@@ -191,17 +192,22 @@ import {
   ExternalMinor,
   QuestionMarkMajor,
   HomeMajor,
+  HomeMinor,
   HorizontalDotsMinor,
   ImportMinor,
   LogOutMinor,
   MarketingMajor,
+  MarketingMinor,
   MobileHamburgerMajor,
   NoteMinor,
   NotificationMajor,
   OnlineStoreMajor,
+  OnlineStoreMinor,
   OrdersMajor,
+  OrdersMinor,
   PrintMinor,
   ProductsMajor,
+  ProductsMinor,
   ProfileMinor,
   RefreshMinor,
   RiskMinor,
@@ -356,7 +362,8 @@ function filterMarkdownForPlatform(markdown, platform) {
     `<!-- content-for: (?:[\\w\\s,]*${platform}[\\w\\s,]*) -->([\\s\\S]+?)<!-- \\/content-for -->`,
     'gu',
   );
-  const deleteRemainingPlatformsRegExp = /<!-- content-for: [\w\s,]+ -->[\s\S]+?<!-- \/content-for -->/gu;
+  const deleteRemainingPlatformsRegExp =
+    /<!-- content-for: [\w\s,]+ -->[\s\S]+?<!-- \/content-for -->/gu;
 
   return (
     markdown

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,60 @@ The format is based on [these versioning and changelog guidelines](/documentatio
 
 ---
 
+## 8.0.0 - 2022-01-20
+
+### Breaking changes
+
+- Updated 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))
+- Updated required node version to `v16.9.1` ([#4853](https://github.com/Shopify/polaris-react/pull/4853))
+
+### 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
+
+- Keyboard arrow navigation support added in `ActionList` ([#4505](https://github.com/Shopify/polaris-react/pull/4505))
+- Menu role attribute value support added in `ActionList/Section` ([#4505](https://github.com/Shopify/polaris-react/pull/4505))
+- Updated the styling of `DropZone.FileUpload` ([#4813](https://github.com/Shopify/polaris-react/pull/4813))
+- Added a minimum height to `Page` component `Header` ([#4770](https://github.com/Shopify/polaris-react/pull/4779))
+- Added a `verticalAlign` prop to `OptionList`. ([#4800](https://github.com/Shopify/polaris-react/pull/4800))
+- Added suppport for a `url` prop in the `Tag` component ([#4837](https://github.com/Shopify/polaris-react/pull/4837))
+- Added support for `children` to take elements other than strings in the `Tag` component ([#4837](https://github.com/Shopify/polaris-react/pull/4837))
+- Bumped the `@shopify/storybook-a11y-test` package to the latest version `0.3.0` ([#4870](https://github.com/Shopify/polaris-react/pull/4870))
+- Added a `warning` variation to `TextStyle` ([#4880](https://github.com/Shopify/polaris-react/pull/4880))
+- Added a class to hide the clear button in the `TextField` component instead of removing it from the DOM ([#4897](https://github.com/Shopify/polaris-react/pull/4897))
+
+### Bug fixes
+
+- Fixed a bug where remove button could shrink in the `Tag` component ([#4816](https://github.com/Shopify/polaris-react/issues/4816))
+- Fixed incorrect `Popover` position in `Combobox` when an element is conditionally rendered before the `Combobox` ([#4825](https://github.com/Shopify/polaris-react/pull/4825))
+- Reverted the deprecation of the "attention" `status` in `Badge` ([#4840](https://github.com/Shopify/polaris-react/pull/4840))
+- Fixed an issue where the `MutationObserver` of the `PositionedOverlay` was calling setState on an unmounted component ([#4869](https://github.com/Shopify/polaris-react/pull/4869));
+- Fixed a color contrast issue in `FileUpload` ([#4875](https://github.com/Shopify/polaris-react/pull/4875))
+- Fixed a bug where a checkbox showed on an `Autocomplete` action when `allowMultiple` is true ([#4887](https://github.com/Shopify/polaris-react/pull/4887))
+- Fixed a bug where the `Listbox.Action` was not treated like an action when used outside `Autocomplete` ([#4893](https://github.com/Shopify/polaris-react/pull/4893))
+- Fixed a bug where the `Checkbox` in a `Combobox` with `allowMultiple` would steal focus and close the `Popover` when clicked ([#4895](https://github.com/Shopify/polaris-react/pull/4895))
+
+### Documentation
+
+- Fixed a bug in the `Icon` component where examples did not show ([#4843](https://github.com/Shopify/polaris-react/pull/4843))
+- Added arrow navigation instructions in keyboard support for `ActionList` ([#4505](https://github.com/Shopify/polaris-react/pull/4505))
+- Updated examples to properly support JAWS screen reader for `Popover` and `ActionList` ([#4505](https://github.com/Shopify/polaris-react/pull/4505))
+
+### Development workflow
+
+- Removed `dev start` command. Thank you to [@aaronadamsCA](https://github.com/aaronadamsCA) for the contribution ([#4876](https://github.com/Shopify/polaris-react/pull/4876)).
+
+### Dependency upgrades
+
+- Bumped `@shopify/polaris-icons` to v4.11.0 ([#4837](https://github.com/Shopify/polaris-react/pull/4837))
+- Bumped `@storybook/react` to 6.4.10 ([#4796](https://github.com/Shopify/polaris-react/pull/4796))
+- Bumped `@shopify/storybook-a11y-test` to 0.4.3 ([#4796](https://github.com/Shopify/polaris-react/pull/4796))
+- Removed dependency `serve`. Thank you to [@aaronadamsCA](https://github.com/aaronadamsCA) for the contribution ([#4876](https://github.com/Shopify/polaris-react/pull/4876)).
+
 ## 7.5.0 - 2021-12-09
 
 ### Enhancements

diff --git a/Procfile b/Procfile
diff --git 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
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@7.5.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@8.0.0/build/esm/styles.css"
 />
 ```
 
@@ -76,7 +76,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@7.5.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@8.0.0/build/esm/styles.css"
 />
 ```
 

diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -17,28 +17,38 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Added suppport for a `url` prop in the `Tag` component ([#4837](https://github.com/Shopify/polaris-react/pull/4837))
 - Added support for `children` to take elements other than strings in the `Tag` component ([#4837](https://github.com/Shopify/polaris-react/pull/4837))
 - Bumped the `@shopify/storybook-a11y-test` package to the latest version `0.3.0` ([#4870](https://github.com/Shopify/polaris-react/pull/4870))
+- Add an inset box-shadow to `ColorPicker` to make it easier to see the draggers ([#4948](https://github.com/Shopify/polaris-react/pull/4948))
+- Tightened up the Navigation component UI density. ([#4874](https://github.com/Shopify/polaris-react/pull/4874))
+- Updated mobile behaviour of Navigation to only show one sub-section at a time ([#4902](https://github.com/Shopify/polaris-react/pull/4902))
+- Remove the info icon and external link guidance from FooterHelp ([#4982](https://github.com/Shopify/polaris-react/pull/4982))
+- Normalise spacing around the `Header` within the `Page` ([#4911](https://github.com/Shopify/polaris-react/pull/4911))
 
 ### Bug fixes
 
+- Fixed `segmented` `ButtonGroup` misaligning icon only buttons when grouped with text only buttons ([#4079](https://github.com/Shopify/polaris-react/issues/4079))
+- Added missing styles for `destructive` `Page` `secondaryActions` ([#4647](https://github.com/Shopify/polaris-react/pull/4647))
+- Removed `min-height` from `Page` `additionalNavigation` ([#4952](https://github.com/Shopify/polaris-react/pull/4952))
+- Fixed overly dark `bottom-border` on `DataTable` header cell and total cell ([#4975](https://github.com/Shopify/polaris-react/pull/4975))
+- Removed `min-height` on `Autocomplete` `action` ([#4977](https://github.com/Shopify/polaris-react/pull/4977))
+- Fixed `focus-ring` on `Banner` `secondaryAction` ([#4997](https://github.com/Shopify/polaris-react/pull/4997))
 - Fixed a bug where remove button could shrink in the `Tag` component ([#4816](https://github.com/Shopify/polaris-react/issues/4816))
 - Fixed incorrect `Popover` position in `Combobox` when an element is conditionally rendered before the `Combobox` ([#4825](https://github.com/Shopify/polaris-react/pull/4825))
 - Reverted the deprecation of the "attention" `status` in `Badge` ([#4840](https://github.com/Shopify/polaris-react/pull/4840))
 - Fixed an issue where the `MutationObserver` of the `PositionedOverlay` was calling setState on an unmounted component ([#4869](https://github.com/Shopify/polaris-react/pull/4869));
 - Fixed a color contrast issue in `FileUpload` ([#4875](https://github.com/Shopify/polaris-react/pull/4875))
+- Fixed a bug where a checkbox showed on an `Autocomplete` action when `allowMultiple` is true ([#4886](https://github.com/Shopify/polaris-react/pull/4886))
+- Fixed a bug where the `Listbox.Action` was not treated like an action when used outside `Autocomplete` ([#4893](https://github.com/Shopify/polaris-react/pull/4893))
+- Fixed a bug where the `Checkbox` in a `Combobox` with `allowMultiple` would steal focus and close the `Popover` when clicked ([#4895](https://github.com/Shopify/polaris-react/pull/4895))
+- Fixed an issue where `TextField` was the wrong height on initial render ([#4903](https://github.com/Shopify/polaris-react/pull/4903))
+- Fixed an issue where token values in px weren't converted to rems ([#5000](https://github.com/Shopify/polaris-react/pull/5000))
 
 ### Documentation
 
-- Fixed a bug in the `Icon` component where examples did not show ([#4843](https://github.com/Shopify/polaris-react/pull/4843))
-- Added arrow navigation instructions in keyboard support for `ActionList` ([#4505](https://github.com/Shopify/polaris-react/pull/4505))
-- Updated examples to properly support JAWS screen reader for `Popover` and `ActionList` ([#4505](https://github.com/Shopify/polaris-react/pull/4505))
-
 ### Development workflow
 
-### Dependency upgrades
+- Improve error logging in the event of sass errors ([#4954](https://github.com/Shopify/polaris-react/pull/4954))
 
-- Bumped `@shopify/polaris-icons` to v4.11.0 ([#4837](https://github.com/Shopify/polaris-react/pull/4837))
-- Bumped `@storybook/react` to 6.4.10 ([#4796](https://github.com/Shopify/polaris-react/pull/4796))
-- Bumped `@shopify/storybook-a11y-test` to 0.4.3 ([#4796](https://github.com/Shopify/polaris-react/pull/4796))
+### Dependency upgrades
 
 ### Code quality
 

diff --git a/config/rollup/plugin-styles.js b/config/rollup/plugin-styles.js
@@ -1,5 +1,4 @@
 const path = require('path');
-const {promisify} = require('util');
 
 const {createFilter} = require('@rollup/pluginutils');
 const nodeSass = require('node-sass');
@@ -22,8 +21,6 @@ module.exports.styles = function styles({
 
   const filter = createFilter(include, exclude);
 
-  const renderSass = promisify(nodeSass.render);
-
   const styleProcessor = postcss([
     cssModules({
       ...modules,
@@ -148,11 +145,19 @@ module.exports.styles = function styles({
         return null;
       }
 
-      const sassOutput = await renderSass({
-        data: source,
-        outputStyle: 'compact',
-        includePaths: [path.dirname(id)],
-      }).then((result) => result.css.toString());
+      let sassOutput;
+      try {
+        sassOutput = nodeSass
+          .renderSync({
+            data: source,
+            file: id,
+            outputStyle: 'compact',
+            includePaths: [path.dirname(id)],
+          })
+          .css.toString();
+      } catch (err) {
+        throw new Error(err.formatted);
+      }
 
       const postCssOutput = await styleProcessor
         .process(sassOutput, {from: id})

diff --git a/dev.yml b/dev.yml
@@ -16,7 +16,6 @@ commands:
   # For a list of Common Commands in Projects, check out:
   # https://development.shopify.io/tools/dev/getting_started/Common-Commands-in-Projects
   build: yarn run build
-  start: yarn run start
   server: yarn run dev
   style: yarn run lint
   test: yarn run test

diff --git a/documentation/guides/migrating-from-v7-to-v8.md b/documentation/guides/migrating-from-v7-to-v8.md
@@ -1,40 +1,86 @@
 # Migrating from v7 to v8
 
-Polaris v8.0.0 ([full release notes](https://github.com/Shopify/polaris-react/releases/tag/v8.0.0)) features a rebuild of the `Autocomplete` component, build changes, . This file describes all code updates required to stay up to date.
+Polaris v8.0.0 ([full release notes](https://github.com/Shopify/polaris-react/releases/tag/v8.0.0)) features a change to the required node version and root font size.
 
-## `ThemeProvider` changes
+## Node support
 
-The `ThemeProvider` has been deprecated in favor of the new `CustomProperties` component. As a result, a number of internal components using the `ThemeProvider` have been updated to use the `CustomProperties` component and adjusted their prop interfaces accordingly (such as: `AppProvider`, `Popover`, etc.).
+Node 16 is now a requirement.
 
-`polaris-react` no longer supports accepting and transforming a custom theme object to influence the component library. Polaris will now maintain a set of predefined color-schemes that meet the immediate needs of the admin and thus the following changes are required:
+## Base font size
 
-```diff
-- import {ThemeProvider} from '@shopify/polaris-react';
-+ import {CustomProperties} from '@shopify/polaris-react';
+~~`html {font-size: 62.5%}`~~
 
-const App = (props) => (
--  <ThemeProvider theme={{colorScheme: 'dark'}}>
--    {props.children}
--  </ThemeProvider>
-+  <CustomProperties colorScheme="dark">
-+    {props.children}
-+  </CustomProperties>
-)
-```
+`html {font-size: 100%}`
+
+No changes are needed if your app uses the `rem()` function for css values. If your app caches css files you'll need to rebuild them once you upgrade to v8.0.0.
+
+Polaris has switched to the browser default of 16px for its base font size instead of the previous 10px.
 
-As mentioned above, the `ThemeProvider` has been removed from the `AppProvider` and replaced with the `CustomProperties` component.
+If you have hard coded rem values then you will need to modify them to use the `rem()` function or recalculate them accordingly:
 
-With that said, the `AppProvider` no longer accepts a custom theme object to forward to the `ThemeProvider`. However, similar behavior is still optionally exposed by forwarding the `colorScheme` prop to the `CustomProperties` component:
+`rem(16px) => 1.6rem` is no longer true (16 / 10).
 
-```diff
-import {AppProvider} from '@shopify/polaris-react';
+`rem(16px) => 1rem` is the new conversion (16 / 16).
 
-const App = (props) => (
--  <AppProvider theme={{colorScheme: 'dark'}}>
--    {props.children}
--  </AppProvider>
-+  <AppProvider colorScheme="dark">
-+    {props.children}
-+  </AppProvider>
-)
+We've created the following codemod to help with manually set rem values:
+
+<details>
+  <summary>Codemod to convert hard coded rems</summary>
+
+```jsx
+// node index.js <target-path>
+
+import fs from 'fs/promises'
+import path from 'path'
+import os from 'os'
+
+import pMap from 'p-map'
+import { globby } from 'globby'
+
+const target = path.resolve(process.cwd(), process.argv[2])
+
+const stats = {
+  files: 0,
+  rems: 0,
+}
+
+if (!target) {
+  console.log('Please specify a target directory')
+  process.exit(1)
+}
+
+const scssPaths = await globby('**/*.scss', {
+  cwd: target,
+  ignore: ['**/node_modules/**/*.scss'],
+  absolute: true,
+})
+
+console.log(`Checking for rems in ${scssPaths.length} file(s)\n`)
+
+async function replaceRems(filePath) {
+  let hasRems = false
+  const fileContent = await fs.readFile(filePath, { encoding: 'utf8' })
+  const remRegex = /(-?\d+(?:\.\d+|\d*))rem/g
+
+  const newContent = fileContent.replace(remRegex, (_, unit) => {
+    hasRems = true
+    stats.rems++
+
+    const value = parseFloat(unit) * 10 // Note: 1rem was previously 10px
+
+    return `rem(${value}px)`
+  })
+
+  if (hasRems) stats.files++
+
+  await fs.writeFile(filePath, newContent)
+}
+
+await pMap(scssPaths, replaceRems, { concurrency: os.cpus().length })
+
+console.log(`Updated ${stats.rems} rems in ${stats.files} files\n`)
+
+console.log('Done! 🌈')
 ```
+
+</details>
diff --git a/documentation/guides/migrating-from-v8-to-v9.md b/documentation/guides/migrating-from-v8-to-v9.md
@@ -2,7 +2,42 @@
 
 Polaris v9.0.0 ([full release notes](https://github.com/Shopify/polaris-react/releases/tag/v9.0.0)) features removal of the public scss api and removal of scss functions and mixins.
 
-## Theme provider
+## ThemeProvider changes
+
+The `ThemeProvider` has been deprecated in favor of the new `CustomProperties` component. As a result, a number of internal components using the `ThemeProvider` have been updated to use the `CustomProperties` component and adjusted their prop interfaces accordingly (such as: `AppProvider`, `Popover`, etc.).
+
+`polaris-react` no longer supports accepting and transforming a custom theme object to influence the component library. Polaris will now maintain a set of predefined color-schemes that meet the immediate needs of the admin and thus the following changes are required:
+
+```diff
+- import {ThemeProvider} from '@shopify/polaris-react';
++ import {CustomProperties} from '@shopify/polaris-react';
+
+const App = (props) => (
+-  <ThemeProvider theme={{colorScheme: 'dark'}}>
+-    {props.children}
+-  </ThemeProvider>
++  <CustomProperties colorScheme="dark">
++    {props.children}
++  </CustomProperties>
+)
+```
+
+As mentioned above, the `ThemeProvider` has been removed from the `AppProvider` and replaced with the `CustomProperties` component.
+
+With that said, the `AppProvider` no longer accepts a custom theme object to forward to the `ThemeProvider`. However, similar behavior is still optionally exposed by forwarding the `colorScheme` prop to the `CustomProperties` component:
+
+```diff
+import {AppProvider} from '@shopify/polaris-react';
+
+const App = (props) => (
+-  <AppProvider theme={{colorScheme: 'dark'}}>
+-    {props.children}
+-  </AppProvider>
++  <AppProvider colorScheme="dark">
++    {props.children}
++  </AppProvider>
+)
+```
 
 ## Removal of the public scss api
 

diff --git a/examples/create-react-app-ts-react-testing/yarn.lock b/examples/create-react-app-ts-react-testing/yarn.lock
@@ -5483,9 +5483,9 @@ focus-visible@^5.2.0:
   integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==
 
 follow-redirects@^1.0.0:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
-  integrity sha512-tmRv0AVuR7ZyouUHLeNSiO6pqulF7dYa3s19c6t+wz9LD69/uSzdMxJ2S91nTI9U3rt/IldxpzMOFejp6f0hjg==
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
+  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
 
 for-in@^1.0.2:
   version "1.0.2"