fix(ibm-dropdown-list): ensure ListItem.disabled is treated as a boolean by styling logic

The disabled styling was treating ListItem.disabled input as a disabled attribute (i.e. present or
not) even though the doc for ListItem says that it is a boolean. Now, we treat ListItem.disabled
input as a boolean.

Add tests for disabling a list-item

Add disabled item examples to dropdown and combobox storybooks

Fix linting error in grid

Signed-off-by: anemonetea <[email protected]>

Author: anemonetea

src/combobox/combobox.stories.ts

@@ -1,6 +1,6 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, text, boolean, number, select } from "@storybook/addon-knobs/angular";
+import { withKnobs, text, boolean, object, number, select } from "@storybook/addon-knobs/angular";
 
 import { ComboBoxModule } from "./combobox.module";
 import { ButtonModule } from "../button/button.module";
@@ -30,20 +30,12 @@ const getOptions = (override = {}) => {
 		warnText: text("Text for the warning", "This is a warning"),
 		label: text("Label", "ComboBox label"),
 		helperText: text("Helper text", "Optional helper text."),
-		items: [
-			{
-				content: "one"
-			},
-			{
-				content: "two"
-			},
-			{
-				content: "three"
-			},
-			{
-				content: "four"
-			}
-		],
+		items: object("items", [
+			{ content: "one" },
+			{ content: "two", selected: true },
+			{ content: "three", disabled: true },
+			{ content: "four", disabled: false }
+		]),
 		selected: action("selection changed"),
 		submit: action("submit"),
 		size: select("size", ["sm", "md", "xl"], "md"),
@@ -170,7 +162,7 @@ class ReactiveFormsCombobox implements OnInit {
 	@Input() helperText = "";
 	@Input() size = "md";
 	@Input() theme = "dark";
-	@Input() set items(newItems = []) {
+	@Input() set items(newItems) {
 		if (!isEqual(this._items, newItems)) {
 			this._items = newItems;
 		}

src/dropdown/dropdown.stories.ts

@@ -62,8 +62,8 @@ const getProps = (overrides = {}) => Object.assign({}, {
 	items: object("items", [
 		{ content: "one" },
 		{ content: "two", selected: true },
-		{ content: "three" },
-		{ content: "four" }
+		{ content: "three", disabled: true },
+		{ content: "four", disabled: false }
 	]),
 	selected: action("Selected fired for dropdown"),
 	onClose: action("Dropdown closed"),
@@ -307,7 +307,7 @@ storiesOf("Components|Dropdown", module)
 			</app-reactive-forms>
 		`,
 		props: getProps({
-			items: [
+			items: object("items", [
 				{
 					content: "numerical value item 1",
 					oid: 1,
@@ -318,7 +318,7 @@ storiesOf("Components|Dropdown", module)
 					oid: 2,
 					selected: false
 				}
-			],
+			]),
 			selectionFeedback: select("Selection feedback", ["top", "fixed", "top-after-reopen"], "top-after-reopen"),
 			selected: action("Selected fired for multi-select dropdown"),
 			onClose: action("Multi-select dropdown closed")
@@ -343,12 +343,7 @@ storiesOf("Components|Dropdown", module)
 		</div>
 	`,
 		props: getProps({
-			items: of([
-				{ content: "one" },
-				{ content: "two", selected: true },
-				{ content: "three" },
-				{ content: "four" }
-			])
+			items: of({...getProps()}.items)
 		})
 	}))
 	.add("With Template", () => ({

src/dropdown/list/dropdown-list.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By	} from "@angular/platform-browser";
 
 import { DropdownList } from "./dropdown-list.component";
@@ -11,7 +11,10 @@ import { I18nModule } from "../../i18n/index";
 	template: `<ibm-dropdown-list [items]="items" (select)="onSelect($event)"></ibm-dropdown-list>`
 })
 class DropdownListTest {
-	items = [{content: "one", selected: false}, {content: "two", selected: false}];
+	items = [
+		<ListItem>{content: "one", selected: false},
+		<ListItem>{content: "two", selected: false}
+	];
 	selected: ListItem;
 	onSelect(ev) {
 		this.selected = ev.item;
@@ -22,15 +25,18 @@ class DropdownListTest {
 	template: `<ibm-dropdown-list [items]="items" (select)="onSelect($event)" type="multi"></ibm-dropdown-list>`
 })
 class MultiTest {
-	items = [{content: "one", selected: false}, {content: "two", selected: false}];
+	items = [
+		<ListItem>{content: "one", selected: false},
+		<ListItem>{content: "two", selected: false}
+	];
 	selected: ListItem[];
 	onSelect(ev) {
 		this.selected = ev;
 	}
 }
 
 describe("Dropdown list", () => {
-	let fixture, wrapper;
+	let fixture: ComponentFixture<DropdownListTest>, wrapper: DropdownListTest;
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [
@@ -51,8 +57,8 @@ describe("Dropdown list", () => {
 	});
 
 	it("should work", () => {
-		fixture = TestBed.createComponent(DropdownList);
-		expect(fixture.componentInstance instanceof DropdownList).toBe(true);
+		let fixture2 = TestBed.createComponent(DropdownList);
+		expect(fixture2.componentInstance instanceof DropdownList).toBe(true);
 	});
 
 	it("should select an item", () => {
@@ -62,10 +68,23 @@ describe("Dropdown list", () => {
 		});
 		expect(wrapper.selected.content).toBe("one");
 	});
+
+	it("should disable a list-item", () => {
+		wrapper.items = [
+			<ListItem>{content: "one", selected: false},
+			<ListItem>{content: "two", selected: false, disabled: false},
+			<ListItem>{content: "three", selected: false, disabled: true}
+		];
+		fixture.detectChanges();
+		const disabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item[disabled]"));
+		expect(disabledEls.length).toEqual(1);
+		const enabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item:not([disabled])"));
+		expect(enabledEls.length).toEqual(2);
+	});
 });
 
 describe("Dropdown multi list", () => {
-	let fixture, wrapper;
+	let fixture: ComponentFixture<MultiTest>, wrapper: MultiTest;
 	beforeEach(() => {
 		TestBed.configureTestingModule({
 			declarations: [
@@ -86,9 +105,9 @@ describe("Dropdown multi list", () => {
 	});
 
 	it("should work", () => {
-		fixture = TestBed.createComponent(DropdownList);
-		fixture.type = "multi";
-		expect(fixture.componentInstance instanceof DropdownList).toBe(true);
+		let fixture2 = TestBed.createComponent(DropdownList);
+		fixture2.componentInstance.type = "multi";
+		expect(fixture2.componentInstance instanceof DropdownList).toBe(true);
 	});
 
 	it("should multi select", () => {
@@ -104,4 +123,21 @@ describe("Dropdown multi list", () => {
 		expect(wrapper.selected[0].content).toBe("one");
 		expect(wrapper.selected[1].content).toBe("two");
 	});
+
+	it("should disable a list-item and its checkbox", () => {
+		wrapper.items = [
+			<ListItem>{content: "one", selected: false},
+			<ListItem>{content: "two", selected: false, disabled: false},
+			<ListItem>{content: "three", selected: false, disabled: true}
+		];
+		fixture.detectChanges();
+		const disabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item[disabled]"));
+		const disabledInputEls = fixture.debugElement.queryAll(By.css(".bx--checkbox[disabled]"));
+		expect(disabledEls.length).toEqual(1);
+		expect(disabledInputEls.length).toEqual(1);
+		const enabledEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item:not([disabled])"));
+		const enabledInputEls = fixture.debugElement.queryAll(By.css(".bx--checkbox:not([disabled])"));
+		expect(enabledEls.length).toEqual(2);
+		expect(enabledInputEls.length).toEqual(2);
+	});
 });

src/dropdown/list/dropdown-list.component.ts

@@ -67,7 +67,7 @@ import { ScrollCustomEvent } from "./scroll-custom-event.interface";
 				[attr.aria-selected]="item.selected"
 				[id]="getItemId(i)"
 				[attr.title]=" showTitles ? item.content : null"
-				[attr.disabled]="item.disabled"
+				[attr.disabled]="item.disabled ? true : null"
 				[ngClass]="{
 					'bx--list-box__menu-item--active': item.selected,
 					'bx--list-box__menu-item--highlighted': highlightedItem === getItemId(i)

src/grid/grid.directive.ts

@@ -1,4 +1,4 @@
-import { 
+import {
 	Directive,
 	HostBinding,
 	Input,