diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 8307503ed2..2576eb6bfb 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -362,16 +362,11 @@ declare global { itemButton?: boolean, href?: string, buttonType?: string, - large?: boolean, - small?: boolean, - default?: boolean, + size?: 'small' | 'large', disabled?: boolean, - outline?: boolean, - clear?: boolean, - solid?: boolean, + fill?: 'clear' | 'outline' | 'solid' | 'default', round?: boolean, - block?: boolean, - full?: boolean, + expand?: 'full' | 'block', strong?: boolean, color?: string, mode?: 'ios' | 'md' diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index f144c9b7bc..b2177af2e8 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -1,7 +1,56 @@ -import { Component, CssClassMap, Element, Prop } from '@stencil/core'; +import { Component, Element, Prop } from '@stencil/core'; import { getElementClassObject } from '../../utils/theme'; - +/** + * @name Button + * @module ionic + * @description + * Buttons are simple components in Ionic. They can consist of text and icons + * and be enhanced by a wide range of attributes. + * + * @usage + * + * ```html + * + * + * Default + * Secondary + * Danger + * Light + * Dark + * + * + * Full Button + * Block Button + * Round Button + * + * + * Outline + Full + * Outline + Block + * Outline + Round + * + * + * + * + * Left Icon + * + * + * + * Right Icon + * + * + * + * + * + * + * + * + * Large + * Default + * Small + * ``` + * + */ @Component({ tag: 'ion-button', styleUrls: { @@ -27,22 +76,10 @@ export class Button { @Prop() buttonType: string = 'button'; /** - * @input {boolean} If true, activates the large button size. - * Type: size + * @input {string} The button size. + * Possible values are: `"small"`, `"large"`. */ - @Prop() large: boolean = false; - - /** - * @input {boolean} If true, activates the small button size. - * Type: size - */ - @Prop() small: boolean = false; - - /** - * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item. - * Type: size - */ - @Prop() default: boolean = false; + @Prop() size: 'small' | 'large'; /** * @input {boolean} If true, sets the button into a disabled state. @@ -50,22 +87,11 @@ export class Button { @Prop() disabled: boolean = false; /** - * @input {boolean} If true, activates a transparent button style with a border. - * Type: style + * @input {string} Set to `"clear"` for a transparent button, to `"outline"` for a transparent + * button with a border, or to `"solid"`. The default style is `"solid"` except inside of + * `ion-navbar`, where the default is `"clear"`. */ - @Prop() outline: boolean = false; - - /** - * @input {boolean} If true, activates a transparent button style without a border. - * Type: style - */ - @Prop() clear: boolean = false; - - /** - * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar. - * Type: style - */ - @Prop() solid: boolean = false; + @Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default'; /** * @input {boolean} If true, activates a button with rounded corners. @@ -74,17 +100,10 @@ export class Button { @Prop() round: boolean = false; /** - * @input {boolean} If true, activates a button style that fills the available width. - * Type: display + * @input {string} Set to `"block"` for a full-width button or to `"full"` for a full-width button + * without left and right borders. */ - @Prop() block: boolean = false; - - /** - * @input {boolean} If true, activates a button style that fills the available width without - * a left and right border. - * Type: display - */ - @Prop() full: boolean = false; + @Prop() expand: 'full' | 'block'; /** * @input {boolean} If true, activates a button with a heavier font weight. @@ -106,45 +125,36 @@ export class Button { */ @Prop() mode: 'ios' | 'md'; - render() { - const buttonType = this.buttonType; - const mode = this.mode; + protected render() { - const size = - (this.large ? 'large' : null) || - (this.small ? 'small' : null) || - (this.default ? 'default' : null); + const { + buttonType, + itemButton, + color, + expand, + fill, + mode, + round, + size, + strong + } = this; - const shape = (this.round ? 'round' : null); - - const display = - (this.block ? 'block' : null) || - (this.full ? 'full' : null); - - const decorator = (this.strong ? 'strong' : null); - - const hostClasses = getElementClassObject(this.el.classList); - - const elementClasses: CssClassMap = [] + const elementClasses: string[] = [] .concat( getButtonClassList(buttonType, mode), - getClassList(buttonType, shape, mode), - getClassList(buttonType, display, mode), + getClassList(buttonType, expand, mode), getClassList(buttonType, size, mode), - getClassList(buttonType, decorator, mode), - getStyleClassList(mode, this.color, buttonType, this.outline, this.clear, this.solid), - getItemClassList(this.itemButton, size) - ) - .reduce((prevValue, cssClass) => { - prevValue[cssClass] = true; - return prevValue; - }, {}); + getClassList(buttonType, round ? 'round' : null, mode), + getClassList(buttonType, strong ? 'strong' : null, mode), + getColorClassList(buttonType, color, fill, mode), + getItemClassList(itemButton, size) + ); const TagType = this.href ? 'a' : 'button'; const buttonClasses = { - ...hostClasses, - ...elementClasses + ...getElementClassObject(this.el.classList), + ...getElementClassObject(elementClasses) }; return ( @@ -191,55 +201,33 @@ function getClassList(buttonType: string, type: string, mode: string): string[] ]; } -/** - * Get the classes for the color - */ -function getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] { - style = (buttonType !== 'bar-button' && style === 'solid') ? 'default' : style; +function getColorClassList(buttonType: string, color: string, fill: string, mode: string): string[] { + let className = buttonType; - let className = - buttonType + - ((style && style !== 'default') ? - '-' + style.toLowerCase() : - ''); + if (buttonType !== 'bar-button' && fill === 'solid') { + fill = 'default'; + } + + if (fill && fill !== 'default') { + className += `-${fill.toLowerCase()}`; + } // special case for a default bar button - // if the bar button is default it should get the style - // but if a color is passed the style shouldn't be added - if (buttonType === 'bar-button' && style === 'default') { + // if the bar button is default it should get the fill + // but if a color is passed the fill shouldn't be added + if (buttonType === 'bar-button' && fill === 'default') { className = buttonType; if (!color) { - className += '-' + style.toLowerCase(); + className += '-' + fill.toLowerCase(); } } return [`${className}-${mode}`].concat( - style !== 'default' ? `${className}` : [], + fill !== 'default' ? `${className}` : [], color ? `${className}-${mode}-${color}` : [] ); } -/** - * Get the classes for the style - * e.g. outline, clear, solid - */ -function getStyleClassList(mode: string, color: string, buttonType: string, outline: boolean, clear: boolean, solid: boolean): string[] { - let classList = [].concat( - outline ? getColorClassList(color, buttonType, 'outline', mode) : [], - clear ? getColorClassList(color, buttonType, 'clear', mode) : [], - solid ? getColorClassList(color, buttonType, 'solid', mode) : [] - ); - - if (classList.length === 0) { - classList = getColorClassList(color, buttonType, 'default', mode); - } - - return classList; -} - -/** - * Get the item classes for the button - */ function getItemClassList(itemButton: boolean, size: string) { return itemButton && !size ? ['item-button'] : []; } diff --git a/packages/core/src/components/button/test/toolbar/index.html b/packages/core/src/components/button/test/toolbar/index.html index e0551a96eb..63bd6c2848 100644 --- a/packages/core/src/components/button/test/toolbar/index.html +++ b/packages/core/src/components/button/test/toolbar/index.html @@ -43,7 +43,7 @@ - + Close @@ -94,17 +94,17 @@ - + - + Solid Solid - + Help @@ -113,17 +113,17 @@ - + - + Solid Solid Activated - + Help @@ -132,16 +132,16 @@ - + - + Star - + @@ -150,16 +150,16 @@ - + - + Star - + diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx index b01c87d5f2..f83c210c21 100644 --- a/packages/core/src/components/searchbar/searchbar.tsx +++ b/packages/core/src/components/searchbar/searchbar.tsx @@ -344,7 +344,7 @@ export class Searchbar { @@ -362,7 +362,7 @@ export class Searchbar { autoCorrect={this.autocorrect} spellCheck={this.spellcheck}/> @@ -370,7 +370,7 @@ export class Searchbar { , diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index b450f0167c..8af47d5886 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -197,7 +197,7 @@ export class Toast { ?
{this.message}
: null} {this.showCloseButton - ? this.dismiss()}> + ? this.dismiss()}> {this.closeButtonText || 'Close'} : null} diff --git a/packages/core/src/utils/theme.ts b/packages/core/src/utils/theme.ts index 2d5d426f29..3acf2bd13c 100644 --- a/packages/core/src/utils/theme.ts +++ b/packages/core/src/utils/theme.ts @@ -26,11 +26,11 @@ export function createThemedClasses(mode: string, color: string, classes: string /** * Get the classes from a class list and return them as an object */ -export function getElementClassObject(classList: DOMTokenList): CssClassMap { +export function getElementClassObject(classList: DOMTokenList | string[]): CssClassMap { let classObj: CssClassMap = {}; for (var i = 0; i < classList.length; i++) { - classObj[classList.item(i)] = true; + classObj[classList[i]] = true; } return classObj;