From f388ad56624a241b3a0aec1adb366fd73465e1e1 Mon Sep 17 00:00:00 2001 From: Adam Tirella Date: Thu, 15 Dec 2022 17:03:56 -0800 Subject: [PATCH] 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 | 9 ++++++--- src/components/accordion/interfaces.ts | 2 -- src/components/color-picker/color-picker.tsx | 8 +++----- src/components/color-picker/interfaces.ts | 2 -- src/components/radio-group-item/radio-group-item.tsx | 9 ++++++--- src/components/radio-group/interfaces.ts | 1 - src/components/radio-group/radio-group.tsx | 5 ++--- 7 files changed, 17 insertions(+), 19 deletions(-) delete mode 100644 src/components/radio-group/interfaces.ts diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index d486cbcdf9f..05b9bbec6f5 100644 --- a/src/components/accordion/accordion.tsx +++ b/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"; diff --git a/src/components/accordion/interfaces.ts b/src/components/accordion/interfaces.ts index 897960fa05c..6f8232698eb 100644 --- a/src/components/accordion/interfaces.ts +++ b/src/components/accordion/interfaces.ts @@ -1,5 +1,3 @@ -export type AccordionAppearance = "default" | "minimal" | "transparent" | "solid"; - export interface RequestedItem { requestedAccordionItem: HTMLCalciteAccordionItemElement; } diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 0295654ca61..3aa428a9227 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/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. diff --git a/src/components/color-picker/interfaces.ts b/src/components/color-picker/interfaces.ts index 473271f96e9..cc9a6f3f48d 100644 --- a/src/components/color-picker/interfaces.ts +++ b/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 diff --git a/src/components/radio-group-item/radio-group-item.tsx b/src/components/radio-group-item/radio-group-item.tsx index fa4ddfd1e5e..427b9f2a984 100644 --- a/src/components/radio-group-item/radio-group-item.tsx +++ b/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 ? ( diff --git a/src/components/radio-group/interfaces.ts b/src/components/radio-group/interfaces.ts deleted file mode 100644 index 98b36d903b4..00000000000 --- a/src/components/radio-group/interfaces.ts +++ /dev/null @@ -1 +0,0 @@ -export type RadioAppearance = "solid" | "outline"; diff --git a/src/components/radio-group/radio-group.tsx b/src/components/radio-group/radio-group.tsx index eae151e6bd7..53e22f78740 100644 --- a/src/components/radio-group/radio-group.tsx +++ b/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;