Skip to content

Commit

Permalink
feat(Chip): Expose new chip component
Browse files Browse the repository at this point in the history
  • Loading branch information
atlwendy authored and benjamincharity committed Sep 11, 2019
1 parent b528d9f commit 486e0d3
Show file tree
Hide file tree
Showing 31 changed files with 2,623 additions and 41 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.vscode/
dist/
node_modules/
out-tsc/
Expand Down
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ for each feature.
| breadcrumbs | | | | | |
| [card][src-card] | | :white_check_mark: | [Demo][demo-card] | [Docs][card-docs] | [Usage][card-usage] |
| [chart][src-chart] | Charts, graphs etc | :white_check_mark: | [Demo][demo-chart] | [Docs][chart-docs] | [Usage][chart-usage] |
| chip | | | | | |
| [chip][src-chip] | Chip | :white_check_mark: | [Demo][demo-chip] | [Docs][chip-docs] | [Usage][chip-usage] |
| [checkbox][src-checkbox] | | :white_check_mark: | [Demo][demo-checkbox] | [Docs][checkbox-docs] | [Usage][checkbox-usage] |
| [confirmation][src-confirmation] | Add a confirmation step to any `ts-button` | :white_check_mark: | [Demo][demo-confirmation] | [Docs][confirmation-docs] | [Usage][confirmation-usage] |
| [copy][src-copy] | | :white_check_mark: | [Demo][demo-copy] | [Docs][copy-docs] | |
Expand Down Expand Up @@ -347,6 +347,7 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
[demo-button]: https://getterminus.github.io/ui-demos-release/components/button
[demo-card]: https://getterminus.github.io/ui-demos-release/components/card
[demo-chart]: https://getterminus.github.io/ui-demos-release/components/chart
[demo-chip]: https://getterminus.github.io/ui-demos-release/components/chip
[demo-checkbox]: https://getterminus.github.io/ui-demos-release/components/checkbox
[demo-confirmation]: https://getterminus.github.io/ui-demos-release/components/confirmation
[demo-copy]: https://getterminus.github.io/ui-demos-release/components/copy
Expand Down Expand Up @@ -395,6 +396,7 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
[src-card]: ./terminus-ui/card/src/
[src-chart]: ./terminus-ui/chart/src/
[src-checkbox]: ./terminus-ui/checkbox/src/
[src-chip]: ./terminus-ui/chip/src
[src-confirmation]: ./terminus-ui/confirmation/src/
[src-copy]: ./terminus-ui/copy/src/
[src-csv-entry]: ./terminus-ui/csv-entry/src/
Expand Down Expand Up @@ -437,6 +439,7 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
[card-docs]: http://uilibrary-docs.terminus.ninja/release/components/TsCardComponent.html
[chart-docs]: http://uilibrary-docs.terminus.ninja/release/components/TsChartComponent.html
[checkbox-docs]: http://uilibrary-docs.terminus.ninja/release/components/TsCheckboxComponent.html
[chip-docs]: http://uilibrary-docs.terminus.ninja/release/components/TsChipCollectionComponent.html
[confirmation-docs]: http://uilibrary-docs.terminus.ninja/release/directives/TsConfirmationDirective.html
[copy-docs]: http://uilibrary-docs.terminus.ninja/release/components/TsCopyComponent.html
[csv-entry-docs]: http://uilibrary-docs.terminus.ninja/release/components/TsCSVEntryComponent.html
Expand Down Expand Up @@ -483,6 +486,7 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
[card-usage]: http://uilibrary-docs.terminus.ninja/release/components/TsCardComponent.html#readme
[chart-usage]: http://uilibrary-docs.terminus.ninja/release/components/TsChartComponent.html#readme
[checkbox-usage]: http://uilibrary-docs.terminus.ninja/release/components/TsCheckboxComponent.html#readme
[chip-usage]: http://uilibrary-docs.terminus.ninja/release/components/TsChipCollectionComponent.html#readme
[confirmation-usage]: http://uilibrary-docs.terminus.ninja/release/directives/TsConfirmationDirective.html#readme
[csv-entry-usage]: http://uilibrary-docs.terminus.ninja/release/components/TsCSVEntryComponent.html#readme
[date-range-usage]: http://uilibrary-docs.terminus.ninja/release/components/TsDateRangeComponent.html#readme
Expand Down
10 changes: 8 additions & 2 deletions demo/app/components/autocomplete/autocomplete.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import {
Component,
OnInit,
AfterViewInit,
ViewChild,
} from '@angular/core';
import {
FormControl,
Expand All @@ -11,6 +13,7 @@ import {
Observable,
} from 'rxjs';
import { map } from 'rxjs/operators';
import { TsChipCollectionComponent } from '@terminus/ui/chip';


export interface State {
Expand All @@ -23,7 +26,9 @@ export interface State {
selector: 'demo-autocomplete',
templateUrl: './autocomplete.component.html',
})
export class AutocompleteComponent implements OnInit {
export class AutocompleteComponent {
@ViewChild(TsChipCollectionComponent, { static: false })
public list!: TsChipCollectionComponent;

states: State[] = [
{
Expand All @@ -39,7 +44,7 @@ export class AutocompleteComponent implements OnInit {
population: '1.341M',
},
{
name: 'California',
name: 'CALIFORNIA',
population: '39.14M',
},
{
Expand Down Expand Up @@ -119,6 +124,7 @@ export class AutocompleteComponent implements OnInit {
singleStateCtrl = new FormControl([this.states[4]], [Validators.required]);

constructor() {

this.filteredStates = this.myQuery$
.pipe(
map(state => {
Expand Down
4 changes: 4 additions & 0 deletions demo/app/components/autocomplete/autocomplete.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { TsCardModule } from '@terminus/ui/card';
import { TsCheckboxModule } from '@terminus/ui/checkbox';
import { TsOptionModule } from '@terminus/ui/option';
import { TsSpacingModule } from '@terminus/ui/spacing';
import { TsChipModule } from '@terminus/ui/chip';
import { TsIconModule } from '@terminus/ui/icon';

import { AutocompleteRoutingModule } from './autocomplete-routing.module';
import { AutocompleteComponent } from './autocomplete.component';
Expand All @@ -20,6 +22,8 @@ import { AutocompleteComponent } from './autocomplete.component';
TsAutocompleteModule,
TsCheckboxModule,
TsCardModule,
TsChipModule,
TsIconModule,
TsOptionModule,
TsSpacingModule,
],
Expand Down
18 changes: 18 additions & 0 deletions demo/app/components/chip/chip-routing.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ChipComponent } from './chip.component';


const routes: Routes = [
{
path: '',
component: ChipComponent,
},
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ChipRoutingModule { }
14 changes: 14 additions & 0 deletions demo/app/components/chip/chip.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<ts-card>
<ts-chip-collection
[chipsInput]="options"
[allowMultipleSelections]="true"
[isSelectable]="true"
[isDisabled]="false"
orientation="vertical"
(removed)="removingOption($event)"
(collectionChange)="change($event)"
#tsChipCollection
>
</ts-chip-collection>

</ts-card>
36 changes: 36 additions & 0 deletions demo/app/components/chip/chip.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Component, OnInit, ViewChild, AfterViewInit, QueryList, ElementRef, TemplateRef } from '@angular/core';
import {
TsChipCollectionComponent,
TsChipComponent,
} from '@terminus/ui/chip';

@Component({
selector: 'demo-chip',
templateUrl: './chip.component.html',
})
export class ChipComponent implements OnInit {

options = ['banana', 'apple', 'orange', 'pear'];

constructor() { }

ngOnInit() {
}

removingOption(value: string) {
const ctrlValue = this.options;
const index = ctrlValue.indexOf(value);
const selections = ctrlValue.slice();
// If not found
if (index < 0) {
return;
}
selections.splice(index, 1);
this.options = selections;
}

change(value: string | string[]) {
console.log('DEMO: collection change triggered value: ', value);
}

}
33 changes: 33 additions & 0 deletions demo/app/components/chip/chip.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
import { TsButtonModule } from '@terminus/ui/button';
import { TsIconModule } from '@terminus/ui/icon';
import { TsMenuModule } from '@terminus/ui/menu';
import { TsSpacingModule } from '@terminus/ui/spacing';
import { TsChipModule } from '@terminus/ui/chip';
import { ChipRoutingModule } from './chip-routing.module';
import { ChipComponent } from './chip.component';
import { TsCardModule } from '@terminus/ui/card';



@NgModule({
imports: [
ChipRoutingModule,
CommonModule,
FlexLayoutModule,
FormsModule,
TsButtonModule,
TsCardModule,
TsChipModule,
TsIconModule,
TsMenuModule,
TsSpacingModule,
],
declarations: [
ChipComponent,
],
})
export class ChipModule { }
7 changes: 7 additions & 0 deletions demo/app/components/components.constant.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ export const componentsList: Routes = [
name: 'Checkbox',
},
},
{
path: 'chip',
loadChildren: `./components/chip/chip.module#ChipModule`,
data: {
name: 'Chip',
},
},
{
path: 'confirmation',
loadChildren: `./components/confirmation/confirmation.module#ConfirmationModule`,
Expand Down
32 changes: 11 additions & 21 deletions terminus-ui/autocomplete/src/autocomplete.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,38 +15,28 @@
<div class="ts-autocomplete__input-wrap">

<ng-container *ngIf="allowMultiple">
<mat-chip-list #chipList="matChipList">
<mat-chip
*ngFor="let option of autocompleteFormControl.value; trackBy: trackByFn"
class="qa-autocomplete-chip"
[removable]="true"
(removed)="autocompleteDeselectItem(option)"
>
<span class="ts-autocomplete-chip-value">
{{ displayFormatter(option) }}
</span>

<ts-icon matChipRemove>
cancel
</ts-icon>
</mat-chip>

<ts-chip-collection
[chipsInput]="autocompleteFormControl.value"
[allowMultipleSelections]="true"
[displayFormatter]="displayFormatter"
[isDisabled]="false"
[isReadonly]="false"
(removed)="autocompleteDeselectItem($event)"
(tabUpdateFocus)="focusInput()"
#chipCollection="tsChipCollection">
<input
class="ts-autocomplete__input qa-select-autocomplete-input"
[matChipInputFor]="chipList"
[tsAutocompleteTrigger]="auto"
[reopenAfterSelection]="reopenAfterSelection"
[attr.id]="id"
[(ngModel)]="searchQuery"
[readonly]="isDisabled ? 'true' : null"
(ngModelChange)="querySubject.next($event)"
(blur)="handleInputBlur($event)"
(keydown)="$event.stopPropagation()"
#input
/>

<ng-template *ngTemplateOutlet="spinnerTemplate"></ng-template>
</mat-chip-list>
</ts-chip-collection>
<ng-template *ngTemplateOutlet="spinnerTemplate"></ng-template>
</ng-container>

<ng-container *ngIf="!allowMultiple">
Expand Down
8 changes: 8 additions & 0 deletions terminus-ui/autocomplete/src/autocomplete.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,25 @@


$transition-duration: 200;
$chip-font-size: 14px;

.ts-autocomplete__input-wrap {
&--hidden {
@include visually-hidden;
}

// NOTE: Currently hardcode the text size since typography doesn't support 14px at this moment.
.ts-chip {
font-size: $chip-font-size;
}
}

.ts-autocomplete__input {
background: transparent;
border: none;
color: currentColor;
display: inline-block;
flex: 1 0 10px;
font: inherit;
max-width: 100%;
outline: none;
Expand Down
15 changes: 9 additions & 6 deletions terminus-ui/autocomplete/src/autocomplete.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { KEYS } from '@terminus/ngx-tools/keycodes';
import {
createComponent as createComponentInner,
createFakeEvent,
createKeyboardEvent,
dispatchEvent,
dispatchKeyboardEvent,
dispatchMouseEvent,
typeInElement,
Expand Down Expand Up @@ -141,7 +143,7 @@ describe(`TsAutocompleteComponent`, function() {
expect(chips.length).toEqual(1);

const chip = getChipElement(fixture);
const chipRemovalButton = chip.querySelector('.mat-chip-remove');
const chipRemovalButton = chip.querySelector('.ts-chip-remove');
const instance = getAutocompleteInstance(fixture);

// Open the panel so that overlayRef is created
Expand Down Expand Up @@ -174,22 +176,23 @@ describe(`TsAutocompleteComponent`, function() {

const fixture = createComponent(testComponents.SeededAutocomplete);
fixture.detectChanges();

const nativeInput = fixture.nativeElement.querySelector('input');
let chips = getAllChipInstances(fixture);
expect(chips.length).toEqual(1);

const chip = getChipElement(fixture);
const BACKSPACE_EVENT_CHIP = createKeyboardEvent('keydown', KEYS.BACKSPACE, chip);
// The first backspace selects the previous chip
chip.dispatchEvent(event);
nativeInput.focus();
nativeInput.dispatchEvent(event);
fixture.detectChanges();
dispatchEvent(chip, BACKSPACE_EVENT_CHIP);

chip.dispatchEvent(event);
fixture.detectChanges();

chips = getAllChipInstances(fixture);
expect(chips.length).toEqual(0);
});

});


Expand Down Expand Up @@ -501,7 +504,7 @@ describe(`TsAutocompleteComponent`, function() {
const instance = getAutocompleteInstance(fixture);
const triggerInstance = instance.autocompleteTrigger;
const chip = getChipElement(fixture);
const chipRemovalButton = chip.querySelector('.mat-chip-remove');
const chipRemovalButton = chip.querySelector('.ts-chip-remove');

triggerInstance.openPanel();
fixture.detectChanges();
Expand Down
Loading

0 comments on commit 486e0d3

Please sign in to comment.