feat(icon, ui-icons): add missing ui icons and sizing classes

.changeset/tiny-candles-win.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/icon": minor
+---
+
+Updates the icon component to use size tokens for newly added ui icons.

.changeset/upset-roses-live.md

@@ -0,0 +1,90 @@
+---
+"@spectrum-css/ui-icons": minor
+---
+
+Makes updates to the initial S2 icons update to include some additional icons with names as follows:
+
+| Icon name         |
+| ----------------- |
+| Add50             |
+| Add75             |
+| Add100            |
+| Add200            |
+| Add300            |
+| DragHandle75      |
+| DragHandle100     |
+| DragHandle200     |
+| DragHandle300     |
+| Gripper100        |
+| LinkOut100        |
+| LinkOut200        |
+| LinkOut300        |
+| LinkOut400        |
+
+Such that the full set of changes for Spectrum 2 is as follows:
+
+| Icon name         | Migration notes |
+| ----------------- | --------------- |
+| Add50             | **New**         |
+| Add75             | **New**         |
+| Add100            | **New**         |
+| Add200            | **New**         |
+| Add300            | **New**         |
+| Arrow75           | Deprecated      |
+| Arrow100          | -               |
+| Arrow200          | Deprecated      |
+| Arrow300          | Deprecated      |
+| Arrow400          | -               |
+| Arrow500          | Deprecated      |
+| Arrow600          | Deprecated      |
+| Asterisk75        | Deprecated      |
+| Asterisk100       | -               |
+| Asterisk200       | -               |
+| Asterisk300       | -               |
+| Checkmark50       | -               |
+| Checkmark75       | -               |
+| Checkmark100      | -               |
+| Checkmark200      | -               |
+| Checkmark300      | -               |
+| Checkmark400      | -               |
+| Checkmark500      | Deprecated      |
+| Checkmark600      | Deprecated      |
+| Chevron50         | -               |
+| Chevron75         | -               |
+| Chevron100        | -               |
+| Chevron200        | -               |
+| Chevron300        | -               |
+| Chevron400        | -               |
+| Chevron500        | Deprecated      |
+| Chevron600        | Deprecated      |
+| CornerTriangle75  | -               |
+| CornerTriangle100 | -               |
+| CornerTriangle200 | -               |
+| CornerTriangle300 | -               |
+| Cross75           | -               |
+| Cross100          | -               |
+| Cross200          | -               |
+| Cross300          | -               |
+| Cross400          | -               |
+| Cross500          | -               |
+| Cross600          | -               |
+| Dash50            | -               |
+| Dash75            | -               |
+| Dash100           | -               |
+| Dash200           | -               |
+| Dash300           | -               |
+| Dash400           | Deprecated      |
+| Dash500           | Deprecated      |
+| Dash600           | Deprecated      |
+| DragHandle75      | **New**         |
+| DragHandle100     | **New**         |
+| DragHandle200     | **New**         |
+| DragHandle300     | **New**         |
+| Gripper100        | **New**         |
+| SingleGripper     | Deprecated      |
+| DoubleGripper     | Deprecated      |
+| TripleGripper     | Deprecated      |
+| LinkOut100        | **New**         |
+| LinkOut200        | **New**         |
+| LinkOut300        | **New**         |
+| LinkOut400        | **New**         |

components/icon/dist/metadata.json

@@ -11,6 +11,11 @@
     ".spectrum-Icon--sizeXXL",
     ".spectrum-Icon--sizeXXS",
     ".spectrum-UIIcon",
+    ".spectrum-UIIcon-Add100",
+    ".spectrum-UIIcon-Add200",
+    ".spectrum-UIIcon-Add300",
+    ".spectrum-UIIcon-Add50",
+    ".spectrum-UIIcon-Add75",
     ".spectrum-UIIcon-ArrowDown100",
     ".spectrum-UIIcon-ArrowDown200",
     ".spectrum-UIIcon-ArrowDown300",
@@ -97,7 +102,16 @@
     ".spectrum-UIIcon-Dash50",
     ".spectrum-UIIcon-Dash500",
     ".spectrum-UIIcon-Dash600",
