chore: Update interface references (#6068)

Removes individually specified `Appearance` interfaces and instead uses
`Extract<>` to source values from a single defined reference.

src/components/accordion/accordion.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, h, Listen, Prop, VNode } from "@stencil/core";
-import { AccordionAppearance, AccordionSelectionMode, RequestedItem } from "./interfaces";
-import { Position, Scale } from "../interfaces";
+import { AccordionSelectionMode, RequestedItem } from "./interfaces";
+import { Appearance, Position, Scale } from "../interfaces";
 
 /**
  * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
@@ -26,7 +26,10 @@ export class Accordion {
   //--------------------------------------------------------------------------
 
   /** Specifies the appearance of the component. */
-  @Prop({ reflect: true }) appearance: AccordionAppearance = "solid";
+  @Prop({ reflect: true }) appearance: Extract<
+    "default" | "minimal" | "solid" | "transparent",
+    Appearance
+  > = "solid";
 
   /** Specifies the placement of the icon in the header. */
   @Prop({ reflect: true }) iconPosition: Position = "end";

src/components/accordion/interfaces.ts

@@ -1,5 +1,3 @@
-export type AccordionAppearance = "default" | "minimal" | "transparent" | "solid";
-
 export interface RequestedItem {
   requestedAccordionItem: HTMLCalciteAccordionItemElement;
 }

src/components/color-picker/color-picker.tsx

@@ -13,8 +13,8 @@ import {
 } from "@stencil/core";
 
 import Color from "color";
-import { ColorAppearance, ColorMode, ColorValue, InternalColor } from "./interfaces";
-import { Scale } from "../interfaces";
+import { ColorMode, ColorValue, InternalColor } from "./interfaces";
+import { Appearance, Scale } from "../interfaces";
 import {
   CSS,
   DEFAULT_COLOR,
@@ -85,10 +85,8 @@ export class ColorPicker
 
   /**
    * Specifies the appearance style of the component -
-   *
-   * `"solid"` (containing border) or `"minimal"` (no containing border).
    */
-  @Prop({ reflect: true }) appearance: ColorAppearance = "solid";
+  @Prop({ reflect: true }) appearance: Extract<"minimal" | "solid", Appearance> = "solid";
 
   /**
    * Internal prop for advanced use-cases.

src/components/color-picker/interfaces.ts

@@ -1,7 +1,5 @@
 import type Color from "color";
 
-export type ColorAppearance = "default" | "minimal" | "solid";
-
 export type ColorMode = "rgb" | "hsv";
 
 // need to do this otherwise, stencil build doesn't pick up the type import

src/components/radio-group-item/radio-group-item.tsx

@@ -10,8 +10,7 @@ import {
   VNode
 } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
-import { RadioAppearance } from "../radio-group/interfaces";
-import { Layout, Scale } from "../interfaces";
+import { Appearance, Layout, Scale } from "../interfaces";
 import { SLOTS, CSS } from "./resources";
 
 @Component({
@@ -61,7 +60,11 @@ export class RadioGroupItem {
   render(): VNode {
     const { checked, value } = this;
     const scale: Scale = getElementProp(this.el, "scale", "m");
-    const appearance: RadioAppearance = getElementProp(this.el, "appearance", "solid");
+    const appearance: Extract<"outline" | "solid", Appearance> = getElementProp(
+      this.el,
+      "appearance",
+      "solid"
+    );
     const layout: Layout = getElementProp(this.el, "layout", "horizontal");
 
     const iconStartEl = this.iconStart ? (

src/components/radio-group/radio-group.tsx

@@ -14,7 +14,7 @@ import {
 } from "@stencil/core";
 
 import { getElementDir } from "../../utils/dom";
-import { Layout, Scale, Width } from "../interfaces";
+import { Appearance, Layout, Scale, Width } from "../interfaces";
 import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
 import {
   afterConnectDefaultValueSet,
@@ -23,7 +23,6 @@ import {
   FormComponent,
   HiddenFormInputSlot
 } from "../../utils/form";
-import { RadioAppearance } from "./interfaces";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 import {
   setUpLoadableComponent,
@@ -58,7 +57,7 @@ export class RadioGroup
   //--------------------------------------------------------------------------
 
   /** Specifies the appearance style of the component. */
-  @Prop({ reflect: true }) appearance: RadioAppearance = "solid";
+  @Prop({ reflect: true }) appearance: Extract<"minimal" | "solid", Appearance> = "solid";
 
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @Prop({ reflect: true }) disabled = false;