feat(taggroup)!: migrate to spectrum-tokens

BREAKING CHANGE: migrates TagGroup to use `@adobe/spectrum-tokens`

Update build related files to migrate to use of core tokens.

Use new global tokens for margin, and simplify usage. Adds mod prefixed
custom properties and improves docs with mod section and description
text pulled from the tag guidelines.

Updates example markup and migration guide.

fix(taggroup): allow tag items to wrap to the next line

Tag group flex items were not previously wrapping and would overflow and
cut off at smaller screen sizes. This now follows the tag guidelines to
wrap items to the next line. And adds a story that shows wrapping.

CSS-500

Author: jawinn

components/taggroup/gulpfile.js

@@ -1 +1 @@
-module.exports = require("@spectrum-css/component-builder");
+module.exports = require('@spectrum-css/component-builder-simple');

components/taggroup/index.css

@@ -11,20 +11,19 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-TagGroup {
-  /* todo: get this added back to DNA */
-  --spectrum-taggroup-tag-gap-x: var(--spectrum-global-dimension-size-100);
-  --spectrum-taggroup-tag-gap-y: var(--spectrum-global-dimension-size-100);
+  --spectrum-tag-group-item-margin-block: var(--spectrum-spacing-75);
+  --spectrum-tag-group-item-margin-inline: var(--spectrum-spacing-75);
 }
 
 .spectrum-TagGroup {
   display: inline-flex;
-
+  flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .spectrum-TagGroup-item {
-  margin-block: calc(var(--spectrum-taggroup-tag-gap-y)/2);
-  margin-inline: calc(var(--spectrum-taggroup-tag-gap-x)/2);
+  margin-block: var(--mod-tag-group-item-margin-block, var(--spectrum-tag-group-item-margin-block));
+  margin-inline: var(--mod-tag-group-item-margin-inline, var(--spectrum-tag-group-item-margin-inline));
 }

components/taggroup/metadata/mods.md

@@ -0,0 +1,4 @@
+| Modifiable Custom Properties         |
+| ------------------------------------ |
+| `--mod-tag-group-item-margin-block`  |
+| `--mod-tag-group-item-margin-inline` |

components/taggroup/metadata/taggroup.yml

@@ -1,7 +1,7 @@
 {
   "name": "@spectrum-css/taggroup",
-  "version": "3.3.64",
-  "description": "The Spectrum CSS tags component",
+  "version": "4.0.0-beta.0",
+  "description": "The Spectrum CSS tag group component",
   "license": "Apache-2.0",
   "author": "Adobe",
   "homepage": "https://opensource.adobe.com/spectrum-css/taggroup",
@@ -18,17 +18,17 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/clearbutton": ">=1",
-    "@spectrum-css/tag": ">=6",
-    "@spectrum-css/vars": ">=9"
+    "@spectrum-css/clearbutton": ">=5",
+    "@spectrum-css/tag": ">=8",
+    "@spectrum-css/tokens": ">=11"
   },
   "devDependencies": {
-    "@spectrum-css/avatar": "^6.0.48",
-    "@spectrum-css/clearbutton": "^2.0.0",
-    "@spectrum-css/component-builder": "^4.0.14",
+    "@spectrum-css/avatar": "^6.0.47",
+    "@spectrum-css/clearbutton": "^5.0.0",
+    "@spectrum-css/component-builder-simple": "^2.0.17",
     "@spectrum-css/icon": "^4.0.1",
-    "@spectrum-css/tag": "^8.0.1",
-    "@spectrum-css/vars": "^9.0.8",
+    "@spectrum-css/tag": "^8.0.0",
+    "@spectrum-css/tokens": "^11.2.2",
     "gulp": "^4.0.0"
   },
   "publishConfig": {

components/taggroup/package.json

@@ -37,6 +37,14 @@ export default {
 			},
 			control: "boolean",
 		},
+		customStyles: {
+			description: "Custom styles for testing the story, applied to the parent element.",
+			table: {
+				type: { summary: "object" },
+				category: "Storybook Only",
+			},
+			if: { arg: 'customStyles' }
+		}
 	},
 	args: {
 		rootClass: "spectrum-TagGroup",
@@ -88,3 +96,42 @@ Removable.args = {
 		},
 	],
 };
+
+export const OverflowItems = Template.bind({});
+OverflowItems.parameters = {
+	docs: {
+		description: {
+			story:
+				"When horizontal space is limited in a tag group, the individual tags wrap to form another line.",
+		},
+	},
+};
+OverflowItems.args = {
+	size: "m",
+	isRemovable: true,
+	isEmphasized: false,
+	customStyles: {'max-width': '300px'},
+	items: [
+		{
+			label: "Tag 1 Example",
+		},
+		{
+			label: "Tag 2 Example",
+		},
+		{
+			label: "Tag 3 Example",
+		},
+		{
+			label: "Tag 4",
+		},
+		{
+			label: "Tag 5",
+		},
+		{
+			label: "Tag 6",
+		},
+		{
+			label: "Tag 7",
+		},
+	],
+};

components/taggroup/skin.css

@@ -1,18 +1,19 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import { Template as Tag } from "@spectrum-css/tag/stories/template.js";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
 	rootClass = "spectrum-TagGroup",
 	ariaLabel,
 	items,
 	isRemovable = false,
 	customClasses = [],
+	customStyles = {},
 	...globals
 }) => {
 	return html`
@@ -21,6 +22,7 @@ export const Template = ({
 				[rootClass]: true,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
+			style=${styleMap(customStyles)}
 			role="list"
 			aria-label=${ifDefined(ariaLabel)}
 		>

components/taggroup/stories/taggroup.stories.js

@@ -0,0 +1 @@
+@container (--system: express) {}

components/taggroup/stories/template.js

@@ -0,0 +1 @@
+@container (--system: spectrum) {}