CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-29 16:51:33 +13:00
Code Issues Projects Releases Wiki Activity

Add error state styles to date picker field

Browse source
This commit is contained in:
Andrew Kingston 2021-02-01 19:01:43 +00:00
parent cf43cf765c
commit 8789d576af
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/standard-components/src/forms/DateTimeField.svelte
View file

@ -57,7 +57,8 @@
<div
id={`${$fieldState.fieldId}-wrapper`}
aria-disabled="false"
aria-invalid="false"
aria-invalid={!$fieldState.valid}
class:is-invalid={!$fieldState.valid}
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
class:is-focused={open}
aria-readonly="false"
@ -65,12 +66,21 @@
aria-haspopup="true">
<div
on:click={flatpickr?.open}
class="spectrum-Textfield spectrum-InputGroup-textfield">
class="spectrum-Textfield spectrum-InputGroup-textfield"
class:is-invalid={!$fieldState.valid}>
{#if !$fieldState.valid}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<input
data-input
type="text"
class="spectrum-Textfield-input spectrum-InputGroup-input"
aria-invalid="false"
aria-invalid={!$fieldState.valid}
{placeholder}
id={$fieldState.fieldId}
value={$fieldState.value} />
@ -79,6 +89,7 @@
type="button"
class="spectrum-Picker spectrum-InputGroup-button"
tabindex="-1"
class:is-invalid={!$fieldState.valid}
on:click={flatpickr?.open}>
<svg
class="spectrum-Icon spectrum-Icon--sizeM"
@ -108,6 +119,7 @@
--spectrum-alias-single-line-width,
var(--spectrum-global-dimension-size-2400)
);
overflow: hidden;
}
.flatpickr .spectrum-Textfield {
width: auto;