[Layout foundations][Batch 3] Rebuild components with layout primitives

.changeset/beige-falcons-guess.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Remove unused class in Page Header

.changeset/fresh-boats-fly.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Tabs` component to use layout primitives

.changeset/lazy-crews-sing.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Rebuilt Page Header with layout components

.changeset/slimy-years-tie.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `OptionList` to use new layout primitives

.changeset/thin-apricots-admire.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Popover` to use new layout primitives

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}
@@ -49,9 +50,9 @@ export function Default() {
                 {file.size} bytes
               </Text>
             </div>
-          </Stack>
+          </Inline>
         ))}
-      </Stack>
+      </AlphaStack>
     </div>
   );
 
@@ -86,9 +87,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}
@@ -101,9 +102,9 @@ export function WithImageFileUpload() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   const errorMessage = hasError && (
@@ -122,13 +123,13 @@ export function WithImageFileUpload() {
   );
 
   return (
-    <Stack vertical>
+    <AlphaStack fullWidth>
       {errorMessage}
       <DropZone accept="image/*" type="image" onDrop={handleDrop}>
         {uploadedFiles}
         {fileUpload}
       </DropZone>
-    </Stack>
+    </AlphaStack>
   );
 }
 
@@ -145,7 +146,7 @@ export function WithSingleFileUpload() {
 
   const fileUpload = !file && <DropZone.FileUpload />;
   const uploadedFile = file && (
-    <Stack>
+    <Inline>
       <Thumbnail
         size="small"
         alt={file.name}
@@ -162,7 +163,7 @@ export function WithSingleFileUpload() {
           {file.size} bytes
         </Text>
       </div>
-    </Stack>
+    </Inline>
   );
 
   return (
@@ -185,9 +186,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}
@@ -204,9 +205,9 @@ export function WithDropOnPage() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   const uploadMessage = !uploadedFiles && <DropZone.FileUpload />;
@@ -247,9 +248,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}
@@ -262,9 +263,9 @@ export function AcceptsOnlySVGFiles() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   const errorMessage = hasError && (
@@ -283,7 +284,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   return (
-    <Stack vertical>
+    <AlphaStack fullWidth>
       {errorMessage}
       <DropZone
         accept="image/svg+xml"
@@ -293,7 +294,7 @@ export function AcceptsOnlySVGFiles() {
       >
         {uploadedFiles}
       </DropZone>
-    </Stack>
+    </AlphaStack>
   );
 }
 
@@ -310,9 +311,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}
@@ -329,9 +330,9 @@ export function Nested() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   return (
@@ -382,9 +383,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}
@@ -401,9 +402,9 @@ export function WithCustomFileUploadText() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   return (
@@ -431,9 +432,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}
@@ -450,9 +451,9 @@ export function WithCustomFileDialogTrigger() {
               {file.size} bytes
             </Text>
           </div>
-        </Stack>
+        </Inline>
       ))}
-    </Stack>
+    </AlphaStack>
   );
 
   return (

polaris-react/src/components/DropZone/DropZone.tsx

@@ -14,14 +14,14 @@ import {debounce} from '../../utilities/debounce';
 import {classNames, variationName} from '../../utilities/css';
 import {capitalize} from '../../utilities/capitalize';
 import {Icon} from '../Icon';
-import {Stack} from '../Stack';
 import {Text} from '../Text';
 import {Labelled, LabelledProps} from '../Labelled';
 import {useI18n} from '../../utilities/i18n';
 import {isServer} from '../../utilities/target';
 import {useUniqueId} from '../../utilities/unique-id';
 import {useComponentDidMount} from '../../utilities/use-component-did-mount';
 import {useToggle} from '../../utilities/use-toggle';
+import {AlphaStack} from '../AlphaStack';
 
 import {FileUpload} from './components';
 import {DropZoneContext} from './context';
@@ -419,14 +419,14 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
   ) {
     return (
       <div className={styles.Overlay}>
-        <Stack vertical spacing="tight">
+        <AlphaStack gap="2" align="center">
           {size === 'small' && <Icon source={icon} color={color} />}
           {(size === 'medium' || size === 'large') && (
             <Text variant="bodySm" as="p" fontWeight="bold">
               {text}
             </Text>
           )}
-        </Stack>
+        </AlphaStack>
       </div>
     );
   }

polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx

@@ -2,12 +2,12 @@ import React, {useContext} from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {capitalize} from '../../../../utilities/capitalize';
-import {Stack} from '../../../Stack';
 import {Text} from '../../../Text';
 import {uploadArrow} from '../../images';
 import {DropZoneContext} from '../../context';
 import {useI18n} from '../../../../utilities/i18n';
 import {createAllowMultipleKey} from '../../utils';
+import {AlphaStack} from '../../../AlphaStack';
 
 import styles from './FileUpload.scss';
 
@@ -55,18 +55,18 @@ export function FileUpload(props: FileUploadProps) {
   switch (size) {
     case 'large':
       viewMarkup = (
-        <Stack vertical spacing="tight">
+        <AlphaStack align="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </Stack>
+        </AlphaStack>
       );
       break;
     case 'medium':
       viewMarkup = (
-        <Stack vertical spacing="tight">
+        <AlphaStack align="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </Stack>
+        </AlphaStack>
       );
       break;
     case 'small':