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

fix(password-input): support invalid state when used in a FluidForm

Browse source
This commit is contained in:
Eric Liu 2022-06-25 06:59:00 -07:00
commit c9c172f88f
1 changed files with 41 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/TextInput/PasswordInput.svelte
View file

@ -192,39 +192,47 @@
on:blur on:blur
on:paste on:paste
/> />
<button {#if isFluid && invalid}
type="button" <hr class="bx--text-input__divider" />
disabled="{disabled}" <div class="bx--form-requirement" id="{errorId}">
class:bx--text-input--password__visibility__toggle="{true}" {invalidText}
class:bx--btn="{true}" </div>
class:bx--btn--icon-only="{true}" {/if}
class:bx--btn--disabled="{disabled}" {#if !(isFluid && invalid)}
class:bx--tooltip__trigger="{true}" <button
class:bx--tooltip--a11y="{true}" type="button"
class:bx--tooltip--top="{tooltipPosition === 'top'}" disabled="{disabled}"
class:bx--tooltip--right="{tooltipPosition === 'right'}" class:bx--text-input--password__visibility__toggle="{true}"
class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}" class:bx--btn="{true}"
class:bx--tooltip--left="{tooltipPosition === 'left'}" class:bx--btn--icon-only="{true}"
class:bx--tooltip--align-start="{tooltipAlignment === 'start'}" class:bx--btn--disabled="{disabled}"
class:bx--tooltip--align-center="{tooltipAlignment === 'center'}" class:bx--tooltip__trigger="{true}"
class:bx--tooltip--align-end="{tooltipAlignment === 'end'}" class:bx--tooltip--a11y="{true}"
on:click="{() => { class:bx--tooltip--top="{tooltipPosition === 'top'}"
type = type === 'password' ? 'text' : 'password'; class:bx--tooltip--right="{tooltipPosition === 'right'}"
}}" class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
> class:bx--tooltip--left="{tooltipPosition === 'left'}"
{#if !disabled} class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
<span class:bx--assistive-text="{true}"> class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
{#if type === "text"} class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
{hidePasswordLabel} on:click="{() => {
{:else}{showPasswordLabel}{/if} type = type === 'password' ? 'text' : 'password';
</span> }}"
{/if} >
{#if type === "text"} {#if !disabled}
<ViewOff class="bx--icon-visibility-off" /> <span class:bx--assistive-text="{true}">
{:else} {#if type === "text"}
<View class="bx--icon-visibility-on" /> {hidePasswordLabel}
{/if} {:else}{showPasswordLabel}{/if}
</button> </span>
{/if}
{#if type === "text"}
<ViewOff class="bx--icon-visibility-off" />
{:else}
<View class="bx--icon-visibility-on" />
{/if}
</button>
{/if}
</div> </div>
{#if !isFluid && invalid} {#if !isFluid && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}"> <div class:bx--form-requirement="{true}" id="{errorId}">