Skip to content
Permalink
Browse files

fix(all): strong typing for color

  • Loading branch information...
manucorporat committed May 14, 2018
1 parent 87fe5ce commit 618f708bc4ad9ce7a28c02c49dc0ab35cf3871ad
Showing with 186 additions and 157 deletions.
  1. +67 βˆ’64 core/src/components.d.ts
  2. +2 βˆ’2 core/src/components/action-sheet/action-sheet.tsx
  3. +2 βˆ’2 core/src/components/alert/alert.tsx
  4. +2 βˆ’2 core/src/components/back-button/back-button.tsx
  5. +2 βˆ’2 core/src/components/badge/badge.tsx
  6. +3 βˆ’3 core/src/components/button/button.tsx
  7. +2 βˆ’2 core/src/components/card-content/card-content.tsx
  8. +2 βˆ’2 core/src/components/card-header/card-header.tsx
  9. +2 βˆ’2 core/src/components/card-subtitle/card-subtitle.tsx
  10. +2 βˆ’2 core/src/components/card-title/card-title.tsx
  11. +2 βˆ’2 core/src/components/card/card.tsx
  12. +2 βˆ’2 core/src/components/checkbox/checkbox.tsx
  13. +3 βˆ’3 core/src/components/chip-button/chip-button.tsx
  14. +2 βˆ’2 core/src/components/chip/chip.tsx
  15. +2 βˆ’2 core/src/components/content/content.tsx
  16. +2 βˆ’2 core/src/components/fab-button/fab-button.tsx
  17. +2 βˆ’2 core/src/components/footer/footer.tsx
  18. +2 βˆ’2 core/src/components/header/header.tsx
  19. +2 βˆ’2 core/src/components/input/input.tsx
  20. +2 βˆ’2 core/src/components/item-divider/item-divider.tsx
  21. +2 βˆ’2 core/src/components/item-option/item-option.tsx
  22. +2 βˆ’2 core/src/components/item/item.tsx
  23. +2 βˆ’2 core/src/components/label/label.tsx
  24. +2 βˆ’2 core/src/components/list-header/list-header.tsx
  25. +2 βˆ’2 core/src/components/loading/loading.tsx
  26. +2 βˆ’2 core/src/components/menu/menu.tsx
  27. +2 βˆ’2 core/src/components/modal/modal.tsx
  28. +2 βˆ’2 core/src/components/note/note.tsx
  29. +2 βˆ’2 core/src/components/popover/popover.tsx
  30. +2 βˆ’2 core/src/components/radio/radio.tsx
  31. +2 βˆ’2 core/src/components/range/range.tsx
  32. +2 βˆ’2 core/src/components/searchbar/searchbar.tsx
  33. +2 βˆ’2 core/src/components/segment-button/segment-button.tsx
  34. +2 βˆ’2 core/src/components/segment/segment.tsx
  35. +2 βˆ’2 core/src/components/spinner/spinner.tsx
  36. +1 βˆ’1 core/src/components/tab-button/tab-button.tsx
  37. +2 βˆ’2 core/src/components/tab/readme.md
  38. +2 βˆ’2 core/src/components/tab/tab.tsx
  39. +2 βˆ’2 core/src/components/tabbar/tabbar.tsx
  40. +2 βˆ’2 core/src/components/tabs/tabs.tsx
  41. +2 βˆ’2 core/src/components/text/text.tsx
  42. +2 βˆ’2 core/src/components/textarea/textarea.tsx
  43. +24 βˆ’0 core/src/components/title/readme.md
  44. +5 βˆ’4 core/src/components/title/title.tsx
  45. +2 βˆ’2 core/src/components/toast/toast.tsx
  46. +2 βˆ’2 core/src/components/toggle/toggle.tsx
  47. +2 βˆ’2 core/src/components/toolbar/toolbar.tsx
  48. +1 βˆ’0 core/src/interface.d.ts

Large diffs are not rendered by default.

@@ -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;
@@ -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;
@@ -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.
@@ -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.
@@ -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') {
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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 = {
@@ -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.
@@ -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;

@@ -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.
@@ -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.
@@ -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.
@@ -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;

@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.

0 comments on commit 618f708

Please sign in to comment.
You can’t perform that action at this time.