fix(time-picker): correctly display invalidText

This commit is contained in:
Eric Y Liu 2021-04-01 15:38:31 -07:00
commit e26ff3bc8f
2 changed files with 16 additions and 1 deletions

View file

@ -59,7 +59,21 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
</TimePickerSelect> </TimePickerSelect>
</TimePicker> </TimePicker>
### Disabled ### Invalid state
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
</TimePicker>
### Disabled state
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled> <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="PM" disabled> <TimePickerSelect value="PM" disabled>

View file

@ -67,6 +67,7 @@
<div <div
class:bx--time-picker="{true}" class:bx--time-picker="{true}"
class:bx--time-picker--light="{light}" class:bx--time-picker--light="{light}"
class:bx--time-picker--invalid="{invalid}"
class:bx--time-picker--sm="{size === 'sm'}" class:bx--time-picker--sm="{size === 'sm'}"
class:bx--time-picker--xl="{size === 'xl'}" class:bx--time-picker--xl="{size === 'xl'}"
class:bx--select--light="{light}" class:bx--select--light="{light}"