refactor(chip): add stricter types

Author: thetaPC

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 {
         /**

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';

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,15 +63,15 @@ 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.
   /**
    * Set to `"small"` for a chip with less height and padding.
    *
    * Defaults to `"large"`.
    */
-  @Prop() size?: 'small' | 'large';
+  @Prop() size?: IonChipSize;
 
   componentDidLoad() {
     if (this.outline) {