Skip to content

Commit 3a441b2

Browse files
zvonimirfraszvonimirfras
authored
Merge branch 'master' into angular-directive-carbon-links
2 parents 69d3fb5 + 9c71a96 commit 3a441b2

18 files changed

+210
-93
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: 17 additions & 22 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,7 @@ import { I18n } from "./../../i18n/i18n.module";
1919
#dialog
2020
class="bx--overflow-menu-options bx--overflow-menu-options--open"
2121
role="menu"
22-
(focusout)="clickClose($event)"
22+
(click)="doClose()"
2323
[attr.aria-label]="dialogConfig.menuLabel">
2424
<ng-template
2525
[ngTemplateOutlet]="dialogConfig.content"
@@ -28,7 +28,7 @@ import { I18n } from "./../../i18n/i18n.module";
2828
</ul>
2929
`
3030
})
31-
export class OverflowMenuPane extends Dialog {
31+
export class OverflowMenuPane extends Dialog implements AfterViewInit {
3232

3333
constructor(protected elementRef: ElementRef, protected i18n: I18n) {
3434
super(elementRef);
@@ -53,16 +53,6 @@ export class OverflowMenuPane extends Dialog {
5353
if (!this.dialogConfig.menuLabel) {
5454
this.dialogConfig.menuLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
5555
}
56-
57-
setTimeout(() => {
58-
getFocusElementList(this.elementRef.nativeElement).every(button => {
59-
// Allows user to set tabindex to 0.
60-
if (button.getAttribute("tabindex") === null) {
61-
button.tabIndex = -1;
62-
}
63-
});
64-
this.listItems()[0].focus();
65-
}, 0);
6656
}
6757

6858
@HostListener("keydown", ["$event"])
@@ -104,20 +94,25 @@ export class OverflowMenuPane extends Dialog {
10494

10595
case "Esc": // IE specific value
10696
case "Escape":
97+
case "Tab":
10798
event.stopImmediatePropagation();
10899
this.doClose();
109100
break;
101+
default: break;
110102
}
111103
}
112104

113-
clickClose(event) {
114-
// Opens menu when clicking on the menu button and stays open while navigating through the options
115-
if (this.dialogConfig.parentRef.nativeElement.firstChild.contains(event.target) ||
116-
this.listItems().some(button => button === event.relatedTarget) ||
117-
event.type === "focusout" && event.relatedTarget === this.dialogConfig.parentRef.nativeElement) {
118-
return;
119-
}
120-
this.doClose();
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();
121116
}
122117

123118
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/dialog/tooltip/tooltip.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { withNotes } from "@storybook/addon-notes";
33
import { action } from "@storybook/addon-actions";
44
import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
55

6-
import { DialogModule } from "../../";
6+
import { DialogModule, PlaceholderModule } from "../../";
77

88
storiesOf("Tooltip", module)
99
.addDecorator(
1010
moduleMetadata({
1111
imports: [
12-
DialogModule
12+
DialogModule, PlaceholderModule
1313
]
1414
})
1515
)

‎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)