chore: add runtime component deprecation warnings (#9821)

packages/calcite-components/src/components/pick-list-group/pick-list-group.tsx

@@ -6,8 +6,15 @@ import {
 } from "../../utils/conditionalSlot";
 import { getSlotted } from "../../utils/dom";
 import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading";
+import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
+logger.deprecated("component", {
+  name: "pick-list-group",
+  removalVersion: 3,
+  suggested: "list-item-group",
+});
+
 /**
  * @deprecated Use the `calcite-list` component instead.
  * @slot - A slot for adding `calcite-pick-list-item` elements.

packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx

@@ -38,9 +38,16 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { ICON_TYPES } from "../pick-list/resources";
+import { logger } from "../../utils/logger";
 import { PickListItemMessages } from "./assets/pick-list-item/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
+logger.deprecated("component", {
+  name: "pick-list",
+  removalVersion: 3,
+  suggested: "list",
+});
+
 /**
  * @deprecated Use the `calcite-list` component instead.
  * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.

packages/calcite-components/src/components/pick-list/pick-list.tsx

@@ -25,6 +25,7 @@ import {
 import { createObserver } from "../../utils/observers";
 import { HeadingLevel } from "../functional/Heading";
 import type { ValueUnion } from "../types";
+import { logger } from "../../utils/logger";
 import { ICON_TYPES } from "./resources";
 import {
   calciteInternalListItemValueChangeHandler,
@@ -50,6 +51,12 @@ import {
 } from "./shared-list-logic";
 import List from "./shared-list-render";
 
+logger.deprecated("component", {
+  name: "pick-list-item",
+  removalVersion: 3,
+  suggested: "list-item",
+});
+
 /**
  * @deprecated Use the `calcite-list` component instead.
  * @slot - A slot for adding `calcite-pick-list-item` or `calcite-pick-list-group` elements. Items are displayed as a vertical list.

packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx

@@ -6,8 +6,15 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
+import { logger } from "../../utils/logger";
 import { TileSelectGroupLayout } from "./interfaces";
 
+logger.deprecated("component", {
+  name: "tile-select-group",
+  removalVersion: 4,
+  suggested: ["tile", "tile-group"],
+});
+
 /**
  * @deprecated Use the `calcite-tile-group` component instead.
  * @slot - A slot for adding `calcite-tile-select` elements.

packages/calcite-components/src/components/tile-select/tile-select.tsx

@@ -27,9 +27,16 @@ import {
 } from "../../utils/loadable";
 import { Alignment, Width } from "../interfaces";
 import { IconName } from "../icon/interfaces";
+import { logger } from "../../utils/logger";
 import { TileSelectType } from "./interfaces";
 import { CSS } from "./resources";
 
+logger.deprecated("component", {
+  name: "tile-select",
+  removalVersion: 4,
+  suggested: ["tile", "tile-group"],
+});
+
 /**
  * @deprecated Use the `calcite-tile` component instead.
  * @slot - A slot for adding custom content.

packages/calcite-components/src/components/tip-group/tip-group.tsx

@@ -1,4 +1,11 @@
 import { Component, h, Prop, VNode } from "@stencil/core";
+import { logger } from "../../utils/logger";
+
+logger.deprecated("component", {
+  name: "tip-group",
+  removalVersion: 4,
+  suggested: ["carousel", "carousel-item"],
+});
 
 /**
  * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead.

packages/calcite-components/src/components/tip-manager/tip-manager.tsx

@@ -20,9 +20,16 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Heading, HeadingLevel } from "../functional/Heading";
+import { logger } from "../../utils/logger";
 import { TipManagerMessages } from "./assets/tip-manager/t9n";
 import { CSS, ICONS } from "./resources";
 
+logger.deprecated("component", {
+  name: "tip-manager",
+  removalVersion: 4,
+  suggested: "carousel",
+});
+
 /**
  * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead.
  * @slot - A slot for adding `calcite-tip`s.

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

@@ -25,9 +25,16 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading";
+import { logger } from "../../utils/logger";
 import { TipMessages } from "./assets/tip/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
+logger.deprecated("component", {
+  name: "tip",
+  removalVersion: 4,
+  suggested: ["card", "notice", "panel", "tile"],
+});
+
 /**
  * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead.
  * @slot - A slot for adding text and a hyperlink.

packages/calcite-components/src/components/value-list/value-list.tsx

@@ -65,10 +65,17 @@ import {
   SortableComponent,
 } from "../../utils/sortableComponent";
 import { focusElement } from "../../utils/dom";
+import { logger } from "../../utils/logger";
 import { ValueListMessages } from "./assets/value-list/t9n";
 import { CSS, ICON_TYPES } from "./resources";
 import { getHandleAndItemElement, getScreenReaderText } from "./utils";
 
+logger.deprecated("component", {
+  name: "value-list",
+  removalVersion: 3,
+  suggested: "list",
+});
+
 /**
  * @deprecated Use the `calcite-list` component instead.
  * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.

packages/calcite-components/src/tests/setupTests.ts

@@ -1,20 +1,20 @@
 let globalError: jest.SpyInstance;
-let globalLog: jest.SpyInstance;
+let globalInfo: jest.SpyInstance;
 
 beforeAll(() => {
   globalError = jest.spyOn(global.console, "error");
-  globalLog = jest.spyOn(global.console, "info").mockImplementation(() => null);
+  globalInfo = jest.spyOn(global.console, "info").mockImplementation(() => null);
 });
 
 beforeEach(() => {
   globalError.mockClear();
-  globalLog.mockClear();
+  globalInfo.mockClear();
 });
 
 // eslint-disable-next-line jest/no-standalone-expect
 afterEach(() => expect(globalError).not.toHaveBeenCalled());
 
 afterAll(() => {
   globalError.mockRestore();
-  globalLog.mockRestore();
+  globalInfo.mockRestore();
 });

packages/calcite-components/src/utils/config.spec.ts

@@ -13,6 +13,7 @@ describe("config", () => {
   it("has defaults", async () => {
     config = await loadConfig();
     expect(config.focusTrapStack).toHaveLength(0);
+    expect(config.logLevel).toBe("info");
   });
 
   it("allows custom configuration", async () => {

packages/calcite-components/src/utils/config.ts

@@ -3,6 +3,7 @@
  */
 
 import { FocusTrap } from "./focusTrapComponent";
+import { LogLevel } from "./logger";
 
 export interface CalciteConfig {
   /**
@@ -14,6 +15,11 @@ export interface CalciteConfig {
    */
   focusTrapStack: FocusTrap[];
 
+  /**
+   * Defines the global log level to use when logging messages.
+   */
+  logLevel: LogLevel;
+
   /**
    * Contains the version of the Calcite components.
    *
@@ -26,6 +32,8 @@ const existingConfig: CalciteConfig = globalThis["calciteConfig"];
 
 export const focusTrapStack: FocusTrap[] = existingConfig?.focusTrapStack || [];
 
+export const logLevel: LogLevel = existingConfig?.logLevel || "info";
+
 // the following placeholders are replaced by the build
 const version = "__CALCITE_VERSION__";
 const buildDate = "__CALCITE_BUILD_DATE__";

packages/calcite-components/src/utils/focusTrapComponent.spec.ts

@@ -72,7 +72,7 @@ describe("focusTrapComponent", () => {
       window = win as any as Window & typeof globalThis;
       globalThis.MutationObserver = window.MutationObserver; // needed for focus-trap
 
-      type TestGlobal = GlobalTestProps<{ calciteConfig: CalciteConfig }>;
+      type TestGlobal = GlobalTestProps<{ calciteConfig: Pick<CalciteConfig, "focusTrapStack"> }>;
 
       (globalThis as TestGlobal).calciteConfig = {
         focusTrapStack: customFocusTrapStack,