[DRAFT] Make icons great again!!

packages/accordion/src/accordion.css

@@ -12,7 +12,3 @@ governing permissions and limitations under the License.
 
 @import url('./spectrum-accordion.css');
 @import url('./accordion-overrides.css');
-
-:host {
-    --spectrum-logical-rotation: ;
-}

packages/checkbox/src/Checkbox.ts

@@ -23,13 +23,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { CheckboxMixin } from './CheckboxMixin.js';
 import checkboxStyles from './checkbox.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';
 import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
 import checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js';
 import dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';
@@ -46,26 +40,26 @@ const checkmarkIcon = {
     },
     m: () => {
         return html`
-            <sp-icon-checkmark100
+            <sp-icon-checkmark75
                 id="checkmark"
                 class="spectrum-Icon spectrum-UIIcon-Checkmark100"
-            ></sp-icon-checkmark100>
+            ></sp-icon-checkmark75>
         `;
     },
     l: () => {
         return html`
-            <sp-icon-checkmark200
+            <sp-icon-checkmark75
                 id="checkmark"
                 class="spectrum-Icon spectrum-UIIcon-Checkmark200"
-            ></sp-icon-checkmark200>
+            ></sp-icon-checkmark75>
         `;
     },
     xl: () => {
         return html`
-            <sp-icon-checkmark300
+            <sp-icon-checkmark75
                 id="checkmark"
                 class="spectrum-Icon spectrum-UIIcon-Checkmark300"
-            ></sp-icon-checkmark300>
+            ></sp-icon-checkmark75>
         `;
     },
 };
@@ -81,26 +75,26 @@ const dashIcon = {
     },
     m: () => {
         return html`
-            <sp-icon-dash100
+            <sp-icon-dash75
                 id="partialCheckmark"
                 class="spectrum-Icon spectrum-UIIcon-Dash100"
-            ></sp-icon-dash100>
+            ></sp-icon-dash75>
         `;
     },
     l: () => {
         return html`
-            <sp-icon-dash200
+            <sp-icon-dash75
                 id="partialCheckmark"
                 class="spectrum-Icon spectrum-UIIcon-Dash200"
-            ></sp-icon-dash200>
+            ></sp-icon-dash75>
         `;
     },
     xl: () => {
         return html`
-            <sp-icon-dash300
+            <sp-icon-dash75
                 id="partialCheckmark"
                 class="spectrum-Icon spectrum-UIIcon-Dash300"
-            ></sp-icon-dash300>
+            ></sp-icon-dash75>
         `;
     },
 };

packages/icon/package.json

@@ -41,8 +41,6 @@
         "./src/icon-cross-overrides.css.js": "./src/icon-cross-overrides.css.js",
         "./src/icon-dash-overrides.css.js": "./src/icon-dash-overrides.css.js",
         "./src/icon-overrides.css.js": "./src/icon-overrides.css.js",
