Merge pull request #198 from youda97/inline-select

Add inline select component

Author: zvonimirfras

src/select/select.component.ts

@@ -28,7 +28,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 	selector: "ibm-select",
 	template: `
 		<div class="bx--form-item">
-			<div class="bx--select">
+			<div
+				[ngClass]="{'bx--select--inline': display === 'inline'}"
+				class="bx--select">
 				<label [attr.for]="id" class="bx--label">{{label}}</label>
 				<select
 					#select
@@ -57,6 +59,11 @@ export class Select implements ControlValueAccessor {
 	 * Tracks the total number of selects instantiated. Used to generate unique IDs
 	 */
 	static selectCount = 0;
+
+	/**
+	 * `inline` or `default` select displays
+	 */
+	@Input() display: "inline" | "default" = "default";
 	/**
 	 * Label for the select. Appears above the input.
 	 */

src/select/select.stories.ts

@@ -26,6 +26,22 @@ storiesOf("Select", module).addDecorator(
 		</ibm-select>
 	`
 	}))
+	.add("Inline", () => ({
+		template: `
+		<ibm-select display="inline">
+			<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">