Skip to content

Commit 10d83ff

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #461 from youda97/table-toolbar
feat(table): Add table header and update table toolbar
2 parents 85e18a7 + 4fe7f28 commit 10d83ff

17 files changed

+761
-687
lines changed

‎package-lock.json‎

Lines changed: 447 additions & 495 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"@angular/platform-server": "6.1.0",
8383
"@angular/router": "6.1.0",
8484
"@babel/core": "7.4.3",
85-
"@carbon/icons-angular": "10.1.0",
85+
"@carbon/icons-angular": "10.2.0",
8686
"@commitlint/cli": "7.5.2",
8787
"@commitlint/config-conventional": "7.5.0",
8888
"@compodoc/compodoc": "1.1.7",
@@ -98,7 +98,7 @@
9898
"@types/node": "11.13.0",
9999
"angular2-template-loader": "0.6.2",
100100
"babel-loader": "8.0.5",
101-
"carbon-components": "10.0.0",
101+
"carbon-components": "10.2.0",
102102
"codelyzer": "5.0.0",
103103
"commitizen": "3.0.7",
104104
"core-js": "2.5.5",
@@ -125,7 +125,7 @@
125125
"karma-webpack": "3.0.5",
126126
"node-sass": "4.11.0",
127127
"postcss-loader": "3.0.0",
128-
"raw-loader": "2.0.0",
128+
"raw-loader": "1.0.0",
129129
"rxjs": "6.4.0",
130130
"sass-loader": "7.1.0",
131131
"semantic-release": "16.0.0-beta.18",

‎src/button/button.directive.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export class Button implements OnInit {
4646
@HostBinding("class.bx--skeleton") @Input() skeleton = false;
4747
@HostBinding("class.bx--btn--sm") smallSize = false;
4848
@HostBinding("class.bx--toolbar-action") toolbarAction = false;
49+
@HostBinding("class.bx--overflow-menu") overflowMenu = false;
4950

5051
ngOnInit() {
5152
if (this.size === "sm") {
@@ -59,7 +60,10 @@ export class Button implements OnInit {
5960
case "ghost": this.ghost = true; break;
6061
case "danger": this.danger = true; break;
6162
case "danger--primary": this.dangerPrimary = true; break;
62-
case "toolbar-action": this.toolbarAction = true; break;
63+
case "toolbar-action":
64+
this.toolbarAction = true;
65+
this.overflowMenu = true;
66+
break;
6367
default: this.primary = true; break;
6468
}
6569
}

‎src/i18n/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@
125125
"ROW": "row"
126126
},
127127
"TABLE_TOOLBAR": {
128-
"ACTION_BAR": "Table Action Bar"
128+
"ACTION_BAR": "Table Action Bar",
129+
"CANCEL": "Cancel"
129130
},
130131
"TABS": {
131132
"BUTTON_ARIA_LEFT": "Go to the previous tab",

‎src/search/search.component.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<div
2+
class="bx--search"
3+
[ngClass]="{
4+
'bx--search--sm': size === 'sm',
5+
'bx--search--xl': size === 'xl',
6+
'bx--search--light': theme === 'light',
7+
'bx--skeleton': skeleton,
8+
'bx--toolbar-search': toolbar,
9+
'bx--toolbar-search--active': toolbar && active
10+
}"
11+
role="search">
12+
<label class="bx--label" [for]="id">{{label}}</label>
13+
14+
<div *ngIf="skeleton; else enableInput" class="bx--search-input"></div>
15+
<ng-template #enableInput>
16+
<input
17+
#input
18+
*ngIf="!toolbar || active || value !== ''"
19+
class="bx--search-input"
20+
[type]="tableSearch || !toolbar ? 'text' : 'search'"
21+
role="search"
22+
[id]="id"
23+
[value]="value"
24+
[placeholder]="placeholder"
25+
[disabled]="disabled"
26+
[required]="required"
27+
(input)="onSearch($event.target.value)"/>
28+
<button *ngIf="!tableSearch && toolbar" class="bx--toolbar-search__btn" (click)="openSearch()">
29+
<ibm-icon-search16 class="bx--search-magnifier"></ibm-icon-search16>
30+
</button>
31+
<ibm-icon-search16 *ngIf="tableSearch || !toolbar" (click)="openSearch()" class="bx--search-magnifier"></ibm-icon-search16>
32+
</ng-template>
33+
34+
<button
35+
*ngIf="tableSearch || !toolbar"
36+
class="bx--search-close"
37+
[ngClass]="{
38+
'bx--search-close--hidden': !value || value.length === 0
39+
}"
40+
[title]="clearButtonTitle"
41+
[attr.aria-label]="clearButtonTitle"
42+
(click)="clearSearch()">
43+
<ibm-icon-close16></ibm-icon-close16>
44+
</button>
45+
</div>

‎src/search/search.component.spec.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ComponentFixture, TestBed } from "@angular/core/testing";
1+
import { ComponentFixture, TestBed, async } from "@angular/core/testing";
22
import { By } from "@angular/platform-browser";
33

