[Layout] AlphaStack remove fullwidth prop (#8582)

### WHY are these changes introduced?
#8530 removed default alignment
so that the default is now `stretch` which renders all children full
width.

This makes the existing `fullWidth` prop unnecessary.`fullWidth`
collides with/override `align="start | center | end"` because of
specificity and so they can't be used together. It is also causing
confusion (#8579), so I think
we should remove it.

### WHAT is this pull request doing?

- Removes the `fullWidth` prop from `AlphaStack`
- Sets default `--pc-stack-align: initial;` so that nested Stacks don't
inherit align from parent.

To do:
- [x] Remove `fullWidth` in style guide

---------

Co-authored-by: Lo Kim <[email protected]>

Author: aveline

.changeset/nervous-avocados-compete.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed `fullWidth` prop from `AlphaStack`

polaris-react/src/components/AlphaStack/AlphaStack.scss

@@ -2,6 +2,7 @@
 
 .AlphaStack {
   // stylelint-disable -- Polaris component custom properties
+  --pc-stack-align: initial;
   --pc-stack-gap-xs: 0;
   --pc-stack-gap-sm: var(--pc-stack-gap-xs);
   --pc-stack-gap-md: var(--pc-stack-gap-sm);
@@ -51,10 +52,3 @@
   margin: 0;
   padding: 0;
 }
-
-.fullWidth {
-  > * {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    width: 100%;
-  }
-}

polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx

@@ -101,19 +101,3 @@ export function WithAlignEnd() {
     </AlphaStack>
   );
 }
-
-export function WithFullWidthChildren() {
-  return (
-    <AlphaStack gap="4" fullWidth>
-      <Box background="surface" padding="1">
-        01
-      </Box>
-      <Box background="surface" padding="1">
-        02
-      </Box>
-      <Box background="surface" padding="1">
-        03
-      </Box>
-    </AlphaStack>
-  );
-}

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

@@ -24,10 +24,6 @@ export interface AlphaStackProps extends React.AriaAttributes {
   as?: Element;
   /** Horizontal alignment of children */
   align?: Align;
-  /** Toggle children to be full width
-   * @default false
-   */
-  fullWidth?: boolean;
   /** The spacing between children */
   gap?: Gap;
   /** HTML id attribute */
@@ -42,15 +38,13 @@ export const AlphaStack = ({
   as = 'div',
   children,
   align,
-  fullWidth = false,
   gap,
   id,
   reverseOrder = false,
   ...restProps
 }: AlphaStackProps) => {
   const className = classNames(
     styles.AlphaStack,
-    fullWidth && styles.fullWidth,
     as === 'ul' && styles.listReset,
     as === 'fieldset' && styles.fieldsetReset,
   );

polaris-react/src/components/Banner/Banner.stories.tsx

@@ -193,7 +193,7 @@ export function InACard() {
 export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
-      <AlphaStack gap="1" fullWidth>
+      <AlphaStack gap="1">
         <Inline gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
             Deployment failed in 5min

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

@@ -135,12 +135,11 @@ export function ChoiceList({
     <AlphaStack
       as="fieldset"
       gap={{xs: '4', md: '0'}}
-      fullWidth
       aria-invalid={error != null}
       id={finalName}
     >
       {titleMarkup}
-      <AlphaStack as="ul" gap={{xs: '4', md: '0'}} fullWidth>
+      <AlphaStack as="ul" gap={{xs: '4', md: '0'}}>
         {choicesMarkup}
       </AlphaStack>
       {errorMarkup}

polaris-react/src/components/Divider/Divider.stories.tsx

@@ -12,7 +12,7 @@ export function Default() {
 
 export function WithBorderStyles() {
   return (
-    <AlphaStack gap="5" fullWidth>
+    <AlphaStack gap="5">
       <Text as="h1" variant="headingXs">
         Base
       </Text>

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

@@ -123,7 +123,7 @@ export function WithImageFileUpload() {
   );
 
   return (
-    <AlphaStack gap="4" fullWidth>
+    <AlphaStack gap="4">
       {errorMessage}
       <DropZone accept="image/*" type="image" onDrop={handleDrop}>
         {uploadedFiles}
@@ -284,7 +284,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   return (
-    <AlphaStack gap="4" fullWidth>
+    <AlphaStack gap="4">
       {errorMessage}
       <DropZone
         accept="image/svg+xml"

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

@@ -63,8 +63,9 @@ export function SkeletonPage({
   ) : null;
 
   return (
-    <AlphaStack gap="4" align="center" fullWidth>
+    <AlphaStack gap="4" align="center">
       <Box
+        width="100%"
         padding="0"
         paddingInlineStart={{sm: '6'}}
         paddingInlineEnd={{sm: '6'}}
@@ -78,12 +79,13 @@ export function SkeletonPage({
           maxWidth: 'none',
         })}
       >
-        <AlphaStack fullWidth>
+        <AlphaStack>
           <Box
             paddingBlockStart={{xs: '4', md: '5'}}
             paddingBlockEnd={{xs: '4', md: '5'}}
             paddingInlineStart={{xs: '4', sm: '0'}}
             paddingInlineEnd={{xs: '4', sm: '0'}}
+            width="100%"
           >
             {breadcrumbMarkup}
             <Inline gap="4" align="space-between" blockAlign="center">
@@ -93,7 +95,9 @@ export function SkeletonPage({
               {primaryActionMarkup}
             </Inline>
           </Box>
-          <Box paddingBlockEnd="2">{children}</Box>
+          <Box paddingBlockEnd="2" width="100%">
+            {children}
+          </Box>
         </AlphaStack>
       </Box>
     </AlphaStack>

polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md

@@ -62,7 +62,7 @@ This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stac
         </AlphaStack>
       </Box>
       <AlphaCard roundedAbove="sm">
-        <AlphaStack gap="4" fullWidth>
+        <AlphaStack gap="4">
           <TextField label="Interjamb style" />
           <TextField label="Interjamb ratio" />
         </AlphaStack>
@@ -84,7 +84,7 @@ This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stac
         </AlphaStack>
       </Box>
       <AlphaCard roundedAbove="sm">
-        <AlphaStack gap="4" fullWidth>
+        <AlphaStack gap="4">
           <TextField label="Horizontal" />
           <TextField label="Interjamb ratio" />
         </AlphaStack>