Add support for illustration as thumbnail in ListView (#3249)

* add support for illustration as listview thumbnail

* update chromatic stories

* updated chromatic to use same as storybook

* remove dup css

* don't share Folder between storybook and chromatic

Co-authored-by: Robert Snow <[email protected]>

Author: reidbarber

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

@@ -15,7 +15,6 @@ import {ActionMenu} from '@react-spectrum/menu';
 import Add from '@spectrum-icons/workflow/Add';
 import {Content, View} from '@react-spectrum/view';
 import Delete from '@spectrum-icons/workflow/Delete';
-import Folder from '@spectrum-icons/workflow/Folder';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
@@ -25,6 +24,7 @@ import Info from '@spectrum-icons/workflow/Info';
 import {Item, ListView} from '../';
 import {Meta, Story} from '@storybook/react';
 import React from 'react';
+import {useSlotProps, useStyleProps} from '@react-spectrum/utils';
 
 let states = [
   {isQuiet: true},
@@ -89,6 +89,26 @@ const renderActions = (
   </>
 );
 
+function IllustrationContainer(props) {
+  props = useSlotProps(props, 'illustration');
+  let {styleProps} = useStyleProps(props);
+  return (
+    <div {...styleProps}>
+      {props.children}
+    </div>
+  );
+}
+
+function Folder() {
+  return (
+    <IllustrationContainer>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.23 67" height="110">
+        <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>
+  );
+}
+
 const Template = (): Story => ({combos, ...args}) => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combos.map(c => {

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

@@ -39,7 +39,7 @@ export function DragPreview(props: DragPreviewProps) {
             content: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
             text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
             description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},
-            icon: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-icon'], size: 'M'},
+            illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-illustration']},
             image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},
             actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},
             actionGroup: {

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

@@ -250,7 +250,7 @@ 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},
-              icon: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-icon'], size: 'M'},
+              illustration: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-illustration']},
               image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},
               actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},
               actionGroup: {

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

@@ -326,22 +326,19 @@
     }
   }
 
-  .react-spectrum-ListViewItem-icon,
+  .react-spectrum-ListViewItem-illustration,
   .react-spectrum-ListViewItem-image {
     grid-area: image;
-    align-items: center;
     justify-items: center;
     padding-inline-end: var(--spectrum-global-dimension-size-100);
-  }
-
-  .react-spectrum-ListViewItem-image {
     display: flex;
     border-radius: var(--spectrum-global-dimension-size-25);
     width: var(--spectrum-global-dimension-size-400);
     height: var(--spectrum-global-dimension-size-400);
     align-items: center;
     justify-content: center;
-    > img {
+
+    > img, svg {
       width: unset;
       height: unset;
       max-height: 100%;

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

@@ -13,7 +13,6 @@ import {Droppable} from '@react-aria/dnd/stories/dnd.stories';
 import Edit from '@spectrum-icons/workflow/Edit';
 import FileTxt from '@spectrum-icons/workflow/FileTxt';
 import {Flex} from '@react-spectrum/layout';
-import Folder from '@spectrum-icons/workflow/Folder';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Image} from '@react-spectrum/image';
@@ -25,6 +24,7 @@ import React, {useEffect, useState} from 'react';
 import {storiesOf} from '@storybook/react';
 import {useAsyncList, useListData} from '@react-stately/data';
 import {useDragHooks, useDropHooks} from '@react-spectrum/dnd';
+import {useSlotProps, useStyleProps} from '@react-spectrum/utils';
 
 const parameters = {
   args: {
@@ -94,16 +94,38 @@ const items: any = [
 
 // taken from https://random.dog/
 const itemsWithThumbs = [
+  {key: '0', title: 'folder of good bois', illustration: <Folder />},
   {key: '1', title: 'swimmer', url: 'https://random.dog/b2fe2172-cf11-43f4-9c7f-29bd19601712.jpg'},
   {key: '2', title: 'chocolate', url: 'https://random.dog/2032518a-eec8-4102-9d48-3dca5a26eb23.png'},
   {key: '3', title: 'good boi', url: 'https://random.dog/191091b2-7d69-47af-9f52-6605063f1a47.jpg'},
   {key: '4', title: 'polar bear', url: 'https://random.dog/c22c077e-a009-486f-834c-a19edcc36a17.jpg'},
   {key: '5', title: 'cold boi', url: 'https://random.dog/093a41da-e2c0-4535-a366-9ef3f2013f73.jpg'},
   {key: '6', title: 'pilot', url: 'https://random.dog/09f8ecf4-c22b-49f4-af24-29fb5c8dbb2d.jpg'},
   {key: '7', title: 'nerd', url: 'https://random.dog/1a0535a6-ca89-4059-9b3a-04a554c0587b.jpg'},
-  {key: '8', title: 'audiophile', url: 'https://random.dog/32367-2062-4347.jpg'}
+  {key: '8', title: 'audiophile', url: 'https://random.dog/32367-2062-4347.jpg'},
+  {key: '9', title: 'folder of great bois', illustration: <Folder />}
 ];
 
+function IllustrationContainer(props) {
+  props = useSlotProps(props, 'illustration');
+  let {styleProps} = useStyleProps(props);
+  return (
+    <div {...styleProps}>
+      {props.children}
+    </div>
+  );
+}
+
+function Folder() {
+  return (
+    <IllustrationContainer>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.23 67" height="110">
+        <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>
+  );
+}
+
 function renderEmptyState() {
   return (
     <IllustratedMessage>
@@ -220,7 +242,14 @@ storiesOf('ListView', module)
   .add('with emphasized ActionBar', args => <ActionBarExample isEmphasized {...args} />)
   .add('thumbnails', args => (
     <ListView width="250px" items={itemsWithThumbs} aria-label="ListView with thumbnails" {...args}>
-      {(item: any) => <Item textValue={item.title}><Image src={item.url} alt="" /><Text>{item.title}</Text><Text slot="description">JPG</Text></Item>}
+      {(item: any) => (
+        <Item textValue={item.title}>
+          {item.url && <Image src={item.url} alt="" />}
+          {item.illustration}
+          <Text>{item.title}</Text>
+          {item.url && <Text slot="description">JPG</Text>}
+        </Item>
+      )}
     </ListView>
   ))
   .add('long text', args => (