Merge branch 'main' into v11-major

* main: Disallow text transform in stylelint-polaris coverage rules (#8244) Add new z-index token names (#8245) Version Packages (#8236) [Layout foundations][Batch 3] Rebuild components with layout primitives (#7950) [Backdrop] Call `onClick` regardless of `setClosing` prop presence (#8237)
Shopify · Feb 2, 2023 · 37cacc5 · 37cacc5
2 parents b348834 + 0ee4325
commit 37cacc5
Show file tree

Hide file tree

Showing 39 changed files with 279 additions and 279 deletions.
diff --git a/.changeset/big-carrots-rescue.md b/.changeset/big-carrots-rescue.md
diff --git a/.changeset/fuzzy-timers-kneel.md b/.changeset/fuzzy-timers-kneel.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added new z-index tokens that will be the default in v7.0.0
diff --git a/.changeset/metal-queens-look.md b/.changeset/metal-queens-look.md
@@ -0,0 +1,6 @@
+---
+'@shopify/stylelint-polaris': minor
+'@shopify/polaris': patch
+---
+
+Disallow text-transform property in Stylelint Polaris
diff --git a/polaris-cli/CHANGELOG.md b/polaris-cli/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @shopify/polaris-cli
 
+## 0.1.1
+
 ## 0.1.0
 
 ### Minor Changes

diff --git a/polaris-cli/package.json b/polaris-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-cli",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Commands for building Shopify Apps with Polaris",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <[email protected]>",

diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@types/is-git-clean": "^1.1.0",
     "@types/jscodeshift": "^0.11.5",
-    "@shopify/polaris": "^10.24.2",
+    "@shopify/polaris": "^10.25.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",

diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Changelog
 
+## 10.25.0
+
+### Minor Changes
+
+- [#7950](https://github.com/Shopify/polaris/pull/7950) [`286c63a84`](https://github.com/Shopify/polaris/commit/286c63a8402873f02cdbd9e469169531ee03111b) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Tabs` component to use layout primitives
+
+* [#7950](https://github.com/Shopify/polaris/pull/7950) [`286c63a84`](https://github.com/Shopify/polaris/commit/286c63a8402873f02cdbd9e469169531ee03111b) Thanks [@laurkim](https://github.com/laurkim)! - Updated `OptionList` to use new layout primitives
+
+- [#7950](https://github.com/Shopify/polaris/pull/7950) [`286c63a84`](https://github.com/Shopify/polaris/commit/286c63a8402873f02cdbd9e469169531ee03111b) Thanks [@laurkim](https://github.com/laurkim)! - Updated `Popover` to use new layout primitives
+
+### Patch Changes
+
+- [#7950](https://github.com/Shopify/polaris/pull/7950) [`286c63a84`](https://github.com/Shopify/polaris/commit/286c63a8402873f02cdbd9e469169531ee03111b) Thanks [@laurkim](https://github.com/laurkim)! - Remove unused class in Page Header
+
+* [#7950](https://github.com/Shopify/polaris/pull/7950) [`286c63a84`](https://github.com/Shopify/polaris/commit/286c63a8402873f02cdbd9e469169531ee03111b) Thanks [@laurkim](https://github.com/laurkim)! - Rebuilt Page Header with layout components
+
+- [#8237](https://github.com/Shopify/polaris/pull/8237) [`17fa970db`](https://github.com/Shopify/polaris/commit/17fa970db66213fe659ee231e750f7054a72dc97) Thanks [@loic-d](https://github.com/loic-d)! - Fixed Backdrop onClick callback when setClosing is missing
+
 ## 10.24.2
 
 ### Patch Changes

diff --git a/polaris-react/README.md b/polaris-react/README.md
@@ -33,7 +33,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@10.24.2/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@10.25.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,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@10.24.2/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@10.25.0/build/esm/styles.css"
 />
 ```
 

diff --git a/polaris-react/package.json b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "10.24.2",
+  "version": "10.25.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <[email protected]>",

diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -11,6 +11,7 @@ body {
   line-height: var(--p-font-line-height-2);
   font-weight: var(--p-font-weight-regular);
 
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   text-transform: initial;
   letter-spacing: initial;
 

diff --git a/polaris-react/src/components/Backdrop/Backdrop.tsx b/polaris-react/src/components/Backdrop/Backdrop.tsx
@@ -30,8 +30,11 @@ export function Backdrop(props: BackdropProps) {
   };
 
   const handleClick = () => {
-    if (setClosing && onClick) {
+    if (setClosing) {
       setClosing(false);
+    }
+
+    if (onClick) {
       onClick();
     }
   };

diff --git a/polaris-react/src/components/Backdrop/tests/Backdrop.test.tsx b/polaris-react/src/components/Backdrop/tests/Backdrop.test.tsx
@@ -7,9 +7,16 @@ describe('<Backdrop />', () => {
   describe('onClick()', () => {
     it('is called when the backdrop is clicked', () => {
       const spy = jest.fn();
-      const backdrop = mountWithApp(
-        <Backdrop onClick={spy} setClosing={() => {}} />,
-      );
+      const backdrop = mountWithApp(<Backdrop onClick={spy} />);
+      backdrop.find('div')!.trigger('onClick');
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('setClosing()', () => {
+    it('is called when the backdrop is clicked', () => {
+      const spy = jest.fn();
+      const backdrop = mountWithApp(<Backdrop setClosing={spy} />);
       backdrop.find('div')!.trigger('onClick');
       expect(spy).toHaveBeenCalled();
     });

diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
@@ -265,6 +265,7 @@
   font-size: var(--p-font-size-100);
   font-weight: var(--p-font-weight-medium);
   line-height: var(--p-font-line-height-1);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   text-transform: initial;
   letter-spacing: initial;
   color: var(--p-text);

diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
@@ -54,6 +54,7 @@
   font-size: var(--p-font-size-100);
   font-weight: var(--p-font-weight-medium);
   line-height: var(--p-font-line-height-1);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   text-transform: initial;
   letter-spacing: initial;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -463,6 +464,7 @@
     font-size: var(--p-font-size-200);
     font-weight: var(--p-font-weight-medium);
     line-height: var(--p-font-line-height-2);
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     text-transform: initial;
     letter-spacing: initial;
   }

diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.scss b/polaris-react/src/components/CheckableButton/CheckableButton.scss
@@ -8,6 +8,7 @@
   font-size: var(--p-font-size-75);
   font-weight: var(--p-font-weight-medium);
   line-height: var(--p-font-line-height-1);
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   text-transform: initial;
   letter-spacing: initial;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
@@ -7,8 +7,9 @@ import {
   DropZone,
   List,
   Page,
-  Stack,
+  AlphaStack,
   Thumbnail,
+  Inline,
 } from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 
@@ -30,9 +31,9 @@ export function Default() {
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
     <div style={{padding: '0'}}>
-      <Stack vertical>
+      <AlphaStack>
         {files.map((file, index) => (
-          <Stack alignment="center" key={index}>
+          <Inline align="center" key={index}>
             <Thumbnail
               size="small"
               alt={file.name}
@@ -48,9 +49,9 @@ export function Default() {
                 {file.size} bytes
               </Text>
             </div>
-          </Stack>
+          </Inline>
         ))}
-      </Stack>
+      </AlphaStack>
     </div>
   );
 
@@ -85,9 +86,9 @@ export function WithImageFileUpload() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <Stack vertical>
+    <AlphaStack>
       {files.map((file, index) => (
-        <Stack alignment="center" key={index}>
+        <Inline align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -99,9 +100,9 @@ export function WithImageFileUpload() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   const errorMessage = hasError && (
@@ -120,13 +121,13 @@ export function WithImageFileUpload() {
   );
 
   return (
-    <Stack vertical>
+    <AlphaStack fullWidth>
       {errorMessage}
       <DropZone accept="image/*" type="image" onDrop={handleDrop}>
         {uploadedFiles}
         {fileUpload}
       </DropZone>
-    </Stack>
+    </AlphaStack>
   );
 }
 
@@ -143,7 +144,7 @@ export function WithSingleFileUpload() {
 
   const fileUpload = !file && <DropZone.FileUpload />;
   const uploadedFile = file && (
-    <Stack>
+    <Inline>
       <Thumbnail
         size="small"
         alt={file.name}
@@ -159,7 +160,7 @@ export function WithSingleFileUpload() {
           {file.size} bytes
         </Text>
       </div>
-    </Stack>
+    </Inline>
   );
 
   return (
@@ -182,9 +183,9 @@ export function WithDropOnPage() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <Stack vertical>
+    <AlphaStack>
       {files.map((file, index) => (
-        <Stack alignment="center" key={index}>
+        <Inline align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -200,9 +201,9 @@ export function WithDropOnPage() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   const uploadMessage = !uploadedFiles && <DropZone.FileUpload />;
@@ -243,9 +244,9 @@ export function AcceptsOnlySVGFiles() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <Stack vertical>
+    <AlphaStack>
       {files.map((file, index) => (
-        <Stack alignment="center" key={index}>
+        <Inline align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -257,9 +258,9 @@ export function AcceptsOnlySVGFiles() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   const errorMessage = hasError && (
@@ -278,7 +279,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   return (
-    <Stack vertical>
+    <AlphaStack fullWidth>
       {errorMessage}
       <DropZone
         accept="image/svg+xml"
@@ -288,7 +289,7 @@ export function AcceptsOnlySVGFiles() {
       >
         {uploadedFiles}
       </DropZone>
-    </Stack>
+    </AlphaStack>
   );
 }
 
@@ -305,9 +306,9 @@ export function Nested() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <Stack vertical>
+    <AlphaStack>
       {files.map((file, index) => (
-        <Stack alignment="center" key={index}>
+        <Inline align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -323,9 +324,9 @@ export function Nested() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   return (
@@ -376,9 +377,9 @@ export function WithCustomFileUploadText() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <Stack vertical>
+    <AlphaStack>
       {files.map((file, index) => (
-        <Stack alignment="center" key={index}>
+        <Inline align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -394,9 +395,9 @@ export function WithCustomFileUploadText() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   return (
@@ -424,9 +425,9 @@ export function WithCustomFileDialogTrigger() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <Stack vertical>
+    <AlphaStack>
       {files.map((file, index) => (
-        <Stack alignment="center" key={index}>
+        <Inline align="center" key={index}>
           <Thumbnail
             size="small"
             alt={file.name}
@@ -442,9 +443,9 @@ export function WithCustomFileDialogTrigger() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   return (