From 4873b91181168cd9629bf0a58df2a3f01c37887d Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 27 May 2025 13:57:57 -0500 Subject: [PATCH 1/4] feat(icon): add new ui icon tokens and classes to ui-icons.css --- components/icon/ui-icons.css | 60 ++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css index 000c6671d44..aad63912db1 100644 --- a/components/icon/ui-icons.css +++ b/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); +} From 6239f66328ff2c4c2a0fabd1d80662c1775d6f4e Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Tue, 27 May 2025 16:45:10 -0500 Subject: [PATCH 2/4] feat(icon): re-add removed icon files --- components/icon/dist/metadata.json | 30 +++++++++++++- ui-icons/README.md | 14 +++++++ ui-icons/dist/icons.json | 16 ++++++- ui-icons/dist/spectrum-css-icons.svg | 62 ++++++++++++++++++++++++++++ ui-icons/dist/svg/Add100.svg | 3 ++ ui-icons/dist/svg/Add200.svg | 3 ++ ui-icons/dist/svg/Add300.svg | 3 ++ ui-icons/dist/svg/Add50.svg | 3 ++ ui-icons/dist/svg/Add75.svg | 3 ++ ui-icons/dist/svg/DragHandle100.svg | 8 ++++ ui-icons/dist/svg/DragHandle200.svg | 8 ++++ ui-icons/dist/svg/DragHandle300.svg | 8 ++++ ui-icons/dist/svg/DragHandle75.svg | 8 ++++ ui-icons/dist/svg/Gripper100.svg | 3 ++ ui-icons/dist/svg/LinkOut100.svg | 3 ++ ui-icons/dist/svg/LinkOut200.svg | 3 ++ ui-icons/dist/svg/LinkOut300.svg | 3 ++ ui-icons/dist/svg/LinkOut400.svg | 3 ++ 18 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 ui-icons/dist/svg/Add100.svg create mode 100644 ui-icons/dist/svg/Add200.svg create mode 100644 ui-icons/dist/svg/Add300.svg create mode 100644 ui-icons/dist/svg/Add50.svg create mode 100644 ui-icons/dist/svg/Add75.svg create mode 100644 ui-icons/dist/svg/DragHandle100.svg create mode 100644 ui-icons/dist/svg/DragHandle200.svg create mode 100644 ui-icons/dist/svg/DragHandle300.svg create mode 100644 ui-icons/dist/svg/DragHandle75.svg create mode 100644 ui-icons/dist/svg/Gripper100.svg create mode 100644 ui-icons/dist/svg/LinkOut100.svg create mode 100644 ui-icons/dist/svg/LinkOut200.svg create mode 100644 ui-icons/dist/svg/LinkOut300.svg create mode 100644 ui-icons/dist/svg/LinkOut400.svg diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 72722ba0b6b..c198ea0f89a 100644 --- a/components/icon/dist/metadata.json +++ b/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", diff --git a/ui-icons/README.md b/ui-icons/README.md index 61fa8d297a8..5076421c8a9 100644 --- a/ui-icons/README.md +++ b/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** | diff --git a/ui-icons/dist/icons.json b/ui-icons/dist/icons.json index 0d41c66f2c5..4db74cce6d3 100644 --- a/ui-icons/dist/icons.json +++ b/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" ] \ No newline at end of file diff --git a/ui-icons/dist/spectrum-css-icons.svg b/ui-icons/dist/spectrum-css-icons.svg index fe7a6df5107..bd6a6a5bbb3 100644 --- a/ui-icons/dist/spectrum-css-icons.svg +++ b/ui-icons/dist/spectrum-css-icons.svg @@ -1,4 +1,19 @@ + + + + + + + + + + + + + + + @@ -98,4 +113,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-icons/dist/svg/Add100.svg b/ui-icons/dist/svg/Add100.svg new file mode 100644 index 00000000000..e7ee1e377da --- /dev/null +++ b/ui-icons/dist/svg/Add100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Add200.svg b/ui-icons/dist/svg/Add200.svg new file mode 100644 index 00000000000..9b06a05fb02 --- /dev/null +++ b/ui-icons/dist/svg/Add200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Add300.svg b/ui-icons/dist/svg/Add300.svg new file mode 100644 index 00000000000..5bb196ecb15 --- /dev/null +++ b/ui-icons/dist/svg/Add300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Add50.svg b/ui-icons/dist/svg/Add50.svg new file mode 100644 index 00000000000..b579d36fe25 --- /dev/null +++ b/ui-icons/dist/svg/Add50.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Add75.svg b/ui-icons/dist/svg/Add75.svg new file mode 100644 index 00000000000..403ac24cd67 --- /dev/null +++ b/ui-icons/dist/svg/Add75.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/DragHandle100.svg b/ui-icons/dist/svg/DragHandle100.svg new file mode 100644 index 00000000000..264652db857 --- /dev/null +++ b/ui-icons/dist/svg/DragHandle100.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui-icons/dist/svg/DragHandle200.svg b/ui-icons/dist/svg/DragHandle200.svg new file mode 100644 index 00000000000..8c5bc6bafd9 --- /dev/null +++ b/ui-icons/dist/svg/DragHandle200.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui-icons/dist/svg/DragHandle300.svg b/ui-icons/dist/svg/DragHandle300.svg new file mode 100644 index 00000000000..0ad3a96f80b --- /dev/null +++ b/ui-icons/dist/svg/DragHandle300.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui-icons/dist/svg/DragHandle75.svg b/ui-icons/dist/svg/DragHandle75.svg new file mode 100644 index 00000000000..d92e06449c8 --- /dev/null +++ b/ui-icons/dist/svg/DragHandle75.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui-icons/dist/svg/Gripper100.svg b/ui-icons/dist/svg/Gripper100.svg new file mode 100644 index 00000000000..01f54f829e4 --- /dev/null +++ b/ui-icons/dist/svg/Gripper100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/LinkOut100.svg b/ui-icons/dist/svg/LinkOut100.svg new file mode 100644 index 00000000000..59c2f637488 --- /dev/null +++ b/ui-icons/dist/svg/LinkOut100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/LinkOut200.svg b/ui-icons/dist/svg/LinkOut200.svg new file mode 100644 index 00000000000..c0c5b0627d0 --- /dev/null +++ b/ui-icons/dist/svg/LinkOut200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/LinkOut300.svg b/ui-icons/dist/svg/LinkOut300.svg new file mode 100644 index 00000000000..df33010cb05 --- /dev/null +++ b/ui-icons/dist/svg/LinkOut300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/LinkOut400.svg b/ui-icons/dist/svg/LinkOut400.svg new file mode 100644 index 00000000000..d98e1fd7397 --- /dev/null +++ b/ui-icons/dist/svg/LinkOut400.svg @@ -0,0 +1,3 @@ + + + From a3259885976cec6ac580448bd13bd63fdfde1815 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 28 May 2025 11:09:47 -0500 Subject: [PATCH 3/4] chore(icon): remove additional sort fn --- components/icon/stories/template.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index 75826ee6d40..ae7e10a192f 100644 --- a/components/icon/stories/template.js +++ b/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)); })} `; From 69b8f90e817d52c8a2f8bda3cc74a895a28425e5 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 28 May 2025 14:30:11 -0500 Subject: [PATCH 4/4] chore(ui-icons, icon): changeset --- .changeset/tiny-candles-win.md | 5 ++ .changeset/upset-roses-live.md | 90 ++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 .changeset/tiny-candles-win.md create mode 100644 .changeset/upset-roses-live.md diff --git a/.changeset/tiny-candles-win.md b/.changeset/tiny-candles-win.md new file mode 100644 index 00000000000..dbed7db2f34 --- /dev/null +++ b/.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. diff --git a/.changeset/upset-roses-live.md b/.changeset/upset-roses-live.md new file mode 100644 index 00000000000..6e812c7515c --- /dev/null +++ b/.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** |