Skip to content

Commit 4d335ce

Browse files
zvonimirfraszvonimirfras
authored
Merge branch 'master' into issue-163-light-style-dropdown
2 parents c2f693a + a161635 commit 4d335ce

22 files changed

+346
-89
lines changed

‎package-lock.json‎

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

‎src/dialog/overflow-menu/overflow-menu-option.component.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import {
22
HostBinding,
33
Component,
44
Input,
5-
ElementRef
5+
ElementRef,
6+
Output,
7+
EventEmitter
68
} from "@angular/core";
79

810
/**
@@ -26,6 +28,7 @@ import {
2628
[tabindex]="tabIndex"
2729
(focus)="tabIndex = 0"
2830
(blur)="tabIndex = -1"
31+
(click)="onClick($event)"
2932
[disabled]="disabled"
3033
[title]="(titleEnabled ? content : '')">
3134
<ng-content></ng-content>
@@ -54,10 +57,16 @@ export class OverflowMenuOption {
5457
*/
5558
@Input() disabled = false;
5659

60+
@Output() selected: EventEmitter<any> = new EventEmitter();
61+
5762
public tabIndex = -1;
5863

5964
constructor(protected elementRef: ElementRef) {}
6065

66+
onClick(event) {
67+
this.selected.emit();
68+
}
69+
6170
/**
6271
* Returns true if the content string is longer than the width of the containing button
6372
*

‎src/dialog/overflow-menu/overflow-menu-pane.component.ts‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Component, HostListener, ElementRef } from "@angular/core";
1+
import { Component, HostListener, ElementRef, AfterViewInit } from "@angular/core";
22
import { Dialog } from "../dialog.component";
33
import { position } from "../../utils/position";
4-
import { getFocusElementList, isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
4+
import { isFocusInLastItem, isFocusInFirstItem } from "./../../common/tab.service";
55
import { I18n } from "./../../i18n/i18n.module";
66

77
/**
@@ -19,7 +19,6 @@ import { I18n } from "./../../i18n/i18n.module";
1919
#dialog
2020
class="bx--overflow-menu-options bx--overflow-menu-options--open"
2121
role="menu"
22-
(focusout)="menuClose($event)"
2322
(click)="doClose()"
2423
[attr.aria-label]="dialogConfig.menuLabel">
2524
<ng-template
@@ -29,7 +28,7 @@ import { I18n } from "./../../i18n/i18n.module";
2928
</ul>
3029
`
3130
})
32-
export class OverflowMenuPane extends Dialog {
31+
export class OverflowMenuPane extends Dialog implements AfterViewInit {
3332

3433
constructor(protected elementRef: ElementRef, protected i18n: I18n) {
3534
super(elementRef);
@@ -54,16 +53,6 @@ export class OverflowMenuPane extends Dialog {
5453
if (!this.dialogConfig.menuLabel) {
5554
this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
5655
}
57-
58-
setTimeout(() => {
59-
getFocusElementList(this.elementRef.nativeElement).every(button => {
60-
// Allows user to set tabindex to 0.
61-
if (button.getAttribute("tabindex") === null) {
62-
button.tabIndex = -1;
63-
}
64-
});
65-
this.listItems()[0].focus();
66-
}, 0);
6756
}
6857

6958
@HostListener("keydown", ["$event"])
@@ -105,16 +94,25 @@ export class OverflowMenuPane extends Dialog {
10594

10695
case "Esc": // IE specific value
10796
case "Escape":
97+
case "Tab":
10898
event.stopImmediatePropagation();
10999
this.doClose();
110100
break;
101+
default: break;
111102
}
112103
}
113104

114-
menuClose(event) {
115-
if (this.listItems().some(button => button === document.activeElement)) {
116-
this.doClose();
117-
}
105+
ngAfterViewInit() {
106+
const focusElementList = this.listItems();
107+
focusElementList.forEach(button => {
108+
// Allows user to set tabindex to 0.
109+
if (button.getAttribute("tabindex") === null) {
110+
button.tabIndex = -1;
111+
}
112+
});
113+
focusElementList[0].tabIndex = 0;
114+
focusElementList[0].focus();
115+
super.ngAfterViewInit();
118116
}
119117

120118
protected listItems() {

‎src/dialog/overflow-menu/overflow-menu.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { I18n } from "./../../i18n/i18n.module";
2424
placement="bottom"
2525
style="display: block;"
2626
tabindex="0">
27-
<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
27+
<svg focusable="false" class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
2828
<g fill-rule="evenodd">
2929
<circle cx="1.5" cy="1.5" r="1.5" />
3030
<circle cx="1.5" cy="7.5" r="1.5" />

‎src/dialog/overflow-menu/overflow-menu.directive.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export class OverflowMenuDirective extends DialogDirective {
6666
switch (event.key) {
6767
case "Enter":
6868
case " ":
69+
event.preventDefault();
6970
this.toggle();
7071
break;
7172
}

‎src/dialog/overflow-menu/overflow-menu.stories.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ storiesOf("Overflow Menu", module)
1313
.add("Basic", () => ({
1414
template: `
1515
<ibm-overflow-menu>
16-
<ibm-overflow-menu-option>
16+
<ibm-overflow-menu-option (selected)="selected($event)" (click)="click($event)">
1717
An example option that is really long to show what should be done to handle long text
1818
</ibm-overflow-menu-option>
19-
<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
19+
<ibm-overflow-menu-option (selected)="selected($event)">Option 2</ibm-overflow-menu-option>
2020
<li class="bx--overflow-menu-options__option">
2121
<button class="bx--overflow-menu-options__btn">A fully custom option</button>
2222
</li>
23-
<ibm-overflow-menu-option>Option 4</ibm-overflow-menu-option>
24-
<ibm-overflow-menu-option disabled="true">Disabled</ibm-overflow-menu-option>
25-
<ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
23+
<ibm-overflow-menu-option (selected)="selected($event)">Option 4</ibm-overflow-menu-option>
24+
<ibm-overflow-menu-option disabled="true" (selected)="selected($event)">Disabled</ibm-overflow-menu-option>
25+
<ibm-overflow-menu-option type="danger" (selected)="selected($event)">Danger option</ibm-overflow-menu-option>
2626
</ibm-overflow-menu>
2727
2828
<span>Flipped OverflowMenu</span>
@@ -39,5 +39,9 @@ storiesOf("Overflow Menu", module)
3939
<ibm-overflow-menu-option type="danger">Danger option</ibm-overflow-menu-option>
4040
</ibm-overflow-menu>
4141
<ibm-dialog-placeholder></ibm-dialog-placeholder>
42-
`
42+
`,
43+
props: {
44+
click: () => console.log("click"),
45+
selected: () => console.log("selected")
46+
}
4347
}));

‎src/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export * from "./forms/forms.module";
1212
export * from "./i18n/i18n.module";
1313
export * from "./icon/icon.module";
1414
export * from "./input/input.module";
15+
export * from "./link/link.module";
1516
export * from "./list-group/list-group.module";
1617
export * from "./loading/loading.module";
1718
export * from "./modal/modal.module";
@@ -26,5 +27,3 @@ export * from "./switch/switch.module";
2627
export * from "./table/table.module";
2728
export * from "./tabs/tabs.module";
2829
export * from "./tiles/tiles.module";
29-
export * from "./toggle/toggle.module";
30-
export * from "./utils/position";

‎src/input/input.directive.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, HostBinding } from "@angular/core";
1+
import { Directive, HostBinding, Input } from "@angular/core";
22

33
/**
44
* A directive for applying styling to an input element.
@@ -15,5 +15,13 @@ import { Directive, HostBinding } from "@angular/core";
1515
selector: "[ibmText]"
1616
})
1717
export class TextInput {
18+
/**
19+
* `light` or `dark` input theme
20+
*/
21+
@Input() theme: "light" | "dark" = "dark";
22+
1823
@HostBinding("class.bx--text-input") inputClass = true;
24+
@HostBinding("class.bx--text-input--light") get isLightTheme() {
25+
return this.theme === "light";
26+
}
1927
}

