Skip to content

Commit 545df43

Browse files
jawinnjawinn
authored
feat(icons)!: s2 icons - use latest workflow and ui icon sets (#3001)
* feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116)
1 parent 2637aa6 commit 545df43

File tree

155 files changed

+1319
-879
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

155 files changed

+1319
-879
lines changed

‎.changeset/clean-oranges-smell.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@spectrum-css/preview": major
3+
---
4+
5+
Updates Storybook to use the latest icon sets for Spectrum 2. Includes changes to the directories that
6+
are used for loading in the sprite sheet and the individual icons, as they have moved.
7+
8+
The global Icon Loader has been updated to apply the existing key name renaming from file names to icon
9+
names. This is now done once at the loader step, rather than each time within the Icon component template.
10+
The loader also now excludes the handful of 22x20 workflow icons, as these are not yet handled within the
11+
design system.

‎.changeset/olive-tools-hang.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
"@spectrum-css/ui-icons": major
3+
---
4+
5+
# Breaking change
6+
7+
Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG asset that included both versions to be toggled with classes via CSS (found in folder`combined`). Icons in v2 no longer have multiple sizes and all assets are sourced from a single folder`svg` which can be found in the `dist` directory of this workspace. **Raw SVG assets can no longer be sourced from the top-level of the workspace and must be loaded from `@spectrum-css/ui-icons/dist/svg/*.svg` instead.** Please find below an outline of the new, deprecated, and unchanged icons.
8+
9+
| Icon name | Migration notes |
10+
| ----------------- | --------------- |
11+
| Arrow75 | Deprecated |
12+
| Arrow100 | - |
13+
| Arrow200 | Deprecated |
14+
| Arrow300 | Deprecated |
15+
| Arrow400 | - |
16+
| Arrow500 | Deprecated |
17+
| Arrow600 | Deprecated |
18+
| Asterisk75 | Deprecated |
19+
| Asterisk100 | - |
20+
| Asterisk200 | - |
21+
| Asterisk300 | - |
22+
| Checkmark50 | - |
23+
| Checkmark75 | - |
24+
| Checkmark100 | - |
25+
| Checkmark200 | - |
26+
| Checkmark300 | - |
27+
| Checkmark400 | - |
28+
| Checkmark500 | Deprecated |
29+
| Checkmark600 | Deprecated |
30+
| Chevron50 | - |
31+
| Chevron75 | - |
32+
| Chevron100 | - |
33+
| Chevron200 | - |
34+
| Chevron300 | - |
35+
| Chevron400 | - |
36+
| Chevron500 | Deprecated |
37+
| Chevron600 | Deprecated |
38+
| CornerTriangle75 | - |
39+
| CornerTriangle100 | - |
40+
| CornerTriangle200 | - |
41+
| CornerTriangle300 | - |
42+
| Cross75 | - |
43+
| Cross100 | - |
44+
| Cross200 | - |
45+
| Cross300 | - |
46+
| Cross400 | - |
47+
| Cross500 | - |
48+
| Cross600 | - |
49+
| Dash50 | - |
50+
| Dash75 | - |
51+
| Dash100 | - |
52+
| Dash200 | - |
53+
| Dash300 | - |
54+
| Dash400 | Deprecated |
55+
| Dash500 | Deprecated |
56+
| Dash600 | Deprecated |
57+
| SingleGripper | Deprecated |
58+
| DoubleGripper | Deprecated |
59+
| TripleGripper | Deprecated |

‎.changeset/tame-knives-train.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/icon": major
3+
---
4+
5+
Updates the icon component to use the new Spectrum 2 icon sets. The `.spectrum-UIIcon--medium` and `.spectrum-UIIcon--large` classes have been removed, as UI icons are now delivered with a single SVG. The color property also now makes use of the `--iconPrimary` custom property that is defined in some of the SVG files. Storybook has been updated to use and load the new SVGs, whose name format and directories have changed.

