From 617e945f542b3536d947590bf463eb33561b55fe Mon Sep 17 00:00:00 2001
From: Jenn Diaz <jenn.diaz@heysparkbox.com>
Date: Tue, 5 Dec 2023 12:06:30 -0700
Subject: [PATCH 1/2] docs(tag): remove incorrect invalid tags examples

---
 components/tag/metadata/tag.yml | 48 +++++++--------------------------
 1 file changed, 10 insertions(+), 38 deletions(-)

diff --git a/components/tag/metadata/tag.yml b/components/tag/metadata/tag.yml
index 67af39c6a79..f6cd4c34aa4 100644
--- a/components/tag/metadata/tag.yml
+++ b/components/tag/metadata/tag.yml
@@ -21,6 +21,10 @@ sections:
       ```
       ### Icon size changed to small
       If you use an icon (`spectrum-Tag-itemIcon`) along with a tag, please replace `.spectrum-Icon--sizeXS` with `.spectrum-Icon--sizeS`.
+
+      ### Invalid
+      Docs updated to show invalid tags always including the alert icon. Invalid tags should have an icon to idenfity itself as invalid and not rely soley on the red background and border color.
+
 examples:
   - id: tag
     name: Standard
@@ -86,10 +90,6 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
 
-          <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
-            <span class="spectrum-Tag-itemLabel">Tag label</span>
-          </div>
-
           <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
             <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
               <use xlink:href="#spectrum-icon-24-Alert" />
@@ -98,9 +98,9 @@ examples:
           </div>
 
           <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
-            <div class="spectrum-Avatar spectrum-Avatar--size50">
-              <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
-            </div>
+            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
+              <use xlink:href="#spectrum-icon-24-Alert" />
+            </svg>
             <span class="spectrum-Tag-itemLabel">Tag label</span>
             <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
               <div class="spectrum-ClearButton-fill">
@@ -143,11 +143,6 @@ examples:
 
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>
-
-          <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
-            <span class="spectrum-Tag-itemLabel">Tag label</span>
-          </div>
-
           <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
             <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
               <use xlink:href="#spectrum-icon-24-Alert" />
@@ -156,9 +151,9 @@ examples:
           </div>
 
           <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
-            <div class="spectrum-Avatar spectrum-Avatar--size50">
-              <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
-            </div>
+            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
+              <use xlink:href="#spectrum-icon-24-Alert" />
+            </svg>
             <span class="spectrum-Tag-itemLabel">Tag label</span>
             <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
               <div class="spectrum-ClearButton-fill">
@@ -390,18 +385,6 @@ examples:
         </div>
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
-
-          <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
-            <span class="spectrum-Tag-itemLabel">Tag label</span>
-            <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
-              <div class="spectrum-ClearButton-fill">
-                <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Cross75" />
-                </svg>
-              </div>
-            </button>
-          </div>
-
           <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
             <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
               <use xlink:href="#spectrum-icon-24-Alert" />
@@ -448,17 +431,6 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>
 
-          <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
-            <span class="spectrum-Tag-itemLabel">Tag label</span>
-            <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
-              <div class="spectrum-ClearButton-fill">
-                <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
-                  <use xlink:href="#spectrum-css-icon-Cross75" />
-                </svg>
-              </div>
-            </button>
-          </div>
-
           <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
             <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
               <use xlink:href="#spectrum-icon-24-Alert" />

From d9d6170c2eaf52ca7666eac470c618543837c865 Mon Sep 17 00:00:00 2001
From: Jenn Diaz <jenn.diaz@heysparkbox.com>
Date: Tue, 5 Dec 2023 12:22:40 -0700
Subject: [PATCH 2/2] docs(tag): update stories invalid tags

---
 components/tag/stories/tag.stories.js     |  1 +
 components/tag/stories/template.js        |  8 +++--
 components/taggroup/metadata/taggroup.yml | 40 +++--------------------
 3 files changed, 11 insertions(+), 38 deletions(-)

diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js
index 0c52f2f6ec5..c19f7e7bcbd 100644
--- a/components/tag/stories/tag.stories.js
+++ b/components/tag/stories/tag.stories.js
@@ -70,6 +70,7 @@ export default {
 				category: "Component",
 			},
 			control: "boolean",
+			if: { arg: "isInvalid", truthy: false },
 		},
 		isInvalid: {
 			name: "Invalid",
diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js
index 5e391416d99..46e74767ca9 100644
--- a/components/tag/stories/template.js
+++ b/components/tag/stories/template.js
@@ -33,6 +33,10 @@ export const Template = ({
 		console.warn(e);
 	}
 
+	if(isInvalid) {
+		iconName = 'Alert'
+	}
+
 	return html`
 		<div
 			class=${classMap({
@@ -48,14 +52,14 @@ export const Template = ({
 			id=${ifDefined(id)}
 			tabindex=${isDisabled ? '-1' : '0'}
 		>
-			${avatarUrl
+			${avatarUrl && !isInvalid
 				? Avatar({
 						...globals,
 						image: avatarUrl,
 						size: "50",
 				  })
 				: ""}
-			${iconName
+			${iconName || isInvalid
 				? Icon({
 						...globals,
 						size,
diff --git a/components/taggroup/metadata/taggroup.yml b/components/taggroup/metadata/taggroup.yml
index 65c697b767a..b112e0589a3 100644
--- a/components/taggroup/metadata/taggroup.yml
+++ b/components/taggroup/metadata/taggroup.yml
@@ -30,9 +30,6 @@ examples:
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item" role="listitem" tabindex="0">
           <span class="spectrum-Tag-itemLabel">Tag 1</span>
         </div>
-        <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
-          <span class="spectrum-Tag-itemLabel">Tag 2</span>
-        </div>
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
           <span class="spectrum-Tag-itemLabel">Tag 2</span>
         </div>
@@ -47,12 +44,6 @@ examples:
           </div>
           <span class="spectrum-Tag-itemLabel">Shantanu</span>
         </div>
-        <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
-          <div class="spectrum-Avatar spectrum-Avatar--size50">
-            <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
-          </div>
-          <span class="spectrum-Tag-itemLabel">Shantanu</span>
-        </div>
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
           <div class="spectrum-Avatar spectrum-Avatar--size50">
             <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
@@ -71,9 +62,9 @@ examples:
           <span class="spectrum-Tag-itemLabel">Shantanu</span>
         </div>
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-invalid" role="listitem" tabindex="0">
-          <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
-            <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
-          </svg>
+            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
+              <use xlink:href="#spectrum-icon-24-Alert" />
+            </svg>
           <span class="spectrum-Tag-itemLabel">Shantanu</span>
         </div>
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item is-disabled" role="listitem">
@@ -98,16 +89,6 @@ examples:
             </div>
           </button>
         </div>
-        <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" tabindex="0" role="listitem">
-          <span class="spectrum-Tag-itemLabel">Tag 2</span>
-          <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 2" tabindex="-1">
-            <div class="spectrum-ClearButton-fill">
-              <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Cross75" />
-              </svg>
-            </div>
-          </button>
-        </div>
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-disabled" role="listitem">
           <span class="spectrum-Tag-itemLabel">Tag 2</span>
           <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 3" tabindex="-1" disabled>
@@ -136,19 +117,6 @@ examples:
             </div>
           </button>
         </div>
-        <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" role="listitem" tabindex="0">
-          <div class="spectrum-Avatar spectrum-Avatar--size50">
-            <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
-          </div>
-          <span class="spectrum-Tag-itemLabel">Shantanu</span>
-          <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag 2" tabindex="-1">
-            <div class="spectrum-ClearButton-fill">
-              <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
-                <use xlink:href="#spectrum-css-icon-Cross75" />
-              </svg>
-            </div>
-          </button>
-        </div>
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-disabled" role="listitem">
           <div class="spectrum-Avatar spectrum-Avatar--size50">
             <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
@@ -182,7 +150,7 @@ examples:
         </div>
         <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-TagGroup-item spectrum-Tag--removable is-invalid" role="listitem" tabindex="0">
           <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
-            <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
+            <use xlink:href="#spectrum-icon-24-Alert" />
           </svg>
           <span class="spectrum-Tag-itemLabel">Shantanu</span>
           <button type="button" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" aria-label="Remove tag Shantanu" tabindex="-1">