feat(spinner): add recipe and config types

Author: thetaPC

core/src/components.d.ts

@@ -39,6 +39,7 @@ import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectModalOption } from "./components/select-modal/select-modal-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+import { IonSpinnerSizes } from "./components/spinner/spinner.interfaces";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -77,6 +78,7 @@ export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectModalOption } from "./components/select-modal/select-modal-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+export { IonSpinnerSizes } from "./components/spinner/spinner.interfaces";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -3883,7 +3885,7 @@ export namespace Components {
         /**
           * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"medium"`.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: IonSpinnerSizes;
     }
     interface IonSplitPane {
         /**
@@ -9909,7 +9911,7 @@ declare namespace LocalJSX {
         /**
           * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"medium"`.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: IonSpinnerSizes;
     }
     interface IonSplitPane {
         /**

core/src/components/spinner/spinner-configs.ts

@@ -1,4 +1,4 @@
-import type { SpinnerConfigs } from './spinner-interface';
+import type { SpinnerConfigs } from './spinner.interfaces';
 
 const spinners = {
   bubbles: {

core/src/components/spinner/spinner-interface.ts

@@ -0,0 +1,78 @@
+export interface SpinnerConfigs {
+  [spinnerName: string]: SpinnerConfig;
+}
+
+export interface SpinnerConfig {
+  dur: number;
+  circles?: number;
+  lines?: number;
+  elmDuration?: boolean;
+  fn: (dur: number, index: number, total: number) => SpinnerData;
+}
+
+interface SpinnerData {
+  r?: number;
+  y1?: number;
+  y2?: number;
+  cx?: number;
+  cy?: number;
+  style: { [key: string]: string | undefined };
+  viewBox?: string;
+  transform?: string;
+}
+
+export type IonSpinnerRecipe = {
+  color?: string;
+
+  lines?: {
+    stroke?: {
+      width?: string;
+    };
+
+    small?: {
+      stroke?: {
+        width?: string;
+      };
+    };
+
+    sharp?: {
+      stroke?: {
+        width?: string;
+      };
+
+      small?: {
+        stroke?: {
+          width?: string;
+        };
+      };
+    };
+  };
+
+  circular?: {
+    stroke?: {
+      width?: string;
+    };
+  };
+
+  crescent?: {
+    stroke?: {
+      width?: string;
+    };
+  };
+
+  // Sizes
+  size?: {
+    [K in IonSpinnerSizes]?: IonSpinnerSizeDefinition;
+  };
+};
+
+type IonSpinnerSizeDefinition = {
+  width?: string;
+  height?: string;
+};
+
+export type IonSpinnerConfig = {
+  size?: IonSpinnerSizes;
+};
+
+export type IonSpinnerSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

core/src/components/spinner/spinner.interfaces.ts

@@ -8,7 +8,7 @@ import type { Color } from '../../interface';
 
 import type { SpinnerTypes } from './spinner-configs';
 import { SPINNERS } from './spinner-configs';
-import type { SpinnerConfig } from './spinner-interface';
+import type { SpinnerConfig, IonSpinnerSizes } from './spinner.interfaces';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -51,7 +51,7 @@ export class Spinner implements ComponentInterface {
    *
    * Defaults to `"medium"`.
    */
-  @Prop() size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: IonSpinnerSizes;
 
   private getName(): SpinnerTypes {
     const spinnerName = this.name || config.get('spinner');
@@ -67,7 +67,6 @@ export class Spinner implements ComponentInterface {
    */
   get sizeValue(): string {
     const sizeConfig = config.getObjectValue('IonSpinner.size', 'medium') as string;
-    console.log('sizeConfig', sizeConfig);
     const size = this.size || sizeConfig;
 
     return size;

core/src/components/spinner/spinner.tsx

@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
 
 /**
  * This behavior does not vary across directions.
- * 
+ *
  * `ios` does not differ from `md`.
  */
 configs({ directions: ['ltr'], modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {

core/src/components/spinner/test/size/spinner.e2e.ts

@@ -1,4 +1,5 @@
 import type { IonChipRecipe, IonChipConfig } from '../components/chip/chip.interfaces';
+import type { IonSpinnerRecipe, IonSpinnerConfig } from '../components/spinner/spinner.interfaces';
 import type { IonicConfig as IonicGlobalConfig } from '../utils/config';
 
 // Platform-specific theme
@@ -245,7 +246,7 @@ export type BaseTheme = {
 export type IonicConfig = IonicGlobalConfig & {
   components?: {
     IonChip?: IonChipConfig;
-    IonSpinner?: any;
+    IonSpinner?: IonSpinnerConfig;
   };
 };
 
@@ -283,7 +284,7 @@ export type DefaultTheme = BaseTheme & {
 
 type Components = {
   IonChip?: IonChipRecipe;
-  IonSpinner?: any;
+  IonSpinner?: IonSpinnerRecipe;
 
   IonCard?: any;
   IonItem?: any;