fix: S2 ListView polish styles (adobe#9717)

* fix: S2 ListBox styles for scrollbars

* remove corner radius for non quiet

* fix: ListView item size and borders (adobe#9723)

* always round first and last items

* fix focus ring

* force rounded corners when focused

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>

Author: snowystinger

packages/@react-spectrum/s2/src/ListView.tsx

@@ -280,9 +280,8 @@ const listitem = style<GridListItemRenderProps & {
   selectionStyle?: 'highlight' | 'checkbox',
   scale?: 'medium' | 'large'
 }>({
-  ...focusRing(),
+  outlineStyle: 'none',
   boxSizing: 'border-box',
-  outlineOffset: -2,
   columnGap: 0,
   paddingX: 0,
   paddingY: 8,
@@ -320,7 +319,6 @@ const listitem = style<GridListItemRenderProps & {
     default: 'default',
     isLink: 'pointer'
   },
-  transition: 'default',
   '--borderColor': {
     type: 'borderColor',
     value: {
@@ -339,54 +337,16 @@ const listitem = style<GridListItemRenderProps & {
     default: 1,
     isLastItem: {
       default: 1,
-      isQuiet: {
-        selectionStyle: {
-          checkbox: 0,
-          highlight: {
-            default: 0,
-            isSelected: 1
-          }
-        }
-      }
+      isQuiet: 0
     }
   },
   borderStartWidth: 0,
   borderEndWidth: 0,
   borderStyle: 'solid',
   borderColor: {
     default: '--borderColor',
-    isSelected: {
-      selectionStyle: {
-        highlight: {
-          default: 'transparent',
-          isNextSelected: 'transparent'
-        },
-        checkbox: {
-          default: '--borderColor',
-          isNextSelected: selectedBackground
-        }
-      }
-    }
-  },
-  borderTopStartRadius: {
-    isFirstItem: 'default'
-  },
-  borderTopEndRadius: {
-    isFirstItem: 'default'
-  },
-  borderBottomStartRadius: {
-    isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
-    }
-  },
-  borderBottomEndRadius: {
-    isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
-    }
+    isNextSelected: 'transparent',
+    isSelected: 'transparent'
   }
 });
 
@@ -400,22 +360,22 @@ const listRowBackground = style<GridListItemRenderProps & {
   isNextNotSelected?: boolean,
   selectionStyle?: 'highlight' | 'checkbox'
 }>({
+  ...focusRing(),
+  outlineOffset: -2,
   position: 'absolute',
   zIndex: -1,
-  top: 0,
+  top: {
+    default: 0,
+    isSelected: '[-1px]',
+    // Don't overlap focus ring of row above.
+    isPrevSelected: 0,
+    isFirstItem: 0
+  },
   left: 0,
   right: 0,
   bottom: {
     default: 0,
-    isSelected: {
-      selectionStyle: {
-        checkbox: 0,
-        highlight: {
-          default: 0,
-          isNextSelected: '[-1px]'
-        }
-      }
-    }
+    isSelected: '[-1px]'
   },
   backgroundColor: {
     default: '--rowBackgroundColor',
@@ -440,9 +400,10 @@ const listRowBackground = style<GridListItemRenderProps & {
           isFocusVisible: selectedActiveBackground
         },
         highlight: {
-          default: 'blue-900/10',
-          isHovered: 'blue-900/15',
-          isPressed: 'blue-900/15'
+          // Use solid colors rather than transparent because the rows overlap.
+          default: colorMix('gray-25', 'blue-900', 10),
+          isHovered: colorMix('gray-25', 'blue-900', 15),
+          isPressed: colorMix('gray-25', 'blue-900', 15)
         }
       }
     },
@@ -451,64 +412,94 @@ const listRowBackground = style<GridListItemRenderProps & {
     }
   },
   borderTopStartRadius: {
-    isFirstItem: 'default'
+    isFirstItem: {
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
+    }
   },
   borderTopEndRadius: {
-    isFirstItem: 'default'
+    isFirstItem: {
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
+    }
   },
   borderBottomStartRadius: {
     isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
     }
   },
   borderBottomEndRadius: {
     isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
     }
   },
   borderTopWidth: {
-    default: 1,
-    isPrevSelected: {
+    default: {
       selectionStyle: {
-        highlight: 0,
-        checkbox: 0
+        checkbox: 0,
+        highlight: 1
       }
-    }
+    },
+    isPrevSelected: 0
   },
   borderBottomWidth: {
-    default: 1,
-    isNextSelected: {
+    default: {
       selectionStyle: {
-        highlight: 0,
-        checkbox: 0
+        checkbox: 0,
+        highlight: 1
       }
     },
-    isLastItem: {
-      default: 1,
-      isQuiet: {
-        selectionStyle: {
-          checkbox: 0,
-          highlight: {
-            default: 0,
-            isSelected: 1
-          }
-        }
+    isNextSelected: 0
+  },
+  borderStartWidth: {
+    default: {
+      selectionStyle: {
+        checkbox: 0,
+        highlight: 1
+      }
+    }
+  },
+  borderEndWidth: {
+    default: {
+      selectionStyle: {
+        checkbox: 0,
+        highlight: 1
       }
     }
   },
-  borderStartWidth: 1,
-  borderEndWidth: 1,
   borderStyle: 'solid',
   borderColor: {
     default: 'transparent',
     isSelected: {
       selectionStyle: {
-        highlight: '--borderColor',
-        checkbox: 'transparent'
+        checkbox: 'transparent',
+        highlight: '--borderColor'
       }
     }
   }