fix(taggroup): style empty state

Author: rise-erpelding

.changeset/public-facts-boil.md

@@ -28,3 +28,11 @@ To support custom spacing of the embedded components, several other new mod prop
 - `--mod-tag-group-block-spacing-label-to-tags`
 - `--mod-tag-group-inline-spacing-label-to-tags`
 - `--mod-tag-group-spacing-help-text-to-tags`
+
+To support the optional empty state (when there are no tags in the tag group), several passthroughs to modify the body typography text element have been added, including:
+
+- `--mod-body-cjk-line-height`
+- `--mod-body-font-size`
+- `--mod-body-line-height`
+- `--mod-body-margin-end`
+- `--mod-body-margin-start`

components/taggroup/dist/metadata.json

@@ -12,9 +12,17 @@
     ".spectrum-TagGroup-actionButton",
     ".spectrum-TagGroup-helpText",
     ".spectrum-TagGroup-label",
-    ".spectrum-TagGroup-tags"
+    ".spectrum-TagGroup-tags",
+    ".spectrum-TagGroup:lang(ja)",
+    ".spectrum-TagGroup:lang(ko)",
+    ".spectrum-TagGroup:lang(zh)"
   ],
   "modifiers": [
+    "--mod-body-cjk-line-height",
+    "--mod-body-font-size",
+    "--mod-body-line-height",
+    "--mod-body-margin-end",
+    "--mod-body-margin-start",
     "--mod-tag-group-block-spacing-label-to-tags",
     "--mod-tag-group-block-tag-spacing",
     "--mod-tag-group-inline-spacing-label-to-tags",
@@ -29,8 +37,19 @@
     "--spectrum-tag-group-spacing-help-text-to-tags"
   ],
   "global": [
+    "--spectrum-cjk-line-height-100",
+    "--spectrum-component-bottom-to-text-100",
+    "--spectrum-component-bottom-to-text-200",
+    "--spectrum-component-bottom-to-text-75",
+    "--spectrum-component-top-to-text-100",
+    "--spectrum-component-top-to-text-200",
+    "--spectrum-component-top-to-text-75",
     "--spectrum-field-label-to-component",
+    "--spectrum-font-size-100",
+    "--spectrum-font-size-200",
+    "--spectrum-font-size-75",
     "--spectrum-help-text-to-component",
+    "--spectrum-line-height-100",
     "--spectrum-spacing-100",
     "--spectrum-spacing-200"
   ],

components/taggroup/index.css

@@ -17,16 +17,38 @@
 	--spectrum-tag-group-block-spacing-label-to-tags: var(--spectrum-field-label-to-component);
 	--spectrum-tag-group-inline-spacing-label-to-tags: var(--spectrum-spacing-200);
 	--spectrum-tag-group-spacing-help-text-to-tags: var(--spectrum-help-text-to-component);
+
+	/* passthroughs for body typography element in empty state */
+	--mod-body-line-height: var(--spectrum-line-height-100);
+	--mod-body-font-size: var(--spectrum-font-size-100);
+	--mod-body-margin-start: var(--spectrum-component-top-to-text-100);
+	--mod-body-margin-end: var(--spectrum-component-bottom-to-text-100);
+
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--mod-body-cjk-line-height: var(--spectrum-cjk-line-height-100);
+	}
 }
 
 .spectrum-TagGroup--sizeS {
 	--spectrum-tag-group-inline-tag-spacing: var(--spectrum-spacing-100);
 	--spectrum-tag-group-block-tag-spacing: var(--spectrum-spacing-100);
+
+	/* passthroughs for body typography element in empty state */
+	--mod-body-font-size: var(--spectrum-font-size-75);
+	--mod-body-margin-start: var(--spectrum-component-top-to-text-75);
+	--mod-body-margin-end: var(--spectrum-component-bottom-to-text-75);
 }
 
 .spectrum-TagGroup--sizeL {
 	--spectrum-tag-group-inline-tag-spacing: var(--spectrum-spacing-200);
 	--spectrum-tag-group-block-tag-spacing: var(--spectrum-spacing-200);
+
+	/* passthroughs for body typography element in empty state */
+	--mod-body-font-size: var(--spectrum-font-size-200);
+	--mod-body-margin-start: var(--spectrum-component-top-to-text-200);
+	--mod-body-margin-end: var(--spectrum-component-bottom-to-text-200);
 }
 
 .spectrum-TagGroup {

components/taggroup/stories/taggroup.stories.js

@@ -267,7 +267,7 @@ Disabled.args = {
 };
 
 /**
- * When a stand alone tag group has no tags, it shows placeholder text to communicate the empty state. The wording of the placeholder text can be customizable.
+ * When a stand alone tag group has no tags, it may show placeholder text to communicate the empty state. The placeholder text can be customized, or another element may be shown to communicate the empty state rather than placeholder text.
  */
 export const WithNoTags = Template.bind({});
 WithNoTags.storyName = "With no tags (empty state)";

components/taggroup/stories/taggroup.test.js

@@ -87,15 +87,15 @@ export const TagGroups = Variants({
 		{
 			testHeading: "Empty state, top label",
 			numberOfTags: 0,
-			helpText: "",
+			helpText: "No tags added",
 			actionButtonText: "",
 			items: [],
 		},
 		{
 			testHeading: "Empty state, side label",
 			fieldLabelPosition: "side",
 			numberOfTags: 0,
-			helpText: "",
+			helpText: "No tags added",
 			actionButtonText: "",
 			items: [],
 		},

components/taggroup/stories/template.js

@@ -73,7 +73,6 @@ export const Template = ({
 			</div>
 		`, () => html`
 			${Typography({
-				size,
 				semantics: "body",
 				content: ["None"],
 			}, context)}