fix(icon): remove size300 suffix from chevron and checkmark icons in …

…Spectrum 2 (#4904)
adobe · Nov 8, 2024 · a22f42b · a22f42b
1 parent 2e31a56
commit a22f42b
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 81 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: b43876a206b9f2aa539299773e75b3d774a80d86
+        default: 007d8fcc1444b5ba59b46fb123b09f97beca4b60
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/icon/src/IconBase.ts b/packages/icon/src/IconBase.ts
@@ -29,8 +29,6 @@ import {
 
 import iconStyles from './icon.css.js';
 
-import type { SystemVariant } from '@spectrum-web-components/theme';
-
 export class IconBase extends SpectrumElement {
     public static override get styles(): CSSResultArray {
         return [iconStyles];
@@ -49,7 +47,6 @@ export class IconBase extends SpectrumElement {
 
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.requestSystemContext();
     }
 
     public override disconnectedCallback(): void {
@@ -60,24 +57,6 @@ export class IconBase extends SpectrumElement {
         }
     }
 
-    private requestSystemContext(): void {
-        this.dispatchEvent(
-            new CustomEvent('sp-system-context', {
-                detail: {
-                    callback: (
-                        system: SystemVariant,
-                        unsubscribe: () => void
-                    ) => {
-                        this.spectrumVersion =
-                            system === 'spectrum-two' ? 2 : 1;
-                        this.unsubscribeSystemContext = unsubscribe;
-                    },
-                },
-                bubbles: true,
-                composed: true,
-            })
-        );
-    }
     private systemResolver = new SystemResolutionController(this);
 
     protected override update(changes: PropertyValues): void {

diff --git a/packages/icons-ui/README.md b/packages/icons-ui/README.md
@@ -37,7 +37,7 @@ Search the available Spectrum Workflow icons below.
 
 <p class="for-github">Complete search experience available at: <a href="https://opensource.adobe.com/spectrum-web-components/components/icons-ui/">https://opensource.adobe.com/spectrum-web-components/components/icons-ui/</a>.</p>
 
-<icons-demo class="icon-search" package="icons-ui" size="xxl"></icons-demo>
+<icons-demo class="icon-search" package="icons-ui" size="xxl" name="ui"></icons-demo>
 
 <script type="module">
 const search = document.querySelector('.icon-search');

diff --git a/packages/icons-workflow/README.md b/packages/icons-workflow/README.md
@@ -37,7 +37,7 @@ Search the available Spectrum Workflow icons below.
 
 <p class="for-github">Complete search experience available at: <a href="https://opensource.adobe.com/spectrum-web-components/components/icons-workflow/">https://opensource.adobe.com/spectrum-web-components/components/icons-workflow/</a>.</p>
 
-<icons-demo class="icon-search" package="icons-workflow" size="xxl"></icons-demo>
+<icons-demo class="icon-search" package="icons-workflow" size="xxl" name="workflow"></icons-demo>
 
 <script type="module">
 const search = document.querySelector('.icon-search');

diff --git a/packages/icons-workflow/bin/build.js b/packages/icons-workflow/bin/build.js
@@ -27,7 +27,7 @@ const rootDir = path.join(__dirname, '../../../');
 
 const disclaimer = `
 /*
-Copyright 2020 Adobe. All rights reserved.
+Copyright 2024 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -85,6 +85,14 @@ let manifestListings = `\r\nexport const iconManifest = [\r\n`;
 
 const defaultIconImport = `import { DefaultIcon as AlternateIcon } from '../DefaultIcon.js';\r\n`;
 
+// Temporary replacements for a few icon names that have different names in the new S2 icon set
+const replacements = {
+    UnLink: 'Unlink',
+    TextStrikeThrough: 'TextStrikethrough',
+    ChevronDownSize300: 'ChevronDown',
+    CheckmarkSize300: 'Checkmark',
+};
+
 // A function that process the raw svg name and returns the component name
 export const getComponentName = (i) => {
     let id = path
@@ -94,11 +102,6 @@ export const getComponentName = (i) => {
     if (i.startsWith('Ad')) {
         id = i.replace(/^Ad/, '') + 'Advert';
     }
-    const replacements = {
-        UnLink: 'Unlink',
-        TextStrikeThrough: 'TextStrikethrough',
-        github: 'GitHub',
-    };
     return Case.pascal(replacements[id] || id);
 };
 
@@ -115,21 +118,10 @@ async function buildIcons(icons, tag, iconsNameList) {
             id += 'Advert';
         }
 
-        if (id === 'UnLink') {
-            id = 'Unlink';
-        }
-        if (id === 'TextStrikeThrough') {
-            id = 'TextStrikethrough';
-        }
-
-        let ComponentName = id === 'github' ? 'GitHub' : Case.pascal(id);
+        // use replacements for icons that have different names in the icon set and update the id
+        id = replacements[id] || id;
 
-        if (ComponentName === 'TextStrikeThrough') {
-            ComponentName = 'TextStrikethrough';
-        }
-        if (ComponentName === 'UnLink') {
-            ComponentName = 'Unlink';
-        }
+        const ComponentName = Case.pascal(id);
 
         const $ = load(svg, {
             xmlMode: true,

diff --git a/packages/iconset/stories/icons-demo.ts b/packages/iconset/stories/icons-demo.ts
@@ -38,8 +38,6 @@ import {
     systemResolverUpdatedSymbol,
 } from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';
 
-import type { SystemVariant } from '@spectrum-web-components/theme';
-
 @customElement('delayed-ready')
 export class DelayedReady extends SpectrumElement {
     _delayedReady!: Promise<void>;
@@ -95,6 +93,12 @@ export class IconsDemo extends SpectrumElement {
         tag: string;
     }[] = [];
 
+    private filteredIcons: {
+        name: string;
+        story(size: string): TemplateResult;
+        tag: string;
+    }[] = [];
+
     private unsubscribeSystemContext: (() => void) | null = null;
 
     @state()
@@ -109,7 +113,6 @@ export class IconsDemo extends SpectrumElement {
 
     public override async connectedCallback(): Promise<void> {
         super.connectedCallback();
-        this.requestSystemContext();
         window.addEventListener('sp-iconset-added', this.handleIconSetAdded);
     }
     public override disconnectedCallback(): void {
@@ -121,30 +124,41 @@ export class IconsDemo extends SpectrumElement {
         }
     }
 
-    private requestSystemContext(): void {
-        this.dispatchEvent(
-            new CustomEvent('sp-system-context', {
-                detail: {
-                    callback: (
-                        system: SystemVariant,
-                        unsubscribe: () => void
-                    ) => {
-                        this.spectrumVersion =
-                            system === 'spectrum-two' ? 2 : 1;
-                        this.unsubscribeSystemContext = unsubscribe;
-                    },
-                },
-                bubbles: true,
-                composed: true,
-            })
-        );
+    private filterIconsBySpectrumVersion(): void {
+        const iconVersion = this.spectrumVersion === 2 ? 's2' : 's1';
+        let filteredIcons = this.icons;
+        // Filter out icons that are not in the current version for workflow icons
+        if (this.name === 'workflow') {
+            filteredIcons = filteredIcons.filter((icon) => {
+                const iconName = icon.name.replace(/\s/g, '').toLowerCase();
+                return iconsList[iconVersion].includes(iconName);
+            });
+        }
+
+        // Use a Set to remove duplicates that may get added because of the same icon name in both versions
+        const iconSet = new Set();
+        filteredIcons = filteredIcons.filter((icon) => {
+            if (iconSet.has(icon.name)) {
+                return false;
+            }
+            iconSet.add(icon.name);
+            return true;
+        });
+
+        this.filteredIcons = filteredIcons;
     }
+
     private systemResolver = new SystemResolutionController(this);
 
     protected override update(changes: PropertyValues): void {
         if (changes.has(systemResolverUpdatedSymbol)) {
             this.spectrumVersion =
                 this.systemResolver.system === 'spectrum-two' ? 2 : 1;
+            this.filterIconsBySpectrumVersion();
+        }
+
+        if (changes.has('icons')) {
+            this.filterIconsBySpectrumVersion();
         }
 
         super.update(changes);
@@ -234,20 +248,11 @@ export class IconsDemo extends SpectrumElement {
         this.updateSearch(event);
     }
     private renderSearch(): TemplateResult {
-        let matchingIcons = this.search
-            ? this.icons.filter((icon) =>
+        const matchingIcons = this.search
+            ? this.filteredIcons.filter((icon) =>
                   icon.name.toLowerCase().includes(this.search.toLowerCase())
               )
-            : this.icons;
-
-        const iconVersion = this.spectrumVersion === 2 ? 's2' : 's1';
-        // Filter out icons that are not in the current version for workflow icons
-        if (this.name === 'workflow') {
-            matchingIcons = matchingIcons.filter((icon) => {
-                const iconName = icon.name.replace(/\s/g, '').toLowerCase();
-                return iconsList[iconVersion].includes(iconName);
-            });
-        }
+            : this.filteredIcons;
 
         return html`
             <div class="search" part="search">
@@ -262,8 +267,8 @@ export class IconsDemo extends SpectrumElement {
                     autocomplete="off"
                 >
                     <sp-help-text slot="help-text">
-                        Showing ${matchingIcons.length} of ${this.icons.length}
-                        available icons.
+                        Showing ${matchingIcons.length} of
+                        ${this.filteredIcons.length} available icons.
                     </sp-help-text>
                 </sp-search>
             </div>
@@ -287,7 +292,7 @@ export class IconsDemo extends SpectrumElement {
     }
     protected override render(): TemplateResult {
         return html`
-            ${this.icons.length
+            ${this.filteredIcons.length
                 ? this.renderSearch()
                 : html`
                       <slot></slot>

diff --git a/packages/iconset/stories/iconsList.json b/packages/iconset/stories/iconsList.json
@@ -947,8 +947,8 @@
         "channel",
         "checkbox",
         "checkmarkcircle",
-        "checkmarksize300",
-        "chevrondownsize300",
+        "checkmark",
+        "chevrondown",
         "chevronleft",
         "chevronright",
         "circle",

diff --git a/projects/documentation/web-dev-server.config.js b/projects/documentation/web-dev-server.config.js
@@ -12,8 +12,10 @@ governing permissions and limitations under the License.
 
 import { fromRollup } from '@web/dev-server-rollup';
 import rollupAlias from '@rollup/plugin-alias';
+import rollupJson from '@rollup/plugin-json';
 
 const alias = fromRollup(rollupAlias);
+const json = fromRollup(rollupJson);
 
 export default {
     open: true,
@@ -22,9 +24,13 @@ export default {
         exportConditions: ['browser', 'development'],
         moduleDirectories: ['node_modules', 'packages', 'projects', 'tools'],
     },
+    mimeTypes: {
+        '**/*.json': 'js',
+    },
     // in a monorepo you need to set the root dir to resolve modules
     rootDir: '_site',
     plugins: [
+        json(),
         alias({
             entries: [
                 {