44
import { Search } from "./search.component";
@@ -14,7 +14,7 @@ describe("Search", () => {
1414
let containerElement: HTMLElement;
1515
let clearButtonElement: HTMLButtonElement;
1616

17-
beforeEach(() => {
17+
beforeEach(async(() => {
1818
TestBed.configureTestingModule({
1919
declarations: [Search],
2020
imports: [
@@ -24,8 +24,17 @@ describe("Search", () => {
2424
Close16Module
2525
],
2626
providers: []
27-
});
28-
});
27+
})
28+
.overrideComponent(Search, {
29+
remove: {
30+
templateUrl: "search.component.html"
31+
},
32+
add: {
33+
template: require("./search.component.html")
34+
}
35+
})
36+
.compileComponents();
37+
}));
2938

3039
beforeEach(() => {
3140
fixture = TestBed.createComponent(Search);

‎src/search/search.component.ts‎

Lines changed: 9 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -36,59 +36,7 @@ export class SearchChange {
3636
*/
3737
@Component({
3838
selector: "ibm-search",
39-
template: `
40-
<div
41-
class="bx--search"
42-
[ngClass]="{
43-
'bx--search--sm': size === 'sm',
44-
'bx--search--xl': size === 'xl',
45-
'bx--search--light': theme === 'light',
46-
'bx--skeleton': skeleton,
47-
'bx--toolbar-search': toolbar,
48-
'bx--toolbar-search--active': toolbar && active
49-
}"
50-
role="search">
51-
<label class="bx--label" [for]="id">{{label}}</label>
52-
53-
<div *ngIf="skeleton; else enableInput" class="bx--search-input"></div>
54-
<ng-template #enableInput>
55-
<input
56-
#input
57-
*ngIf="!toolbar || active"
58-
class="bx--search-input"
59-
type="text"
60-
role="search"
61-
[id]="id"
62-
[value]="value"
63-
[placeholder]="placeholder"
64-
[disabled]="disabled"
65-
[required]="required"
66-
(input)="onSearch($event.target.value)"/>
67-
<button
68-
*ngIf="toolbar; else svg"
69-
class="bx--toolbar-search__btn"
70-
[attr.aria-label]="i18n.get('SEARCH.TOOLBAR_SEARCH') | async"
71-
tabindex="0"
72-
(click)="openSearch($event)">
73-
<ng-template [ngTemplateOutlet]="svg"></ng-template>
74-
</button>
75-
<ng-template #svg>
76-
<ibm-icon-search16 class="bx--search-magnifier"></ibm-icon-search16>
77-
</ng-template>
78-
</ng-template>
79-
80-
<button
81-
class="bx--search-close"
82-
[ngClass]="{
83-
'bx--search-close--hidden': !value || value.length === 0
84-
}"
85-
[title]="clearButtonTitle"
86-
[attr.aria-label]="clearButtonTitle"
87-
(click)="clearSearch()">
88-
<ibm-icon-close16></ibm-icon-close16>
89-
</button>
90-
</div>
91-
`,
39+
templateUrl: "search.component.html",
9240
providers: [
9341
{
9442
provide: NG_VALUE_ACCESSOR,
@@ -103,7 +51,7 @@ export class Search implements ControlValueAccessor {
10351
*/
10452
static searchCount = 0;
10553

106-
@HostBinding("class.bx--form-item") containerClass = true;
54+
@HostBinding("class.bx--form-item") get containerClass() { return !this.toolbar; }
10755

10856
/**
10957
* `light` or `dark` search theme.
@@ -139,6 +87,10 @@ export class Search implements ControlValueAccessor {
13987
* Set to `true` to expand the toolbar search component.
14088
*/
14189
@Input() active = false;
90+
/**
91+
* Specifies whether the search component is used in the table toolbar.
92+
*/
93+
@Input() tableSearch = false;
14294
/**
14395
* Sets the name attribute on the `input` element.
14496
*/
@@ -263,7 +215,9 @@ export class Search implements ControlValueAccessor {
263215

264216
@HostListener("focusout", ["$event"])
265217
focusOut(event) {
266-
if (this.toolbar && event.relatedTarget === null) {
218+
if (this.toolbar &&
219+
this.inputRef.nativeElement.value === "" &&
220+
event.relatedTarget === null) {
267221
this.active = false;
268222
}
269223
}

‎src/table/header/table-header-description.directive.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Directive, HostBinding } from "@angular/core";
2+
3+
@Directive({
4+
selector: "[ibmTableHeaderDescription]"
5+
})
6+
export class TableHeaderDescription {
7+
@HostBinding("class.bx--data-table-header__description") descriptionClass = true;
8+
}

‎src/table/header/table-header-title.directive.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Directive, HostBinding } from "@angular/core";
2+
3+
@Directive({
4+
selector: "[ibmTableHeaderTitle]"
5+
})
6+
export class TableHeaderTitle {
7+
@HostBinding("class.bx--data-table-header__title") titleClass = true;
8+
}

‎src/table/header/table-header.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, HostBinding } from "@angular/core";
2+
3+
@Component({
4+
selector: "ibm-table-header",
5+
template: `
6+
<ng-content></ng-content>
7+
`
8+
})
9+
export class TableHeader {
10+
@HostBinding("class.bx--data-table-header") headerClass = true;
11+
@HostBinding("style.display") displayStyle = "block";
12+
}

0 commit comments

Comments
 (0)