From a9d4fefb9325ea37b1b287dffc4230b46f7e7464 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Tue, 14 Jan 2025 16:56:31 -0600
Subject: [PATCH] fix(TagGroup): ensure Tags with and without icons are aligned
 vertically (#7608)

* ensure tags with and without icons are aligned vertically

* edit existing story
---
 packages/@adobe/spectrum-css-temp/components/tags/index.css | 1 +
 packages/@react-spectrum/tag/chromatic/TagGroup.stories.tsx | 2 +-
 packages/@react-spectrum/tag/stories/TagGroup.stories.tsx   | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/tags/index.css b/packages/@adobe/spectrum-css-temp/components/tags/index.css
index 53a3b4e7cbf..119df457163 100644
--- a/packages/@adobe/spectrum-css-temp/components/tags/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/tags/index.css
@@ -46,6 +46,7 @@ governing permissions and limitations under the License.
 
   display: inline-grid;
   align-items: center;
+  vertical-align: middle;
   box-sizing: border-box;
   position: relative;
   cursor: default;
diff --git a/packages/@react-spectrum/tag/chromatic/TagGroup.stories.tsx b/packages/@react-spectrum/tag/chromatic/TagGroup.stories.tsx
index 04977241be8..886495a652b 100644
--- a/packages/@react-spectrum/tag/chromatic/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/tag/chromatic/TagGroup.stories.tsx
@@ -72,7 +72,7 @@ export const WithIcon: TagGroupStory = {
     <TagGroup {...args} aria-label="Tag group">
       {(item: any) => (
         <Item key={item.key} textValue={item.label}>
-          <Audio />
+          {item.id !== 1 && <Audio />}
           <Text>{item.label}</Text>
         </Item>
       )}
diff --git a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
index bb390cd448b..ff110fc3de5 100644
--- a/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/tag/stories/TagGroup.stories.tsx
@@ -175,7 +175,7 @@ export const WithAvatar: TagGroupStory = {
     <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" />
+          {item.key === '1' && <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" />}
           <Text>{item.label}</Text>
         </Item>
       )}