[ResourceItem] Fix broken focus ring styles

Author: laurkim

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

@@ -111,7 +111,7 @@
 }
 
 .ListItem {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  // stylelint-disable-next-line -- include focus-ring mixin to prevent jump in content for first focused element
   @include focus-ring($border-width: -1px);
 
   .ListItem + & {
@@ -120,38 +120,49 @@
     @include item-separator;
   }
 
-  &:not(.hasBulkActions):not(.selectMode) {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    &::after {
-      border-radius: var(--p-border-radius-05);
-    }
+  &.focused {
+    // stylelint-disable-next-line -- remove focus-ring mixin to use outline styles
+    @include no-focus-ring;
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: calc(-1 * var(--p-space-05));
+    // stylelint-disable-next-line -- custom property
+    z-index: var(--pc-resource-item-clickable-stacking-order);
+    border-radius: var(--p-border-radius-0-experimental);
 
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    &: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;
+    @media #{$p-breakpoints-sm-up} {
+      border-radius: var(--p-border-radius-3);
+
+      &:first-of-type {
+        border-bottom-left-radius: var(--p-border-radius-0-experimental);
+        border-bottom-right-radius: var(--p-border-radius-0-experimental);
       }
 
-      &.focused::after {
-        border-bottom-left-radius: var(--p-border-radius-2);
-        border-bottom-right-radius: var(--p-border-radius-2);
+      &:last-of-type {
+        border-top-left-radius: var(--p-border-radius-0-experimental);
+        border-top-right-radius: var(--p-border-radius-0-experimental);
       }
-      // stylelint-enable
     }
-  }
 
-  &.focused {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    z-index: var(--pc-resource-item-clickable-stacking-order);
-  }
+    &:only-child {
+      border-radius: var(--p-border-radius-0-experimental);
+
+      @media #{$p-breakpoints-sm-up} {
+        border-radius: var(--p-border-radius-3);
+      }
+    }
 
-  // stylelint-disable-next-line selector-max-specificity, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
-  * + ul > &:first-of-type.focused::after {
-    top: 1px;
+    // stylelint-disable-next-line selector-max-class -- override border radius for selectable items
+    &.selectable {
+      border-radius: var(--p-border-radius-0-experimental);
+
+      @media #{$p-breakpoints-sm-up} {
+        // stylelint-disable-next-line -- override border radius for last selectable item to match ResourceList border radius
+        &:last-child {
+          border-bottom-left-radius: var(--p-border-radius-3);
+          border-bottom-right-radius: var(--p-border-radius-3);
+        }
+      }
+    }
   }
 }

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

@@ -225,6 +225,7 @@ class BaseResourceItem extends Component<CombinedProps, State> {
       styles.ListItem,
       focused && !focusedInner && styles.focused,
       hasBulkActions && styles.hasBulkActions,
+      selectable && styles.selectable,
     );
 
     let actionsMarkup: React.ReactNode | null = null;