‎.env.example

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,6 @@ WATCH_MODE=true
2020
NX_VERBOSE_LOGGING=false
2121
NX_SKIP_NX_CACHE=false
2222
NX_PERF_LOGGING=false
23+
24+
ARTIFACTORY_API_KEY=
25+
ARTIFACTORY_API_TOKEN=

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
dist
22
!dist/metadata.json
33
!tokens/dist/json/*
4+
!ui-icons/dist
45

56
# Not committing the map assets, these are dev-only
67
*.map

‎.storybook/decorators/icon-sprites.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Used in the icon sprite decorator to inject the sprite sheets into the document
2-
import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw";
2+
import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/assets/svg-spriteSheet/icons.svg?raw";
33
import uiSprite from "@spectrum-css/ui-icons/dist/spectrum-css-icons.svg?raw";
44
import { makeDecorator, useEffect } from "@storybook/preview-api";
55

@@ -14,9 +14,6 @@ export const withIconSpriteSheet = makeDecorator({
1414
loaded = {},
1515
} = context;
1616

17-
// Load the icons into the window object
18-
if (loaded.icons) window.icons = loaded.icons;
19-
2017
useEffect(() => {
2118
// Inject the sprite sheets into the document
2219
let sprite = document.getElementById("spritesheets");

‎.storybook/loaders/icon-loader.js

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,55 @@
1-
export const IconLoader = async () => ({
2-
icons: {
3-
workflow: {
4-
medium: await import.meta.glob(
5-
"/node_modules/@adobe/spectrum-css-workflow-icons/dist/18/*.svg",
1+
import { cleanUiIconName, cleanWorkflowIconName } from "@spectrum-css/icon/stories/utilities.js";
2+
3+
/**
4+
* Loads all SVG files from both icon sets, and stores a string with the SVG markup.
5+
*
6+
* Excludes "22x20" workflow icons as they are not yet used within the design system.
7+
*
8+
* @see https://storybook.js.org/docs/writing-stories/loaders
9+
* @see https://vite.dev/guide/features#glob-import
10+
*/
11+
export const IconLoader = async () => {
12+
let iconData = {
13+
icons: {
14+
workflow: await import.meta.glob(
15+
[
16+
"/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*.svg",
17+
"!/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*_22x20*.svg",
18+
],
619
{
720
eager: true,
821
query: "?raw",
922
import: "default",
1023
}
1124
),
12-
large: await import.meta.glob(
13-
"/node_modules/@adobe/spectrum-css-workflow-icons/dist/24/*.svg",
25+
ui: await import.meta.glob(
26+
"/node_modules/@spectrum-css/ui-icons/dist/svg/*.svg",
1427
{
1528
eager: true,
1629
query: "?raw",
1730
import: "default",
1831
}
1932
),
2033
},
21-
ui: {
22-
medium: await import.meta.glob(
23-
"/node_modules/@spectrum-css/ui-icons/dist/medium/*.svg",
24-
{
25-
eager: true,
26-
query: "?raw",
27-
import: "default",
28-
}
29-
),
30-
large: await import.meta.glob(
31-
"/node_modules/@spectrum-css/ui-icons/dist/large/*.svg",
32-
{
33-
eager: true,
34-
query: "?raw",
35-
import: "default",
36-
}
37-
),
38-
},
39-
},
40-
});
34+
};
35+
36+
/**
37+
* Changes all keys in the IconLoader object to be just the cleaned icon name used within our Storybook's Icon component,
38+
* instead of the full file name and directory that was loaded.
39+
*
40+
* E.g. "/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/S2_Icon_3DAsset_20_N.svg" would become just "3DAsset".
41+
*/
42+
iconData.icons.workflow = Object.fromEntries(
43+
Object.entries(iconData.icons.workflow).map(
44+
([key, value]) => [cleanWorkflowIconName(key.split("/").pop()), value]
45+
)
46+
);
47+
48+
iconData.icons.ui = Object.fromEntries(
49+
Object.entries(iconData.icons.ui).map(
50+
([key, value]) => [cleanUiIconName(key.split("/").pop()), value]
51+
)
52+
);
53+
54+
return iconData;
55+
};

