fix(all): strong typing for color

ionic-team · May 14, 2018 · 618f708 · 618f708
1 parent 87fe5ce
commit 618f708
Show file tree

Hide file tree

Showing 48 changed files with 186 additions and 157 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
+import { ActionSheetButton, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -21,7 +21,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
 export class ActionSheet implements OverlayInterface {
 
   mode!: Mode;
-  color!: string;
+  color?: Color;
 
   presented = false;
   animation?: Animation;

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
-import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
+import { AlertButton, AlertInput, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
@@ -27,7 +27,7 @@ export class Alert implements OverlayInterface {
   presented = false;
   animation?: Animation;
 
-  color!: string;
+  color!: Color;
   @Prop() mode!: Mode;
 
   @Element() el!: HTMLStencilElement;

diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { Config, Mode } from '../../interface';
+import { Color, Config, Mode } from '../../interface';
 import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
 
 @Component({
@@ -24,7 +24,7 @@ export class BackButton {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 
 @Component({
@@ -19,7 +19,7 @@ export class Badge {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
-import { CssClassMap, Mode, RouterDirection } from '../../interface';
+import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/theme';
 
 
@@ -22,7 +22,7 @@ export class Button {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
@@ -176,7 +176,7 @@ function getButtonTypeClassMap(buttonType: string, type: string|undefined, mode:
   };
 }
 
-function getColorClassMap(buttonType: string, color: string, fill: string, mode: Mode): CssClassMap {
+function getColorClassMap(buttonType: string, color: string | undefined, fill: string, mode: Mode): CssClassMap {
   let className = buttonType;
 
   if (buttonType !== 'bar-button' && fill === 'solid') {

diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 @Component({
   tag: 'ion-card-content',
@@ -16,7 +16,7 @@ export class CardContent {
    * The color to use for the text.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
@@ -1,6 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
 @Component({
@@ -18,7 +18,7 @@ export class CardHeader {
    * The color to use for the background.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop} from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 
 @Component({
@@ -17,7 +17,7 @@ export class CardSubtitle {
    * The color to use for the text color.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop} from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 
 @Component({
@@ -18,7 +18,7 @@ export class CardTitle {
    * The color to use for the text color.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 @Component({
   tag: 'ion-card',
@@ -17,7 +17,7 @@ export class Card {
    * The color to use for the background.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
-import { CheckboxInput, CheckedInputChangeEvent, CssClassMap, Mode, StyleEvent } from '../../interface';
+import { CheckboxInput, CheckedInputChangeEvent, Color, CssClassMap, Mode, StyleEvent } from '../../interface';
 import { deferEvent } from '../../utils/helpers';
 
 
@@ -26,7 +26,7 @@ export class Checkbox implements CheckboxInput {
    * The color to use.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { CssClassMap, Mode } from '../../interface';
+import { Color, CssClassMap, Mode } from '../../interface';
 import { getButtonClassMap, getElementClassMap } from '../../utils/theme';
 
 @Component({
@@ -16,7 +16,7 @@ export class ChipButton {
    * The color to use.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
@@ -77,7 +77,7 @@ export class ChipButton {
 /**
  * Get the classes for the color
  */
-function getColorClassMap(color: string, buttonType: string, style: string, mode: Mode): CssClassMap {
+function getColorClassMap(color: string | undefined, buttonType: string, style: string, mode: Mode): CssClassMap {
   const className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
 
   const map: CssClassMap = {

diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 
 @Component({
@@ -17,7 +17,7 @@ export class Chip {
    * The color to use.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Listen, Method, Prop } from '@stencil/core';
-import { Config, Mode, QueueController } from '../../interface';
+import { Color, Config, Mode, QueueController } from '../../interface';
 
 
 @Component({
@@ -14,7 +14,7 @@ export class Content {
   private scrollEl?: HTMLIonScrollElement;
 
   mode!: Mode;
-  color!: string;
+  color?: Color;
 
   @Element() el!: HTMLElement;
 

diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { CssClassMap, Mode } from '../../interface';
+import { Color, CssClassMap, Mode } from '../../interface';
 import { createThemedClasses, getElementClassMap } from '../../utils/theme';
 
 
@@ -21,7 +21,7 @@ export class FabButton {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
@@ -1,6 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
 @Component({
@@ -15,7 +15,7 @@ import { createThemedClasses } from '../../utils/theme';
 })
 export class Footer {
   mode!: Mode;
-  color!: string;
+  color?: Color;
 
   /**
    * If true, the footer will be translucent.

diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
@@ -1,6 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
 @Component({
@@ -15,7 +15,7 @@ import { createThemedClasses } from '../../utils/theme';
 })
 export class Header {
   mode!: Mode;
-  color!: string;
+  color?: Color;
 
   /**
    * If true, the header will be translucent.

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
-import { InputChangeEvent, Mode, StyleEvent  } from '../../interface';
+import { Color, InputChangeEvent, Mode, StyleEvent  } from '../../interface';
 import { debounceEvent, deferEvent } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 import { InputComponent } from './input-base';
@@ -21,7 +21,7 @@ export class Input implements InputComponent {
   didBlurAfterEdit = false;
 
   mode!: Mode;
-  color!: string;
+  color?: Color;
 
   @Element() el!: HTMLElement;
 

diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 
 @Component({
@@ -20,7 +20,7 @@ export class ItemDivider {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 
 @Component({
@@ -18,7 +18,7 @@ export class ItemOption {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
-import { CssClassMap, Mode, RouterDirection } from '../../interface';
+import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
 
 
@@ -23,7 +23,7 @@ export class Item {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
-import { Mode, StyleEvent } from '../../interface';
+import { Color, Mode, StyleEvent } from '../../interface';
 
 
 @Component({
@@ -21,7 +21,7 @@ export class Label {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.

diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Mode } from '../../interface';
+import { Color, Mode } from '../../interface';
 
 
 @Component({
@@ -19,7 +19,7 @@ export class ListHeader {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
-  @Prop() color!: string;
+  @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.