mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21: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

30
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,29 +162,30 @@
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 invalid}
<WarningFilled class="bx--text-input__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled
class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning"
/>
{/if}
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if invalid}
<WarningFilled class="bx--text-input__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled
class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning"
/>
{/if}
{/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'}"