Skip to content

Commit

Permalink
feat(chips): add (select), [color] and dark theme to chips. (#2242)
Browse files Browse the repository at this point in the history 
Add new functionality/options to chips for managing selection/color.

*MdChipList Options*

 - `[selectable]` - Programmatically control whether or not the chips
   in the list are capable of being selected.
 - The SPACE key will automatically select the currently focused chip.

*MdChip Options*

 - `[color]` - Programmatically control the selected color of the
   chip.
 - `[selected]` - Programmatically control whether or not the chip
   is selected.
 - `(select)` - Event emitted when the chip is selected.
 - `(deselect)` - Event emitted when the chip is deselected.

Additionally, adds basic support for dark themeed chips using existing
colors from other components in the spec and cleanup demos by using
cards and toolbars like other demos.

References #120.
  • Loading branch information
@topherfangio @jelbourn
topherfangio authored and jelbourn committed Dec 20, 2016
1 parent e4d2bef commit f45c315
Show file tree
Hide file tree
Showing 9 changed files with 392 additions and 127 deletions.
129 changes: 63 additions & 66 deletions src/demo-app/chips/chips-demo.html
View file
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
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
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
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

0 comments on commit f45c315

Please sign in to comment.