From b49e9eb0276b6adf9c9b9309756a213100f3cf3e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 20 Mar 2018 12:49:17 -0400 Subject: [PATCH] refactor(spinner): rename lines-sm to lines-small also adds this spinner class to the infinite scroll to override the color --- .../infinite-scroll-content.ios.scss | 2 +- .../infinite-scroll-content/infinite-scroll-content.md.scss | 2 ++ core/src/components/loading/loading.ios.scss | 2 +- core/src/components/loading/loading.md.scss | 2 +- core/src/components/loading/loading.tsx | 2 +- core/src/components/loading/readme.md | 4 ++-- core/src/components/refresher/refresher.ios.scss | 2 +- core/src/components/refresher/refresher.md.scss | 2 +- core/src/components/spinner/readme.md | 6 +++--- core/src/components/spinner/spinner-configs.ts | 2 +- core/src/components/spinner/spinner.ios.scss | 4 ++-- core/src/components/spinner/spinner.md.scss | 4 ++-- core/src/components/spinner/spinner.scss | 6 +++--- core/src/components/spinner/spinner.tsx | 6 +++--- core/src/components/spinner/test/basic/index.html | 2 +- 15 files changed, 25 insertions(+), 23 deletions(-) diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.scss index 5f2eb29530..12cb16faae 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.scss @@ -6,7 +6,7 @@ } .infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line, -.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-sm-ios line, +.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line, .infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle { stroke: $infinite-scroll-ios-loading-color; } diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.scss index a1e88e4f12..6a5e906775 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.scss @@ -5,6 +5,8 @@ color: $infinite-scroll-md-loading-text-color; } +.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line, +.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line, .infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle { stroke: $infinite-scroll-md-loading-color; } diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss index 391ecefa23..0341e47300 100644 --- a/core/src/components/loading/loading.ios.scss +++ b/core/src/components/loading/loading.ios.scss @@ -49,7 +49,7 @@ // ----------------------------------------- .loading-ios .spinner-lines-ios line, -.loading-ios .spinner-lines-sm-ios line { +.loading-ios .spinner-lines-small-ios line { stroke: $loading-ios-spinner-lines-color; } diff --git a/core/src/components/loading/loading.md.scss b/core/src/components/loading/loading.md.scss index 09aa042a27..4a3cd88e88 100644 --- a/core/src/components/loading/loading.md.scss +++ b/core/src/components/loading/loading.md.scss @@ -36,7 +36,7 @@ // ----------------------------------------- .loading-md .spinner-lines-md line, -.loading-md .spinner-lines-sm-md line { +.loading-md .spinner-lines-small-md line { stroke: $loading-md-spinner-lines-color; } diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index 2e506b6d14..9faea49d35 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -77,7 +77,7 @@ export class Loading implements OverlayInterface { @Prop() showBackdrop = true; /** - * The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, + * The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, * `"bubbles"`, `"circles"`, `"crescent"`. */ @Prop() spinner: string; diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 04878374b3..1333df6a4e 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -104,7 +104,7 @@ If true, a backdrop will be displayed behind the loading indicator. Defaults to string -The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, +The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. @@ -195,7 +195,7 @@ If true, a backdrop will be displayed behind the loading indicator. Defaults to string -The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`, +The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. diff --git a/core/src/components/refresher/refresher.ios.scss b/core/src/components/refresher/refresher.ios.scss index dead885aa0..cc455e6571 100644 --- a/core/src/components/refresher/refresher.ios.scss +++ b/core/src/components/refresher/refresher.ios.scss @@ -15,7 +15,7 @@ } .refresher-ios .refresher-refreshing .spinner-lines-ios line, -.refresher-ios .refresher-refreshing .spinner-lines-sm-ios line, +.refresher-ios .refresher-refreshing .spinner-lines-small-ios line, .refresher-ios .refresher-refreshing .spinner-crescent circle { stroke: $refresher-ios-icon-color; } diff --git a/core/src/components/refresher/refresher.md.scss b/core/src/components/refresher/refresher.md.scss index 8858036dcb..334734a17d 100644 --- a/core/src/components/refresher/refresher.md.scss +++ b/core/src/components/refresher/refresher.md.scss @@ -15,7 +15,7 @@ } .refresher-md .refresher-refreshing .spinner-lines-md line, -.refresher-md .refresher-refreshing .spinner-lines-sm-md line, +.refresher-md .refresher-refreshing .spinner-lines-small-md line, .refresher-md .refresher-refreshing .spinner-crescent circle { stroke: $refresher-md-icon-color; } diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md index f3faf36558..69e271cd09 100644 --- a/core/src/components/spinner/readme.md +++ b/core/src/components/spinner/readme.md @@ -12,7 +12,7 @@ The default spinner to use is based on the platform. The default spinner for `io - + @@ -66,7 +66,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl string 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-sm"`, `"dots"`, `"bubbles"`, +spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. @@ -109,7 +109,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl string 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-sm"`, `"dots"`, `"bubbles"`, +spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. diff --git a/core/src/components/spinner/spinner-configs.ts b/core/src/components/spinner/spinner-configs.ts index aa7a5d4034..1ec3b58d8b 100644 --- a/core/src/components/spinner/spinner-configs.ts +++ b/core/src/components/spinner/spinner-configs.ts @@ -21,7 +21,7 @@ export const SPINNERS: SpinnerConfigs = { } }, - 'lines-sm': { + 'lines-small': { dur: 1000, lines: 12, fn: (dur: number, index: number, total: number) => { diff --git a/core/src/components/spinner/spinner.ios.scss b/core/src/components/spinner/spinner.ios.scss index c54658ba44..e257d36c2c 100644 --- a/core/src/components/spinner/spinner.ios.scss +++ b/core/src/components/spinner/spinner.ios.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- .spinner-lines-ios line, -.spinner-lines-sm-ios line { +.spinner-lines-small-ios line { stroke: $spinner-ios-lines-color; } @@ -35,7 +35,7 @@ .spinner-ios-#{$color-name} { &.spinner-lines line, - &.spinner-lines-sm line, + &.spinner-lines-small line, &.spinner-crescent circle { stroke: $color-base; } diff --git a/core/src/components/spinner/spinner.md.scss b/core/src/components/spinner/spinner.md.scss index 72c79abef8..d61e170c9c 100644 --- a/core/src/components/spinner/spinner.md.scss +++ b/core/src/components/spinner/spinner.md.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- .spinner-lines-md line, -.spinner-lines-sm-md line { +.spinner-lines-small-md line { stroke: $spinner-md-lines-color; } @@ -35,7 +35,7 @@ .spinner-md-#{$color-name} { &.spinner-lines line, - &.spinner-lines-sm line, + &.spinner-lines-small line, &.spinner-crescent circle { stroke: $color-base; } diff --git a/core/src/components/spinner/spinner.scss b/core/src/components/spinner/spinner.scss index 42676f7fa6..730040f91c 100644 --- a/core/src/components/spinner/spinner.scss +++ b/core/src/components/spinner/spinner.scss @@ -27,17 +27,17 @@ ion-spinner.spinner-paused svg { } -// Spinner: lines / lines-sm +// Spinner: lines / lines-small // -------------------------------------------------- .spinner-lines line, -.spinner-lines-sm line { +.spinner-lines-small line { stroke-width: 4px; stroke-linecap: round; } .spinner-lines svg, -.spinner-lines-sm svg { +.spinner-lines-small svg { animation: spinner-fade-out 1s linear infinite; } diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx index e1547bb8c1..6589b8f117 100644 --- a/core/src/components/spinner/spinner.tsx +++ b/core/src/components/spinner/spinner.tsx @@ -38,7 +38,7 @@ export class Spinner { /** * 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-sm"`, `"dots"`, `"bubbles"`, + * spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, * `"circles"`, `"crescent"`. */ @Prop() name: string; @@ -65,8 +65,8 @@ export class Spinner { name = 'lines'; } else if (name === 'ios-small') { // deprecation warning, renamed in v4 - console.warn(`spinner "ios-small" has been renamed to "lines-sm"`); - name = 'lines-sm'; + console.warn(`spinner "ios-small" has been renamed to "lines-small"`); + name = 'lines-small'; } return name; } diff --git a/core/src/components/spinner/test/basic/index.html b/core/src/components/spinner/test/basic/index.html index 12eb01447c..07b0281b52 100644 --- a/core/src/components/spinner/test/basic/index.html +++ b/core/src/components/spinner/test/basic/index.html @@ -29,7 +29,7 @@ Show Lines - + Show Lines Small