fix(password-input): disable visibility button

- set default values for tooltipAlignment, tooltipPosition
This commit is contained in:
Eric Liu 2021-01-22 15:04:06 -08:00
commit 97d3a9f653
4 changed files with 20 additions and 10 deletions

View file

@ -30,13 +30,13 @@
* Set the alignment of the tooltip relative to the icon
* @type {"start" | "center" | "end"}
*/
export let tooltipAlignment = undefined;
export let tooltipAlignment = "center";
/**
* Set the position of the tooltip relative to the icon
* @type {"top" | "right" | "bottom" | "left"}
*/
export let tooltipPosition = undefined;
export let tooltipPosition = "bottom";
/** Set to `true` to enable the light variant */
export let light = false;
@ -72,9 +72,9 @@
export let ref = null;
import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import View16 from "carbon-icons-svelte/lib/View16";
import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
const ctx = getContext("Form");
@ -136,19 +136,25 @@
/>
<button
type="button"
disabled="{disabled}"
class:bx--text-input--password__visibility__toggle="{true}"
class:bx--btn--icon-only="{true}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class:bx--btn--disabled="{disabled}"
class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
{tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"
>
<span class:bx--assistive-text="{true}">
{#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
</span>
{#if !disabled}
<span class:bx--assistive-text="{true}">
{#if type === 'text'}
{hidePasswordLabel}
{:else}{showPasswordLabel}{/if}
</span>
{/if}
{#if type === 'text'}
<ViewOff16 class="bx--icon-visibility-off" />
{:else}