feat(icon): type icon names

packages/calcite-components/.eslintrc.cjs

@@ -70,6 +70,7 @@ module.exports = {
         ],
       },
     ],
+    "@typescript-eslint/lines-between-class-members": ["error", "always"],
     "@typescript-eslint/method-signature-style": ["error", "property"],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "error",
@@ -84,7 +85,7 @@ module.exports = {
     "jsdoc/require-property-type": "off",
     "jsdoc/require-returns-type": "off",
     "jsdoc/tag-lines": ["error", "any", { startLines: 1 }],
-    "lines-between-class-members": ["error", "always"],
+    "lines-between-class-members": "off",
     "no-eval": "error",
     "no-implied-eval": "error",
     "no-multiple-empty-lines": [

packages/calcite-components/package.json

@@ -63,6 +63,7 @@
     "directory": "packages/calcite-components"
   },
   "dependencies": {
+    "@esri/calcite-ui-icons": "3.28.2",
     "@floating-ui/dom": "1.6.5",
     "@stencil/core": "4.18.3",
     "@types/color": "3.0.6",
@@ -77,7 +78,6 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "^2.2.1-next.1",
-    "@esri/calcite-ui-icons": "3.28.2",
     "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil-community/postcss": "2.2.0",

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -30,6 +30,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { IconName } from "../icon/interfaces";
 import { SLOTS, CSS, IDS } from "./resources";
 import { RequestedItem } from "./interfaces";
 
@@ -60,10 +61,10 @@ export class AccordionItem implements ConditionalSlotComponent, LoadableComponen
   @Prop() description: string;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;

packages/calcite-components/src/components/action-group/resources.ts

@@ -5,7 +5,7 @@ export const SLOTS = {
 
 export const ICONS = {
   menu: "ellipsis",
-};
+} as const;
 
 export const CSS = {
   container: "container",

packages/calcite-components/src/components/action-menu/resources.ts

@@ -10,6 +10,6 @@ export const SLOTS = {
 
 export const ICONS = {
   menu: "ellipsis",
-};
+} as const;
 
 export const activeAttr = "data-active";

packages/calcite-components/src/components/action/action.tsx

@@ -37,6 +37,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Alignment, Appearance, Scale } from "../interfaces";
+import { IconName } from "../icon/interfaces";
 import { ActionMessages } from "./assets/action/t9n";
 import { CSS, SLOTS } from "./resources";
 
@@ -83,7 +84,7 @@ export class Action
   @Prop({ reflect: true }) disabled = false;
 
   /** Specifies an icon to display. */
-  @Prop() icon: string;
+  @Prop() icon: IconName;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;

packages/calcite-components/src/components/alert/alert.tsx

@@ -42,6 +42,7 @@ import {
 } from "../../utils/t9n";
 import { Kind, Scale } from "../interfaces";
 import { KindIcons } from "../resources";
+import { IconName } from "../icon/interfaces";
 import { AlertMessages } from "./assets/alert/t9n";
 import { AlertDuration, Sync, Unregister } from "./interfaces";
 import { CSS, DURATIONS, SLOTS } from "./resources";
@@ -102,7 +103,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
    * When `true`, shows a default recommended icon. Alternatively,
    * pass a Calcite UI Icon name to display a specific icon.
    */
-  @Prop({ reflect: true }) icon: string | boolean;
+  @Prop({ reflect: true }) icon: IconName | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -308,7 +309,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     );
   }
 
-  private renderIcon(icon: string): VNode {
+  private renderIcon(icon: IconName): VNode {
     return (
       <div class={CSS.icon}>
         <calcite-icon flipRtl={this.iconFlipRtl} icon={icon} scale={getIconScale(this.scale)} />

packages/calcite-components/src/components/block-section/block-section.tsx

@@ -28,6 +28,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { IconName } from "../icon/interfaces";
 import { BlockSectionMessages } from "./assets/block-section/t9n";
 import { BlockSectionToggleDisplay } from "./interfaces";
 import { CSS, ICONS, IDS } from "./resources";
@@ -49,13 +50,13 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
   // --------------------------------------------------------------------------
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * When `true`, expands the component and its contents.

packages/calcite-components/src/components/block-section/resources.ts

@@ -26,4 +26,4 @@ export const ICONS = {
   menuClosed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
-};
+} as const;

packages/calcite-components/src/components/block/block.tsx

@@ -48,6 +48,7 @@ import {
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { FlipContext } from "../interfaces";
+import { IconName } from "../icon/interfaces";
 import { CSS, ICONS, IDS, SLOTS } from "./resources";
 import { BlockMessages } from "./assets/block/t9n";
 
@@ -106,13 +107,13 @@ export class Block
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * When `true`, a busy indicator is displayed.

packages/calcite-components/src/components/block/resources.ts

@@ -41,4 +41,4 @@ export const ICONS = {
   closed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
-};
+} as const;

packages/calcite-components/src/components/button/button.tsx

@@ -37,6 +37,7 @@ import {
 } from "../../utils/t9n";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { toAriaBoolean } from "../../utils/dom";
+import { IconName } from "../icon/interfaces";
 import { ButtonMessages } from "./assets/button/t9n";
 import { ButtonAlignment } from "./interfaces";
 import { CSS } from "./resources";
@@ -117,13 +118,13 @@ export class Button
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * When `true`, a busy indicator is displayed and interaction is disabled.

packages/calcite-components/src/components/card/card.tsx

@@ -35,6 +35,7 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
+import { IconName } from "../icon/interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { CardMessages } from "./assets/card/t9n";
 
@@ -276,7 +277,7 @@ export class Card
   }
 
   private renderSelectionIcon(): VNode {
-    const icon =
+    const icon: IconName =
       this.selectionMode === "multiple" && this.selected
         ? ICONS.selected
         : this.selectionMode === "multiple"

packages/calcite-components/src/components/card/resources.ts

@@ -28,4 +28,4 @@ export const ICONS = {
   unselected: "square",
   selectedSingle: "circle-f",
   unselectedSingle: "circle",
-};
+} as const;

packages/calcite-components/src/components/carousel/resources.ts

@@ -25,4 +25,4 @@ export const ICONS = {
   active: "bullet-point-large",
   pause: "pause-f",
   play: "play-f",
-};
+} as const;

