mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Align v10.38 (#698)
* chore(deps-dev): upgrade carbon-components to v10.38.0 * feat(text-input): support read-only variant * docs: use consistent lingo for inline variant examples * docs(popover): add Popover alignment example * fix(file-uploader): adjust markup to avoid accessibility errors Ref:0dfde60e3
* fix(inline-loading): use error filled icon * fix(inline-loading): render iconDescription as title in error/warning icons Ref:51c53c923
* fix(structured-list): update accessibility attributes * fix(tooltip-definition): use span instead of div Ref:cb6de3025
* fix(multi-select): close menu when blurring the last filterable option * fix(multi-select): open/focus field for filterable multiselect #635 * fix(multi-select): unblock focus when blurring input #635 * fix(combo-box): select correct item with keys, allow input after clearing #195 * fix(combo-box): update input text if item is selected * feat(combo-box): render checkmark icon for selected item * fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699 * fix(context-menu): update context menu classes #684 * docs(context-menu): improve demo instructions #684 * fix(context-menu): close menu when clicking anywhere
This commit is contained in:
parent
7c1e30476a
commit
e51f50da0c
33 changed files with 285 additions and 88 deletions
|
@ -59,12 +59,16 @@
|
|||
/** Set to `true` to mark the field as required */
|
||||
export let required = false;
|
||||
|
||||
/** Set to `true` to use inline version */
|
||||
/** Set to `true` to use the inline variant */
|
||||
export let inline = false;
|
||||
|
||||
/** Set to `true` to use the read-only variant */
|
||||
export let readonly = false;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
|
||||
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
|
||||
import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
|
||||
|
||||
const ctx = getContext("Form");
|
||||
|
||||
|
@ -77,6 +81,8 @@
|
|||
class:bx--form-item="{true}"
|
||||
class:bx--text-input-wrapper="{true}"
|
||||
class:bx--text-input-wrapper--inline="{inline}"
|
||||
class:bx--text-input-wrapper--light="{light}"
|
||||
class:bx--text-input-wrapper--readonly="{readonly}"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
|
@ -142,6 +148,9 @@
|
|||
bx--text-input__invalid-icon--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if readonly}
|
||||
<EditOff16 class="bx--text-input__readonly-icon" />
|
||||
{/if}
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
|
@ -155,6 +164,7 @@
|
|||
type="{type}"
|
||||
value="{value}"
|
||||
required="{required}"
|
||||
readonly="{readonly}"
|
||||
class:bx--text-input="{true}"
|
||||
class:bx--text-input--light="{light}"
|
||||
class:bx--text-input--invalid="{invalid}"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue