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 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/badge/badge.ios.scss
View File

@ -4,26 +4,8 @@
// iOS Badge
// --------------------------------------------------
.badge-ios {
:host {
@include border-radius($badge-ios-border-radius);
font-family: $badge-ios-font-family;
color: $badge-ios-text-color;
background-color: $badge-ios-background-color;
}
// Generate iOS Badge Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$base-color: ion-color($colors-ios, $color-name, base, ios);
$contrast-color: ion-color($colors-ios, $color-name, contrast, ios);
.badge-ios-#{$color-name} {
color: $contrast-color;
background-color: $base-color;
}
}

8
core/src/components/badge/badge.ios.vars.scss
View File

@ -7,10 +7,4 @@
$badge-ios-border-radius: 10px !default;
/// @prop - Font family of the badge
$badge-ios-font-family: $font-family-ios-base !default;
/// @prop - Background color of the badge
$badge-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Text color of the badge
$badge-ios-text-color: ion-color($colors-ios, $badge-ios-background-color, contrast, ios) !default;
$badge-ios-font-family: $font-family-base !default;

20
core/src/components/badge/badge.md.scss
View File

@ -4,26 +4,8 @@
// Material Design Badge
// --------------------------------------------------
.badge-md {
:host {
@include border-radius($badge-md-border-radius);
font-family: $badge-md-font-family;
color: $badge-md-text-color;
background-color: $badge-md-background-color;
}
// Generate Material Design Badge Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
$base-color: ion-color($colors-md, $color-name, base, md);
$contrast-color: ion-color($colors-md, $color-name, contrast, md);
.badge-md-#{$color-name} {
color: $contrast-color;
background-color: $base-color;
}
}

8
core/src/components/badge/badge.md.vars.scss
View File

@ -7,10 +7,4 @@
$badge-md-border-radius: 4px !default;
/// @prop - Font family of the badge
$badge-md-font-family: $font-family-md-base !default;
/// @prop - Background color of the badge
$badge-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Text color of the badge
$badge-md-text-color: ion-color($colors-md, $badge-md-background-color, contrast, md) !default;
$badge-md-font-family: $font-family-base !default;

11
core/src/components/badge/badge.scss
View File

@ -3,10 +3,13 @@
// Badge
// --------------------------------------------------
ion-badge {
:host {
--ion-color-base: #{ion-color(primary, base)};
--ion-color-contrast: #{ion-color(primary, contrast)};
@include font-smoothing();
@include padding($badge-padding-top, $badge-padding-end, $badge-padding-bottom, $badge-padding-start);
@include text-align(center);
text-align: center;
display: inline-block;
@ -18,11 +21,13 @@ ion-badge {
line-height: 1;
white-space: nowrap;
color: #{current-color(contrast)};
background-color: #{current-color(base)};
vertical-align: baseline;
contain: content;
}
ion-badge:empty {
:host(:empty) {
display: none;
}

17
core/src/components/badge/badge.tsx
View File

@ -1,5 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@Component({
tag: 'ion-badge',
@ -7,13 +8,11 @@ import { Color, Mode } from '../../interface';
ios: 'badge.ios.scss',
md: 'badge.md.scss'
},
host: {
theme: 'badge'
}
shadow: true
})
export class Badge {
/**
* The color the badge should be
* The color the badge should be.
*/
@Prop() color?: Color;
@ -22,4 +21,14 @@ export class Badge {
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
hostData() {
return {
class: createColorClasses(this.color)
};
}
render() {
return <slot></slot>;
}
}

4
core/src/components/badge/readme.md
View File

@ -12,7 +12,7 @@ Badges are inline block elements that usually appear near another element. Typic
string
The color the badge should be
The color the badge should be.
#### mode
@ -29,7 +29,7 @@ Possible values are: `"ios"` or `"md"`.
string
The color the badge should be
The color the badge should be.
#### mode

196
core/src/components/badge/test/basic/index.html
View File

@ -6,110 +6,111 @@
<title>Badge - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Badge - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Badge - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-list-header>Badges Right</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="end">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="end" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="end" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="end" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="end" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="end" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="end" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="end" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="end" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="end" color="dark">99</ion-badge>
</ion-item>
<ion-item onclick="toggleColor()">
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
<ion-label>Dynamic Badge Color (toggle)</ion-label>
</ion-item>
</ion-list>
<ion-content id="content">
<ion-list>
<ion-list-header>Badges Right</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="end">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="end" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="end" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="end" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="end" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="end" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="end" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="end" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="end" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="end" color="dark">99</ion-badge>
</ion-item>
<ion-item onclick="toggleColor()">
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
<ion-label>Dynamic Badge Color (toggle)</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Badges Left</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="start">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="start" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="start" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="start" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="start" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="start" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="start" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="start" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="start" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="start" color="dark">99</ion-badge>
</ion-item>
</ion-list>
</ion-content>
<ion-list>
<ion-list-header>Badges Left</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="start">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="start" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="start" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="start" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="start" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="start" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="start" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="start" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="start" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="start" color="dark">99</ion-badge>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
@ -124,4 +125,5 @@
}
</script>
</body>
</html>

196
core/src/components/badge/test/preview/index.html
View File

@ -6,110 +6,111 @@
<title>Badge</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Badge</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Badge</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-list-header>Badges Right</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="end">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="end" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="end" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="end" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="end" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="end" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="end" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="end" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="end" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="end" color="dark">99</ion-badge>
</ion-item>
<ion-item onclick="toggleColor()">
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
<ion-label>Dynamic Badge Color (toggle)</ion-label>
</ion-item>
</ion-list>
<ion-content id="content">
<ion-list>
<ion-list-header>Badges Right</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="end">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="end" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="end" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="end" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="end" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="end" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="end" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="end" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="end" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="end" color="dark">99</ion-badge>
</ion-item>
<ion-item onclick="toggleColor()">
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
<ion-label>Dynamic Badge Color (toggle)</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Badges Left</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="start">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="start" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="start" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="start" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="start" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="start" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="start" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="start" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="start" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="start" color="dark">99</ion-badge>
</ion-item>
</ion-list>
</ion-content>
<ion-list>
<ion-list-header>Badges Left</ion-list-header>
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="start">00</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="start" color="primary">11</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="start" color="secondary">22</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="start" color="tertiary">33</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="start" color="success">44</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="start" color="warning">55</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="start" color="danger">66</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="start" color="light">77</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="start" color="medium">88</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="start" color="dark">99</ion-badge>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
@ -124,4 +125,5 @@
}
</script>
</body>
</html>

1
core/src/components/badge/test/standalone/index.html
View File

@ -6,6 +6,7 @@
<title>Badge - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>