diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 7769ddba3af..a0e30f57a07 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"; @@ -53,6 +54,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"; @@ -876,11 +878,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"` if both the fill property and theme config are unset. */ - "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"` if both the hue property and theme config are unset. */ - "hue"?: 'bold' | 'subtle'; + "hue"?: IonChipHue; /** * The mode determines the platform behaviors of the component. */ @@ -894,11 +896,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"` if both the shape property and theme config are unset. */ - "shape"?: 'soft' | 'round' | 'rectangular'; + "shape"?: IonChipShape; /** * Set to `"small"` for a chip with less height and padding. Defaults to `"large"` if both the size property and theme config are unset. */ - "size"?: 'small' | 'large'; + "size"?: IonChipSize; } interface IonCol { /** @@ -6846,11 +6848,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"` if both the fill property and theme config are unset. */ - "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"` if both the hue property and theme config are unset. */ - "hue"?: 'bold' | 'subtle'; + "hue"?: IonChipHue; /** * The mode determines the platform behaviors of the component. */ @@ -6864,11 +6866,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"` if both the shape property and theme config are unset. */ - "shape"?: 'soft' | 'round' | 'rectangular'; + "shape"?: IonChipShape; /** * Set to `"small"` for a chip with less height and padding. Defaults to `"large"` if both the size property and theme config are unset. */ - "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 092ce877ff1..6d55dc8f439 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"` if both the fill property and theme config are unset. */ - @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"` if both the hue property and theme config are unset. */ - @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"` if both the shape property and theme config are unset. */ - @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"` if both the size property and theme config are unset. */ - @Prop() size?: 'small' | 'large'; + @Prop() size?: IonChipSize; componentDidLoad() { if (this.outline) { @@ -84,8 +86,8 @@ export class Chip implements ComponentInterface { * Gets the chip fill. Uses the `fill` property if set, otherwise * checks the theme config and falls back to 'solid' if neither is provided. */ - get fillValue(): string { - const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as string; + get fillValue(): IonChipFill { + const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as IonChipFill; const fill = this.fill || (this.outline ? 'outline' : undefined) || fillConfig; return fill; @@ -95,8 +97,8 @@ export class Chip implements ComponentInterface { * Gets the chip hue. Uses the `hue` property if set, otherwise * checks the theme config and falls back to 'subtle' if neither is provided. */ - get hueValue(): string { - const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as string; + get hueValue(): IonChipHue { + const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as IonChipHue; const hue = this.hue || hueConfig; return hue; @@ -106,8 +108,8 @@ export class Chip implements ComponentInterface { * Gets the chip shape. Uses the `shape` property if set, otherwise * checks the theme config and falls back to 'round' if neither is provided. */ - get shapeValue(): string { - const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as string; + get shapeValue(): IonChipShape { + const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as IonChipShape; const shape = this.shape || shapeConfig; return shape; @@ -117,8 +119,8 @@ export class Chip implements ComponentInterface { * Gets the chip size. Uses the `size` property if set, otherwise * checks the theme config and falls back to 'large' if neither is provided. */ - get sizeValue(): string { - const sizeConfig = config.getObjectValue('IonChip.size', 'large') as string; + get sizeValue(): IonChipSize { + const sizeConfig = config.getObjectValue('IonChip.size', 'large') as IonChipSize; const size = this.size || sizeConfig; return size;