Merge pull request #214 from panpan-lin/issue-163-light-style-dropdown

Add light style for Dropdown component

Author: zvonimirfras

src/dropdown/dropdown.component.ts

@@ -28,7 +28,9 @@ import { I18n } from "./../i18n/i18n.module";
 @Component({
 	selector: "ibm-dropdown",
 	template: `
-	<div class="bx--list-box">
+	<div
+		class="bx--list-box"
+		[ngClass]="{'bx--dropdown--light': theme === 'light'}">
 		<button
 			type="button"
 			#dropdownButton
@@ -82,7 +84,11 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * item selection.
 	 */
 	@Input() type: "single" | "multi" = "single";
-
+	/**
+	 * `light` or `dark` dropdown theme
+	 * @memberof Dropdown
+	 */
+	@Input() theme: "light" | "dark" = "dark";
 	/**
 	 * Set to `true` to disable the dropdown.
 	 */

src/dropdown/dropdown.stories.ts

@@ -41,6 +41,29 @@ storiesOf("Dropdown", module)
 			onClose: action("Dropdown closed")
 		}
 	}))
+	.add("Light", () => ({
+		template: `
+		<ibm-dropdown
+			theme="light"
+			placeholder="Select"
+			[disabled]="disabled"
+			(selected)="selected($event)"
+			(onClose)="onClose($event)">
+			<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
+		</ibm-dropdown>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: object("items", [
+				{ content: "one" },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for dropdown"),
+			onClose: action("Dropdown closed")
+		}
+	}))
 	.add("Multi-select", withNotes({ text: "Notes on multi select" })(() => ({
 		template: `
 		<ibm-dropdown