-        "./src/icon-single-gripper-overrides.css.js": "./src/icon-single-gripper-overrides.css.js",
-        "./src/icon-triple-gripper-overrides.css.js": "./src/icon-triple-gripper-overrides.css.js",
         "./src/icon.css.js": "./src/icon.css.js",
         "./src/index.js": {
             "development": "./src/index.dev.js",
@@ -81,8 +79,7 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^1.0.1",
-        "@spectrum-web-components/iconset": "^1.0.1"
+        "@spectrum-web-components/base": "^1.0.1"
     },
     "devDependencies": {
         "@spectrum-css/icon": "^8.0.0-s2-foundations.17"

packages/icon/src/Icon.ts

@@ -11,14 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
-import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
-import { IconsetRegistry } from '@spectrum-web-components/iconset/src/iconset-registry.js';
-
 import { IconBase } from './IconBase.js';
 
 /**
@@ -31,45 +26,6 @@ export class Icon extends IconBase {
     @property()
     public name?: string;
 
-    @query('#container')
-    private iconContainer?: HTMLElement;
-
-    private updateIconPromise?: Promise<void>;
-
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        window.addEventListener('sp-iconset-added', this.iconsetListener);
-    }
-
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
-        window.removeEventListener('sp-iconset-added', this.iconsetListener);
-    }
-
-    public override firstUpdated(): void {
-        this.updateIconPromise = this.updateIcon();
-    }
-
-    public override attributeChangedCallback(
-        name: string,
-        old: string,
-        value: string
-    ): void {
-        super.attributeChangedCallback(name, old, value);
-        this.updateIconPromise = this.updateIcon(); // any of our attributes change, update our icon
-    }
-
-    private iconsetListener = (event: CustomEvent): void => {
-        if (!this.name) {
-            return;
-        }
-        // parse the icon name to get iconset name
-        const icon = this.parseIcon(this.name);
-        if (event.detail.name === icon.iconset) {
-            this.updateIconPromise = this.updateIcon();
-        }
-    };
-
     private announceIconImageSrcError(): void {
         this.dispatchEvent(
             new Event('error', {
@@ -96,48 +52,4 @@ export class Icon extends IconBase {
         }
         return super.render();
     }
-
-    private async updateIcon(): Promise<void> {
-        if (this.updateIconPromise) {
-            await this.updateIconPromise;
-        }
-        if (!this.name) {
-            return Promise.resolve();
-        }
-        // parse the icon name to get iconset name
-        const icon = this.parseIcon(this.name);
-        // try to retrieve the iconset
-        const iconset = IconsetRegistry.getInstance().getIconset(icon.iconset);
-        if (!iconset) {
-            // we can stop here as there's nothing to be done till we get the iconset
-            return Promise.resolve();
-        }
-        if (!this.iconContainer) {
-            return Promise.resolve();
-        }
-        this.iconContainer.innerHTML = '';
-        return iconset.applyIconToElement(
-            this.iconContainer,
-            icon.icon,
-            this.size || '',
-            this.label ? this.label : ''
-        );
-    }
-
-    private parseIcon(icon: string): { iconset: string; icon: string } {
-        const iconParts = icon.split(':');
-        let iconsetName = 'default';
-        let iconName = icon;
-        if (iconParts.length > 1) {
-            iconsetName = iconParts[0];
-            iconName = iconParts[1];
-        }
-        return { iconset: iconsetName, icon: iconName };
-    }
-
-    protected override async getUpdateComplete(): Promise<boolean> {
-        const complete = (await super.getUpdateComplete()) as boolean;
-        await this.updateIconPromise;
-        return complete;
-    }
 }

packages/icon/stories/icon.stories.ts

@@ -23,28 +23,6 @@ export default {
     title: 'Icon',
 };
 
-export const Medium = (): TemplateResult => {
-    return html`
-        <sp-icons-medium></sp-icons-medium>
-        ${sizes.map(
-            (size) => html`
-                <sp-icon size=${size} name="ui:Chevron200"></sp-icon>
-            `
-        )}
-    `;
-};
-
-export const Large = (): TemplateResult => {
-    return html`
-        <sp-icons-large></sp-icons-large>
-        ${sizes.map(
-            (size) => html`
-                <sp-icon size=${size} name="ui:Chevron400"></sp-icon>
-            `
-        )}
-    `;
-};
-
 export const imageIcon = (): TemplateResult => {
     return html`
         ${sizes.map(

packages/menu/src/MenuItem.ts

@@ -31,13 +31,9 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
 import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
 
 import menuItemStyles from './menu-item.css.js';
-import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
-import checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js';
 import type { Menu } from './Menu.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 import type { Overlay } from '@spectrum-web-components/overlay';
@@ -97,13 +93,7 @@ export class MenuItem extends LikeAnchor(
     ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
 ) {
     public static override get styles(): CSSResultArray {
-        return [
-            menuItemStyles,
-            checkmarkStyles,
-            checkmarkSmallOverrides,
-            chevronStyles,
-            chevronIconOverrides,
-        ];
+        return [menuItemStyles];
     }
 
     abortControllerSubmenu!: AbortController;

packages/menu/src/menu-item.css

@@ -78,3 +78,10 @@ governing permissions and limitations under the License.
 :host([no-wrap]) #label {
     display: block;
 }
+
+sp-icon {
+    /* I want to decrease the value of --spectrum-icon-size by 6px here to match the
+    value of icon-size in the snippet from packages/icon/src/icon-**-overrides.css */
+    block-size: calc(var(--spectrum-icon-size) - 6px);
+    inline-size: calc(var(--spectrum-icon-size) - 6px);
+}

packages/textfield/src/Textfield.ts

@@ -30,13 +30,11 @@ import {
 
 import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 
 import textfieldStyles from './textfield.css.js';
-import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
-import checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js';
-
+import '@spectrum-web-components/icon/sp-icon.js';
+import { Checkmark100Icon } from '@spectrum-web-components/icons-ui';
 const textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;
 export type TextfieldType = (typeof textfieldTypes)[number];
 
@@ -50,7 +48,7 @@ export class TextfieldBase extends ManageHelpText(
     })
 ) {
     public static override get styles(): CSSResultArray {
-        return [textfieldStyles, checkmarkStyles, checkmarkSmallOverrides];
+        return [textfieldStyles];
     }
 
     @state()
@@ -280,10 +278,9 @@ export class TextfieldBase extends ManageHelpText(
             `;
         } else if (this.valid) {
             return html`
-                <sp-icon-checkmark100
-                    id="valid"
-                    class="icon spectrum-UIIcon-Checkmark100"
-                ></sp-icon-checkmark100>
+                <sp-icon id="valid" class="icon" size=${this.size}>
+                    ${Checkmark100Icon({ hidden: true })}
+                </sp-icon>
             `;
         }
         return nothing;

packages/textfield/src/textfield.css

@@ -141,3 +141,10 @@ textarea {
     resize: none;
     overflow: hidden;
 }
+
+sp-icon {
+    /* I want to decrease the value of --spectrum-icon-size by 6px here to match the
+    value of icon-size in the snippet from packages/icon/src/icon-**-overrides.css */
+    block-size: calc(var(--spectrum-icon-size) - 8px);
+    inline-size: calc(var(--spectrum-icon-size) - 8px);
+}