[ResourceList][IndexTable] Fix border-radius and padding bugs

.changeset/smooth-moose-exercise.md

@@ -0,0 +1,8 @@
+---
+'@shopify/polaris': patch
+---
+
+- Fixed header of `IndexTable` with `bulkActions` not having border radius
+- Fixed header of `selectable` `ResourceList` not having border radius
+- Fixed `selectable` `ResourceList` with no `bulkActions` having extra bottom padding in select mode
+- Fixed last `ResourceItem` in a `selectable` `ResourceList` with `bulkActions` having a border radius when in select mode

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

@@ -618,6 +618,7 @@ $loading-panel-height: 53px;
   right: 0;
   padding: 0 var(--p-space-2) 0 var(--p-space-4);
   background: var(--p-surface);
+  border-radius: var(--p-border-radius-2);
 
   &.StickyTableHeader-condensed {
     padding-top: calc(var(--p-space-2) + var(--p-space-05));

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

@@ -126,24 +126,25 @@
     border-top: var(--p-border-divider);
   }
 
-  &::after {
-    border-radius: var(--p-border-radius-05);
-  }
-
-  &:last-of-type {
-    border-bottom-left-radius: var(--p-border-radius-2);
-    border-bottom-right-radius: var(--p-border-radius-2);
+  &:not(.hasBulkActions, .selectMode) {
+    &::after {
+      border-radius: var(--p-border-radius-05);
+    }
 
-    .ItemWrapper {
+    &:last-of-type {
       border-bottom-left-radius: var(--p-border-radius-2);
       border-bottom-right-radius: var(--p-border-radius-2);
-    }
-  }
+      // stylelint-disable selector-max-specificity -- Needed due to the nesting of the elements that change border-radius based on selection mode
+      .ItemWrapper {
+        border-radius: inherit;
+      }
 
-  // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
-  &:last-of-type.focused::after {
-    border-bottom-left-radius: var(--p-border-radius-2);
-    border-bottom-right-radius: var(--p-border-radius-2);
+      &.focused::after {
+        border-bottom-left-radius: var(--p-border-radius-2);
+        border-bottom-right-radius: var(--p-border-radius-2);
+      }
+      // stylelint-enable
+    }
   }
 
   &.focused {

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

@@ -158,7 +158,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       persistActions = false,
       accessibilityLabel,
       name,
-      context: {selectable, selectMode, loading, resourceName},
+      context: {selectable, selectMode, hasBulkActions, loading, resourceName},
       i18n,
       verticalAlignment,
       dataHref,
@@ -228,6 +228,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
     const listItemClassName = classNames(
       styles.ListItem,
       focused && !focusedInner && styles.focused,
+      hasBulkActions && styles.hasBulkActions,
     );
 
     let actionsMarkup: React.ReactNode | null = null;

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

@@ -74,6 +74,7 @@ $breakpoints-empty-search-results-height-up: '(min-height: #{breakpoint(600px)})
   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-surface);
+  border-radius: var(--p-border-radius-2);
 }
 
 .HeaderWrapper-isSticky {

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

@@ -555,7 +555,7 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
   );
 
   const bulkActionsMarkup =
-    isSelectable && selectMode ? (
+    isSelectable && selectMode && bulkActions ? (
       <div
         className={bulkActionClassNames}
         style={{
@@ -741,6 +741,7 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
     selectable: isSelectable,
     selectedItems,
     selectMode,
+    hasBulkActions: Boolean(bulkActions),
     resourceName,
     loading,
     onSelectionChange: handleSelectionChange,
@@ -750,6 +751,7 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
     styles.ResourceListWrapper,
     Boolean(bulkActionsMarkup) &&
       selectMode &&
+      bulkActions &&
       styles.ResourceListWrapperWithBulkActions,
   );
 

polaris-react/src/utilities/resource-list/context.ts

@@ -12,6 +12,7 @@ export interface ResourceListContextType {
     plural: string;
   };
   loading?: boolean;
+  hasBulkActions?: boolean;
   onSelectionChange?(
     selected: boolean,
     id: string,