mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

11
src/NumberInput/NumberInput.svelte
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,6 +211,9 @@
on:blur
on:paste
/>
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if invalid}
<WarningFilled class="bx--number__invalid" />
{/if}
@ -219,8 +222,6 @@
class="bx--number__invalid bx--number__invalid--warning"
/>
{/if}
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">

16
src/TextInput/TextInput.svelte
View file

@ -95,6 +95,7 @@
};
$: isFluid = !!ctx && ctx.isFluid;
$: error = invalid && !readonly;
$: helperId = `helper-${id}`;
$: errorId = `error-${id}`;
$: warnId = `warn-${id}`;
@ -161,11 +162,14 @@
class:bx--text-input__field-outer-wrapper--inline="{inline}"
>
<div
data-invalid="{invalid || undefined}"
data-invalid="{error || undefined}"
data-warn="{warn || undefined}"
class:bx--text-input__field-wrapper="{true}"
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
>
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if invalid}
<WarningFilled class="bx--text-input__invalid-icon" />
{/if}
@ -175,15 +179,13 @@
bx--text-input__invalid-icon--warning"
/>
{/if}
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{/if}
<input
bind:this="{ref}"
data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}"
data-invalid="{error || undefined}"
aria-invalid="{error || undefined}"
data-warn="{warn || undefined}"
aria-describedby="{invalid
aria-describedby="{error
? errorId
: warn
? warnId
@ -199,7 +201,7 @@
readonly="{readonly}"
class:bx--text-input="{true}"
class:bx--text-input--light="{light}"
class:bx--text-input--invalid="{invalid}"
class:bx--text-input--invalid="{error}"
class:bx--text-input--warn="{warn}"
class:bx--text-input--sm="{size === 'sm'}"
class:bx--text-input--xl="{size === 'xl'}"