javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +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 21327 additions and 21181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
core/src/components/chip-button/chip-button.ios.scss
View File

@ -1,51 +0,0 @@
@import "./chip-button";
@import "./chip-button.ios.vars";
// iOS Chip Button
// --------------------------------------------------
.chip-button-ios {
color: $chip-button-ios-text-color;
background-color: $chip-button-ios-background-color;
}
// iOS Clear Chip Button
// --------------------------------------------------
.chip-button-clear-ios {
color: $chip-button-ios-clear-text-color;
background-color: $chip-button-ios-clear-background-color;
}
// Generate iOS Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.chip-button-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
.chip-ios-#{$color-name} .chip-button-ios {
color: $color-base;
background-color: $color-contrast;
}
// Clear Chip Buttons
// --------------------------------------------------
.chip-button-clear-ios-#{$color-name} {
color: $color-base;
background-color: transparent;
}
.chip-ios-#{$color-name} .chip-button-clear-ios {
color: $color-contrast;
background-color: transparent;
}
}

19
core/src/components/chip-button/chip-button.ios.vars.scss
View File

@ -1,19 +0,0 @@
@import "../../themes/ionic.globals.ios";
// iOS Chip Button
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Text color of the chip button
$chip-button-ios-text-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the clear chip button
$chip-button-ios-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-ios-clear-text-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-ios-clear-icon-fill-color: ion-color($colors-ios, primary, base, ios) !default;

51
core/src/components/chip-button/chip-button.md.scss
View File

@ -1,51 +0,0 @@
@import "./chip-button";
@import "./chip-button.md.vars";
// Material Design Chip Button
// --------------------------------------------------
.chip-button-md {
color: $chip-button-md-text-color;
background-color: $chip-button-md-background-color;
}
// Material Design Clear Chip Button
// --------------------------------------------------
.chip-button-clear-md {
color: $chip-button-md-clear-text-color;
background-color: $chip-button-md-clear-background-color;
}
// Generate Material Design Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.chip-button-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
.chip-md-#{$color-name} .chip-button-md {
color: $color-base;
background-color: $color-contrast;
}
// Clear Chip Buttons
// --------------------------------------------------
.chip-button-clear-md-#{$color-name} {
color: $color-base;
background-color: transparent;
}
.chip-md-#{$color-name} .chip-button-clear-md {
color: $color-contrast;
background-color: transparent;
}
}

19
core/src/components/chip-button/chip-button.md.vars.scss
View File

@ -1,19 +0,0 @@
@import "../../themes/ionic.globals.md";
// Material Design Chip Button
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Text color of the chip button
$chip-button-md-text-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default;
/// @prop - Background color of the clear chip button
$chip-button-md-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-md-clear-text-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-md-clear-icon-fill-color: ion-color($colors-md, primary, base, md) !default;

32
core/src/components/chip-button/chip-button.scss
View File

@ -3,21 +3,39 @@
// Chip Button
// --------------------------------------------------
.chip-button {
:host {
--background: var(--ion-color-base);
--color: var(--ion-color-contrast);
--size: #{$chip-button-size};
--icon-size: 18px;
--ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)};
}
:host(.chip-button-clear) {
--color: var(--ion-color-base);
--background: transparent;
}
::slotted(ion-icon) {
font-size: var(--icon-size);
}
.chip-button-native {
@include border-radius($chip-button-border-radius);
@include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
position: relative;
width: $chip-button-size;
height: $chip-button-size;
width: var(--size);
height: var(--size);
border: 0;
outline: none;
color: var(--color);
background: var(--background);
&:active,
&:focus {
outline: none;
}
appearance: none;
}
.chip-button-inner {

53
core/src/components/chip-button/chip-button.tsx
View File

@ -1,13 +1,11 @@
import { Component, Element, Prop } from '@stencil/core';
import { Color, CssClassMap, Mode } from '../../interface';
import { getButtonClassMap, getElementClassMap } from '../../utils/theme';
import { Color, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@Component({
tag: 'ion-chip-button',
styleUrls: {
ios: 'chip-button.ios.scss',
md: 'chip-button.md.scss'
},
styleUrl: 'chip-button.scss',
shadow: true
})
export class ChipButton {
@Element() el!: HTMLElement;
@ -32,7 +30,7 @@ export class ChipButton {
/**
* Set to `"clear"` for a transparent button style.
*/
@Prop() fill?: string;
@Prop() fill = 'default';
/**
* Contains a URL or a URL fragment that the hyperlink points to.
@ -40,29 +38,22 @@ export class ChipButton {
*/
@Prop() href?: string;
/**
* Get the classes for the style
* Chip buttons can only be clear or default (solid)
*/
private getStyleClassMap(buttonType: string): CssClassMap {
return getColorClassMap(this.color, buttonType, this.fill || 'default', this.mode);
hostData() {
return {
class: {
...createColorClasses(this.color),
[`chip-button-${this.fill}`]: true
}
};
}
render() {
const buttonType = 'chip-button';
const hostClasses = getElementClassMap(this.el.classList);
const TagType = this.href ? 'a' : 'button';
const buttonClasses = {
...hostClasses,
...getButtonClassMap(buttonType, this.mode),
...this.getStyleClassMap(buttonType),
};
return (
<TagType
class={buttonClasses}
class="chip-button-native"
disabled={this.disabled}
href={this.href}>
<span class="chip-button-inner">
@ -73,19 +64,3 @@ export class ChipButton {
);
}
}
/**
* Get the classes for the color
*/
function getColorClassMap(color: string | undefined, buttonType: string, style: string, mode: Mode): CssClassMap {
const className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
const map: CssClassMap = {
[className]: true,
[`${className}-${mode}`]: true
};
if (color) {
map[`${className}-${mode}-${color}`] = true;
}
return map;
}