From fb22bbe82bd5abe8390f4240c117fa2f96e16732 Mon Sep 17 00:00:00 2001 From: Topher Fangio Date: Mon, 7 Nov 2016 02:06:38 -0600 Subject: [PATCH] feat(chips): Initial skeleton/demo. Create the initial Chips skeleton with a very basic working demo of static, styled chips. References #120. --- src/demo-app/chips/chips-demo.html | 12 +++++++ src/demo-app/chips/chips-demo.scss | 2 ++ src/demo-app/chips/chips-demo.ts | 10 ++++++ src/demo-app/demo-app-module.ts | 2 ++ src/demo-app/demo-app/demo-app.ts | 1 + src/demo-app/demo-app/routes.ts | 2 ++ src/lib/chips/README.md | 7 ++++ src/lib/chips/_chips-theme.scss | 29 +++++++++++++++ src/lib/chips/chip-list.spec.ts | 53 ++++++++++++++++++++++++++++ src/lib/chips/chip-list.ts | 44 +++++++++++++++++++++++ src/lib/chips/chip.spec.ts | 47 ++++++++++++++++++++++++ src/lib/chips/chip.ts | 17 +++++++++ src/lib/chips/chips.scss | 16 +++++++++ src/lib/chips/index.ts | 2 ++ src/lib/core/theming/_all-theme.scss | 2 ++ src/lib/index.ts | 1 + src/lib/module.ts | 3 ++ 17 files changed, 250 insertions(+) create mode 100644 src/demo-app/chips/chips-demo.html create mode 100644 src/demo-app/chips/chips-demo.scss create mode 100644 src/demo-app/chips/chips-demo.ts create mode 100644 src/lib/chips/README.md create mode 100644 src/lib/chips/_chips-theme.scss create mode 100644 src/lib/chips/chip-list.spec.ts create mode 100644 src/lib/chips/chip-list.ts create mode 100644 src/lib/chips/chip.spec.ts create mode 100644 src/lib/chips/chip.ts create mode 100644 src/lib/chips/chips.scss create mode 100644 src/lib/chips/index.ts diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html new file mode 100644 index 000000000000..99f8b4ea45a3 --- /dev/null +++ b/src/demo-app/chips/chips-demo.html @@ -0,0 +1,12 @@ +
+
+

Static Chips

