fix ListView item's thumbnail height overflow (#3301)

Author: reidbarber

packages/@react-spectrum/list/src/ListViewItem.tsx

@@ -250,8 +250,8 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
             slots={{
               text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
               description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description'], ...descriptionProps},
-              illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-illustration']},
-              image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},
+              illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},
+              image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-thumbnail']},
               actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},
               actionGroup: {
                 UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],

packages/@react-spectrum/list/src/styles.css

@@ -279,8 +279,8 @@
     grid-template-columns: auto auto auto auto 1fr auto auto;
     grid-template-rows: 1fr auto;
     grid-template-areas:
-      "draghandle checkbox icon image content actions actionmenu chevron"
-      "draghandle checkbox icon image description actions actionmenu chevron";
+      "draghandle checkbox thumbnail content actions actionmenu chevron"
+      "draghandle checkbox thumbnail description actions actionmenu chevron";
     align-items: center;
   }
 
@@ -326,9 +326,8 @@
     }
   }
 
-  .react-spectrum-ListViewItem-illustration,
-  .react-spectrum-ListViewItem-image {
-    grid-area: image;
+  .react-spectrum-ListViewItem-thumbnail {
+    grid-area: thumbnail;
     justify-items: center;
     padding-inline-end: var(--spectrum-global-dimension-size-100);
     display: flex;
@@ -338,10 +337,9 @@
     align-items: center;
     justify-content: center;
 
-    > img, svg {
+    > img, > svg {
       width: unset;
-      height: unset;
-      max-height: 100%;
+      height: 100%;
     }
   }
 
@@ -403,8 +401,8 @@
 
     .react-spectrum-ListViewItem-grid {
       grid-template-areas:
-        "icon image content     . badge"
-        "icon image description . badge";
+        "thumbnail content     . badge"
+        "thumbnail description . badge";
       grid-template-columns: auto auto auto 1fr;
     }
 

packages/@react-spectrum/list/stories/ListView.stories.tsx

@@ -119,7 +119,7 @@ function IllustrationContainer(props) {
 function Folder() {
   return (
     <IllustrationContainer>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.23 67" height="110">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.23 67">
         <path fill="var(--spectrum-global-color-gray-600)" d="M94.47,27a4.45,4.45,0,0,0-3.72-2H20.34a5.45,5.45,0,0,0-5.05,3.37L3.12,57.68V3.88A.89.89,0,0,1,4,3H23.21a2.51,2.51,0,0,1,1.69.66l9.7,8.94a1.56,1.56,0,0,0,1,.4h40a1.5,1.5,0,0,1,1.5,1.5v6a1.5,1.5,0,0,0,3,0v-6a4.51,4.51,0,0,0-4.5-4.5H36.21L26.93,1.46A5.48,5.48,0,0,0,23.21,0H4A3.88,3.88,0,0,0,.12,3.88v61h0A1.51,1.51,0,0,0,1.5,67H79a1.49,1.49,0,0,0,1.38-.92L94.89,31.19A4.45,4.45,0,0,0,94.47,27ZM92.12,30,78,64H3.75L18.06,29.52A2.46,2.46,0,0,1,20.34,28H90.75a1.48,1.48,0,0,1,1.37,2Z" />
       </svg>
     </IllustrationContainer>