Skip to content

Commit

Permalink
fix(icon): incorporate diverged changes with fixes
Browse files Browse the repository at this point in the history 
Resolve major differences between main and the s2 icons branch after
rebase. Improves comments and handles/logs additional errors.

Updates icon loader and utilities to use new format without medium/large
scale, and changed icon directories.

Some notable fixes made after a couple issues were encountered:
- Replaces some deprecated S1 icons with S2 icons in docs example story.
- Fixes issue with wrong UI icon size sometimes being displayed in Icon
  Template (Arrow 100 was being replaced with Arrow 400).
- Fixes ordering with alphaNumericSort due to regex not matching
  • Loading branch information
@jawinn
jawinn committed Aug 16, 2024
1 parent 4c08d2d commit 988aa3a
Show file tree
Hide file tree
Showing 6 changed files with 556 additions and 415 deletions.
2 changes: 1 addition & 1 deletion .storybook/decorators/icon-sprites.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const withIconSpriteSheet = makeDecorator({
loaded = {},
} = context;

// Load the icons into the window object
// Store the icons data from the IconLoader in the window object.
if (loaded.icons) window.icons = loaded.icons;

useEffect(() => {
Expand Down
52 changes: 16 additions & 36 deletions .storybook/loaders/icon-loader.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,20 @@
export const IconLoader = async () => ({
icons: {
workflow: {
medium: await import.meta.glob(
"/node_modules/@adobe/spectrum-css-workflow-icons/dist/18/*.svg",
{
eager: true,
query: "?raw",
import: "default",
}
),
large: await import.meta.glob(
"/node_modules/@adobe/spectrum-css-workflow-icons/dist/24/*.svg",
{
eager: true,
query: "?raw",
import: "default",
}
),
},
ui: {
medium: await import.meta.glob(
"/node_modules/@spectrum-css/ui-icons/dist/medium/*.svg",
{
eager: true,
query: "?raw",
import: "default",
}
),
large: await import.meta.glob(
"/node_modules/@spectrum-css/ui-icons/dist/large/*.svg",
{
eager: true,
query: "?raw",
import: "default",
}
),
},
workflow: await import.meta.glob(
"/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*.svg",
{
eager: true,
query: "?raw",
import: "default",
}
),
ui: await import.meta.glob(
"/node_modules/@spectrum-css/ui-icons/dist/svg/*.svg",
{
eager: true,
query: "?raw",
import: "default",
}
),
},
});
232 changes: 71 additions & 161 deletions components/icon/stories/icon.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { disableDefaultModes, mobile } from "@spectrum-css/preview/modes";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import { html } from "lit";
import { styleMap } from "lit/directives/style-map.js";
import { version } from "../package.json";
import { Template } from "./template";
import { cleanWorkflowIcon, uiIconsWithDirections, workflowIcons } from "./utilities.js";

const sizes = ["xs", "s", "m", "l", "xl", "xxl"];
import { IconGroup } from "./icon.test.js";
import { PrintFullSet, UIArrowsTemplate, UIDefaultTemplate, WorkflowDefaultTemplate, WorkflowSizingTemplate } from "./template";
import { cleanWorkflowIcon, uiIconsWithDirections, workflowIcons, workflowSizes } from "./utilities.js";

/**
* The Icon component contains all of the CSS used for displaying both workflow and UI icons.
Expand All @@ -22,7 +20,7 @@ export default {
type: { summary: "string" },
category: "Component",
},
options: sizes,
options: workflowSizes,
control: "select",
if: { arg: "setName", eq: "workflow" },
},
Expand Down Expand Up @@ -80,9 +78,11 @@ export default {
args: {
rootClass: "spectrum-Icon",
setName: "workflow",
iconName: "ABC",
iconName: "Color",
uiIconName: "Checkmark400",
size: "xl",
useRef: true,
showLabel: false,
},
parameters: {
componentVersion: version,
Expand All @@ -96,157 +96,79 @@ export default {
export const Default = IconGroup.bind({});
Default.args = {};

// ********* VRT ONLY ********* //
export const WithForcedColors = IconGroup.bind({});
WithForcedColors.tags = ["!autodocs", "!dev"];
WithForcedColors.parameters = {
chromatic: {
forcedColors: "active",
modes: disableDefaultModes
},
};

/**
* Helper template function to display multiple icons using an array of icon names.
* All icons in the Workflow icon set.
*/
const IconListTemplate = (args, iconsList = [], context) => html`
<div
style=${styleMap({
"display": "flex",
"gap": "32px",
"flexWrap": "wrap",
})}
>
${iconsList.map(
(iconName) => Template({ ...args, iconName }, context)
)}
</div>
`;

/* Stories for the MDX "Docs" only. */

/**
* A sampling of multiple Workflow icons.
*/
export const WorkflowDefault = (args, context) => IconListTemplate(
{
...args,
setName: "workflow",
size: "xl",
},
[
"Alert",
"Asset",
"Actions",
"ArrowDown",
"Camera",
"Copy",
"DeviceDesktop",
"Download",
"FilterAdd",
"Form",
"Light",
"Polygon",
],
context
);
WorkflowDefault.tags = ["!dev"];
WorkflowDefault.parameters = {
chromatic: { disableSnapshot: true },
export const Workflow = PrintFullSet.bind({});
Workflow.storyName = "Workflow icons";
Workflow.args = {
setName: "workflow",
useRef: true,
showLabel: true,
};
Workflow.argTypes = {
setName: { table: { disable: true } },
iconName: { table: { disable: true } },
};
Workflow.decorators = [
(StoryFn, context) => html`
<div
style=${styleMap({
"display": "grid",
// @todo currently broken by #storybook-root { inline-size: fit-content; }
// "grid-template-columns": "repeat(auto-fill, minmax(140px, 1fr))",
"grid-template-columns": "repeat(4, 190px)",
"gap": "16px",
"padding": "32px",
})}
>
${StoryFn(context)}
</div>
`,
];

/**
* An example of a Workflow icon displayed at all sizes, from small to extra-large.
* All icons in the UI icon set.
*/
export const WorkflowSizing = (args, context) => html`
<div
style=${styleMap({
"display": "flex",
"gap": "24px",
"flexWrap": "wrap",
})}
>
${["xs","s","m","l","xl"].map(
(size) => html`
<div
style=${styleMap({
"display": "flex",
"gap": "16px",
"flexDirection": "column",
"alignItems": "center",
"flexBasis": "80px",
})}
>
${Typography({
semantics: "heading",
size: "xs",
content: [
{
xs: "Extra-small",
s: "Small",
m: "Medium",
l: "Large",
xl: "Extra-large",
}[size],
],
customStyles: {
"white-space": "nowrap",
"--mod-detail-font-color": "var(--spectrum-seafoam-900)",
}
})}
${Template({ ...args, size }, context)}
</div>
`
)}
</div>
`;
WorkflowSizing.tags = ["!dev"];
WorkflowSizing.args = {
setName: "workflow",
iconName: "Asset",
export const UI = PrintFullSet.bind({});
UI.storyName = "UI icons";
UI.args = {
setName: "ui",
useRef: true,
showLabel: true,
};
WorkflowSizing.parameters = {
chromatic: { disableSnapshot: true },
UI.argTypes = {
setName: { table: { disable: true } },
uiIconName: { table: { disable: true } },
};
UI.decorators = [
(StoryFn, context) => html`
<div
style=${styleMap({
"display": "grid",
// @todo currently broken by #storybook-root { inline-size: fit-content; }
// "grid-template-columns": "repeat(auto-fill, minmax(140px, 1fr))",
"grid-template-columns": "repeat(5, 140px)",
"gap": "16px",
"padding": "32px",
})}
>
${StoryFn(context)}
</div>
`,
];

/**
* A sampling of a few UI icons.
*/
export const UIDefault = (args, context) => html`
<div style="margin-bottom: 32px;">
${IconListTemplate(
{
...args,
setName: "ui",
},
[
"Asterisk100",
"Asterisk200",
"Asterisk300",
],
context
)}
</div>
<div>
${IconListTemplate(
{
...args,
setName: "ui",
},
[
"ChevronDown50",
"ChevronDown75",
"ChevronDown100",
"ChevronDown200",
"ChevronDown300",
"ChevronDown400",
],
context
)}
</div>
`;
// ********* VRT ONLY ********* //
export const WithForcedColors = IconGroup.bind({});
WithForcedColors.tags = ["!autodocs", "!dev"];
WithForcedColors.parameters = {
chromatic: {
forcedColors: "active",
modes: disableDefaultModes
},
};

/* Stories for the MDX "Docs" only. */
// ********* DOCS ONLY ********* //

/**
* A sampling of multiple Workflow icons.
Expand Down Expand Up @@ -284,19 +206,7 @@ UIDefault.parameters = {
/**
* A UI arrow displayed for all directions (left, right, up, down).
*/
export const UIArrows = (args, context) => IconListTemplate(
{
...args,
setName: "ui",
},
[
"ArrowRight100",
"ArrowLeft100",
"ArrowDown100",
"ArrowUp100",
],
context
);
export const UIArrows = UIArrowsTemplate.bind({});
UIArrows.storyName = "UI Arrows";
UIArrows.tags = ["!dev"];
UIArrows.parameters = {
Expand Down
Loading

0 comments on commit 988aa3a

Please sign in to comment.