From 4ba19fe9398b9a2cfbb36552f085d83484735e3b Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Mon, 21 Nov 2022 22:48:20 -0500
Subject: [PATCH 01/13] [ResourceItem] Use layout components

---
 .../components/BulkActions/BulkActions.scss   |   3 +
 .../components/ResourceItem/ResourceItem.scss | 108 +++----------
 .../components/ResourceItem/ResourceItem.tsx  | 143 ++++++++++++------
 .../components/ResourceList/ResourceList.scss |   2 +
 4 files changed, 116 insertions(+), 140 deletions(-)

diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
index c0ee4ef6f1e..43895b3e6e1 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.scss
+++ b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -75,6 +75,7 @@ $bulk-actions-button-stacking-order: (
     width: auto;
     justify-content: flex-start;
     margin-right: var(--p-space-2);
+    margin-left: calc(-1 * var(--p-space-05));
   }
 
   .Group-measuring & {
@@ -89,6 +90,8 @@ $bulk-actions-button-stacking-order: (
 
 .CheckableContainer {
   flex: 1 1 0;
+  // margin-left: -6px;
+  margin-left: calc(-1 * (var(--p-space-05) + var(--p-space-1)));
 }
 
 .disabled {
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 66b84fe3fe5..449869e7a3e 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -1,19 +1,13 @@
 @import '../../styles/common';
 
 @mixin action-hide {
-  clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(0, 0, 0, 0);
   overflow: hidden;
-  height: 1px;
 }
 
 @mixin action-unhide {
   clip: auto;
   overflow: visible;
-  height: 100%;
-}
-
-.CheckboxWrapper {
-  display: flex;
 }
 
 .ResourceItem {
@@ -39,7 +33,10 @@
     &:not(.persistActions) {
       // stylelint-disable-next-line selector-max-specificity
       .Actions {
-        @include action-unhide;
+        // stylelint-disable-next-line selector-max-specificity, selector-max-combinators, max-nesting-depth
+        > * {
+          @include action-unhide;
+        }
 
         // stylelint-disable-next-line max-nesting-depth
         @media #{$p-breakpoints-lg-down} {
@@ -82,67 +79,6 @@
   border: none;
 }
 
-// Item inner container
-.Container {
-  position: relative;
-  z-index: var(--pc-resource-item-content-stacking-order);
-  padding: var(--p-space-3) var(--p-space-4);
-  min-height: var(--pc-resource-item-min-height);
-  display: flex;
-  align-items: flex-start;
-
-  @media #{$p-breakpoints-sm-up} {
-    padding: var(--p-space-3) var(--p-space-5);
-  }
-}
-
-.alignmentLeading {
-  align-items: flex-start;
-}
-
-.alignmentTrailing {
-  align-items: flex-end;
-}
-
-.alignmentCenter {
-  align-items: center;
-}
-
-.alignmentFill {
-  align-items: stretch;
-}
-
-.alignmentBaseline {
-  align-items: baseline;
-}
-
-.Owned {
-  display: flex;
-}
-
-.OwnedNoMedia {
-  padding-top: var(--p-space-1);
-}
-
-// Item handle
-.Handle {
-  width: 48px;
-  min-height: var(--pc-resource-item-min-height);
-  justify-content: center;
-  align-items: center;
-  margin: calc(-1 * var(--p-space-3)) var(--p-space-1)
-    calc(-1 * var(--p-space-3)) calc(-1 * var(--p-space-3));
-  display: flex;
-
-  @media #{$p-breakpoints-sm-down} {
-    visibility: hidden;
-
-    .selectMode & {
-      visibility: visible;
-    }
-  }
-}
-
 .selectable {
   width: calc(100% + var(--pc-resource-item-offset));
   transform: translateX(calc(-1 * var(--pc-resource-item-offset)));
@@ -160,32 +96,24 @@
   }
 }
 
-.Media {
-  flex: 0 0 auto;
-  margin-right: var(--p-space-5);
-  color: inherit;
-  text-decoration: none;
-}
-
-// Item content
-.Content {
-  @include layout-flex-fix;
-  flex: 1 1 auto;
-}
-
 // Item actions
 .Actions {
-  position: absolute;
-  top: 0;
-  display: flex;
-  pointer-events: initial;
-  height: 100%;
-  max-height: 56px;
+  // position: absolute;
+  // top: var(--p-space-4);
+  // right: var(--space-4);
+  // pointer-events: initial;
+  // height: 100%;
+  // max-height: 56px;
 
-  @include action-hide;
+  > * {
+    @include action-hide;
+  }
 
   .focused & {
-    @include action-unhide;
+    // stylelint-disable-next-line selector-max-combinators
+    > * {
+      @include action-unhide;
+    }
   }
 
   @media #{$p-breakpoints-lg-down} {
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index c06f4da4432..310f3cf4cb8 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -2,23 +2,31 @@ import React, {Component, createRef, useContext} from 'react';
 import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 import isEqual from 'react-fast-compare';
 
-import {classNames, variationName} from '../../utilities/css';
-import {useI18n} from '../../utilities/i18n';
-import type {DisableableAction} from '../../types';
 import {ActionList} from '../ActionList';
+import {Box} from '../Box';
+import {Button, buttonsFrom} from '../Button';
+import {ButtonGroup} from '../ButtonGroup';
+import {Checkbox} from '../Checkbox';
+import {Inline, InlineProps} from '../Inline';
 import {Popover} from '../Popover';
-import type {AvatarProps} from '../Avatar';
 import {UnstyledLink} from '../UnstyledLink';
+import type {AvatarProps} from '../Avatar';
 import type {ThumbnailProps} from '../Thumbnail';
-import {ButtonGroup} from '../ButtonGroup';
-import {Checkbox} from '../Checkbox';
-import {Button, buttonsFrom} from '../Button';
+import type {DisableableAction} from '../../types';
+import {classNames} from '../../utilities/css';
+import {globalIdGeneratorFactory} from '../../utilities/unique-id';
+import {
+  useBreakpoints,
+  BreakpointsDirectionAlias,
+} from '../../utilities/breakpoints';
+import {useI18n} from '../../utilities/i18n';
 import {
   ResourceListContext,
   SELECT_ALL_ITEMS,
   ResourceListSelectedItems,
 } from '../../utilities/resource-list';
-import {globalIdGeneratorFactory} from '../../utilities/unique-id';
+import {Columns} from '../Columns';
+import {Bleed} from '../Bleed';
 
 import styles from './ResourceItem.scss';
 
@@ -68,8 +76,12 @@ interface PropsWithClick extends BaseProps {
 }
 
 export type ResourceItemProps = PropsWithUrl | PropsWithClick;
+type BreakpointsMatches = {
+  [DirectionAlias in BreakpointsDirectionAlias]: boolean;
+};
 
 interface PropsFromWrapper {
+  breakpoints?: BreakpointsMatches;
   context: React.ContextType<typeof ResourceListContext>;
   i18n: ReturnType<typeof useI18n>;
 }
@@ -151,6 +163,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       i18n,
       verticalAlignment,
       dataHref,
+      breakpoints,
     } = this.props;
 
     const {actionsMenuVisible, focused, focusedInner, selected} = this.state;
@@ -158,42 +171,48 @@ class BaseResourceItem extends Component<CombinedProps, State> {
     let ownedMarkup: React.ReactNode = null;
     let handleMarkup: React.ReactNode = null;
 
-    const mediaMarkup = media ? (
-      <div className={styles.Media}>{media}</div>
-    ) : null;
+    const mediaMarkup = media ? <Box>{media}</Box> : null;
 
     if (selectable) {
       const checkboxAccessibilityLabel =
         name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
 
       handleMarkup = (
-        <div className={styles.Handle} onClick={this.handleLargerSelectionArea}>
-          <div onClick={stopPropagation} className={styles.CheckboxWrapper}>
-            <div onChange={this.handleLargerSelectionArea}>
-              <Checkbox
-                id={this.checkboxId}
-                label={checkboxAccessibilityLabel}
-                labelHidden
-                checked={selected}
-                disabled={loading}
-              />
-            </div>
-          </div>
+        <div onClick={this.handleLargerSelectionArea}>
+          <Bleed horizontal="2">
+            <Box
+              paddingInlineStart="2"
+              paddingInlineEnd="2"
+              minHeight="var(--pc-resource-item-min-height)"
+            >
+              <Inline align="center" blockAlign="center" gap="0">
+                <div onClick={stopPropagation}>
+                  <div onChange={this.handleLargerSelectionArea}>
+                    <Checkbox
+                      id={this.checkboxId}
+                      label={checkboxAccessibilityLabel}
+                      labelHidden
+                      checked={selected}
+                      disabled={loading}
+                    />
+                  </div>
+                </div>
+              </Inline>
+            </Box>
+          </Bleed>
         </div>
       );
     }
 
     if (media || selectable) {
       ownedMarkup = (
-        <div
-          className={classNames(
-            styles.Owned,
-            !mediaMarkup && styles.OwnedNoMedia,
-          )}
+        <Box
+          paddingBlockStart={!mediaMarkup ? '1' : undefined}
+          zIndex="var(--pc-resource-item-content-stacking-order)"
         >
           {handleMarkup}
           {mediaMarkup}
-        </div>
+        </Box>
       );
     }
 
@@ -254,33 +273,38 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       } else {
         actionsMarkup = (
           <div className={styles.Actions} onClick={stopPropagation}>
-            <ButtonGroup segmented>
-              {buttonsFrom(shortcutActions, {
-                size: 'slim',
-              })}
-            </ButtonGroup>
+            <Box position="absolute" top="4" right="4">
+              <ButtonGroup segmented>
+                {buttonsFrom(shortcutActions, {size: 'slim'})}
+              </ButtonGroup>
+            </Box>
           </div>
         );
       }
     }
 
-    const content = children ? (
-      <div className={styles.Content}>{children}</div>
-    ) : null;
-
-    const containerClassName = classNames(
-      styles.Container,
-      verticalAlignment &&
-        styles[variationName('alignment', verticalAlignment)],
-    );
-
     const containerMarkup = (
-      <div className={containerClassName} id={this.props.id}>
-        {ownedMarkup}
-        {content}
-        {actionsMarkup}
-        {disclosureMarkup}
-      </div>
+      <Box
+        id={this.props.id}
+        position="relative"
+        padding="3"
+        paddingInlineStart={{xs: '4', sm: '5'}}
+        paddingInlineEnd={{xs: '4', sm: '5'}}
+        zIndex="var(--pc-resource-item-content-stacking-order)"
+      >
+        <Columns columns={{xs: '1fr auto auto auto'}} gap="0">
+          <Inline
+            blockAlign={getAlignment(verticalAlignment)}
+            gap="5"
+            wrap={false}
+          >
+            {ownedMarkup}
+            <div>{children}</div>
+          </Inline>
+          {actionsMarkup}
+          {disclosureMarkup}
+        </Columns>
+      </Box>
     );
 
     const tabIndex = loading ? -1 : 0;
@@ -459,11 +483,30 @@ function isSelected(id: string, selectedItems?: ResourceListSelectedItems) {
 }
 
 export function ResourceItem(props: ResourceItemProps) {
+  const breakpoints = useBreakpoints();
   return (
     <BaseResourceItem
       {...props}
+      breakpoints={breakpoints}
       context={useContext(ResourceListContext)}
       i18n={useI18n()}
     />
   );
 }
+
+function getAlignment(alignment?: Alignment): InlineProps['blockAlign'] {
+  switch (alignment) {
+    case 'leading':
+      return 'start';
+    case 'trailing':
+      return 'end';
+    case 'center':
+      return 'center';
+    case 'fill':
+      return 'stretch';
+    case 'baseline':
+      return 'baseline';
+    default:
+      return 'start';
+  }
+}
diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index e0d7039f080..0b0026a18a3 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.scss
+++ b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -167,6 +167,8 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)})
 
 .CheckableButtonWrapper {
   display: none;
+  // margin-left: -2px;
+  margin-left: calc(-1 * var(--p-space-05));
 
   @media #{$p-breakpoints-sm-up} {
     flex: 1;

From 0daf9e89371498f728b1eb8cc5102bc4426b3276 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 22 Nov 2022 11:08:41 -0500
Subject: [PATCH 02/13] rebase, remove breakpoints

---
 .../src/components/BulkActions/BulkActions.scss   |  1 -
 .../src/components/ResourceItem/ResourceItem.scss |  7 -------
 .../src/components/ResourceItem/ResourceItem.tsx  | 15 ++-------------
 .../src/components/ResourceList/ResourceList.scss |  1 -
 4 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
index 43895b3e6e1..637288c0b90 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.scss
+++ b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -90,7 +90,6 @@ $bulk-actions-button-stacking-order: (
 
 .CheckableContainer {
   flex: 1 1 0;
-  // margin-left: -6px;
   margin-left: calc(-1 * (var(--p-space-05) + var(--p-space-1)));
 }
 
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 449869e7a3e..5692f9fc0c4 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -98,13 +98,6 @@
 
 // Item actions
 .Actions {
-  // position: absolute;
-  // top: var(--p-space-4);
-  // right: var(--space-4);
-  // pointer-events: initial;
-  // height: 100%;
-  // max-height: 56px;
-
   > * {
     @include action-hide;
   }
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index 310f3cf4cb8..0dc56507720 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -15,10 +15,6 @@ import type {ThumbnailProps} from '../Thumbnail';
 import type {DisableableAction} from '../../types';
 import {classNames} from '../../utilities/css';
 import {globalIdGeneratorFactory} from '../../utilities/unique-id';
-import {
-  useBreakpoints,
-  BreakpointsDirectionAlias,
-} from '../../utilities/breakpoints';
 import {useI18n} from '../../utilities/i18n';
 import {
   ResourceListContext,
@@ -76,12 +72,8 @@ interface PropsWithClick extends BaseProps {
 }
 
 export type ResourceItemProps = PropsWithUrl | PropsWithClick;
-type BreakpointsMatches = {
-  [DirectionAlias in BreakpointsDirectionAlias]: boolean;
-};
 
 interface PropsFromWrapper {
-  breakpoints?: BreakpointsMatches;
   context: React.ContextType<typeof ResourceListContext>;
   i18n: ReturnType<typeof useI18n>;
 }
@@ -163,7 +155,6 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       i18n,
       verticalAlignment,
       dataHref,
-      breakpoints,
     } = this.props;
 
     const {actionsMenuVisible, focused, focusedInner, selected} = this.state;
@@ -179,7 +170,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
 
       handleMarkup = (
         <div onClick={this.handleLargerSelectionArea}>
-          <Bleed horizontal="2">
+          <Bleed marginInline="2">
             <Box
               paddingInlineStart="2"
               paddingInlineEnd="2"
@@ -273,7 +264,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       } else {
         actionsMarkup = (
           <div className={styles.Actions} onClick={stopPropagation}>
-            <Box position="absolute" top="4" right="4">
+            <Box position="absolute" insetBlockStart="4" insetInlineEnd="4">
               <ButtonGroup segmented>
                 {buttonsFrom(shortcutActions, {size: 'slim'})}
               </ButtonGroup>
@@ -483,11 +474,9 @@ function isSelected(id: string, selectedItems?: ResourceListSelectedItems) {
 }
 
 export function ResourceItem(props: ResourceItemProps) {
-  const breakpoints = useBreakpoints();
   return (
     <BaseResourceItem
       {...props}
-      breakpoints={breakpoints}
       context={useContext(ResourceListContext)}
       i18n={useI18n()}
     />
diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index 0b0026a18a3..080aa359d82 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.scss
+++ b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -167,7 +167,6 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)})
 
 .CheckableButtonWrapper {
   display: none;
-  // margin-left: -2px;
   margin-left: calc(-1 * var(--p-space-05));
 
   @media #{$p-breakpoints-sm-up} {

From 7763e7a5592b3c8d571daac14d368e09db2120c4 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 22 Nov 2022 16:17:47 -0500
Subject: [PATCH 03/13] Clean up

---
 .../components/ResourceItem/ResourceItem.scss | 67 +----------------
 .../components/ResourceItem/ResourceItem.tsx  | 74 +++++++++++--------
 2 files changed, 46 insertions(+), 95 deletions(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 5692f9fc0c4..10c3da48e46 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -17,31 +17,16 @@
   --pc-resource-item-offset: 40px;
   --pc-resource-item-clickable-stacking-order: 1;
   --pc-resource-item-content-stacking-order: 2;
-  position: relative;
   outline: none;
   cursor: pointer;
 
-  &:not(.persistActions) {
-    .Actions {
-      right: var(--p-space-4);
-    }
-  }
-
   &:hover {
     background-color: var(--p-surface-hovered);
 
-    &:not(.persistActions) {
-      // stylelint-disable-next-line selector-max-specificity
-      .Actions {
-        // stylelint-disable-next-line selector-max-specificity, selector-max-combinators, max-nesting-depth
-        > * {
-          @include action-unhide;
-        }
-
-        // stylelint-disable-next-line max-nesting-depth
-        @media #{$p-breakpoints-lg-down} {
-          display: none;
-        }
+    .Actions {
+      /* stylelint-disable-next-line selector-max-combinators */
+      > * {
+        @include action-unhide;
       }
     }
   }
@@ -108,49 +93,6 @@
       @include action-unhide;
     }
   }
-
-  @media #{$p-breakpoints-lg-down} {
-    display: none;
-  }
-}
-
-.persistActions {
-  .Actions {
-    position: relative;
-    display: flex;
-    flex: 0 0 auto;
-    flex-basis: auto;
-    align-items: center;
-    margin-top: 0;
-    margin-left: var(--p-space-4);
-    pointer-events: initial;
-    height: 100%;
-
-    @media #{$p-breakpoints-lg-down} {
-      display: none;
-    }
-  }
-}
-
-.Disclosure {
-  position: relative;
-  top: calc(-1 * var(--p-space-3));
-  right: calc(-1 * var(--p-space-4));
-  display: none;
-  width: var(--pc-resource-item-disclosure-width);
-  min-height: var(--pc-resource-item-min-height);
-  pointer-events: initial;
-
-  .selectMode & {
-    display: none;
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    display: flex;
-    flex: 0 0 var(--pc-resource-item-disclosure-width);
-    justify-content: center;
-    align-items: center;
-  }
 }
 
 .selected {
@@ -166,7 +108,6 @@
 }
 
 .ListItem {
-  position: relative;
   @include focus-ring($border-width: -1px);
 
   .ListItem + & {
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index 0dc56507720..f7d40bf1335 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -3,16 +3,22 @@ import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 import isEqual from 'react-fast-compare';
 
 import {ActionList} from '../ActionList';
+import {Bleed} from '../Bleed';
 import {Box} from '../Box';
 import {Button, buttonsFrom} from '../Button';
 import {ButtonGroup} from '../ButtonGroup';
 import {Checkbox} from '../Checkbox';
+import {Columns} from '../Columns';
 import {Inline, InlineProps} from '../Inline';
 import {Popover} from '../Popover';
 import {UnstyledLink} from '../UnstyledLink';
 import type {AvatarProps} from '../Avatar';
-import type {ThumbnailProps} from '../Thumbnail';
 import type {DisableableAction} from '../../types';
+import type {ThumbnailProps} from '../Thumbnail';
+import {
+  useBreakpoints,
+  BreakpointsDirectionAlias,
+} from '../../utilities/breakpoints';
 import {classNames} from '../../utilities/css';
 import {globalIdGeneratorFactory} from '../../utilities/unique-id';
 import {useI18n} from '../../utilities/i18n';
@@ -21,8 +27,6 @@ import {
   SELECT_ALL_ITEMS,
   ResourceListSelectedItems,
 } from '../../utilities/resource-list';
-import {Columns} from '../Columns';
-import {Bleed} from '../Bleed';
 
 import styles from './ResourceItem.scss';
 
@@ -72,8 +76,11 @@ interface PropsWithClick extends BaseProps {
 }
 
 export type ResourceItemProps = PropsWithUrl | PropsWithClick;
-
+type BreakpointsMatches = {
+  [DirectionAlias in BreakpointsDirectionAlias]: boolean;
+};
 interface PropsFromWrapper {
+  breakpoints?: BreakpointsMatches;
   context: React.ContextType<typeof ResourceListContext>;
   i18n: ReturnType<typeof useI18n>;
 }
@@ -155,6 +162,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       i18n,
       verticalAlignment,
       dataHref,
+      breakpoints,
     } = this.props;
 
     const {actionsMenuVisible, focused, focusedInner, selected} = this.state;
@@ -162,8 +170,6 @@ class BaseResourceItem extends Component<CombinedProps, State> {
     let ownedMarkup: React.ReactNode = null;
     let handleMarkup: React.ReactNode = null;
 
-    const mediaMarkup = media ? <Box>{media}</Box> : null;
-
     if (selectable) {
       const checkboxAccessibilityLabel =
         name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
@@ -198,11 +204,14 @@ class BaseResourceItem extends Component<CombinedProps, State> {
     if (media || selectable) {
       ownedMarkup = (
         <Box
-          paddingBlockStart={!mediaMarkup ? '1' : undefined}
+          padding="0"
+          paddingInlineStart="0"
+          paddingInlineEnd="0"
+          paddingBlockStart={!media ? '1' : undefined}
           zIndex="var(--pc-resource-item-content-stacking-order)"
         >
           {handleMarkup}
-          {mediaMarkup}
+          {media}
         </Box>
       );
     }
@@ -227,15 +236,13 @@ class BaseResourceItem extends Component<CombinedProps, State> {
 
     if (shortcutActions && !loading) {
       if (persistActions) {
-        actionsMarkup = (
+        actionsMarkup = breakpoints?.lgUp ? (
           <div className={styles.Actions} onClick={stopPropagation}>
             <ButtonGroup>
-              {buttonsFrom(shortcutActions, {
-                plain: true,
-              })}
+              {buttonsFrom(shortcutActions, {plain: true})}
             </ButtonGroup>
           </div>
-        );
+        ) : null;
 
         const disclosureAccessibilityLabel = name
           ? i18n.translate('Polaris.ResourceList.Item.actionsDropdownLabel', {
@@ -243,25 +250,26 @@ class BaseResourceItem extends Component<CombinedProps, State> {
             })
           : i18n.translate('Polaris.ResourceList.Item.actionsDropdown');
 
-        disclosureMarkup = (
-          <div className={styles.Disclosure} onClick={stopPropagation}>
-            <Popover
-              activator={
-                <Button
-                  accessibilityLabel={disclosureAccessibilityLabel}
-                  onClick={this.handleActionsClick}
-                  plain
-                  icon={HorizontalDotsMinor}
-                />
-              }
-              onClose={this.handleCloseRequest}
-              active={actionsMenuVisible}
-            >
-              <ActionList items={shortcutActions} />
-            </Popover>
-          </div>
-        );
-      } else {
+        disclosureMarkup =
+          !selectMode && breakpoints?.lgDown ? (
+            <div onClick={stopPropagation}>
+              <Popover
+                activator={
+                  <Button
+                    accessibilityLabel={disclosureAccessibilityLabel}
+                    onClick={this.handleActionsClick}
+                    plain
+                    icon={HorizontalDotsMinor}
+                  />
+                }
+                onClose={this.handleCloseRequest}
+                active={actionsMenuVisible}
+              >
+                <ActionList items={shortcutActions} />
+              </Popover>
+            </div>
+          ) : null;
+      } else if (breakpoints?.lgUp) {
         actionsMarkup = (
           <div className={styles.Actions} onClick={stopPropagation}>
             <Box position="absolute" insetBlockStart="4" insetInlineEnd="4">
@@ -474,9 +482,11 @@ function isSelected(id: string, selectedItems?: ResourceListSelectedItems) {
 }
 
 export function ResourceItem(props: ResourceItemProps) {
+  const breakpoints = useBreakpoints();
   return (
     <BaseResourceItem
       {...props}
+      breakpoints={breakpoints}
       context={useContext(ResourceListContext)}
       i18n={useI18n()}
     />

From 39e94ba27a43ff6eff72417783c933b2094ece31 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 22 Nov 2022 17:54:19 -0500
Subject: [PATCH 04/13] fix tests

---
 .../components/ResourceItem/ResourceItem.tsx  |  2 +-
 .../ResourceItem/tests/ResourceItem.test.tsx  | 46 ++++++++++---------
 .../ResourceList/tests/ResourceList.test.tsx  | 28 +++++++----
 3 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index f7d40bf1335..205219ee53a 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -175,7 +175,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
 
       handleMarkup = (
-        <div onClick={this.handleLargerSelectionArea}>
+        <div id="handle" onClick={this.handleLargerSelectionArea}>
           <Bleed marginInline="2">
             <Box
               paddingInlineStart="2"
diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
index d8c9b66d699..1e40990e93a 100644
--- a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
+++ b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
@@ -1,10 +1,13 @@
 import React, {AllHTMLAttributes} from 'react';
 import {mountWithApp} from 'tests/utilities';
+import {matchMedia} from '@shopify/jest-dom-mocks';
+import {setMediaWidth} from 'tests/utilities/breakpoints';
 
 import {Avatar} from '../../Avatar';
 import {Button} from '../../Button';
 import {ButtonGroup} from '../../ButtonGroup';
 import {Checkbox} from '../../Checkbox';
+import {Inline} from '../../Inline';
 import {Thumbnail} from '../../Thumbnail';
 import {UnstyledLink} from '../../UnstyledLink';
 import {ResourceItem} from '../ResourceItem';
@@ -17,10 +20,12 @@ describe('<ResourceItem />', () => {
   beforeEach(() => {
     spy = jest.spyOn(window, 'open');
     spy.mockImplementation(() => {});
+    matchMedia.mock();
   });
 
   afterEach(() => {
     spy.mockRestore();
+    matchMedia.restore();
   });
 
   const mockDefaultContext = {
@@ -126,6 +131,7 @@ describe('<ResourceItem />', () => {
     });
 
     it('is used on the disclosure action menu when there are persistent actions', () => {
+      setMediaWidth('breakpoints-lg');
       const item = mountWithApp(
         <ResourceListContext.Provider value={mockSelectableContext}>
           <ResourceItem
@@ -405,7 +411,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.find('div', {className: styles.Handle})!.trigger('onClick', {
+      wrapper.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -420,7 +426,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.find('div', {className: styles.Handle})!.trigger('onClick', {
+      wrapper.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: false},
       });
@@ -545,8 +551,7 @@ describe('<ResourceItem />', () => {
           <ResourceItem id={itemId} url={url} media={<Avatar customer />} />
         </ResourceListContext.Provider>,
       );
-      const media = wrapper.find('div', {className: styles.Media});
-      expect(media).toContainReactComponent(Avatar);
+      expect(wrapper).toContainReactComponent(Avatar);
     });
 
     it('includes a <Thumbnail /> if one is provided', () => {
@@ -559,8 +564,7 @@ describe('<ResourceItem />', () => {
           />
         </ResourceListContext.Provider>,
       );
-      const media = wrapper.find('div', {className: styles.Media});
-      expect(media).toContainReactComponent(Thumbnail);
+      expect(wrapper).toContainReactComponent(Thumbnail);
     });
   });
 
@@ -576,7 +580,8 @@ describe('<ResourceItem />', () => {
       });
     });
 
-    it('renders shortcut actions when some are provided', () => {
+    it('renders shortcut actions when some are provided and viewport is lgUp', () => {
+      setMediaWidth('breakpoints-lg');
       const wrapper = mountWithApp(
         <ResourceListContext.Provider value={mockDefaultContext}>
           <ResourceItem
@@ -591,7 +596,8 @@ describe('<ResourceItem />', () => {
       });
     });
 
-    it('renders persistent shortcut actions if persistActions is true', () => {
+    it('renders persistent shortcut actions if persistActions is true and viewport is lgUp', () => {
+      setMediaWidth('breakpoints-lg');
       const wrapper = mountWithApp(
         <ResourceListContext.Provider value={mockDefaultContext}>
           <ResourceItem
@@ -679,9 +685,7 @@ describe('<ResourceItem />', () => {
     it('renders with default flex-start alignment if not provided', () => {
       const resourceItem = mountWithApp(<ResourceItem id={itemId} url={url} />);
 
-      expect(resourceItem).toContainReactComponent('div', {
-        className: 'Container',
-      });
+      expect(resourceItem).toContainReactComponent(Inline);
     });
 
     it('renders with leading vertical alignment', () => {
@@ -689,8 +693,8 @@ describe('<ResourceItem />', () => {
         <ResourceItem id={itemId} url={url} verticalAlignment="leading" />,
       );
 
-      expect(resourceItem).toContainReactComponent('div', {
-        className: 'Container alignmentLeading',
+      expect(resourceItem).toContainReactComponent(Inline, {
+        blockAlign: 'start',
       });
     });
 
@@ -699,8 +703,8 @@ describe('<ResourceItem />', () => {
         <ResourceItem id={itemId} url={url} verticalAlignment="center" />,
       );
 
-      expect(resourceItem).toContainReactComponent('div', {
-        className: 'Container alignmentCenter',
+      expect(resourceItem).toContainReactComponent(Inline, {
+        blockAlign: 'center',
       });
     });
 
@@ -709,8 +713,8 @@ describe('<ResourceItem />', () => {
         <ResourceItem id={itemId} url={url} verticalAlignment="trailing" />,
       );
 
-      expect(resourceItem).toContainReactComponent('div', {
-        className: 'Container alignmentTrailing',
+      expect(resourceItem).toContainReactComponent(Inline, {
+        blockAlign: 'end',
       });
     });
 
@@ -719,8 +723,8 @@ describe('<ResourceItem />', () => {
         <ResourceItem id={itemId} url={url} verticalAlignment="fill" />,
       );
 
-      expect(resourceItem).toContainReactComponent('div', {
-        className: 'Container alignmentFill',
+      expect(resourceItem).toContainReactComponent(Inline, {
+        blockAlign: 'stretch',
       });
     });
 
@@ -729,8 +733,8 @@ describe('<ResourceItem />', () => {
         <ResourceItem id={itemId} url={url} verticalAlignment="baseline" />,
       );
 
-      expect(resourceItem).toContainReactComponent('div', {
-        className: 'Container alignmentBaseline',
+      expect(resourceItem).toContainReactComponent(Inline, {
+        blockAlign: 'baseline',
       });
     });
   });
diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
index 15bf63a6e0f..b2f7c40de4c 100644
--- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
+import {matchMedia} from '@shopify/jest-dom-mocks';
 
+// import {setMediaWidth} from 'tests/utilities/breakpoints';
 import {BulkActions} from '../../BulkActions';
 import {Button} from '../../Button';
 import {CheckableButton} from '../../CheckableButton';
@@ -45,6 +47,14 @@ const alternateTool = <div id="AlternateTool">Alternate Tool</div>;
 const defaultWindowWidth = window.innerWidth;
 
 describe('<ResourceList />', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
   describe('renderItem', () => {
     it('renders list items', () => {
       const resourceList = mountWithApp(
@@ -340,7 +350,7 @@ describe('<ResourceList />', () => {
           onSelectionChange={onSelectionChange}
         />,
       );
-      resourceList.find('div', {className: styles.Handle})!.trigger('onClick', {
+      resourceList.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -1059,13 +1069,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1084,13 +1094,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1128,13 +1138,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1160,13 +1170,13 @@ describe('<ResourceList />', () => {
       );
       // Sets {lastSelected: 0}
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {className: styles.Handle})!.trigger('onClick', {
+      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });

From 3ceaa28825a5d38902a9324a0265c112ab81f104 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 22 Nov 2022 17:59:05 -0500
Subject: [PATCH 05/13] changeset

---
 .changeset/nine-worms-sip.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nine-worms-sip.md

diff --git a/.changeset/nine-worms-sip.md b/.changeset/nine-worms-sip.md
new file mode 100644
index 00000000000..7ebd6eab697
--- /dev/null
+++ b/.changeset/nine-worms-sip.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Rebuilt `ResourceItem` with layout components

From bcfd40ebebeb36f51c7f2e36a51045239f4b3649 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 23 Nov 2022 10:20:39 -0500
Subject: [PATCH 06/13] Remove id

---
 .../components/ResourceItem/ResourceItem.tsx   |  2 +-
 .../ResourceItem/tests/ResourceItem.test.tsx   |  4 ++--
 .../ResourceList/tests/ResourceList.test.tsx   | 18 +++++++++---------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index 205219ee53a..f7d40bf1335 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -175,7 +175,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
 
       handleMarkup = (
-        <div id="handle" onClick={this.handleLargerSelectionArea}>
+        <div onClick={this.handleLargerSelectionArea}>
           <Bleed marginInline="2">
             <Box
               paddingInlineStart="2"
diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
index 1e40990e93a..8b584bea38c 100644
--- a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
+++ b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
@@ -411,7 +411,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.find('div', {id: 'handle'})!.trigger('onClick', {
+      wrapper.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -426,7 +426,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.find('div', {id: 'handle'})!.trigger('onClick', {
+      wrapper.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: false},
       });
diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
index b2f7c40de4c..43478b98de5 100644
--- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -350,7 +350,7 @@ describe('<ResourceList />', () => {
           onSelectionChange={onSelectionChange}
         />,
       );
-      resourceList.find('div', {id: 'handle'})!.trigger('onClick', {
+      resourceList.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -1069,13 +1069,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1094,13 +1094,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1138,13 +1138,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1170,13 +1170,13 @@ describe('<ResourceList />', () => {
       );
       // Sets {lastSelected: 0}
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.find('div', {id: 'handle'})!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });

From 74c452e439eb65bed541aef932a9686d7dc1958d Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 23 Nov 2022 11:15:34 -0500
Subject: [PATCH 07/13] Polish

---
 .../components/ResourceItem/ResourceItem.tsx  | 59 ++++++++-----------
 1 file changed, 26 insertions(+), 33 deletions(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index f7d40bf1335..f4de1dae99e 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -3,7 +3,6 @@ import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 import isEqual from 'react-fast-compare';
 
 import {ActionList} from '../ActionList';
-import {Bleed} from '../Bleed';
 import {Box} from '../Box';
 import {Button, buttonsFrom} from '../Button';
 import {ButtonGroup} from '../ButtonGroup';
@@ -175,44 +174,36 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
 
       handleMarkup = (
-        <div onClick={this.handleLargerSelectionArea}>
-          <Bleed marginInline="2">
-            <Box
-              paddingInlineStart="2"
-              paddingInlineEnd="2"
-              minHeight="var(--pc-resource-item-min-height)"
-            >
-              <Inline align="center" blockAlign="center" gap="0">
-                <div onClick={stopPropagation}>
-                  <div onChange={this.handleLargerSelectionArea}>
-                    <Checkbox
-                      id={this.checkboxId}
-                      label={checkboxAccessibilityLabel}
-                      labelHidden
-                      checked={selected}
-                      disabled={loading}
-                    />
-                  </div>
-                </div>
-              </Inline>
-            </Box>
-          </Bleed>
-        </div>
+        <Box
+          zIndex="var(--pc-resource-item-content-stacking-order)"
+          paddingInlineStart="0"
+          paddingInlineEnd="0"
+          paddingBlockStart="1"
+          paddingBlockEnd="0"
+        >
+          <div onClick={this.handleLargerSelectionArea}>
+            <div onClick={stopPropagation}>
+              <div onChange={this.handleLargerSelectionArea}>
+                <Checkbox
+                  id={this.checkboxId}
+                  label={checkboxAccessibilityLabel}
+                  labelHidden
+                  checked={selected}
+                  disabled={loading}
+                />
+              </div>
+            </div>
+          </div>
+        </Box>
       );
     }
 
     if (media || selectable) {
       ownedMarkup = (
-        <Box
-          padding="0"
-          paddingInlineStart="0"
-          paddingInlineEnd="0"
-          paddingBlockStart={!media ? '1' : undefined}
-          zIndex="var(--pc-resource-item-content-stacking-order)"
-        >
+        <>
           {handleMarkup}
           {media}
-        </Box>
+        </>
       );
     }
 
@@ -293,7 +284,9 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       >
         <Columns columns={{xs: '1fr auto auto auto'}} gap="0">
           <Inline
-            blockAlign={getAlignment(verticalAlignment)}
+            blockAlign={
+              media && selectable ? 'center' : getAlignment(verticalAlignment)
+            }
             gap="5"
             wrap={false}
           >

From 99996b2cd1bfb44d73a7a77a560676a6534c99e2 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 23 Nov 2022 11:40:35 -0500
Subject: [PATCH 08/13] fix test

---
 .../src/components/ResourceList/tests/ResourceList.test.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
index 43478b98de5..d8e1edf32c6 100644
--- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -350,7 +350,9 @@ describe('<ResourceList />', () => {
           onSelectionChange={onSelectionChange}
         />,
       );
-      resourceList.findAll('div')[6]!.trigger('onClick', {
+      const resourceItem = resourceList.find(ResourceItem);
+
+      resourceItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });

From cb3fbafafeb92323973fd632eacc62af205b7ed8 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 23 Nov 2022 11:53:20 -0500
Subject: [PATCH 09/13] =?UTF-8?q?=F0=9F=92=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ResourceItem/ResourceItem.scss |  3 +-
 .../components/ResourceItem/ResourceItem.tsx  | 54 +++++++++++--------
 .../ResourceItem/tests/ResourceItem.test.tsx  |  4 +-
 .../ResourceList/tests/ResourceList.test.tsx  | 18 +++----
 4 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 10c3da48e46..151bc5b7e56 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -13,8 +13,7 @@
 .ResourceItem {
   --pc-resource-item-min-height: 44px;
   --pc-resource-item-disclosure-width: 48px;
-  // Offset equals handle width + handle margin-left + handle margin-right
-  --pc-resource-item-offset: 40px;
+  --pc-resource-item-offset: 38px;
   --pc-resource-item-clickable-stacking-order: 1;
   --pc-resource-item-content-stacking-order: 2;
   outline: none;
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index f4de1dae99e..ea1230be6be 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -4,6 +4,7 @@ import isEqual from 'react-fast-compare';
 
 import {ActionList} from '../ActionList';
 import {Box} from '../Box';
+import {Bleed} from '../Bleed';
 import {Button, buttonsFrom} from '../Button';
 import {ButtonGroup} from '../ButtonGroup';
 import {Checkbox} from '../Checkbox';
@@ -174,27 +175,29 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
 
       handleMarkup = (
-        <Box
-          zIndex="var(--pc-resource-item-content-stacking-order)"
-          paddingInlineStart="0"
-          paddingInlineEnd="0"
-          paddingBlockStart="1"
-          paddingBlockEnd="0"
-        >
-          <div onClick={this.handleLargerSelectionArea}>
-            <div onClick={stopPropagation}>
-              <div onChange={this.handleLargerSelectionArea}>
-                <Checkbox
-                  id={this.checkboxId}
-                  label={checkboxAccessibilityLabel}
-                  labelHidden
-                  checked={selected}
-                  disabled={loading}
-                />
+        <div onClick={this.handleLargerSelectionArea}>
+          <Bleed marginBlock="2" marginInline="3">
+            <Box
+              zIndex="var(--pc-resource-item-content-stacking-order)"
+              paddingInlineStart="3"
+              paddingInlineEnd="3"
+              paddingBlockStart="3"
+              paddingBlockEnd="2"
+            >
+              <div onClick={stopPropagation}>
+                <div onChange={this.handleLargerSelectionArea}>
+                  <Checkbox
+                    id={this.checkboxId}
+                    label={checkboxAccessibilityLabel}
+                    labelHidden
+                    checked={selected}
+                    disabled={loading}
+                  />
+                </div>
               </div>
-            </div>
-          </div>
-        </Box>
+            </Box>
+          </Bleed>
+        </div>
       );
     }
 
@@ -287,11 +290,18 @@ class BaseResourceItem extends Component<CombinedProps, State> {
             blockAlign={
               media && selectable ? 'center' : getAlignment(verticalAlignment)
             }
-            gap="5"
+            gap="4"
             wrap={false}
           >
             {ownedMarkup}
-            <div>{children}</div>
+            <Box
+              width="100%"
+              padding="0"
+              paddingInlineStart="0"
+              paddingInlineEnd="0"
+            >
+              {children}
+            </Box>
           </Inline>
           {actionsMarkup}
           {disclosureMarkup}
diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
index 8b584bea38c..e8dd9c9b6a4 100644
--- a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
+++ b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
@@ -411,7 +411,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.findAll('div')[6]!.trigger('onClick', {
+      wrapper.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -426,7 +426,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.findAll('div')[6]!.trigger('onClick', {
+      wrapper.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: false},
       });
diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
index d8e1edf32c6..7116cf1be39 100644
--- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -352,7 +352,7 @@ describe('<ResourceList />', () => {
       );
       const resourceItem = resourceList.find(ResourceItem);
 
-      resourceItem!.findAll('div')[6]!.trigger('onClick', {
+      resourceItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -1071,13 +1071,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[6]!.trigger('onClick', {
+      firstItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[6]!.trigger('onClick', {
+      lastItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1096,13 +1096,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[6]!.trigger('onClick', {
+      firstItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[6]!.trigger('onClick', {
+      lastItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1140,13 +1140,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[6]!.trigger('onClick', {
+      firstItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[6]!.trigger('onClick', {
+      lastItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1172,13 +1172,13 @@ describe('<ResourceList />', () => {
       );
       // Sets {lastSelected: 0}
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[6]!.trigger('onClick', {
+      firstItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[6]!.trigger('onClick', {
+      lastItem!.findAll('div')[5]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });

From e23a0d7c7cd232a4a12a8594b44e887bd1ea439f Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 23 Nov 2022 17:00:57 -0500
Subject: [PATCH 10/13] nested columns

---
 .../components/ResourceItem/ResourceItem.tsx  | 20 +++++++++----------
 .../ResourceItem/tests/ResourceItem.test.tsx  |  4 ++--
 .../ResourceList/tests/ResourceList.test.tsx  | 18 ++++++++---------
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index ea1230be6be..2606115f64c 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -203,10 +203,14 @@ class BaseResourceItem extends Component<CombinedProps, State> {
 
     if (media || selectable) {
       ownedMarkup = (
-        <>
+        <Inline
+          blockAlign={
+            media && selectable ? 'center' : getAlignment(verticalAlignment)
+          }
+        >
           {handleMarkup}
           {media}
-        </>
+        </Inline>
       );
     }
 
@@ -285,14 +289,8 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         paddingInlineEnd={{xs: '4', sm: '5'}}
         zIndex="var(--pc-resource-item-content-stacking-order)"
       >
-        <Columns columns={{xs: '1fr auto auto auto'}} gap="0">
-          <Inline
-            blockAlign={
-              media && selectable ? 'center' : getAlignment(verticalAlignment)
-            }
-            gap="4"
-            wrap={false}
-          >
+        <Columns columns={{xs: '1fr auto'}} gap="0">
+          <Columns columns={{xs: media || selectable ? 'auto 1fr' : '1fr'}}>
             {ownedMarkup}
             <Box
               width="100%"
@@ -302,7 +300,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
             >
               {children}
             </Box>
-          </Inline>
+          </Columns>
           {actionsMarkup}
           {disclosureMarkup}
         </Columns>
diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
index e8dd9c9b6a4..8b584bea38c 100644
--- a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
+++ b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
@@ -411,7 +411,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.findAll('div')[5]!.trigger('onClick', {
+      wrapper.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -426,7 +426,7 @@ describe('<ResourceItem />', () => {
         </ResourceListContext.Provider>,
       );
 
-      wrapper.findAll('div')[5]!.trigger('onClick', {
+      wrapper.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: false},
       });
diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
index 7116cf1be39..d8e1edf32c6 100644
--- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -352,7 +352,7 @@ describe('<ResourceList />', () => {
       );
       const resourceItem = resourceList.find(ResourceItem);
 
-      resourceItem!.findAll('div')[5]!.trigger('onClick', {
+      resourceItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
@@ -1071,13 +1071,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[5]!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[5]!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1096,13 +1096,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[5]!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[5]!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1140,13 +1140,13 @@ describe('<ResourceList />', () => {
         />,
       );
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[5]!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[5]!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });
@@ -1172,13 +1172,13 @@ describe('<ResourceList />', () => {
       );
       // Sets {lastSelected: 0}
       const firstItem = resourceList.find(ResourceItem);
-      firstItem!.findAll('div')[5]!.trigger('onClick', {
+      firstItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {},
       });
       const allItems = resourceList.findAll(ResourceItem);
       const lastItem = allItems[allItems.length - 1];
-      lastItem!.findAll('div')[5]!.trigger('onClick', {
+      lastItem!.findAll('div')[6]!.trigger('onClick', {
         stopPropagation: () => {},
         nativeEvent: {shiftKey: true},
       });

From cc1e353f2c8d67d8f9b13aa9733966bdc48ae1dc Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 23 Nov 2022 18:41:13 -0500
Subject: [PATCH 11/13] change column gap to 20px vs 16px

---
 polaris-react/src/components/ResourceItem/ResourceItem.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index 2606115f64c..05cd1c7620a 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -290,7 +290,10 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         zIndex="var(--pc-resource-item-content-stacking-order)"
       >
         <Columns columns={{xs: '1fr auto'}} gap="0">
-          <Columns columns={{xs: media || selectable ? 'auto 1fr' : '1fr'}}>
+          <Columns
+            columns={{xs: media || selectable ? 'auto 1fr' : '1fr'}}
+            gap="5"
+          >
             {ownedMarkup}
             <Box
               width="100%"

From a5065c4a41cf6dce70a497dabf6de02fbcbd6123 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 24 Nov 2022 14:25:43 -0500
Subject: [PATCH 12/13] Vertical align children as well as owned content

---
 .../components/ResourceItem/ResourceItem.tsx   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
index 05cd1c7620a..8c319283ae9 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.tsx
@@ -295,14 +295,16 @@ class BaseResourceItem extends Component<CombinedProps, State> {
             gap="5"
           >
             {ownedMarkup}
-            <Box
-              width="100%"
-              padding="0"
-              paddingInlineStart="0"
-              paddingInlineEnd="0"
-            >
-              {children}
-            </Box>
+            <Inline blockAlign={getAlignment(verticalAlignment)}>
+              <Box
+                width="100%"
+                padding="0"
+                paddingInlineStart="0"
+                paddingInlineEnd="0"
+              >
+                {children}
+              </Box>
+            </Inline>
           </Columns>
           {actionsMarkup}
           {disclosureMarkup}

From 827169ae2a571c9eb1cb234761305adf517f0a6a Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Fri, 25 Nov 2022 11:10:51 -0500
Subject: [PATCH 13/13] Update
 polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx

---
 .../src/components/ResourceList/tests/ResourceList.test.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
index d8e1edf32c6..71b323c5604 100644
--- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 import {matchMedia} from '@shopify/jest-dom-mocks';
 
-// import {setMediaWidth} from 'tests/utilities/breakpoints';
 import {BulkActions} from '../../BulkActions';
 import {Button} from '../../Button';
 import {CheckableButton} from '../../CheckableButton';