javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
core/src/components/button/button.tsx
View File

@ -1,6 +1,6 @@
import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/theme';
import { openURL } from '../../utils/theme';
@Component({
@ -8,7 +8,8 @@ import { getButtonClassMap, getElementClassMap, openURL } from '../../utils/them
styleUrls: {
ios: 'button.ios.scss',
md: 'button.md.scss'
}
},
shadow: true,
})
export class Button {
@Element() el!: HTMLElement;
@ -37,20 +38,20 @@ export class Button {
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
@Prop() disabled = false;
@Prop({ reflectToAttr: true }) disabled = false;
/**
* Set to `"block"` for a full-width button or to `"full"` for a full-width button
* without left and right borders.
*/
@Prop() expand?: 'full' | 'block';
@Prop({reflectToAttr: true}) expand?: 'full' | 'block';
/**
* 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
* a toolbar, where the default is `"clear"`.
*/
@Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
@Prop({reflectToAttr: true, mutable: true}) fill?: 'clear' | 'outline' | 'solid' | 'default';
/**
* When using a router, it specifies the transition direction when navigating to
@ -68,13 +69,13 @@ export class Button {
* The button shape.
* Possible values are: `"round"`.
*/
@Prop() shape?: 'round';
@Prop({reflectToAttr: true}) shape?: 'round';
/**
* The button size.
* Possible values are: `"small"`, `"default"`, `"large"`.
*/
@Prop() size?: 'small' | 'default' | 'large';
@Prop({reflectToAttr: true}) size?: 'small' | 'default' | 'large';
/**
* If true, activates a button with a heavier font weight.
@ -99,8 +100,8 @@ export class Button {
@Event() ionBlur!: EventEmitter<void>;
componentWillLoad() {
if (this.el.closest('ion-buttons')) {
this.buttonType = 'bar-button';
if (this.fill === undefined) {
this.fill = this.el.closest('ion-buttons') ? 'clear' : 'solid';
}
}
@ -117,21 +118,26 @@ export class Button {
this.ionBlur.emit();
}
protected render() {
hostData() {
const { buttonType, color, expand, fill, mode, shape, size, strong } = this;
const TagType = this.href ? 'a' : 'button';
const buttonClasses = {
...getButtonClassMap(buttonType, mode),
...getButtonTypeClassMap(buttonType, expand, mode),
...getButtonTypeClassMap(buttonType, size, mode),
...getButtonTypeClassMap(buttonType, shape, mode),
...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
...getColorClassMap(buttonType, color, fill, mode),
...getElementClassMap(this.el.classList),
'focused': this.keyFocus
return {
class: {
...getButtonClassMap(buttonType, mode),
...getButtonTypeClassMap(buttonType, expand, mode),
...getButtonTypeClassMap(buttonType, size, mode),
...getButtonTypeClassMap(buttonType, shape, mode),
...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
...getColorClassMap(buttonType, color, fill, mode),
'focused': this.keyFocus,
},
'tappable': true,
};
}
protected render() {
const TagType = this.href ? 'a' : 'button';
const attrs = (TagType === 'button')
? { type: this.type }
: { href: this.href };
@ -139,7 +145,7 @@ export class Button {
return (
<TagType
{...attrs}
class={buttonClasses}
class="button-native"
disabled={this.disabled}
onFocus={this.onFocus.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
@ -151,13 +157,27 @@ export class Button {
<slot></slot>
<slot name="end"></slot>
</span>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
{ this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el} /> }
</TagType>
);
}
}
/**
* Get the classes based on the button type
* e.g. alert-button, action-sheet-button
*/
function getButtonClassMap(buttonType: string | undefined, mode: Mode): CssClassMap {
if (!buttonType) {
return {};
}
return {
[buttonType]: true,
[`${buttonType}-${mode}`]: true
};
}
/**
* Get the classes based on the type
* e.g. block, full, round, large
@ -173,32 +193,19 @@ function getButtonTypeClassMap(buttonType: string, type: string|undefined, mode:
};
}
function getColorClassMap(buttonType: string, color: string | undefined, fill: string, mode: Mode): CssClassMap {
function getColorClassMap(buttonType: string, color: string | undefined, fill: string | undefined, mode: Mode): CssClassMap {
let className = buttonType;
if (buttonType !== 'bar-button' && fill === 'solid') {
fill = 'default';
}
if (fill && fill !== 'default') {
if (fill) {
className += `-${fill.toLowerCase()}`;
}
// special case for a default bar button
// 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 += '-' + fill.toLowerCase();
}
}
const map: CssClassMap = {
[className]: true,
[`${className}-${mode}`]: true,
};
if (color) {
map[`${className}-${mode}-${color}`] = true;
map[`ion-color-${color}`] = true;
}
return map;
}