Skip to content

Commit

Permalink
Polaris v8 (#4907)
Browse files Browse the repository at this point in the history
* Update root font size (#4794)

* 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

* 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

* node 16.10 (#4831)

Co-authored-by: Kyle Durand <[email protected]>

* Test(16.10.0) (#4847)

* Node 16.9.1 (#4853)

* Cherry pick "Update root font size" PR #4794

* Update change log

* v8.0.0

Co-authored-by: aveline <[email protected]>
Co-authored-by: Kyle Durand <[email protected]>
Co-authored-by: Aaron Casanova <[email protected]>
  • Loading branch information
4 people authored Jan 20, 2022
1 parent e3cfe50 commit 5e5d68c
Show file tree
Hide file tree
Showing 21 changed files with 65 additions and 49 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/size-limit.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]
with:
Expand Down
5 changes: 5 additions & 0 deletions .storybook/preview-body.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<style>
.sb-show-main.sb-main-padded {
padding: 10px;
}
</style>
10 changes: 10 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.6.0/build/esm/styles.css"
href="https://unpkg.com/@shopify/polaris@8.0.0/build/esm/styles.css"
/>
```

Expand Down Expand Up @@ -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.6.0/build/esm/styles.css"
href="https://unpkg.com/@shopify/polaris@8.0.0/build/esm/styles.css"
/>
```

Expand Down
2 changes: 1 addition & 1 deletion UNRELEASED.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion config/postcss-plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const pxtorem = require('postcss-pxtorem');
module.exports = [
postcssShopify,
pxtorem({
rootValue: 10,
rootValue: 16,
replace: true,
propList: ['*'],
}),
Expand Down
2 changes: 1 addition & 1 deletion dev.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -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 <[email protected]>",
Expand Down Expand Up @@ -43,6 +43,9 @@
]
}
},
"engines": {
"node": ">=16.9.1"
},
"scripts": {
"lint": "loom lint",
"format": "loom lint --fix",
Expand Down Expand Up @@ -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",
Expand Down
3 changes: 1 addition & 2 deletions playground/DetailsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
/>
Expand Down
1 change: 0 additions & 1 deletion scripts/build-validate.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// eslint-disable-next-line node/no-unsupported-features/node-builtins
const assert = require('assert').strict;
const fs = require('fs');

Expand Down
4 changes: 2 additions & 2 deletions shipit.yml
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppProvider/AppProvider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2;
}

.small {
padding: 1.25rem;
padding: 12px;
}

.FileUpload img {
Expand Down
6 changes: 3 additions & 3 deletions src/components/IndexTable/IndexTable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -523,7 +523,7 @@ $scroll-bar-border-radius: rem(4px);
}

.StickyTableHeader-condensed {
padding: 1.6rem spacing() 0.8rem;
padding: 16px spacing() 8px;
}

.ScrollBarContent {
Expand Down
10 changes: 5 additions & 5 deletions src/components/IndexTable/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -759,7 +759,7 @@ function IndexTableWithFilteringExample() {
onClearAll={handleClearAll}
/>
</div>
<div style={{paddingLeft: '0.4rem'}}>
<div style={{paddingLeft: '0.25rem'}}>
<Select
labelInline
label="Sort by"
Expand Down Expand Up @@ -1151,7 +1151,7 @@ function IndexTableWithAllElementsExample() {
onClearAll={handleClearAll}
/>
</div>
<div style={{paddingLeft: '0.4rem'}}>
<div style={{paddingLeft: '0.25rem'}}>
<Select
labelInline
label="Sort by"
Expand Down Expand Up @@ -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>
Expand All @@ -1338,7 +1338,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
onClearAll={handleClearAll}
/>
</div>
<div style={{paddingLeft: '0.4rem'}}>
<div style={{paddingLeft: '0.25rem'}}>
<Select
labelInline
label="Sort by"
Expand Down
4 changes: 2 additions & 2 deletions src/components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Include the CSS in your HTML. We suggest copying the styles file into your own p
```html
<link
rel="stylesheet"
href="https://unpkg.com/@shopify/polaris@7.6.0/build/esm/styles.css"
href="https://unpkg.com/@shopify/polaris@8.0.0/build/esm/styles.css"
/>
```

Expand Down Expand Up @@ -100,7 +100,7 @@ Include the CSS stylesheet in your HTML. We suggest copying the styles file into
```html
<link
rel="stylesheet"
href="https://unpkg.com/@shopify/polaris@7.6.0/build/esm/styles.css"
href="https://unpkg.com/@shopify/polaris@8.0.0/build/esm/styles.css"
/>
```

Expand Down
6 changes: 3 additions & 3 deletions src/components/Sheet/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ function SheetExample() {
borderBottom: '1px solid #DFE3E8',
display: 'flex',
justifyContent: 'space-between',
padding: '1.6rem',
padding: '1rem',
width: '100%',
}}
>
Expand All @@ -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"
Expand All @@ -186,7 +186,7 @@ function SheetExample() {
borderTop: '1px solid #DFE3E8',
display: 'flex',
justifyContent: 'space-between',
padding: '1.6rem',
padding: '1rem',
width: '100%',
}}
>
Expand Down
2 changes: 1 addition & 1 deletion src/styles/foundation/_utilities.scss
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
30 changes: 15 additions & 15 deletions src/utilities/theme/tokens.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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})`;
}
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 5e5d68c

Please sign in to comment.