diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5bc8b061e63..b2561d000bd 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -14,6 +14,7 @@ import { AlertButton, AlertInput } from "./components/alert/alert-interface"; import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface"; import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface"; import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface"; +import { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces"; import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface"; import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface"; import { SpinnerTypes } from "./components/spinner/spinner-configs"; @@ -52,6 +53,7 @@ export { AlertButton, AlertInput } from "./components/alert/alert-interface"; export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface"; export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface"; export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface"; +export { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces"; export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface"; export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface"; export { SpinnerTypes } from "./components/spinner/spinner-configs"; @@ -874,11 +876,11 @@ export namespace Components { /** * The fill for the chip. Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background. Defaults to `"solid"`. */ - "fill"?: 'outline' | 'solid'; + "fill"?: IonChipFill; /** * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors. Defaults to `"subtle"`. */ - "hue"?: 'bold' | 'subtle'; + "hue"?: IonChipHue; /** * The mode determines the platform behaviors of the component. */ @@ -892,11 +894,11 @@ export namespace Components { /** * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"`. */ - "shape"?: 'soft' | 'round' | 'rectangular'; + "shape"?: IonChipShape; /** * Set to `"small"` for a chip with less height and padding. Defaults to `"large"`. */ - "size"?: 'small' | 'large'; + "size"?: IonChipSize; } interface IonCol { /** @@ -6848,11 +6850,11 @@ declare namespace LocalJSX { /** * The fill for the chip. Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background. Defaults to `"solid"`. */ - "fill"?: 'outline' | 'solid'; + "fill"?: IonChipFill; /** * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors. Defaults to `"subtle"`. */ - "hue"?: 'bold' | 'subtle'; + "hue"?: IonChipHue; /** * The mode determines the platform behaviors of the component. */ @@ -6866,11 +6868,11 @@ declare namespace LocalJSX { /** * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"`. */ - "shape"?: 'soft' | 'round' | 'rectangular'; + "shape"?: IonChipShape; /** * Set to `"small"` for a chip with less height and padding. Defaults to `"large"`. */ - "size"?: 'small' | 'large'; + "size"?: IonChipSize; } interface IonCol { /** diff --git a/core/src/components/chip/chip.interfaces.ts b/core/src/components/chip/chip.interfaces.ts index 96e4f6e861d..abe3f8980ca 100644 --- a/core/src/components/chip/chip.interfaces.ts +++ b/core/src/components/chip/chip.interfaces.ts @@ -13,21 +13,17 @@ export type IonChipRecipe = { // Hues with fills hue?: { - bold?: IonChipFillDefinition; - subtle?: IonChipFillDefinition; + [K in IonChipHue]?: IonChipFillDefinition; }; // Sizes size?: { - small?: IonChipSizeDefinition; - large?: IonChipSizeDefinition; + [K in IonChipSize]?: IonChipSizeDefinition; }; // Shapes shape?: { - soft?: IonChipShapeDefinition; - round?: IonChipShapeDefinition; - rectangular?: IonChipShapeDefinition; + [K in IonChipShape]?: IonChipShapeDefinition; }; // Shared States @@ -50,11 +46,7 @@ export type IonChipRecipe = { }; type IonChipFillDefinition = { - solid?: IonChipStateDefinition & { - semantic?: IonChipStateDefinition; - }; - - outline?: IonChipStateDefinition & { + [K in IonChipFill]?: IonChipStateDefinition & { semantic?: IonChipStateDefinition; }; }; @@ -118,8 +110,13 @@ type IonChipAvatarDefinition = IonChipMediaDefinition & { }; export type IonChipConfig = { - fill?: 'outline' | 'solid'; - hue?: 'bold' | 'subtle'; - size?: 'small' | 'large'; - shape?: 'soft' | 'round' | 'rectangular'; + fill?: IonChipFill; + hue?: IonChipHue; + size?: IonChipSize; + shape?: IonChipShape; }; + +export type IonChipFill = 'outline' | 'solid'; +export type IonChipHue = 'bold' | 'subtle'; +export type IonChipSize = 'small' | 'large'; +export type IonChipShape = 'soft' | 'round' | 'rectangular'; diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index a4f7c6fbd4d..a483a3429e0 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -6,6 +6,8 @@ import { createColorClasses } from '@utils/theme'; import { config } from '../../global/config'; import type { Color } from '../../interface'; +import type { IonChipFill, IonChipHue, IonChipSize, IonChipShape } from './chip.interfaces'; + /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. */ @@ -39,7 +41,7 @@ export class Chip implements ComponentInterface { * * Defaults to `"solid"`. */ - @Prop() fill?: 'outline' | 'solid'; + @Prop() fill?: IonChipFill; /** * If `true`, the user cannot interact with the chip. @@ -52,7 +54,7 @@ export class Chip implements ComponentInterface { * * Defaults to `"subtle"`. */ - @Prop() hue?: 'bold' | 'subtle'; + @Prop() hue?: IonChipHue; /** * Set to `"soft"` for a chip with slightly rounded corners, @@ -61,7 +63,7 @@ export class Chip implements ComponentInterface { * * Defaults to `"round"`. */ - @Prop() shape?: 'soft' | 'round' | 'rectangular'; + @Prop() shape?: IonChipShape; // TODO(FW-6266): Determine if `medium` size is needed. /** @@ -69,7 +71,7 @@ export class Chip implements ComponentInterface { * * Defaults to `"large"`. */ - @Prop() size?: 'small' | 'large'; + @Prop() size?: IonChipSize; componentDidLoad() { if (this.outline) {