Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(chips): Add (select), [color] and dark theme to chips. #2242

Merged
merged 1 commit into from
Dec 20, 2016
Merged

feat(chips): Add (select), [color] and dark theme to chips. #2242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 63 additions & 66 deletions src/demo-app/chips/chips-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,65 @@
<div class="chips-demo">
<section>
<h3>Static Chips</h3>

<h5>Simple</h5>

<md-chip-list>
<md-chip>Chip 1</md-chip>
<md-chip>Chip 2</md-chip>
<md-chip>Chip 3</md-chip>
</md-chip-list>

<h5>Advanced</h5>

<md-chip-list>
<md-chip class="md-accent selected">Selected/Colored</md-chip>
<md-chip class="md-warn" *ngIf="visible"
(destroy)="alert('chip destroyed')" (click)="toggleVisible()">
With Events
</md-chip>
</md-chip-list>

<h5>Unstyled</h5>

<md-chip-list>
<md-basic-chip>Basic Chip 1</md-basic-chip>
<md-basic-chip>Basic Chip 2</md-basic-chip>
<md-basic-chip>Basic Chip 3</md-basic-chip>
</md-chip-list>

<h3>Material Contributors</h3>

<md-chip-list>
<md-chip *ngFor="let person of people; let even = even" [ngClass]="[color, even ? 'selected' : '' ]">
{{person.name}}
</md-chip>
</md-chip-list>

<br />

<md-input #input (keyup.enter)="add(input)" (blur)="add(input)" placeholder="New Contributor...">
</md-input>

<h3>Stacked Chips</h3>

<p>
You can also stack the chips if you want them on top of each other.
</p>

<md-chip-list class="md-chip-list-stacked">
<md-chip (focus)="color = ''" class="selected">
None
</md-chip>

<md-chip (focus)="color = 'md-primary'" class="selected md-primary">
Primary
</md-chip>

<md-chip (focus)="color = 'md-accent'" class="selected md-accent">
Accent
</md-chip>

<md-chip (focus)="color = 'md-warn'" class="selected md-warn">
Warn
</md-chip>
</md-chip-list>
</section>
<md-card>
<md-toolbar color="primary">Static Chips</md-toolbar>

<md-card-content>
<h4>Simple</h4>

<md-chip-list>
<md-chip>Chip 1</md-chip>
<md-chip>Chip 2</md-chip>
<md-chip>Chip 3</md-chip>
</md-chip-list>

<h4>Unstyled</h4>

<md-chip-list>
<md-basic-chip>Basic Chip 1</md-basic-chip>
<md-basic-chip>Basic Chip 2</md-basic-chip>
<md-basic-chip>Basic Chip 3</md-basic-chip>
</md-chip-list>

<h4>Advanced</h4>

<md-chip-list selectable="false">
<md-chip color="accent" selected="true">Selected/Colored</md-chip>
<md-chip color="warn" selected="true" *ngIf="visible"
(destroy)="alert('chip destroyed')" (click)="toggleVisible()">
With Events
</md-chip>
</md-chip-list>
</md-card-content>
</md-card>

<md-card>
<md-toolbar color="primary">Dynamic Chips</md-toolbar>

<md-card-content>
<h4>Input Container</h4>

<md-chip-list>
<md-chip *ngFor="let person of people" [color]="color">
{{person.name}}
</md-chip>
</md-chip-list>

<md-input-container>
<input md-input #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
</md-input-container>

<h4>Stacked Chips</h4>

<p>
You can also stack the chips if you want them on top of each other and/or use the
<code>(focus)</code> event to run custom code.
</p>

<md-chip-list class="md-chip-list-stacked">
<md-chip *ngFor="let aColor of availableColors"
(focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
{{aColor.name}}
</md-chip>
</md-chip-list>
</md-card-content>
</md-card>
</div>
13 changes: 13 additions & 0 deletions src/demo-app/chips/chips-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,19 @@
max-width: 200px;
}

md-card {
padding: 0;
margin: 16px;

& md-toolbar {
margin: 0;
}

& md-card-content {
padding: 24px;
}
}

md-basic-chip {
margin: auto 10px;
}
Expand Down
12 changes: 12 additions & 0 deletions src/demo-app/chips/chips-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ export interface Person {
name: string;
}

export interface DemoColor {
name: string;
color: string;
}

@Component({
moduleId: module.id,
selector: 'chips-demo',
Expand All @@ -24,6 +29,13 @@ export class ChipsDemo {
{ name: 'Paul' }
];

availableColors: DemoColor[] = [
{ name: 'none', color: '' },
{ name: 'Primary', color: 'primary' },
{ name: 'Accent', color: 'accent' },
{ name: 'Warn', color: 'warn' }
];

alert(message: string): void {
alert(message);
}
Expand Down
30 changes: 22 additions & 8 deletions src/lib/chips/_chips-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import '../core/theming/palette';
@import '../core/theming/theming';

@mixin md-chips-theme($theme) {
Expand All @@ -6,27 +7,40 @@
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

// Use spec-recommended color for regular foreground, and utilise contrast color for a grey very
// close to the selected spec since no guidance is provided and to ensure palette consistency.
$light-foreground: rgba(0, 0, 0, 0.87);
$light-selected-foreground: md-contrast($md-grey, 600);

// The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back
// to standard background and foreground colors.
$unselected-background: if($is-dark-theme, md-color($background, card), #e0e0e0);
$unselected-foreground: if($is-dark-theme, md-color($foreground, text), $light-foreground);

$selected-background: if($is-dark-theme, md-color($background, app-bar), #808080);
$selected-foreground: if($is-dark-theme, md-color($foreground, text), $light-selected-foreground);

.md-chip {
background-color: #e0e0e0;
color: rgba(0, 0, 0, 0.87);
background-color: $unselected-background;
color: $unselected-foreground;
}

.md-chip.selected {
// There is no dark theme in the current spec, so this applies to both
background-color: #808080;

// Use a contrast color for a grey very close to the background color
color: md-contrast($md-grey, 600);
.md-chip.md-chip-selected {
background-color: $selected-background;
color: $selected-foreground;

&.md-primary {
background-color: md-color($primary, 500);
color: md-contrast($primary, 500);
}

&.md-accent {
background-color: md-color($accent, 500);
color: md-contrast($accent, 500);
}

&.md-warn {
background-color: md-color($warn, 500);
color: md-contrast($warn, 500);
Expand Down
Loading