[ResourceItem] Use layout components

.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 + & {