+ + + Basic Chip + Primary + Accent + Warn + +
+
\ No newline at end of file diff --git a/src/demo-app/chips/chips-demo.scss b/src/demo-app/chips/chips-demo.scss new file mode 100644 index 000000000000..996d6cfd641f --- /dev/null +++ b/src/demo-app/chips/chips-demo.scss @@ -0,0 +1,2 @@ +.chips-demo { +} \ No newline at end of file diff --git a/src/demo-app/chips/chips-demo.ts b/src/demo-app/chips/chips-demo.ts new file mode 100644 index 000000000000..b05b80941b57 --- /dev/null +++ b/src/demo-app/chips/chips-demo.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'chips-demo', + templateUrl: 'chips-demo.html', + styleUrls: ['chips-demo.scss'] +}) +export class ChipsDemo { +} diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index 5f4a02dc5f68..ec35c947b742 100644 --- a/src/demo-app/demo-app-module.ts +++ b/src/demo-app/demo-app-module.ts @@ -13,6 +13,7 @@ import {IconDemo} from './icon/icon-demo'; import {GesturesDemo} from './gestures/gestures-demo'; import {InputDemo} from './input/input-demo'; import {CardDemo} from './card/card-demo'; +import {ChipsDemo} from './chips/chips-demo'; import {RadioDemo} from './radio/radio-demo'; import {ButtonToggleDemo} from './button-toggle/button-toggle-demo'; import {ProgressCircleDemo} from './progress-circle/progress-circle-demo'; @@ -49,6 +50,7 @@ import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-d ButtonDemo, ButtonToggleDemo, CardDemo, + ChipsDemo, CheckboxDemo, DemoApp, DialogDemo, diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index ae2ab491bdf6..2b229a414054 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -23,6 +23,7 @@ export class DemoApp { {name: 'Button', route: 'button'}, {name: 'Button Toggle', route: 'button-toggle'}, {name: 'Card', route: 'card'}, + {name: 'Chips', route: 'chips'}, {name: 'Checkbox', route: 'checkbox'}, {name: 'Dialog', route: 'dialog'}, {name: 'Gestures', route: 'gestures'}, diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index f2e1cf7b68e9..285be668b898 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/src/demo-app/demo-app/routes.ts @@ -22,6 +22,7 @@ import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo'; import {SliderDemo} from '../slider/slider-demo'; import {RadioDemo} from '../radio/radio-demo'; import {CardDemo} from '../card/card-demo'; +import {ChipsDemo} from '../chips/chips-demo'; import {MenuDemo} from '../menu/menu-demo'; import {RippleDemo} from '../ripple/ripple-demo'; import {DialogDemo} from '../dialog/dialog-demo'; @@ -34,6 +35,7 @@ export const DEMO_APP_ROUTES: Routes = [ {path: '', component: Home}, {path: 'button', component: ButtonDemo}, {path: 'card', component: CardDemo}, + {path: 'chips', component: ChipsDemo}, {path: 'radio', component: RadioDemo}, {path: 'select', component: SelectDemo}, {path: 'sidenav', component: SidenavDemo}, diff --git a/src/lib/chips/README.md b/src/lib/chips/README.md new file mode 100644 index 000000000000..8cad19fae5ff --- /dev/null +++ b/src/lib/chips/README.md @@ -0,0 +1,7 @@ +# md-chips + +`md-chips` provides a horizontal display of (optionally) selectable, addable, and removable, +items and an input to create additional ones (again; optional). You can read more about chips +in the [Material Design spec](https://material.google.com/components/chips.html). + +This is a placeholder README for the eventual chips component. diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss new file mode 100644 index 000000000000..5f0826096c76 --- /dev/null +++ b/src/lib/chips/_chips-theme.scss @@ -0,0 +1,29 @@ +@import '../core/theming/theming'; + +@mixin md-chips-theme($theme) { + $is-dark-theme: map-get($theme, is-dark); + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + + .md-chip { + background-color: #e0e0e0; + color: rgba(0, 0, 0, 0.87); + } + + .md-chip.selected { + &.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); + } + } +} \ No newline at end of file diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts new file mode 100644 index 000000000000..14c1b69fa674 --- /dev/null +++ b/src/lib/chips/chip-list.spec.ts @@ -0,0 +1,53 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {Component, DebugElement} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {MdChipList, MdChipsModule} from './index'; + +describe('MdChip', () => { + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdChipsModule.forRoot()], + declarations: [ + StaticChipList + ] + }); + + TestBed.compileComponents(); + })); + + describe('basic behaviors', () => { + let chipListDebugElement: DebugElement; + let chipListNativeElement: HTMLElement; + let chipListInstance: MdChipList; + let testComponent: StaticChipList; + + beforeEach(() => { + fixture = TestBed.createComponent(StaticChipList); + fixture.detectChanges(); + + chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList)); + chipListNativeElement = chipListDebugElement.nativeElement; + chipListInstance = chipListDebugElement.componentInstance; + testComponent = fixture.debugElement.componentInstance; + }); + + it('adds the `md-chip-list` class', () => { + expect(chipListNativeElement.classList).toContain('md-chip-list'); + }); + }); +}); + +@Component({ + template: ` + + {{name}} 1 + {{name}} 2 + {{name}} 3 + + ` +}) +class StaticChipList { + name: 'Test'; +} diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts new file mode 100644 index 000000000000..1d7a2c778e27 --- /dev/null +++ b/src/lib/chips/chip-list.ts @@ -0,0 +1,44 @@ +import { + ChangeDetectionStrategy, + Component, + ElementRef, + ModuleWithProviders, + NgModule, + ViewEncapsulation +} from '@angular/core'; + +import {MdChip} from './chip'; + +@Component({ + moduleId: module.id, + selector: 'md-chip-list', + template: ``, + host: { + // Properties + 'tabindex': '0', + 'role': 'listbox', + 'class': 'md-chip-list' + }, + styleUrls: ['chips.css'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class MdChipList { + constructor(private _elementRef: ElementRef) {} + + ngAfterContentInit(): void {} +} + +@NgModule({ + imports: [], + exports: [MdChipList, MdChip], + declarations: [MdChipList, MdChip] +}) +export class MdChipsModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: MdChipsModule, + providers: [] + }; + } +} diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts new file mode 100644 index 000000000000..15b0157012d6 --- /dev/null +++ b/src/lib/chips/chip.spec.ts @@ -0,0 +1,47 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {Component, DebugElement} from '@angular/core'; +import {By} from '@angular/platform-browser'; +import {MdChip, MdChipsModule} from './index'; + +describe('MdChip', () => { + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdChipsModule.forRoot()], + declarations: [ + SingleChip + ] + }); + + TestBed.compileComponents(); + })); + + describe('basic behaviors', () => { + let chipDebugElement: DebugElement; + let chipNativeElement: HTMLElement; + let chipInstance: MdChip; + let testComponent: SingleChip; + + beforeEach(() => { + fixture = TestBed.createComponent(SingleChip); + fixture.detectChanges(); + + chipDebugElement = fixture.debugElement.query(By.directive(MdChip)); + chipNativeElement = chipDebugElement.nativeElement; + chipInstance = chipDebugElement.componentInstance; + testComponent = fixture.debugElement.componentInstance; + }); + + it('adds the `md-chip` class', () => { + expect(chipNativeElement.classList).toContain('md-chip'); + }); + }); +}); + +@Component({ + template: `{{name}}` +}) +class SingleChip { + name: 'Test'; +} diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts new file mode 100644 index 000000000000..461834f05266 --- /dev/null +++ b/src/lib/chips/chip.ts @@ -0,0 +1,17 @@ +import { Component, ElementRef, Renderer } from '@angular/core'; + +@Component({ + selector: 'md-chip, [md-chip]', + template: ``, + host: { + // Properties + 'class': 'md-chip', + 'tabindex': '-1', + 'role': 'option' + } +}) +export class MdChip { + constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) {} + + ngAfterContentInit(): void {} +} diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss new file mode 100644 index 000000000000..7fa57fd207f8 --- /dev/null +++ b/src/lib/chips/chips.scss @@ -0,0 +1,16 @@ +$md-chip-vertical-padding: 8px; +$md-chip-horizontal-padding: 12px; + +.md-chip-list { + padding: $md-chip-horizontal-padding; +} + +.md-chip { + display: inline-block; + padding: $md-chip-vertical-padding $md-chip-horizontal-padding + $md-chip-vertical-padding $md-chip-horizontal-padding; + border-radius: $md-chip-horizontal-padding * 2; + + font-size: 13px; + line-height: 16px; +} diff --git a/src/lib/chips/index.ts b/src/lib/chips/index.ts new file mode 100644 index 000000000000..938151ce2bea --- /dev/null +++ b/src/lib/chips/index.ts @@ -0,0 +1,2 @@ +export * from './chip-list'; +export * from './chip'; diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss index 084e2585350e..4c7a252ea4c4 100644 --- a/src/lib/core/theming/_all-theme.scss +++ b/src/lib/core/theming/_all-theme.scss @@ -4,6 +4,7 @@ @import '../../button-toggle/button-toggle-theme'; @import '../../card/card-theme'; @import '../../checkbox/checkbox-theme'; +@import '../../chips/chips-theme'; @import '../../dialog/dialog-theme'; @import '../../grid-list/grid-list-theme'; @import '../../icon/icon-theme'; @@ -29,6 +30,7 @@ @include md-button-toggle-theme($theme); @include md-card-theme($theme); @include md-checkbox-theme($theme); + @include md-chips-theme($theme); @include md-dialog-theme($theme); @include md-grid-list-theme($theme); @include md-icon-theme($theme); diff --git a/src/lib/index.ts b/src/lib/index.ts index e242a9fc8777..7202a6b57f55 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -4,6 +4,7 @@ export * from './module'; export * from './button/index'; export * from './button-toggle/index'; export * from './card/index'; +export * from './chips/index'; export * from './checkbox/index'; export * from './dialog/index'; export * from './grid-list/index'; diff --git a/src/lib/module.ts b/src/lib/module.ts index 31d18001e089..1a5d835c1bac 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -21,6 +21,7 @@ import {MdSidenavModule} from './sidenav/index'; import {MdListModule} from './list/index'; import {MdGridListModule} from './grid-list/index'; import {MdCardModule} from './card/index'; +import {MdChipsModule} from './chips/index'; import {MdIconModule} from './icon/index'; import {MdProgressCircleModule} from './progress-circle/index'; import {MdProgressBarModule} from './progress-bar/index'; @@ -37,6 +38,7 @@ const MATERIAL_MODULES = [ MdButtonModule, MdButtonToggleModule, MdCardModule, + MdChipsModule, MdCheckboxModule, MdDialogModule, MdGridListModule, @@ -68,6 +70,7 @@ const MATERIAL_MODULES = [ imports: [ MdButtonModule.forRoot(), MdCardModule.forRoot(), + MdChipsModule.forRoot(), MdCheckboxModule.forRoot(), MdGridListModule.forRoot(), MdInputModule.forRoot(),