fix(tag): the easier pr fixes

ADJUST FOCUS BEHAVIOR:
- remove .is-focused states from CSS to use native pseudo-classes
- use keyboard focused global state instead of focused global state in Storybook
    - change of arg from isFocused to isKeyboardFocused in template and tests
- removal of focus event listeners to update args

ADJUST EMPHASIZED STYLING
- .is-emphasized is now .spectrum-Tag--emphasized in CSS and template
- emphasized styles only take effect if also selected
- update tests and test headings to better display the emphasized
variant
- small adjustments to story names on docs page to put selected stories
next to each other and show emphasized and selected rather than just
emphasized

ADJUST READ ONLY STYLING
- Remove user-select: none to make tag text selectable per guidelines
- prevent selected styles from having effect if read-only or disabled
- adjust emphasized & read-only tests to include selected state

MISC OTHER FIXES
- hasClearButton control has been changed to isRemovable
- Update of Truncated story to remove max width and rely on component's
max width

Author: rise-erpelding

components/tag/dist/metadata.json

@@ -7,23 +7,21 @@
     ".spectrum-Tag .spectrum-Tag-itemIcon",
     ".spectrum-Tag .spectrum-Tag-itemLabel",
     ".spectrum-Tag .spectrum-Thumbnail",
+    ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)",
+    ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):active",
+    ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):focus-visible",
+    ".spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly):hover",
     ".spectrum-Tag--sizeL",
     ".spectrum-Tag--sizeS",
     ".spectrum-Tag.is-disabled",
     ".spectrum-Tag.is-disabled .spectrum-Avatar",
     ".spectrum-Tag.is-disabled .spectrum-Thumbnail",
-    ".spectrum-Tag.is-emphasized",
-    ".spectrum-Tag.is-emphasized.is-focused:not(.is-disabled, .is-readOnly)",
-    ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):active",
-    ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):focus-visible",
-    ".spectrum-Tag.is-emphasized:not(.is-disabled, .is-readOnly):hover",
-    ".spectrum-Tag.is-focused:not(.is-disabled, .is-readOnly)",
-    ".spectrum-Tag.is-focused:not(.is-disabled, .is-readOnly):after",
     ".spectrum-Tag.is-selected",
-    ".spectrum-Tag.is-selected.is-focused",
-    ".spectrum-Tag.is-selected:active",
-    ".spectrum-Tag.is-selected:focus-visible",
-    ".spectrum-Tag.is-selected:hover",
+    ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)",
+    ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):active",
+    ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):focus-visible",
+    ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly):hover",
+    ".spectrum-Tag.spectrum-Tag--emphasized",
     ".spectrum-Tag:lang(ja)",
     ".spectrum-Tag:lang(ko)",
     ".spectrum-Tag:lang(zh)",

components/tag/index.css

@@ -191,7 +191,6 @@
 	vertical-align: bottom;
 	max-inline-size: calc(var(--mod-tag-height, var(--spectrum-tag-height)) * var(--mod-tag-maximum-width-multiplier, var(--spectrum-tag-maximum-width-multiplier)));
 	outline: none;
-	user-select: none;
 
 	transition:
 		border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
@@ -271,8 +270,7 @@
 		transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down));
 	}
 
