From 5bb90008a96cba3b6f04413b36fefe286cca829c Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 15 Aug 2023 16:46:17 +1000
Subject: [PATCH] [ResourceList] Make se23 styles the default

---
 .../components/ResourceList/ResourceList.scss | 113 +++++-------------
 1 file changed, 33 insertions(+), 80 deletions(-)

diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index 8dbc7155047..22ad2cef11f 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.scss
+++ b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -16,27 +16,14 @@ $item-wrapper-loading-height: 64px;
 }
 
 .FiltersWrapper {
-  padding: var(--p-space-3) var(--p-space-3) var(--p-space-4);
+  padding: var(--p-space-3);
 
   @media #{$p-breakpoints-sm-up} {
-    padding: var(--p-space-4);
-  }
-
-  #{$se23} & {
     padding: var(--p-space-3);
-
-    @media #{$p-breakpoints-sm-up} {
-      padding: var(--p-space-3);
-    }
   }
 
   + .ResourceList {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
-
-    #{$se23} & {
-      border-top: none;
-      @include item-separator;
-    }
+    @include item-separator;
   }
 }
 
@@ -49,12 +36,7 @@ $item-wrapper-loading-height: 64px;
   border-top-right-radius: var(--p-border-radius-2);
 
   + .ResourceList {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
-
-    #{$se23} & {
-      border-top: none;
-      @include item-separator;
-    }
+    @include item-separator;
   }
 }
 
@@ -77,55 +59,41 @@ $item-wrapper-loading-height: 64px;
 .HeaderWrapper {
   position: relative;
   display: flex;
-  align-items: flex-start;
   width: 100%;
-  min-height: resource-list(header-min-height);
-  padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-5);
   background-color: var(--p-color-bg);
   border-radius: var(--p-border-radius-2);
-  #{$se23} & {
-    // This container conditionally includes a Select component for sorting
-    // It's 32px above md-up and 36px below
-    // This hardcoded min-height is to ensure the Select has uniform padding when it's 36px high
-    min-height: 52px;
-    align-items: center;
-    padding: var(--p-space-2) var(--p-space-3);
-    // We reduce the min-height here to account for the Select shrinking to 32px at this breakpoint.
-    @media #{$p-breakpoints-md-up} {
-      min-height: 48px;
-    }
+  // This container conditionally includes a Select component for sorting
+  // It's 32px above md-up and 36px below
+  // This hardcoded min-height is to ensure the Select has uniform padding when it's 36px high
+  min-height: 52px;
+  align-items: center;
+  padding: var(--p-space-2) var(--p-space-3);
+  // We reduce the min-height here to account for the Select shrinking to 32px at this breakpoint.
+  @media #{$p-breakpoints-md-up} {
+    min-height: 48px;
   }
 }
 
 .HeaderWrapper-isSticky {
-  box-shadow: var(--p-shadow-md);
-
-  #{$se23} & {
-    box-shadow: var(--p-shadow-xs);
-    border-radius: 0;
-  }
+  box-shadow: var(--p-shadow-xs);
+  border-radius: 0;
 }
 
 .HeaderContentWrapper {
   position: absolute;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: resource-list(content-wrapper-stacking-order);
-  right: var(--p-space-5);
-  left: var(--p-space-5);
+  right: var(--p-space-3);
+  left: var(--p-space-3);
+  // Regardless of the variable height of the content
+  // we just want it to be center aligned.
+  top: 0;
+  bottom: 0;
   display: flex;
   min-height: resource-list(header-content-min-height);
   opacity: 1;
   transition: opacity var(--p-motion-ease) var(--p-motion-duration-200);
-
-  #{$se23} & {
-    right: var(--p-space-3);
-    left: var(--p-space-3);
-    // Regardless of the variable height of the content
-    // we just want it to be center aligned.
-    top: 0;
-    bottom: 0;
-    align-items: center;
-  }
+  align-items: center;
 
   .HeaderWrapper-inSelectMode & {
     opacity: 0;
@@ -222,33 +190,23 @@ $item-wrapper-loading-height: 64px;
   z-index: resource-list(bulk-actions-wrapper-stacking-order);
   width: 100%;
 
-  // se23: This is the initial value of flex, is there something else that mutates this in other components?
-  @media #{$p-breakpoints-sm-up} {
-    flex: 0 1 auto;
-    align-self: flex-start;
-  }
+  /*
+    We do not want to worry about setting the height and width explicitly.
+    We want to inherits the height and width of its child (in this case the SelectAllActions component).
 
-  #{$se23} & {
-    /*
-      We do not want to worry about setting the height and width explicitly.
-      We want to inherits the height and width of its child (in this case the SelectAllActions component).
-
-      We do this using flexbox because "the cross size of each flex container is the minimum size necessary to contain the flex items" as per the spec.
-      https://www.w3.org/TR/css-flexbox-1/#flex-lines
-    */
-    display: flex;
-    align-self: auto;
-  }
+    We do this using flexbox because "the cross size of each flex container is the minimum size necessary to contain the flex items" as per the spec.
+    https://www.w3.org/TR/css-flexbox-1/#flex-lines
+  */
+  display: flex;
+  align-self: auto;
 }
 
 .CheckableButtonWrapper {
   display: none;
 
-  #{$se23} & {
-    // Checkable button has no opinion on its height, so we just fill the
-    // container
-    height: 100%;
-  }
+  // Checkable button has no opinion on its height, so we just fill the
+  // container
+  height: 100%;
 
   @media #{$p-breakpoints-sm-up} {
     flex: 1;
@@ -303,12 +261,7 @@ $item-wrapper-loading-height: 64px;
   max-width: 100%;
 
   + .ItemWrapper {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
-
-    #{$se23} & {
-      border-top: none;
-      @include item-separator;
-    }
+    @include item-separator;
   }
 }