feat: Add missing time picker attributes

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

src/timepicker-select/timepicker-select.component.ts

@@ -22,6 +22,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 			<select
 				#select
 				[attr.id]="id"
+				[attr.aria-label]="ariaLabel"
 				[disabled]="disabled"
 				(change)="onChange($event)"
 				class="bx--select-input">
@@ -44,6 +45,8 @@ export class TimePickerSelect extends Select {
 
 	@Input() id = `timepicker-select-${TimePickerSelect.selectCount++}`;
 
+	@Input() ariaLabel: string;
+
 	/**
 	 * Set to true for a loading select.
 	 */

src/timepicker/timepicker.component.spec.ts

@@ -11,6 +11,7 @@ import { TimePicker } from "./timepicker.component";
 		(valueChange)="onChange()"
 		[(value)]="value"
 		label="test"
+		size="lg"
 		disabled="false">
 	</ibm-timepicker>`
 })
@@ -50,6 +51,12 @@ describe("TimePicker", () => {
 		expect(element.getAttribute("theme")).toEqual("dark");
 	});
 
+	it("should set size to large", () => {
+		fixture = TestBed.createComponent(TimePickerTest);
+		element = fixture.debugElement.query(By.css("ibm-timepicker")).nativeElement;
+		expect(element.getAttribute("size")).toEqual("lg");
+	});
+
 	it("should set disabled to false", () => {
 		fixture = TestBed.createComponent(TimePickerTest);
 		element = fixture.debugElement.query(By.css("ibm-timepicker")).nativeElement;

src/timepicker/timepicker.component.ts

@@ -17,13 +17,24 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 @Component({
 	selector: "ibm-timepicker",
 	template: `
-		<label *ngIf="!skeleton && label" [for]="id" class="bx--label">
+		<label
+			*ngIf="!skeleton && label"
+			[for]="id"
+			[ngClass]="{
+				'bx--label': true,
+				'bx--visually-hidden': hideLabel
+		}">
 			<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
 			<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
 		</label>
 		<div
 			class="bx--time-picker"
-			[ngClass]="{'bx--time-picker--invalid' : invalid}">
+			[ngClass]="{
+				'bx--time-picker--invalid' : invalid,
+				'bx--time-picker--sm': size === 'sm',
+				'bx--time-picker--md': size === 'md',
+				'bx--time-picker--lg': size === 'lg'
+			}">
 			<div class="bx--time-picker__input">
 				<input
 					[ngClass]="{
@@ -36,7 +47,7 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 					[pattern]="pattern"
 					[attr.id]="id"
 					[disabled]="disabled"
-					maxlength="5"
+					[attr.maxlength]="maxLength"
 					(change)="onChange($event)"
 					type="text"
 					class="bx--time-picker__input-field bx--text-input">
@@ -65,11 +76,13 @@ export class TimePicker implements ControlValueAccessor {
 	@Input() invalid = false;
 	@Input() invalidText: string | TemplateRef<any>;
 	@Input() label: string | TemplateRef<any>;
+	@Input() hideLabel = false;
 	@Input() placeholder = "hh:mm";
 	@Input() pattern = "(1[012]|[0-9]):[0-5][0-9]";
 	@Input() id = `timepicker-${TimePicker.timePickerCount++}`;
 	@Input() disabled = false;
 	@Input() value: string;
+	@Input() maxLength = 5;
 
 	/**
 	 * Set to true for a loading select.
@@ -81,6 +94,11 @@ export class TimePicker implements ControlValueAccessor {
 	 */
 	@Input() theme: "light" | "dark" = "dark";
 
+	/**
+	 * `sm`, `md` (default), or `lg` select size
+	 */
+	@Input() size: "sm" | "md" | "lg" = "md";
+
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
 	/**

src/timepicker/timepicker.stories.ts

@@ -32,12 +32,21 @@ storiesOf("Components|Time Picker", module)
 			(valueChange)="timePickerChange($event)"
 			[value]="value"
 			[disabled]="disableTime"
+			[size]="size"
 			label="Select a time">
-			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+			<ibm-timepicker-select
+				[theme]="theme"
+				(valueChange)="timePickerSelectChange($event)"
+				[disabled]="disabledSelect"
+				ariaLabel="Open list of options">
 				<option selected value="AM">AM</option>
 				<option value="PM">PM</option>
 			</ibm-timepicker-select>
-			<ibm-timepicker-select [theme]="theme" (valueChange)="timePickerSelectChange($event)" [disabled]="disabledSelect" display="inline">
+			<ibm-timepicker-select
+				[theme]="theme"
+				(valueChange)="timePickerSelectChange($event)"
+				[disabled]="disabledSelect"
+				ariaLabel="Open list of options">
 				<option selected value="Time Zone 1">Time Zone 1</option>
 				<option value="Time Zone 2">Time Zone 2</option>
 			</ibm-timepicker-select>
@@ -51,6 +60,7 @@ storiesOf("Components|Time Picker", module)
 			disableTime: boolean("disabled time", false),
 			disabledSelect: boolean("disabled selects", false),
 			theme: select("Theme", ["dark", "light"], "dark"),
+			size: select("Size", ["sm", "md", "lg"], "md"),
 			invalid: boolean("Show form validation", false),
 			invalidText: text("Form validation text", "A valid value is required")
 		}
@@ -66,17 +76,17 @@ storiesOf("Components|Time Picker", module)
 				[theme]="theme"
 				(valueChange)="timePickerSelectChange($event)"
 				[disabled]="disabledSelect"
-				display="inline"
-				[(ngModel)]="period">
+				[(ngModel)]="period"
+				ariaLabel="Open list of options">
 				<option selected value="AM">AM</option>
 				<option value="PM">PM</option>
 			</ibm-timepicker-select>
 			<ibm-timepicker-select
 				[theme]="theme"
 				(valueChange)="timePickerSelectChange($event)"
 				[disabled]="disabledSelect"
-				display="inline"
-				[(ngModel)]="timeZone">
+				[(ngModel)]="timeZone"
+				ariaLabel="Open list of options">
 				<option selected value="Time Zone 1">Time Zone 1</option>
 				<option value="Time Zone 2">Time Zone 2</option>
 			</ibm-timepicker-select>