refactor(spinner): strong typed API and modeless

core/src/components/spinner/readme.md

@@ -11,13 +11,12 @@ The default spinner to use is based on the platform. The default spinner for `io
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type      |
+| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type           |
-| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`   |
+| `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color`        |
-| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner.                                                                                                                                                                            | `number`  |
+| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner.                                                                                                                                                                            | `number`       |
-| `mode`     | `mode`     | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`    |
+| `name`     | --         | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`.                                                         | `SpinnerTypes` |
-| `name`     | `name`     | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`.                                                         | `string`  |
+| `paused`   | `paused`   | If true, the spinner's animation will be paused. Defaults to `false`.                                                                                                                                                                                                  | `boolean`      |
-| `paused`   | `paused`   | If true, the spinner's animation will be paused. Defaults to `false`.                                                                                                                                                                                                  | `boolean` |
 
 
 ## CSS Custom Properties

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

@@ -1,5 +1,6 @@
+import { SpinnerConfigs } from './spinner-interface';
 
-export const SPINNERS: SpinnerConfigs = {
+const spinners = {
 
   'lines': {
     dur: 1000,
@@ -98,20 +99,5 @@ export const SPINNERS: SpinnerConfigs = {
   }
 };
 
-export interface SpinnerConfigs {
+export const SPINNERS: SpinnerConfigs = spinners;
-  [spinnerName: string]: SpinnerConfig;
+export type SpinnerTypes = keyof typeof SPINNERS;
-}
-
-export interface SpinnerConfig {
-  dur: number;
-  circles?: number;
-  lines?: number;
-  fn: (dur: number, index: number, total: number) => SpinnerData;
-}
-
-export interface SpinnerData {
-  r?: number;
-  y1?: number;
-  y2?: number;
-  style: any;
-}

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

@@ -0,0 +1,22 @@
+
+import { SPINNERS } from './spinner-configs';
+
+export type SpinnerTypes = keyof typeof SPINNERS;
+
+export interface SpinnerConfigs {
+  [spinnerName: string]: SpinnerConfig;
+}
+
+export interface SpinnerConfig {
+  dur: number;
+  circles?: number;
+  lines?: number;
+  fn: (dur: number, index: number, total: number) => SpinnerData;
+}
+
+export interface SpinnerData {
+  r?: number;
+  y1?: number;
+  y2?: number;
+  style: any;
+}

core/src/components/spinner/spinner.ios.scss

@@ -1,2 +0,0 @@
-@import "./spinner";
-@import "./spinner.ios.vars";

core/src/components/spinner/spinner.ios.vars.scss

@@ -1,19 +0,0 @@
-@import "../../themes/ionic.globals.ios";
-
-// iOS Spinner
-// --------------------------------------------------
-
-/// @prop - Color of the lines spinner
-$spinner-ios-lines-color:          $text-color-step-400 !default;
-
-/// @prop - Color of the bubbles spinner
-$spinner-ios-bubbles-color:        $text-color !default;
-
-/// @prop - Color of the circles spinner
-$spinner-ios-circles-color:        $text-color-step-400 !default;
-
-/// @prop - Color of the crescent spinner
-$spinner-ios-crescent-color:       $text-color !default;
-
-/// @prop - Color of the dots spinner
-$spinner-ios-dots-color:           $text-color-step-300 !default;

core/src/components/spinner/spinner.md.scss

@@ -1,2 +0,0 @@
-@import "./spinner";
-@import "./spinner.md.vars";

core/src/components/spinner/spinner.md.vars.scss

@@ -1,19 +0,0 @@
-@import "../../themes/ionic.globals.md";
-
-// Material Design Spinner
-// --------------------------------------------------
-
-/// @prop - Color of the lines spinner
-$spinner-md-lines-color:          $text-color-step-400 !default;
-
-/// @prop - Color of the bubbles spinner
-$spinner-md-bubbles-color:        $text-color !default;
-
-/// @prop - Color of the circles spinner
-$spinner-md-circles-color:        $text-color-step-400 !default;
-
-/// @prop - Color of the crescent spinner
-$spinner-md-crescent-color:       $text-color !default;
-
-/// @prop - Color of the dots spinner
-$spinner-md-dots-color:           $text-color-step-300 !default;

core/src/components/spinner/spinner.tsx

@@ -1,21 +1,20 @@
 import { Component, Prop } from '@stencil/core';
 
-import { Color, Config, Mode } from '../../interface';
+import { Color, Config, Mode, SpinnerConfig, SpinnerTypes } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
-import { SPINNERS, SpinnerConfig } from './spinner-configs';
+import { SPINNERS } from './spinner-configs';
 
 @Component({
   tag: 'ion-spinner',
-  styleUrls: {
+  styleUrl: 'spinner.scss',
-    ios: 'spinner.ios.scss',
-    md: 'spinner.md.scss'
-  },
   shadow: true
 })
 export class Spinner {
   @Prop({ context: 'config' }) config!: Config;
 
+  mode!: Mode;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -23,12 +22,6 @@ export class Spinner {
    */
   @Prop() color?: Color;
 
-  /**
-   * The mode determines which platform styles to use.
-   * Possible values are: `"ios"` or `"md"`.
-   */
-  @Prop() mode!: Mode;
-
   /**
    * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
    */
@@ -39,33 +32,19 @@ export class Spinner {
    * spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
    * `"circles"`, `"crescent"`.
    */
-  @Prop() name?: string;
+  @Prop() name?: SpinnerTypes;
 
   /**
    * If true, the spinner's animation will be paused. Defaults to `false`.
    */
   @Prop() paused = false;
 
-  private getName(): string {
+  private getName(): SpinnerTypes {
-    let name = this.name || this.config.get('spinner');
+    const name = this.name || this.config.get('spinner');
-    if (!name) {
+    if (name) {
-      // fallback
+      return name;
-      if (this.mode === 'md') {
-        return 'crescent';
-      } else {
-        return 'lines';
-      }
     }
-    if (name === 'ios') {
+    return (this.mode === 'ios') ? 'lines' : 'crescent';
-      // deprecation warning, renamed in v4
-      console.warn(`spinner "ios" has been renamed to "lines"`);
-      name = 'lines';
-    } else if (name === 'ios-small') {
-      // deprecation warning, renamed in v4
-      console.warn(`spinner "ios-small" has been renamed to "lines-small"`);
-      name = 'lines-small';
-    }
-    return name;
   }
 
   hostData() {

core/src/interface.d.ts

@@ -15,6 +15,7 @@ export * from './components/range/range-interface';
 export * from './components/content/content-interface';
 export * from './components/select/select-interface';
 export * from './components/select-popover/select-popover-interface';
+export * from './components/spinner/spinner-interface';
 export * from './components/tabbar/tabbar-interface';
 export * from './components/toast/toast-interface';
 export * from './components/virtual-scroll/virtual-scroll-interface';