-    ".spectrum-UIIcon-Dash75"
+    ".spectrum-UIIcon-Dash75",
+    ".spectrum-UIIcon-DragHandle100",
+    ".spectrum-UIIcon-DragHandle200",
+    ".spectrum-UIIcon-DragHandle300",
+    ".spectrum-UIIcon-DragHandle75",
+    ".spectrum-UIIcon-Gripper100",
+    ".spectrum-UIIcon-LinkOut100",
+    ".spectrum-UIIcon-LinkOut200",
+    ".spectrum-UIIcon-LinkOut300",
+    ".spectrum-UIIcon-LinkOut400"
   ],
   "modifiers": [
     "--mod-icon-block-size",
@@ -111,6 +125,11 @@
     "--spectrum-icon-size"
   ],
   "global": [
+    "--spectrum-add-icon-size-100",
+    "--spectrum-add-icon-size-200",
+    "--spectrum-add-icon-size-300",
+    "--spectrum-add-icon-size-50",
+    "--spectrum-add-icon-size-75",
     "--spectrum-arrow-icon-size-100",
     "--spectrum-arrow-icon-size-200",
     "--spectrum-arrow-icon-size-300",
@@ -156,6 +175,15 @@
     "--spectrum-dash-icon-size-500",
     "--spectrum-dash-icon-size-600",
     "--spectrum-dash-icon-size-75",
+    "--spectrum-drag-handle-icon-size-100",
+    "--spectrum-drag-handle-icon-size-200",
+    "--spectrum-drag-handle-icon-size-300",
+    "--spectrum-drag-handle-icon-size-75",
+    "--spectrum-gripper-icon-size-100",
+    "--spectrum-link-out-icon-size-100",
+    "--spectrum-link-out-icon-size-200",
+    "--spectrum-link-out-icon-size-300",
+    "--spectrum-link-out-icon-size-400",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",

components/icon/stories/template.js

@@ -171,9 +171,9 @@ export const FullIconSetTemplate = (args, context) => {
 			})}
 		>
 			${when(args.setName === "workflow", () => {
-				return workflowIconsCleaned.sort().map((iconName) => IconWithLabelTemplate({ ...args, iconName }, context));
+				return workflowIconsCleaned.map((iconName) => IconWithLabelTemplate({ ...args, iconName }, context));
 			}, () => {
-				return uiIconsWithDirections.sort().map((iconName) => IconWithLabelTemplate({ ...args, uiIconName: iconName }, context));
+				return uiIconsWithDirections.map((iconName) => IconWithLabelTemplate({ ...args, uiIconName: iconName }, context));
 			})}
 		</div>
 	`;

components/icon/ui-icons.css

@@ -414,3 +414,63 @@
 .spectrum-UIIcon-Asterisk300 {
 	--spectrum-icon-size: var(--spectrum-asterisk-icon-size-300);
 }
+
+/* Add */
+.spectrum-UIIcon-Add50 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-50);
+}
+
+.spectrum-UIIcon-Add75 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-75);
+}
+
+.spectrum-UIIcon-Add100 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-100);
+}
+
+.spectrum-UIIcon-Add200 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-200);
+}
+
+.spectrum-UIIcon-Add300 {
+	--spectrum-icon-size: var(--spectrum-add-icon-size-300);
+}
+
+/* Drag handle */
+.spectrum-UIIcon-DragHandle75 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-75);
+}
+
+.spectrum-UIIcon-DragHandle100 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-100);
+}
+
+.spectrum-UIIcon-DragHandle200 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-200);
+}
+
+.spectrum-UIIcon-DragHandle300 {
+	--spectrum-icon-size: var(--spectrum-drag-handle-icon-size-300);
+}
+
+/* Gripper */
+.spectrum-UIIcon-Gripper100 {
+	--spectrum-icon-size: var(--spectrum-gripper-icon-size-100);
+}
+
+/* Link out */
+.spectrum-UIIcon-LinkOut100 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-100);
+}
+
+.spectrum-UIIcon-LinkOut200 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-200);
+}
+
+.spectrum-UIIcon-LinkOut300 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-300);
+}
+
+.spectrum-UIIcon-LinkOut400 {
+	--spectrum-icon-size: var(--spectrum-link-out-icon-size-400);
+}

ui-icons/README.md

@@ -42,6 +42,11 @@ Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG
 
 | Icon name         | Migration notes |
 | ----------------- | --------------- |
+| Add50             | **New**         |
+| Add75             | **New**         |
+| Add100            | **New**         |
+| Add200            | **New**         |
+| Add300            | **New**         |
 | Arrow75           | Deprecated      |
 | Arrow100          | -               |
 | Arrow200          | Deprecated      |
@@ -88,6 +93,15 @@ Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG
 | Dash400           | Deprecated      |
 | Dash500           | Deprecated      |
 | Dash600           | Deprecated      |
+| DragHandle75      | **New**         |
+| DragHandle100     | **New**         |
+| DragHandle200     | **New**         |
+| DragHandle300     | **New**         |
+| Gripper100        | **New**         |
 | SingleGripper     | Deprecated      |
 | DoubleGripper     | Deprecated      |
 | TripleGripper     | Deprecated      |
+| LinkOut100        | **New**         |
+| LinkOut200        | **New**         |
+| LinkOut300        | **New**         |
+| LinkOut400        | **New**         |

ui-icons/dist/icons.json

@@ -1,4 +1,9 @@
 [
+  "Add50.svg",
+  "Add75.svg",
+  "Add100.svg",
+  "Add200.svg",
+  "Add300.svg",
   "Arrow100.svg",
   "Arrow400.svg",
   "Asterisk100.svg",
@@ -31,5 +36,14 @@
   "Dash75.svg",
   "Dash100.svg",
   "Dash200.svg",
-  "Dash300.svg"
+  "Dash300.svg",
+  "DragHandle75.svg",
+  "DragHandle100.svg",
+  "DragHandle200.svg",
+  "DragHandle300.svg",
+  "Gripper100.svg",
+  "LinkOut100.svg",
+  "LinkOut200.svg",
+  "LinkOut300.svg",
+  "LinkOut400.svg"
 ]