fix: readonly should override error behavior in TextInput, NumberInput (#1666)

* fix(text-input): avoid overlapping readonly/invalid icons

* fix(number-input): avoid overlapping readonly/invalid icons

* fix: readonly inputs cannot be invalid

Addresses https://github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645
This commit is contained in:
metonym 2023-02-26 17:51:50 -08:00 committed by GitHub
commit 6386c33f93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 25 deletions

View file

@ -128,7 +128,7 @@
$: incrementLabel = translateWithId("increment");
$: decrementLabel = translateWithId("decrement");
$: error =
invalid ||
(invalid && !readonly) ||
(!allowEmpty && value == null) ||
value > max ||
(typeof value === "number" && value < min);
@ -191,8 +191,8 @@
type="number"
pattern="[0-9]*"
aria-describedby="{errorId}"
data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}"
data-invalid="{(error) || undefined}"
aria-invalid="{(error) || undefined}"
aria-label="{label ? undefined : ariaLabel}"
disabled="{disabled}"
id="{id}"
@ -211,16 +211,17 @@
on:blur
on:paste
/>
{#if invalid}
<WarningFilled class="bx--number__invalid" />
{/if}
{#if !invalid && warn}
<WarningAltFilled
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if invalid}
<WarningFilled class="bx--number__invalid" />
{/if}
{#if !invalid && warn}
<WarningAltFilled
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">