Merge pull request #215 from panpan-lin/issue-163-light-style-input

Add light style to Input Component

Author: youda97

src/input/input.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding } from "@angular/core";
+import { Directive, HostBinding, Input } from "@angular/core";
 
 /**
  * A directive for applying styling to an input element.
@@ -15,5 +15,13 @@ import { Directive, HostBinding } from "@angular/core";
 	selector: "[ibmText]"
 })
 export class TextInput {
+	/**
+	 * `light` or `dark` input theme
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	@HostBinding("class.bx--text-input") inputClass = true;
+	@HostBinding("class.bx--text-input--light") get isLightTheme() {
+		return this.theme === "light";
+	}
 }

src/input/input.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 { InputModule } from "../";
 
@@ -22,8 +22,19 @@ storiesOf("Input", module).addDecorator(
 		template: `
 			<input ibmText aria-label="input" placeholder="Optional placeholder text"/>
 		`
-	})).add("TextArea", () => ({
+	}))
+	.add("Light Input", () => ({
+		template: `
+			<input ibmText theme="light" aria-label="input" placeholder="Optional placeholder text"/>
+		`
+	}))
+	.add("TextArea", () => ({
 		template: `
 		<textarea ibmTextArea aria-label="textarea" placeholder="Optional placeholder text" rows="4" cols="50"></textarea>
 		`
+	}))
+	.add("Light TextArea", () => ({
+		template: `
+		<textarea ibmTextArea theme="light" aria-label="textarea" placeholder="Optional placeholder text" rows="4" cols="50"></textarea>
+		`
 	}));

src/input/text-area.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding } from "@angular/core";
+import { Directive, HostBinding, Input } from "@angular/core";
 
 /**
  * A directive for applying styling to a textarea element.
@@ -15,5 +15,13 @@ import { Directive, HostBinding } from "@angular/core";
 	selector: "[ibmTextArea]"
 })
 export class TextArea {
+	/**
+	 * `light` or `dark` input theme
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	@HostBinding("class.bx--text-area") baseClass = true;
+	@HostBinding("class.bx--text-area--light") get isLightTheme() {
+		return this.theme === "light";
+	}
 }