feat(icon,ui-icons)!: migrate the icon compiler to a distinct package (#2343)

BREAKING CHANGE:
 - @spectrum-css/icon will no longer contain SVG assets; it will be a purely CSS package with all SVG assets migrated to the new @spectrum-css/ui-icons package.
- NEW: @spectrum-css/ui-icons package for all SVG icons in the UI set.

Author: castastrophe

.github/actions/file-diff/index.js

@@ -113,19 +113,12 @@ async function run() {
 				if (hasDiff) {
 					// If a diff path was provided and the component folder doesn't exist,
 					// report that the compiled assets were removed
-					if (!existsSync(join(diffPath, "components", name))) {
+					if (
+						!existsSync(join(diffPath, "components", name)) ||
+						(totalSize === 0 && totalDiffSize > 0)
+					) {
 						data.push("🚨 package deleted/moved/renamed");
-						summaryTable.push(data);
-						return;
-					}
-
-					if (totalSize > 0 && totalDiffSize === 0) {
-						data.push("⚠️ assets deleted/moved/renamed");
-						summaryTable.push(data);
-						return;
-					}
-
-					if (totalSize === 0 && totalDiffSize > 0) {
+					} else if (totalSize > 0 && totalDiffSize === 0) {
 						data.push("🎉 new package");
 					} else {
 						data.push(printChange(totalDiffSize - totalSize));
@@ -136,16 +129,15 @@ async function run() {
 
 				md.push(
 					...[
-						["File", "Size", ...(hasDiff ? ["Original size", "Δ", "Δ%"] : [])],
-						[" - ", " - ", ...(hasDiff ? [" - ", " - ", " - "] : [])],
+						["File", "Size", ...(hasDiff ? ["Base", "Δ"] : [])],
+						[" - ", " - ", ...(hasDiff ? [" - ", " - "] : [])],
 						[
-							"**Total changes**",
+							"**Total**",
 							bytesToSize(totalSize),
 							...(hasDiff
 								? [
 									bytesToSize(totalDiffSize),
-									printChange(totalDiffSize - totalSize),
-									printPercentChange((totalDiffSize - totalSize) / totalSize),
+									`${printChange(totalDiffSize - totalSize)} (${printPercentChange((totalDiffSize - totalSize) / totalSize)})`,
 								]
 								: []),
 						],
@@ -158,20 +150,17 @@ async function run() {
 							) => {
 								// @todo readable filename can be linked to html diff of the file?
 								// https://github.com/adobe/spectrum-css/pull/2093/files#diff-6badd53e481452b5af234953767029ef2e364427dd84cdeed25f5778b6fca2e6
-								const row = [
-									readableFilename,
-									byteSize === 0 ? "**removed**" : bytesToSize(byteSize),
-									diffByteSize === 0 ? "" : bytesToSize(diffByteSize),
+								return [
+									...table,
+									[
+										readableFilename,
+										byteSize === 0 && diffByteSize > 0 ? "**removed**" : bytesToSize(byteSize),
+										...(hasDiff ? [
+											bytesToSize(diffByteSize),
+											`${printChange(diffByteSize - byteSize)} (${printPercentChange((diffByteSize - byteSize) / byteSize)})`,
+										] : []),
+									]
 								];
-
-								if (hasDiff && diffByteSize > 0) {
-									if (byteSize === 0) row.push("", "");
-									else {
-										row.push(printChange(diffByteSize - byteSize), "");
-									}
-								}
-
-								return [...table, row];
 							},
 							[]
 						)
@@ -248,10 +237,8 @@ run();
  */
 const printChange = function (difference) {
 	return difference === 0
-		? `No change 🎉`
-		: `${difference > 0 ? "+" : "-"}${bytesToSize(Math.abs(difference))} ${
-				difference > 0 ? "⬆" : "⬇"
-		  }`;
+		? `-`
+		: `${difference > 0 ? "⬆" : "⬇"} ${bytesToSize(Math.abs(difference))}`;
 };
 
 /**
@@ -262,9 +249,8 @@ const printChange = function (difference) {
  * @returns {string}
  */
 const printPercentChange = function (delta) {
-	if (delta === 0) return `0%`;
-	const direction = delta > 0 ? "+" : "-";
-	return `${direction}${Math.abs(delta * 100).toFixed(2)}%`;
+	if (delta === 0) return `no change`;
+	return `${Math.abs(delta * 100).toFixed(2)}%`;
 };
 
 /**

.github/workflows/compare-results.yml

@@ -73,17 +73,17 @@ jobs:
               shell: bash
               run: yarn install --frozen-lockfile --cache-folder .cache/yarn
 
-            - name: Download build artifacts for head ${{ inputs.head-sha }}
+            - name: Download build artifacts for head
               uses: actions/download-artifact@v3
               with:
                   name: ubuntu-latest-node18-compiled-assets-${{ inputs.head-sha }}
-                  path: ${{ github.workspace }}/${{ inputs.head-sha }}/components
+                  path: ${{ github.workspace }}/${{ inputs.head-sha }}
 
-            - name: Download build artifacts for base ${{ inputs.base-sha }}
+            - name: Download build artifacts for base
               uses: actions/download-artifact@v3
               with:
                   name: ubuntu-latest-node18-compiled-assets-${{ inputs.base-sha }}
-                  path: ${{ github.workspace }}/${{ inputs.base-sha }}/components
+                  path: ${{ github.workspace }}/${{ inputs.base-sha }}
 
             - name: Compare compiled output file size
               id: compare
@@ -92,7 +92,10 @@ jobs:
               with:
                   path: ${{ github.workspace }}/${{ inputs.head-sha }}/
                   diff-path: ${{ github.workspace }}/${{ inputs.base-sha }}/
-                  file-glob-pattern: components/*/dist/**
+                  file-glob-pattern: |
+                    components/*/dist/**
+                    tokens/dist/**
+                    ui-icons/dist/**
                   token: ${{ secrets.GITHUB_TOKEN }}
 
     fetch-build-artifacts:
@@ -161,16 +164,13 @@ jobs:
               uses: actions/cache@v3
               with:
                   path: |
-                      components/*/dist/**
+                    components/*/dist/**
+                    tokens/dist/**
+                    ui-icons/dist/**
                   key: ${{ steps.derive-key.outputs.key }}
 
-            - name: Build components
-              if: ${{ matrix.branch == inputs.base-sha && steps.cache-build.outputs.cache-hit != 'true' }}
-              shell: bash
-              run: yarn build
-
-            - name: Build components
-              if: ${{ matrix.branch == inputs.head-sha && steps.cache-build.outputs.cache-hit != 'true' }}
+            - name: Build
+              if: ${{ steps.cache-build.outputs.cache-hit != 'true' }}
               shell: bash
               run: yarn build
 
@@ -179,7 +179,9 @@ jobs:
               uses: actions/upload-artifact@v3
               with:
                   path: |
-                      ${{ github.workspace }}/components/*/dist/**
+                    ${{ github.workspace }}/components/*/dist/**
+                    ${{ github.workspace }}/tokens/dist/**
+                    ${{ github.workspace }}/ui-icons/dist/**
                   name: ${{ steps.derive-key.outputs.key }}
                   # this is important, it lets us catch if the build failed silently
                   # by alterting us that no compiled assets were generated

.storybook/main.js

@@ -8,7 +8,6 @@ const componentPkgs = readdirSync(componentsPath, {
 	.map((dirent) => dirent.name);
 module.exports = {
 	stories: [
-		"../components/*/stories/*.stories.mdx",
 		"../components/*/stories/*.stories.@(js|jsx|ts|tsx)",
 	],
 	rootDir: "../",

.storybook/package.json

@@ -9,9 +9,9 @@
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.5.4",
     "@spectrum-css/expressvars": "^3.0.9",
-    "@spectrum-css/icon": "^4.0.5",
     "@spectrum-css/site": "^4.0.2",
     "@spectrum-css/tokens": "^13.0.5",
+    "@spectrum-css/ui-icons": "^0.0.0",
     "@spectrum-css/vars": "^9.0.8"
   },
   "devDependencies": {

README.md

@@ -149,13 +149,13 @@ For most use cases, you'll want to use `spectrum-css-icons.svg` so you have supp
 ```js
 <script src="node_modules/loadicons/index.js"></script>
 <script>
-  loadIcons('node_modules/@spectrum-css/icon/dist/spectrum-css-icons.svg');
+  loadIcons('node_modules/@spectrum-css/ui-icons/dist/spectrum-css-icons.svg');
 </script>
 ```
 
 Based on which scales you'll be using, you can choose to load different files:
 
-- `@spectrum-css/icon/dist/spectrum-css-icons.svg` - Both medium and large icons for responsive UIs that support both `.spectrum--medium` and `.spectrum--large`
+- `@spectrum-css/ui-icons/dist/spectrum-css-icons.svg` - Both medium and large icons for responsive UIs that support both `.spectrum--medium` and `.spectrum--large`
 - `@spectrum-css/icon/dist/spectrum-css-icons-medium.svg` - Medium icons only, supports `.spectrum--medium` only
 - `@spectrum-css/icon/dist/spectrum-css-icons-large.svg` - Large icons only, supports `.spectrum--large` only
 

components/icon/README.md

@@ -1,3 +1,3 @@
 # `@spectrum-css/icon`
 
-The icons component contains all UI icons used for components as well as the CSS for UI and workflow icons.
+The icons component contains the CSS for UI and workflow icons.