TagGroup: Avatar support (#3937)

Author: reidbarber

packages/@adobe/spectrum-css-temp/components/tags/index.css

@@ -26,8 +26,6 @@ governing permissions and limitations under the License.
   --spectrum-focus-ring-border-size: var(--spectrum-tag-border-size);
 
   display: inline-grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: "icon content action";
   align-items: center;
   box-sizing: border-box;
   position: relative;
@@ -52,7 +50,7 @@ governing permissions and limitations under the License.
     pointer-events: none;
   }
 
-  .spectrum-Tag-action {
+  .spectrum-Tag-removeButton {
     grid-area: action;
     height: calc(var(--spectrum-tag-height) - (2 * var(--spectrum-tag-border-size)));
     width: var(--spectrum-global-dimension-size-300);
@@ -61,12 +59,19 @@ governing permissions and limitations under the License.
   .spectrum-Tag-cell {
     overflow: hidden;
     text-overflow: ellipsis;
-    display: flex;
+    display: grid;
     align-items: center;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: "decoration content action";
   }
 
   .spectrum-Tag-icon {
-    grid-area: icon;
+    grid-area: decoration;
+    margin-inline-end: var(--spectrum-global-dimension-size-100);
+  }
+
+  .spectrum-Tag-avatar {
+    grid-area: decoration;
     margin-inline-end: var(--spectrum-global-dimension-size-100);
   }
 

packages/@react-spectrum/tag/src/Tag.tsx

@@ -71,11 +71,12 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
         <SlotProvider
           slots={{
             icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},
-            text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content'), ...labelProps}
+            text: {UNSAFE_className: classNames(styles, 'spectrum-Tag-content'), ...labelProps},
+            avatar: {UNSAFE_className: classNames(styles, 'spectrum-Tag-avatar'), size: 'avatar-size-50'}
           }}>
           {typeof children === 'string' ? <Text>{children}</Text> : children}
           <ClearSlots>
-            {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-action')} />}
+            {allowsRemoving && <TagRemoveButton item={item} {...clearButtonProps} UNSAFE_className={classNames(styles, 'spectrum-Tag-removeButton')} />}
           </ClearSlots>
         </SlotProvider>
       </div>

packages/@react-spectrum/tag/stories/TagGroup.stories.tsx

@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import Audio from '@spectrum-icons/workflow/Audio';
+import {Avatar} from '@react-spectrum/avatar';
 import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Item, SpectrumTagGroupProps, TagGroup} from '../src';
 import React, {useState} from 'react';
@@ -123,7 +124,43 @@ export const MaxRowsOnRemove: TagGroupStory = {
   storyName: 'maxRows + onRemove'
 };
 
+export const WithAvatar: TagGroupStory = {
+  args: {items: [{key: '1', label: 'Cool Person 1'}, {key: '2', label: 'Cool Person 2'}]},
+  render: (args) => (
+    <TagGroup aria-label="Tag group with avatars" {...args}>
+      {(item: any) => (
+        <Item key={item.key} textValue={item.label}>
+          <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" />
+          <Text>{item.label}</Text>
+        </Item>
+      )}
+    </TagGroup>
+  ),
+  storyName: 'with avatar'
+};
+
+export const WithAvatarOnRemove: TagGroupStory = {
+  render: (args) => <OnRemoveExample withAvatar {...args} />,
+  storyName: 'with avatar + onRemove'
+};
+
+export const WithAction: TagGroupStory = {
+  args: {onAction: action('clear'), actionLabel: 'Clear'},
+  storyName: 'with action'
+};
+
+export const WithActionAndMaxRows: TagGroupStory = {
+  args: {
+    maxRows: 2,
+    onAction: action('clear'),
+    actionLabel: 'Clear'
+  },
+  decorators: [(Story) => <ResizableContainer>{<Story />}</ResizableContainer>],
+  storyName: 'with action and maxRows'
+};
+
 function OnRemoveExample(props) {
+  let {withAvatar, ...otherProps} = props;
   let [items, setItems] = useState([
     {id: 1, label: 'Cool Tag 1'},
     {id: 2, label: 'Another cool tag'},
@@ -139,26 +176,14 @@ function OnRemoveExample(props) {
   };
 
   return (
-    <TagGroup allowsRemoving aria-label="Tag group with removable tags" items={items} onRemove={key => onRemove(key)} {...props}>
+    <TagGroup allowsRemoving aria-label="Tag group with removable tags" items={items} onRemove={key => onRemove(key)} {...otherProps}>
       {(item: any) => (
-        <Item>{item.label}</Item>
+        <Item key={item.key} textValue={item.label}>
+          {withAvatar && <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" />}
+          <Text>{item.label}</Text>
+        </Item>
       )}
     </TagGroup>
   );
 }
 
-export const WithAction: TagGroupStory = {
-  args: {onAction: action('clear'), actionLabel: 'Clear'},
-  storyName: 'with action'
-};
-
-export const WithActionAndMaxRows: TagGroupStory = {
-  args: {
-    maxRows: 2,
-    onAction: action('clear'),
-    actionLabel: 'Clear'
-  },
-  decorators: [(Story) => <ResizableContainer>{<Story />}</ResizableContainer>],
-  storyName: 'with action and maxRows'
-};
-