refactor(chip): add stricter types (#31019)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

After working on spinner, I realized that some of the type can be more
strict.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated types

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A

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";
@@ -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 {
         /**

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"` 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,15 +63,15 @@ 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.
   /**
    * Set to `"small"` for a chip with less height and padding.
    *
    * 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;