Update readonly and disabled date pickers to not show calendar icons

This commit is contained in:
Andrew Kingston 2024-04-12 14:06:26 +01:00
parent ed23d08a13
commit 5960a37128
1 changed files with 16 additions and 10 deletions

View File

@ -23,8 +23,8 @@
bind:this={anchor} bind:this={anchor}
class:is-disabled={disabled || readonly} class:is-disabled={disabled || readonly}
class:is-invalid={!!error} class:is-invalid={!!error}
class="spectrum-InputGroup spectrum-Datepicker"
class:is-focused={focused} class:is-focused={focused}
class="spectrum-InputGroup spectrum-Datepicker"
aria-readonly={readonly} aria-readonly={readonly}
aria-required="false" aria-required="false"
aria-haspopup="true" aria-haspopup="true"
@ -56,15 +56,16 @@
value={displayValue} value={displayValue}
/> />
</div> </div>
<button {#if !disabled && !readonly}
type="button" <button
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" type="button"
tabindex="-1" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
class:is-disabled={disabled} tabindex="-1"
class:is-invalid={!!error} class:is-invalid={!!error}
> >
<Icon name={icon} /> <Icon name={icon} />
</button> </button>
{/if}
</div> </div>
<style> <style>
@ -85,4 +86,9 @@
.is-disabled { .is-disabled {
pointer-events: none !important; pointer-events: none !important;
} }
input:read-only {
border-right-width: 1px;
border-top-right-radius: var(--spectrum-textfield-border-radius);
border-bottom-right-radius: var(--spectrum-textfield-border-radius);
}
</style> </style>