fix(tag): remove invalid disabled states

- removes disabled state from invalid variants
- removes avatar/icon/thumbnail from invalid variants
- also removes selected & disabled variant in testing preview
- "disabled" is no longer a control when invalid is true

components/tag/stories/tag.stories.js

@@ -88,6 +88,7 @@ export default {
 				category: "State",
 			},
 			control: "boolean",
+			if: { arg: "isInvalid", truthy: false },
 		},
 		isSelected: {
 			name: "Selected",
@@ -170,19 +171,19 @@ const Tags = (args) => html` <div
 			label: "Tag with longer content that truncates",
 		})
 	)}
-	${when(window.isChromatic(), () =>
+	${when(window.isChromatic() && !args.isInvalid, () =>
 		Template({
 			...args,
 			visual: "Icon",
 		})
 	)}
-	${when(window.isChromatic(), () =>
+	${when(window.isChromatic() && !args.isInvalid, () =>
 		Template({
 			...args,
 			visual: "Avatar",
 		})
 	)}
-	${when(window.isChromatic(), () =>
+	${when(window.isChromatic() && !args.isInvalid, () =>
 		Template({
 			...args,
 			visual: "Thumbnail",
@@ -210,29 +211,20 @@ const States = (args) =>
 				isSelected: true,
 			})}
 		</div>
-		<div>
-			${Typography({
-				semantics: "detail",
-				size: "m",
-				content: ["Disabled"],
-			})}
-			${Tags({
-				...args,
-				isDisabled: true,
-			})}
-		</div>
-		<div>
-			${Typography({
-				semantics: "detail",
-				size: "m",
-				content: ["Disabled & Selected"],
-			})}
-			${Tags({
-				...args,
-				isDisabled: true,
-				isSelected: true,
-			})}
-		</div>`;
+		${args.isInvalid ? "" : html`
+			<div>
+				${Typography({
+					semantics: "detail",
+					size: "m",
+					content: ["Disabled"],
+				})}
+				${Tags({
+					...args,
+					isDisabled: true,
+				})}
+			</div>
+		`}
+	`;
 
 const Sizes = (args) =>
 	html` ${["s", "m", "l"].map((size) => {