fix(TagGroup): ensure Tags with and without icons are aligned vertica…

…lly (#7608) * ensure tags with and without icons are aligned vertically * edit existing story
adobe · Jan 14, 2025 · a9d4fef · a9d4fef · rspbot · Jan 14, 2025
1 parent 1d9e615
commit a9d4fef
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>
       )}