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

.changeset/fluffy-hotels-explain.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated `SkeletonPage` title and body layout

.changeset/grumpy-students-pull.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Refactored `SkeletonPage` title layout

.changeset/neat-dolphins-sniff.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `ResourceList` header alignment

.changeset/nine-worms-sip.md

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

.changeset/serious-tomatoes-dress.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+Rebuilt `ActionList` to use layout primitives

.changeset/silver-emus-unite.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed IndexTable checkbox alignment

.changeset/strong-bottles-swim.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': minor
+---
+
+Refactored `SkeletonPage` to use primitive Layout components
+Removed `max-width` on children in `AlphaStack`
+Added `narrowWidth` and `fullWidth` examples to `AlphaStack` stories

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

@@ -1,44 +1,5 @@
 @import '../../styles/common';
 
-.ActionList {
-  outline: none;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.Section:not(:first-child) {
-  border-top: var(--p-border-divider);
-
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
-  > .Section-withoutTitle .Actions {
-    padding-top: var(--p-space-2);
-  }
-}
-
-.Actions {
-  outline: none;
-  list-style: none;
-  margin: 0;
-  padding: var(--p-space-2);
-}
-
-.ActionList,
-.Section:first-child {
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
-  > .Section-withoutTitle .Actions {
-    border-top: none;
-    padding-top: var(--p-space-2);
-  }
-}
-
-.ActionList .Section {
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
-  .Actions {
-    padding-top: 0;
-  }
-}
-
 .Item {
   // stylelint-disable -- Polaris component custom properties
   --pc-action-list-image-size: 20px;
@@ -131,13 +92,6 @@
   }
 }
 
