[ResourceItem] Use layout components (#7784)

Closes: #7580

This slightly moves the checkbox handle 2px to the left. This means it
now lines up with our 20px padding instead of 22px from the card edge.
Also improves vertical alignment of the checkboxes and bulk select on xs
screens

Before | After
---|---
![image](https://screenshot.click/24-12-z59dz-bpdqu.png) |
![image](https://screenshot.click/24-12-viiqs-efiaf.png)

The only CSS that remains is for interactive elements, interactive
behavior (hover, focus), and transitions (which are being removed in
https://github.com/Shopify/polaris/pull/7290/files).

Author: kyledurand

.changeset/nine-worms-sip.md

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

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,7 @@ $bulk-actions-button-stacking-order: (
 
 .CheckableContainer {
   flex: 1 1 0;
+  margin-left: calc(-1 * (var(--p-space-05) + var(--p-space-1)));
 }
 
 .disabled {

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

@@ -1,50 +1,31 @@
 @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 {
   --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;
-  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 {
+    .Actions {
+      /* stylelint-disable-next-line selector-max-combinators */
+      > * {
         @include action-unhide;
-
-        // stylelint-disable-next-line max-nesting-depth
-        @media #{$p-breakpoints-lg-down} {
-          display: none;
-        }
       }
     }
   }
@@ -82,67 +63,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,78 +80,20 @@
   }
 }
 
-.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;
-
-  @include action-hide;
-
-  .focused & {
-    @include action-unhide;
+  > * {
+    @include action-hide;
   }
 
-  @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;
+  .focused & {
+    // stylelint-disable-next-line selector-max-combinators
+    > * {
+      @include action-unhide;
     }
   }
 }
 
-.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 {
   background-color: var(--p-surface-selected);
 
@@ -245,7 +107,6 @@
 }
 
 .ListItem {
-  position: relative;
   @include focus-ring($border-width: -1px);
 
   .ListItem + & {