diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md index da25f4b9df..d85781c089 100644 --- a/core/src/components/spinner/readme.md +++ b/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 | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `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` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `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` | +| 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` | +| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number` | +| `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` | +| `paused` | `paused` | If true, the spinner's animation will be paused. Defaults to `false`. | `boolean` | ## CSS Custom Properties diff --git a/core/src/components/spinner/spinner-configs.ts b/core/src/components/spinner/spinner-configs.ts index cfa5ebf2ce..93525a1d41 100644 --- a/core/src/components/spinner/spinner-configs.ts +++ b/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 { - [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; -} +export const SPINNERS: SpinnerConfigs = spinners; +export type SpinnerTypes = keyof typeof SPINNERS; diff --git a/core/src/components/spinner/spinner-interface.ts b/core/src/components/spinner/spinner-interface.ts new file mode 100644 index 0000000000..8d6b4efe3b --- /dev/null +++ b/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; +} diff --git a/core/src/components/spinner/spinner.ios.scss b/core/src/components/spinner/spinner.ios.scss deleted file mode 100644 index e186fb6d07..0000000000 --- a/core/src/components/spinner/spinner.ios.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "./spinner"; -@import "./spinner.ios.vars"; diff --git a/core/src/components/spinner/spinner.ios.vars.scss b/core/src/components/spinner/spinner.ios.vars.scss deleted file mode 100644 index 09aa8d21cb..0000000000 --- a/core/src/components/spinner/spinner.ios.vars.scss +++ /dev/null @@ -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; diff --git a/core/src/components/spinner/spinner.md.scss b/core/src/components/spinner/spinner.md.scss deleted file mode 100644 index 5f7ddeb89a..0000000000 --- a/core/src/components/spinner/spinner.md.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "./spinner"; -@import "./spinner.md.vars"; diff --git a/core/src/components/spinner/spinner.md.vars.scss b/core/src/components/spinner/spinner.md.vars.scss deleted file mode 100644 index 747c0131d9..0000000000 --- a/core/src/components/spinner/spinner.md.vars.scss +++ /dev/null @@ -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; diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index bc7d51b990..1022b32a6c 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/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: { - ios: 'spinner.ios.scss', - md: 'spinner.md.scss' - }, + styleUrl: 'spinner.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 { - let name = this.name || this.config.get('spinner'); - if (!name) { - // fallback - if (this.mode === 'md') { - return 'crescent'; - } else { - return 'lines'; - } + private getName(): SpinnerTypes { + const name = this.name || this.config.get('spinner'); + if (name) { + return name; } - if (name === 'ios') { - // 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; + return (this.mode === 'ios') ? 'lines' : 'crescent'; } hostData() { diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index 3e14667261..e3d54a24f9 100644 --- a/core/src/interface.d.ts +++ b/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';