-.Content {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  display: flex;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: center;
-}
-
 .Prefix {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include recolor-icon(var(--p-icon));
@@ -168,13 +122,6 @@
 .Suffix {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include recolor-icon(var(--p-icon));
-  margin-left: var(--p-space-4);
-}
-
-.ContentBlock,
-.ContentBlockInner {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  display: block;
 }
 
 .Text {

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

@@ -6,11 +6,10 @@ import {
 } from '../../utilities/focus';
 import {KeypressListener} from '../KeypressListener';
 import {ActionListItemDescriptor, ActionListSection, Key} from '../../types';
-import {classNames} from '../../utilities/css';
+import {Box} from '../Box';
 
 import {Section, Item} from './components';
 import type {ItemProps} from './components';
-import styles from './ActionList.scss';
 
 export interface ActionListProps {
   /** Collection of actions for list */
@@ -40,10 +39,7 @@ export function ActionList({
     finalSections = sections;
   }
 
-  const className = classNames(styles.ActionList);
-
   const hasMultipleSections = finalSections.length > 1;
-  const Element = hasMultipleSections ? 'ul' : 'div';
   const elementRole =
     hasMultipleSections && actionRole === 'menuitem' ? 'menu' : undefined;
   const elementTabIndex =
@@ -57,6 +53,7 @@ export function ActionList({
         hasMultipleSections={hasMultipleSections}
         actionRole={actionRole}
         onActionAnyItem={onActionAnyItem}
+        isFirst={index === 0}
       />
     ) : null;
   });
@@ -102,15 +99,15 @@ export function ActionList({
     ) : null;
 
   return (
-    <Element
+    <Box
+      as={hasMultipleSections ? 'ul' : 'div'}
       ref={actionListRef}
-      className={className}
       role={elementRole}
       tabIndex={elementTabIndex}
     >
       {listeners}
       {sectionMarkup}
-    </Element>
+    </Box>
   );
 }
 

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -9,6 +9,8 @@ import {Badge} from '../../../Badge';
 import {Text} from '../../../Text';
 import styles from '../../ActionList.scss';
 import {handleMouseUpByBlurring} from '../../../../utilities/focus';
+import {Inline} from '../../../Inline';
+import {Box} from '../../../Box';
 
 export type ItemProps = ActionListItemDescriptor;
 
@@ -61,12 +63,12 @@ export function Item({
   const contentText = ellipsis && content ? `${content}…` : content;
 
   const contentMarkup = helpText ? (
-    <span className={styles.ContentBlock}>
-      <span className={styles.ContentBlockInner}>{contentText}</span>
+    <>
+      <Box>{contentText}</Box>
       <Text variant="bodyMd" color="subdued" as="span">
         {helpText}
       </Text>
-    </span>
+    </>
   ) : (
     contentText
   );
@@ -78,18 +80,20 @@ export function Item({
   );
 
   const suffixMarkup = suffix && (
-    <span className={styles.Suffix}>{suffix}</span>
+    <Box paddingInlineStart="4">
+      <span className={styles.Suffix}>{suffix}</span>
+    </Box>
   );
 
   const textMarkup = <span className={styles.Text}>{contentMarkup}</span>;
 
   const contentElement = (
-    <span className={styles.Content}>
+    <Inline blockAlign="center" gap="0">
       {prefixMarkup}
       {textMarkup}
       {badgeMarkup}
       {suffixMarkup}
-    </span>
+    </Inline>
   );
 
   const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;

polaris-react/src/components/ActionList/components/Section/Section.tsx

@@ -7,7 +7,6 @@ import type {
   ActionListItemDescriptor,
   ActionListSection,
 } from '../../../../types';
-import styles from '../../ActionList.scss';
 
 export interface SectionProps {
   /** Section of action items */
@@ -18,11 +17,14 @@ export interface SectionProps {
   actionRole?: 'option' | 'menuitem' | string;
   /** Callback when any item is clicked or keypressed */
   onActionAnyItem?: ActionListItemDescriptor['onAction'];
+  /** Whether it is the first in a group of sections */
+  isFirst?: boolean;
 }
 
 export function Section({
   section,
   hasMultipleSections,
+  isFirst,
   actionRole,
   onActionAnyItem,
 }: SectionProps) {
@@ -55,8 +57,6 @@ export function Section({
     },
   );
 
-  const className = section.title ? undefined : styles['Section-withoutTitle'];
-
   const titleMarkup = section.title ? (
     <Box
       paddingBlockStart="4"
@@ -70,7 +70,7 @@ export function Section({
     </Box>
   ) : null;
 
-  let sectionRole;
+  let sectionRole: 'menu' | 'presentation' | undefined;
   switch (actionRole) {
     case 'option':
       sectionRole = 'presentation';
@@ -84,22 +84,29 @@ export function Section({
   }
 
   const sectionMarkup = (
-    <div className={className}>
+    <>
       {titleMarkup}
-      <ul
-        className={styles.Actions}
-        role={sectionRole}
+      <Box
+        as="ul"
+        padding="2"
+        {...(hasMultipleSections && {paddingBlockStart: '0'})}
+        {...(sectionRole && {role: sectionRole})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
         {actionMarkup}
-      </ul>
-    </div>
+      </Box>
+    </>
   );
 
   return hasMultipleSections ? (
-    <li className={styles.Section} role="presentation">
+    <Box
+      as="li"
+      role="presentation"
+      {...(!isFirst && {borderBlockStart: 'divider'})}
+      {...(!section.title && {paddingBlockStart: '2'})}
+    >
       {sectionMarkup}
-    </li>
+    </Box>
   ) : (
     sectionMarkup
   );

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

@@ -79,6 +79,20 @@ $bulk-actions-button-stacking-order: (
   max-width: 100%;
   pointer-events: auto;
 
+  @media #{$p-breakpoints-sm-down} {
+    // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space
+    > div > div:first-child {
+      flex: 1 1 auto;
+    }
+  }
+
+  @media #{$p-breakpoints-sm-up} {
+    width: auto;
+    justify-content: flex-start;
+    margin-right: var(--p-space-2);
+    margin-left: calc(-1 * var(--p-space-05));
+  }
+
   .Group-measuring & {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     position: absolute;

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

@@ -1,10 +1,6 @@
 @import '../../styles/common';
 @import '../ResourceList/variables';
 
-$button-vertical-padding: calc(
-  (36px - var(--p-font-line-height-2) - var(--p-space-05)) / 2
-);
-
 .CheckableButton {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include recolor-icon(var(--p-icon-on-interactive));
@@ -21,8 +17,6 @@ $button-vertical-padding: calc(
   min-height: 36px;
   min-width: 36px;
   margin: 0;
-  padding: $button-vertical-padding var(--p-space-1) $button-vertical-padding
-    var(--p-space-4);
   cursor: pointer;
   user-select: none;
   text-decoration: none;
@@ -47,10 +41,6 @@ $button-vertical-padding: calc(
   height: var(--p-choice-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--p-choice-size);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin-left: calc(
-    -1 * var(--p-space-2) - var(--p-control-border-width) - var(--p-border-width-1)
-  );
 }
 
 .Label {