‎.storybook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"build": "yarn docs:report && cross-env NODE_ENV=development storybook build --stats-json --config-dir ."
4040
},
4141
"dependencies": {
42-
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
42+
"@adobe/spectrum-css-workflow-icons": "^4.0.0",
4343
"@spectrum-css/bundle": "workspace:^",
4444
"@spectrum-css/tokens": "workspace:^",
4545
"@spectrum-css/ui-icons": "workspace:^"

‎components/icon/dist/metadata.json

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@
1111
".spectrum-Icon--sizeXXL",
1212
".spectrum-Icon--sizeXXS",
1313
".spectrum-UIIcon",
14-
".spectrum-UIIcon--large",
15-
".spectrum-UIIcon--medium",
1614
".spectrum-UIIcon-ArrowDown100",
1715
".spectrum-UIIcon-ArrowDown200",
1816
".spectrum-UIIcon-ArrowDown300",
@@ -105,9 +103,7 @@
105103
"--mod-icon-block-size",
106104
"--mod-icon-color",
107105
"--mod-icon-inline-size",
108-
"--mod-icon-size",
109-
"--mod-ui-icon-large-display",
110-
"--mod-ui-icon-medium-display"
106+
"--mod-icon-size"
111107
],
112108
"component": [
113109
"--spectrum-icon-block-size",
@@ -160,8 +156,6 @@
160156
"--spectrum-dash-icon-size-500",
161157
"--spectrum-dash-icon-size-600",
162158
"--spectrum-dash-icon-size-75",
163-
"--spectrum-ui-icon-large-display",
164-
"--spectrum-ui-icon-medium-display",
165159
"--spectrum-workflow-icon-size-100",
166160
"--spectrum-workflow-icon-size-200",
167161
"--spectrum-workflow-icon-size-300",

‎components/icon/icons.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313

1414
.spectrum-Icon,
1515
.spectrum-UIIcon {
16+
/* stylelint-disable-next-line custom-property-pattern -- variable name defined by A4U output */
17+
--iconPrimary: var(--mod-icon-color, currentColor);
18+
1619
--spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
1720
--spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
1821

@@ -24,7 +27,8 @@
2427
color: var(--mod-icon-color, inherit);
2528

2629
/* Fill should match the current text color. */
27-
fill: currentColor;
30+
/* stylelint-disable-next-line custom-property-pattern -- map this to the same value as what's used by the icon's SVG code */
31+
fill: var(--iconPrimary);
2832

2933
/* Don't catch clicks or hover, otherwise they may not escape the SVG. */
3034
pointer-events: none;

‎components/icon/stories/icon.mdx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,26 @@ The SVG icons used in Spectrum CSS are a part of two different icon sets, "workf
2020

2121
### Workflow icons
2222

23-
The workflow icon set contains several hundred icons to choose from.
24-
These icons can be seen in use within Button, Action button, Menu, and many other components.
23+
The workflow icon set contains several hundred icons to choose from. For a full list of all icons within this set, see **[workflow icons](/story/components-icon--workflow)**.
24+
These icons can be seen in use within button, action button, menu, and many other components.
2525
Here is an example with just a few of these icons:
2626

2727
<Canvas of={IconStories.WorkflowDefault} />
2828

29-
These icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set:
29+
#### T-shirt sizing
30+
31+
Workflow icons use "t-shirt" sizes, e.g. small or medium, that are the same width and height for each icon in the set. Note that the
32+
extra-extra-large size is currently _not_ part of the design specifications and may be deprecated in the near future:
3033

3134
<Canvas of={IconStories.WorkflowSizing} />
3235

3336
### UI icons
3437

3538
UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within
36-
the [Combobox component](?path=/docs/components-combobox--docs) is one example.
39+
the [Combobox component](/docs/components-combobox--docs) is one example. For a full list of all icons within this
40+
set, see **[ui icons](/story/components-icon--ui)**.
41+
42+
#### Numbered sizing
3743

3844
Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing.
3945
They have unique classes applied that set their size in CSS. For example:
@@ -49,6 +55,8 @@ An example of some UI icons in their available sizes:
4955

5056
<Canvas of={IconStories.UIDefault} />
5157

58+
#### Directional icons
59+
5260
Directional UI icons such as Chevron and Arrow have classes for each direction. They rotate the same base icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used
5361
with:
5462

0 commit comments

Comments
 (0)