Adding inputs to time picker (#1343)

* feat: disabled and display Mode input in Time Picker

* feat: adding size inputs

* feat: adding transparent background to select

* feat: fixing comments

* feat: fixing comments

* feat: fixing comments

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/multi-select/multi-select.component.scss

@@ -28,6 +28,19 @@
     padding: 0 8px;
     cursor: pointer;
     height: 34px;
+    border-radius: 6px;
+
+    &.extra-small {
+      height: 30px;
+    }
+
+    &.small {
+      height: 32px;
+    }
+
+    &.large {
+      height: 44px;
+    }
 
     &.open {
       background-color: $gray-2;

projects/components/src/multi-select/multi-select.component.ts

@@ -53,7 +53,7 @@ import { MultiSelectJustify } from './multi-select-justify';
           <div
             class="trigger-content"
             [style.justify-content]="this.justify"
-            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '']"
+            [ngClass]="[this.triggerLabelDisplayMode, this.popoverOpen ? 'open' : '', this.size]"
             #triggerContainer
           >
             <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"></ht-icon>
@@ -63,7 +63,7 @@ import { MultiSelectJustify } from './multi-select-justify';
                 <span *ngIf="triggerValues.selectedItemsCount > 1" class="trigger-more-items"
                   >+{{ triggerValues.selectedItemsCount - 1 }}</span
                 >
-                <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.Small}"></ht-icon>
+                <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" [size]="this.iconSize"></ht-icon>
               </div>
             </ng-container>
           </div>

projects/components/src/select/select-size.ts

@@ -1,4 +1,5 @@
 export const enum SelectSize {
+  ExtraSmall = 'extra-small',
   Small = 'small',
   Medium = 'medium',
   Large = 'large'

projects/components/src/time-picker/time-picker.component.scss

@@ -1,14 +1,23 @@
 @import 'mixins';
 
 .time-picker {
+  @include disableable;
   display: flex;
 
   .time-selector {
     @include body-1-medium($gray-7);
     height: 32px;
-    border: 1px solid $gray-1;
-    background: $gray-1;
     border-radius: 4px;
+
+    &.with-background {
+      border: 1px solid $gray-1;
+      background: $gray-1;
+    }
+
+    &.with-border {
+      border: 1px solid $color-border;
+      border-radius: 6px;
+    }
   }
 }
 

projects/components/src/time-picker/time-picker.component.ts

@@ -9,8 +9,8 @@ import { PredefinedTimeService } from '../time-range/predefined-time.service';
   styleUrls: ['./time-picker.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="time-picker">
-      <ht-popover class="time-selector" [closeOnClick]="true">
+    <div class="time-picker" [ngClass]="{ disabled: this.disabled }">
+      <ht-popover class="time-selector" [disabled]="this.disabled" [ngClass]="this.displayMode" [closeOnClick]="true">
         <ht-popover-trigger>
           <div class="popover-trigger" #popoverTrigger>
             <ht-icon
@@ -20,7 +20,13 @@ import { PredefinedTimeService } from '../time-range/predefined-time.service';
               *ngIf="this.showTimeTriggerIcon"
             ></ht-icon>
             <ht-label class="trigger-label" *ngIf="this.time" [label]="this.time!.label"></ht-label>
-            <ht-icon class="trigger-caret" icon="${IconType.ChevronDown}" size="${IconSize.Small}"></ht-icon>
+            <ht-icon
+              class="trigger-caret"
+              icon="${IconType.ChevronDown}"
+              [size]="
+                this.iconSize === '${TimePickerIconSize.Regular}' ? '${IconSize.Small}' : '${IconSize.ExtraSmall}'
+              "
+            ></ht-icon>
           </div>
         </ht-popover-trigger>
         <ht-popover-content>
@@ -45,9 +51,18 @@ export class TimePickerComponent {
   @Input()
   public time?: Time;
 
+  @Input()
+  public iconSize?: TimePickerIconSize = TimePickerIconSize.Regular;
+
   @Input()
   public showTimeTriggerIcon?: boolean = false;
 
+  @Input()
+  public displayMode?: TimePickerDisplayMode = TimePickerDisplayMode.MenuWithBackground;
+
+  @Input()
+  public disabled: boolean = false;
+
   @Output()
   public readonly timeChange: EventEmitter<Time> = new EventEmitter();
 
@@ -67,3 +82,13 @@ export class TimePickerComponent {
     this.timeChange.emit(time);
   }
 }
+
+export const enum TimePickerDisplayMode {
+  MenuWithBorder = 'with-border',
+  MenuWithBackground = 'with-background'
+}
+
+export const enum TimePickerIconSize {
+  Small = 'small',
+  Regular = 'regular'
+}