issue #163: light select style

Author: panpan-lin

src/select/select.component.ts

@@ -29,7 +29,10 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 	template: `
 		<div class="bx--form-item">
 			<div
-				[ngClass]="{'bx--select--inline': display === 'inline'}"
+				[ngClass]="{
+					'bx--select--inline': display === 'inline',
+					'bx--select--light': theme === 'light'
+				}"
 				class="bx--select">
 				<label [attr.for]="id" class="bx--label">{{label}}</label>
 				<select
@@ -76,6 +79,10 @@ export class Select implements ControlValueAccessor {
 	 * Set to true to disable component.
 	 */
 	@Input() disabled = false;
+	/**
+	 * `light` or `dark` select theme
+	 */
+	@Input() theme: "light" | "dark" = "dark";
 	/**
 	 * emits the selected options `value`
 	 */

src/select/select.stories.ts

@@ -1,6 +1,6 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
+import { withKnobs } from "@storybook/addon-knobs/angular";
 
 import { SelectModule } from "../";
 
@@ -42,6 +42,22 @@ storiesOf("Select", module).addDecorator(
 		</ibm-select>
 	`
 	}))
+	.add("Light", () => ({
+		template: `
+		<ibm-select [theme]="'light'">
+			<option value="" disabled selected hidden>Choose an option</option>
+          <option value="solong">A much longer option that is worth having around to check how text flows</option>
+          <optgroup label="Category 1">
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+          </optgroup>
+          <optgroup label="Category 2">
+              <option value="option1">Option 1</option>
+              <option value="option2">Option 2</option>
+          </optgroup>
+		</ibm-select>
+	`
+	}))
 	.add("With ngModel", () => ({
 		template: `
 			<ibm-select [(ngModel)]="model">