mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: readonly inputs cannot be invalid

Browse source 
Addresses https://github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645
This commit is contained in:
Eric Liu 2023-02-25 12:22:17 -08:00
commit 480f932d69
2 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/NumberInput/NumberInput.svelte
View file

@ -128,7 +128,7 @@
$: incrementLabel = translateWithId("increment"); $: incrementLabel = translateWithId("increment");
$: decrementLabel = translateWithId("decrement"); $: decrementLabel = translateWithId("decrement");
$: error = $: error =
invalid || (invalid && !readonly) ||
(!allowEmpty && value == null) || (!allowEmpty && value == null) ||
value > max || value > max ||
(typeof value === "number" && value < min); (typeof value === "number" && value < min);
@ -191,8 +191,8 @@
type="number" type="number"
pattern="[0-9]*" pattern="[0-9]*"
aria-describedby="{errorId}" aria-describedby="{errorId}"
data-invalid="{invalid || undefined}" data-invalid="{(error) || undefined}"
aria-invalid="{invalid || undefined}" aria-invalid="{(error) || undefined}"
aria-label="{label ? undefined : ariaLabel}" aria-label="{label ? undefined : ariaLabel}"
disabled="{disabled}" disabled="{disabled}"
id="{id}" id="{id}"

11
src/TextInput/TextInput.svelte
View file

@ -95,6 +95,7 @@
}; };
$: isFluid = !!ctx && ctx.isFluid; $: isFluid = !!ctx && ctx.isFluid;
$: error = invalid && !readonly;
$: helperId = `helper-${id}`; $: helperId = `helper-${id}`;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;
@ -161,7 +162,7 @@
class:bx--text-input__field-outer-wrapper--inline="{inline}" class:bx--text-input__field-outer-wrapper--inline="{inline}"
> >
<div <div
data-invalid="{invalid || undefined}" data-invalid="{error || undefined}"
data-warn="{warn || undefined}" data-warn="{warn || undefined}"
class:bx--text-input__field-wrapper="{true}" class:bx--text-input__field-wrapper="{true}"
class:bx--text-input__field-wrapper--warning="{!invalid && warn}" class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
@ -181,10 +182,10 @@
{/if} {/if}
<input <input
bind:this="{ref}" bind:this="{ref}"
data-invalid="{invalid || undefined}" data-invalid="{error || undefined}"
aria-invalid="{invalid || undefined}" aria-invalid="{error || undefined}"
data-warn="{warn || undefined}" data-warn="{warn || undefined}"
aria-describedby="{invalid aria-describedby="{error
? errorId ? errorId
: warn : warn
? warnId ? warnId
@ -200,7 +201,7 @@
readonly="{readonly}" readonly="{readonly}"
class:bx--text-input="{true}" class:bx--text-input="{true}"
class:bx--text-input--light="{light}" 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--warn="{warn}"
class:bx--text-input--sm="{size === 'sm'}" class:bx--text-input--sm="{size === 'sm'}"
class:bx--text-input--xl="{size === 'xl'}" class:bx--text-input--xl="{size === 'xl'}"