-	&:not(.is-disabled, .is-readOnly):focus-visible,
-	&:not(.is-disabled, .is-readOnly).is-focused {
+	&:not(.is-disabled, .is-readOnly):focus-visible {
 		/* mod/highcontrast specified at top */
 		border-color: var(--spectrum-tag-border-color-focus);
 		background-color: var(--spectrum-tag-background-color-focus);
@@ -297,7 +295,7 @@
 }
 
 /* selected */
-.spectrum-Tag.is-selected {
+.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly) {
 	/* mod/highcontrast colors specified at top */
 	border-color: var(--spectrum-tag-border-color-selected);
 	background-color: var(--spectrum-tag-background-color-selected);
@@ -315,35 +313,33 @@
 		color: var(--spectrum-tag-content-color-selected);
 	}
 
-	&:focus-visible,
-	&.is-focused {
+	&:focus-visible {
 		border-color: var(--spectrum-tag-border-color-selected);
 		background-color: var(--spectrum-tag-background-color-selected-focus);
 		color: var(--spectrum-tag-content-color-selected);
 	}
 }
 
 /* emphasized */
-.spectrum-Tag.is-emphasized {
+.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly) {
 	/* mod/highcontrast colors specified at top */
 	border-color: var(--spectrum-tag-border-color-emphasized);
 	background-color: var(--spectrum-tag-background-color-emphasized);
 	color: var(--spectrum-tag-content-color-emphasized);
 
-	&:not(.is-disabled, .is-readOnly):hover {
+	&:hover {
 		border-color: var(--spectrum-tag-border-color-emphasized);
 		background-color: var(--spectrum-tag-background-color-emphasized-hover);
 		color: var(--spectrum-tag-content-color-emphasized);
 	}
 
-	&:not(.is-disabled, .is-readOnly):active {
+	&:active {
 		border-color: var(--spectrum-tag-border-color-emphasized);
 		background-color: var(--spectrum-tag-background-color-emphasized-active);
 		color: var(--spectrum-tag-content-color-emphasized);
 	}
 
-	&:not(.is-disabled, .is-readOnly):focus-visible,
-	&:not(.is-disabled, .is-readOnly).is-focused {
+	&:focus-visible {
 		border-color: var(--spectrum-tag-border-color-emphasized);
 		background-color: var(--spectrum-tag-background-color-emphasized-focus);
 		color: var(--spectrum-tag-content-color-emphasized);
@@ -405,7 +401,7 @@
 			--highcontrast-tag-content-color-disabled: GrayText;
 		}
 
-		&.is-emphasized {
+		&.spectrum-Tag--emphasized {
 			--highcontrast-tag-border-color-emphasized: Highlight;
 
 			--highcontrast-tag-background-color-emphasized: ButtonFace;

components/tag/stories/tag.stories.js

@@ -1,7 +1,7 @@
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, isSelected, size } from "@spectrum-css/preview/types";
+import { isActive, isDisabled, isEmphasized, isHovered, isKeyboardFocused, isReadOnly, isSelected, size } from "@spectrum-css/preview/types";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { TagGroups } from "./tag.test.js";
@@ -63,10 +63,10 @@ export default {
 		isDisabled,
 		isSelected,
 		isHovered,
-		isFocused,
+		isKeyboardFocused,
 		isActive,
 		isReadOnly,
-		hasClearButton: {
+		isRemovable: {
 			name: "Removable",
 			description: "Has a clear button to clear the tag.",
 			type: { name: "boolean" },
@@ -88,10 +88,10 @@ export default {
 		isDisabled: false,
 		isEmphasized: false,
 		isHovered: false,
-		isFocused: false,
+		isKeyboardFocused: false,
 		isActive: false,
 		isReadOnly: false,
-		hasClearButton: false,
+		isRemovable: false,
 	},
 	parameters: {
 		actions: {
@@ -130,7 +130,9 @@ WithForcedColors.parameters = {
 // ********* DOCS ONLY ********* //
 /**
  * Tags should always include a label to represent search terms, filters, or keywords. Tags also
- * have the option to include an icon, avatar, or thumbnail in addition to the label.
+ * have the option to include an [icon](?path=/docs/components-icon--docs),
+ * [avatar](?path=/docs/components-avatar--docs), or
+ * [thumbnail](?path=/docs/components-thumbnail--docs) in addition to the label.
  */
 export const Standard = TagsDefaultOptions.bind({});
 Standard.args = Default.args;
@@ -142,7 +144,7 @@ Standard.parameters = {
 
 
 export const Selected = TagsDefaultOptions.bind({});
-Selected.storyName = "Default, selected";
+Selected.storyName = "Selected default";
 Selected.tags = ["!dev"];
 Selected.args = {
 	isSelected: true
@@ -165,22 +167,24 @@ Disabled.parameters = {
 };
 
 export const Emphasized = TagsDefaultOptions.bind({});
+Emphasized.storyName = "Selected emphasized";
 Emphasized.tags = ["!dev"];
 Emphasized.args = {
-	isEmphasized: true
+	isEmphasized: true,
+	isSelected: true,
 };
 Emphasized.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
 /**
- * Tags have the option to be removable or not. Removable tags have a small close ("x") button.
+ * Tags have the option to be removable or not. Removable tags have a small clear ("x") button.
  */
 export const Removable = TagsDefaultOptions.bind({});
 Removable.storyName = "Default, removable";
 Removable.tags = ["!dev"];
 Removable.args = {
-	hasClearButton: true,
+	isRemovable: true,
 };
 Removable.parameters = {
 	chromatic: { disableSnapshot: true },
@@ -191,7 +195,7 @@ Removable.parameters = {
  * Read-only tags cannot be interacted with or changed.
  */
 export const ReadOnly = TagsDefaultOptions.bind({});
-ReadOnly.storyName = "Read only";
+ReadOnly.storyName = "Read-only";
 ReadOnly.tags = ["!dev"];
 ReadOnly.args = {
 	isReadOnly: true,
@@ -213,16 +217,22 @@ Sizing.parameters = {
 
 
 /**
- * When the tag text is too long for the available horizontal space, it truncates. The full text should be revealed with a tooltip on hover.
+ * When the tag text is too long for the available horizontal space, it truncates. The full text
+ * should be revealed with a tooltip on hover. Tags have a maximum width that differs depending on
+ * the size of the tag.
  * */
 
-export const TextOverflow = TagGroups.bind({});
+export const TextOverflow = (args, context) => Sizes({
+	Template: TagGroups,
+	withHeading: false,
+	withBorder: false,
+	...args,
+}, context);
 TextOverflow.tags = ["!dev"];
 TextOverflow.args = {
 	hasIcon: true,
 	iconName: "CheckmarkCircle",
 	label: "An example of text overflow behavior. When the button text is too long for the horizontal space available, it will truncate and stay on one line.",
-	customStyles: { "max-inline-size": "200px" }
 };
 
 TextOverflow.parameters = {

components/tag/stories/tag.test.js

@@ -7,10 +7,10 @@ export const TagGroups = Variants({
 	sizeDirection: "row",
 	testData: [
 		{
-			testHeading: "Default",
+			testHeading: "Default, not selected",
 		},
 		{
-			testHeading: "Emphasized",
+			testHeading: "Emphasized, not selected",
 			isEmphasized: true,
 		},
 		{
@@ -25,17 +25,18 @@ export const TagGroups = Variants({
 		// show removable tags for these variants so hover and focus can be captured
 		{
 			testHeading: "Default, removable",
-			hasClearButton: true,
+			isRemovable: true,
 		},
 		{
-			testHeading: "Emphasized, removable",
+			testHeading: "Emphasized & selected, removable",
 			isEmphasized: true,
-			hasClearButton: true,
+			isSelected: true,
+			isRemovable: true,
 		},
 		{
 			testHeading: "Selected, removable",
 			isSelected: true,
-			hasClearButton: true,
+			isRemovable: true,
 		},
 		{
 			testHeading: "Disabled with states",
@@ -61,9 +62,10 @@ export const TagGroups = Variants({
 			isReadOnly: true,
 		},
 		{
-			testHeading: "Emphasized, read-only",
+			testHeading: "Emphasized & selected, read-only",
 			isReadOnly: true,
 			isEmphasized: true,
+			isSelected: true,
 		},
 		// truncated, which many states below ignore
 		{
@@ -75,7 +77,7 @@ export const TagGroups = Variants({
 		// show removable as a state for test headings that don't already test it
 		{
 			testHeading: "Removable",
-			hasClearButton: true,
+			isRemovable: true,
 			include: ["Default, with icon" , "Default, with avatar", "Emphasized, with thumbnail", "Truncated"],
 		},
 		{
@@ -84,8 +86,8 @@ export const TagGroups = Variants({
 			ignore: ["Truncated"],
 		},
 		{
-			testHeading: "Focused",
-			isFocused: true,
+			testHeading: "Keyboard focused",
+			isKeyboardFocused: true,
 			ignore: ["Truncated"],
 		},
 		{

components/tag/stories/template.js

@@ -22,10 +22,10 @@ export const Template = ({
 	isEmphasized = false,
 	isDisabled = false,
 	isHovered = false,
-	isFocused = false,
+	isKeyboardFocused = false,
 	isActive = false,
 	isReadOnly = false,
-	hasClearButton = false,
+	isRemovable = false,
 	id = getRandomId("tag"),
 	customClasses = [],
 	customStyles = {},
@@ -38,11 +38,11 @@ export const Template = ({
 				[rootClass]: true,
 				[`${rootClass}--size${size?.toUpperCase()}`]:
 					typeof size !== "undefined",
-				"is-emphasized": isEmphasized,
+				[`${rootClass}--emphasized`]: isEmphasized,
 				"is-disabled": isDisabled,
 				"is-selected": isSelected,
 				"is-hover": isHovered,
-				"is-focus-visible": isFocused,
+				"is-focus-visible": isKeyboardFocused,
 				"is-active": isActive,
 				"is-readOnly": isReadOnly,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -54,13 +54,6 @@ export const Template = ({
 				if (isReadOnly || isDisabled) return;
 				updateArgs({ isSelected: !isSelected });
 			}}
-			@focusin=${function() {
-				if (isReadOnly || isDisabled) return;
-				updateArgs({ isFocused: true });
-			}}
-			@focusout=${function() {
-				updateArgs({ isFocused: false });
-			}}
 		>
 			${when(avatarUrl, () =>
 				Avatar({
@@ -81,7 +74,7 @@ export const Template = ({
 				}, context)
 			)}
 			<span class="${rootClass}-itemLabel">${label}</span>
-			${when(hasClearButton, () =>
+			${when(isRemovable, () =>
 				ClearButton({
 					isDisabled,
 					customClasses: [`${rootClass}-clearButton`],
@@ -108,9 +101,9 @@ export const TagsDefaultOptions = ({
 	},
 	content: html`
 		${Template(args, context)}
-		${args.hasClearButton ? "" : Template({
+		${args.isRemovable ? "" : Template({
 			...args,
-				hasClearButton: true,
+			isRemovable: true,
 			}, context)}
 		${Template({
 				...args,