‎src/input/input.stories.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { storiesOf, moduleMetadata } from "@storybook/angular";
22
import { action } from "@storybook/addon-actions";
3-
import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
3+
import { withKnobs } from "@storybook/addon-knobs/angular";
44

55
import { InputModule } from "../";
66

@@ -22,8 +22,19 @@ storiesOf("Input", module).addDecorator(
2222
template: `
2323
<input ibmText aria-label="input" placeholder="Optional placeholder text"/>
2424
`
25-
})).add("TextArea", () => ({
25+
}))
26+
.add("Light Input", () => ({
27+
template: `
28+
<input ibmText theme="light" aria-label="input" placeholder="Optional placeholder text"/>
29+
`
30+
}))
31+
.add("TextArea", () => ({
2632
template: `
2733
<textarea ibmTextArea aria-label="textarea" placeholder="Optional placeholder text" rows="4" cols="50"></textarea>
2834
`
35+
}))
36+
.add("Light TextArea", () => ({
37+
template: `
38+
<textarea ibmTextArea theme="light" aria-label="textarea" placeholder="Optional placeholder text" rows="4" cols="50"></textarea>
39+
`
2940
}));

‎src/input/text-area.directive.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, HostBinding } from "@angular/core";
1+
import { Directive, HostBinding, Input } from "@angular/core";
22

33
/**
44
* A directive for applying styling to a textarea element.
@@ -15,5 +15,13 @@ import { Directive, HostBinding } from "@angular/core";
1515
selector: "[ibmTextArea]"
1616
})
1717
export class TextArea {
18+
/**
19+
* `light` or `dark` input theme
20+
*/
21+
@Input() theme: "light" | "dark" = "dark";
22+
1823
@HostBinding("class.bx--text-area") baseClass = true;
24+
@HostBinding("class.bx--text-area--light") get isLightTheme() {
25+
return this.theme === "light";
26+
}
1927
}

0 commit comments

Comments
 (0)