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}
class:is-disabled={disabled || readonly}
class:is-invalid={!!error}
class="spectrum-InputGroup spectrum-Datepicker"
class:is-focused={focused}
class="spectrum-InputGroup spectrum-Datepicker"
aria-readonly={readonly}
aria-required="false"
aria-haspopup="true"
@ -56,15 +56,16 @@
value={displayValue}
/>
</div>
<button
type="button"
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
tabindex="-1"
class:is-disabled={disabled}
class:is-invalid={!!error}
>
<Icon name={icon} />
</button>
{#if !disabled && !readonly}
<button
type="button"
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
tabindex="-1"
class:is-invalid={!!error}
>
<Icon name={icon} />
</button>
{/if}
</div>
<style>
@ -85,4 +86,9 @@
.is-disabled {
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>