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(password-input): support invalid state when used in a FluidForm (#1371)

Browse source 
* fix(password-input): support invalid state when used in a `FluidForm`

* docs(fluid-form): add example "Invalid state"
This commit is contained in:
metonym 2022-06-25 08:17:19 -07:00 • committed by GitHub
commit 6a3614bf55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 39 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:paste
/>
<button
type="button"
disabled="{disabled}"
class:bx--text-input--password__visibility__toggle="{true}"
class:bx--btn="{true}"
class:bx--btn--icon-only="{true}"
class:bx--btn--disabled="{disabled}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class:bx--tooltip--top="{tooltipPosition === 'top'}"
class:bx--tooltip--right="{tooltipPosition === 'right'}"
class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
class:bx--tooltip--left="{tooltipPosition === 'left'}"
class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"
>
{#if !disabled}
<span class:bx--assistive-text="{true}">
{#if type === "text"}
{hidePasswordLabel}
{:else}{showPasswordLabel}{/if}
</span>
{/if}
{#if type === "text"}
<ViewOff class="bx--icon-visibility-off" />
{:else}
<View class="bx--icon-visibility-on" />
{/if}
</button>
{#if isFluid && invalid}
<hr class="bx--text-input__divider" />
<div class="bx--form-requirement" id="{errorId}">
{invalidText}
</div>
{/if}
{#if !(isFluid && invalid)}
<button
type="button"
disabled="{disabled}"
class:bx--text-input--password__visibility__toggle="{true}"
class:bx--btn="{true}"
class:bx--btn--icon-only="{true}"
class:bx--btn--disabled="{disabled}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class:bx--tooltip--top="{tooltipPosition === 'top'}"
class:bx--tooltip--right="{tooltipPosition === 'right'}"
class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
class:bx--tooltip--left="{tooltipPosition === 'left'}"
class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"
>
{#if !disabled}
<span class:bx--assistive-text="{true}">
{#if type === "text"}
{hidePasswordLabel}
{:else}{showPasswordLabel}{/if}
</span>
{/if}
{#if type === "text"}
<ViewOff class="bx--icon-visibility-off" />
{:else}
<View class="bx--icon-visibility-on" />
{/if}
</button>
{/if}
</div>
{#if !isFluid && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">