packages/calcite-components/src/components/chip/chip.tsx

@@ -38,6 +38,7 @@ import {
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { isActivationKey } from "../../utils/key";
 import { getIconScale } from "../../utils/component";
+import { IconName } from "../icon/interfaces";
 import { ChipMessages } from "./assets/chip/t9n";
 import { CSS, SLOTS, ICONS } from "./resources";
 
@@ -73,7 +74,7 @@ export class Chip
   @Prop({ reflect: true }) closable = false;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: string;
+  @Prop({ reflect: true }) icon: IconName;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;

packages/calcite-components/src/components/chip/resources.ts

@@ -24,4 +24,4 @@ export const ICONS = {
   unchecked: "circle",
   checkedSingle: "circle-f",
   checked: "check-circle-f",
-};
+} as const;

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

@@ -27,6 +27,7 @@ import { ComboboxChildElement } from "../combobox/interfaces";
 import { getAncestors, getDepth, isSingleLike } from "../combobox/utils";
 import { Scale, SelectionMode } from "../interfaces";
 import { getIconScale } from "../../utils/component";
+import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -62,7 +63,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   @Prop({ reflect: true }) guid = guid();
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: string;
+  @Prop({ reflect: true }) icon: IconName;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -182,7 +183,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   //
   // --------------------------------------------------------------------------
 
-  renderIcon(iconPath: string): VNode {
+  renderIcon(iconPath: IconName): VNode {
     return this.icon ? (
       <calcite-icon
         class={{
@@ -198,7 +199,9 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
     ) : null;
   }
 
-  renderSelectIndicator(showDot: boolean, iconPath: string): VNode {
+  renderSelectIndicator(showDot: boolean): VNode;
+  renderSelectIndicator(showDot: boolean, iconPath: IconName): VNode;
+  renderSelectIndicator(showDot: boolean, iconPath?: IconName): VNode {
     return showDot ? (
       <span
         class={{
@@ -238,8 +241,8 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
     const { disabled } = this;
     const isSingleSelect = isSingleLike(this.selectionMode);
     const showDot = isSingleSelect && !disabled;
-    const defaultIcon = isSingleSelect ? "dot" : "check";
-    const iconPath = disabled ? "" : defaultIcon;
+    const defaultIcon = isSingleSelect ? undefined : "check";
+    const iconPath = disabled ? undefined : defaultIcon;
 
     const classes = {
       [CSS.label]: true,

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -67,6 +67,7 @@ import { Scale, SelectionMode, Status } from "../interfaces";
 import { CSS as XButtonCSS, XButton } from "../functional/XButton";
 import { componentOnReady, getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
+import { IconName } from "../icon/interfaces";
 import { ComboboxMessages } from "./assets/combobox/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./interfaces";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
@@ -177,7 +178,7 @@ export class Combobox
   @Prop() placeholder: string;
 
   /** Specifies the placeholder icon for the input. */
-  @Prop({ reflect: true }) placeholderIcon: string;
+  @Prop({ reflect: true }) placeholderIcon: IconName;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) placeholderIconFlipRtl = false;
@@ -194,7 +195,7 @@ export class Combobox
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | boolean;
 
   /**
    * The current validation state of the component.

packages/calcite-components/src/components/date-picker-month-header/resources.ts

@@ -11,4 +11,4 @@ export const CSS = {
 export const ICON = {
   chevronLeft: "chevron-left",
   chevronRight: "chevron-right",
-};
+} as const;

packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx

@@ -26,6 +26,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
+import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -59,10 +60,10 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** Accessible name for the component. */
   @Prop() label: string;

packages/calcite-components/src/components/fab/fab.tsx

@@ -14,6 +14,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Appearance, Kind, Scale } from "../interfaces";
+import { IconName } from "../icon/interfaces";
 import { CSS, ICONS } from "./resources";
 
 @Component({
@@ -49,7 +50,7 @@ export class Fab implements InteractiveComponent, LoadableComponent {
    *
    * @default "plus"
    */
-  @Prop({ reflect: true }) icon: string = ICONS.plus;
+  @Prop({ reflect: true }) icon: IconName = ICONS.plus;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;

packages/calcite-components/src/components/fab/resources.ts

@@ -4,4 +4,4 @@ export const CSS = {
 
 export const ICONS = {
   plus: "plus",
-};
+} as const;