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

feat(TextInput): add isFluid from Form context

Browse source
This commit is contained in:
josefaidt 2020-09-29 14:55:39 -05:00
commit 04443c5833
2 changed files with 24 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/TextInput/PasswordInput.svelte
View file

@ -107,17 +107,21 @@
*/ */
export let ref = null; export let ref = null;
import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import View16 from "carbon-icons-svelte/lib/View16"; import View16 from "carbon-icons-svelte/lib/View16";
import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16"; import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
const ctx = getContext("Form");
$: isFluid = !!ctx && ctx.isFluid;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
</script> </script>
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
class:bx--text-input-wrapper="{true}" class:bx--text-input-wrapper="{true}"
class:bx--password-input-wrapper="{true}" class:bx--password-input-wrapper="{!isFluid}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

23
src/TextInput/TextInput.svelte
View file

@ -107,9 +107,13 @@
*/ */
export let inline = false; export let inline = false;
import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16"; import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
const ctx = getContext("Form");
$: isFluid = !!ctx && ctx.isFluid;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: warnId = `warn-${id}`; $: warnId = `warn-${id}`;
</script> </script>
@ -138,7 +142,7 @@
{labelText} {labelText}
</label> </label>
{/if} {/if}
{#if helperText} {#if !isFluid && helperText}
<div <div
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
@ -206,8 +210,19 @@
on:focus on:focus
on:blur on:blur
/> />
{#if isFluid}
<hr className="bx--text-input__divider" />
{/if}
{#if isFluid && !inline && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">
{invalidText}
</div> </div>
{#if !invalid && !warn && !inline && helperText} {/if}
{#if isFluid && !inline && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
{/if}
</div>
{#if !invalid && !warn && !isFluid && !inline && helperText}
<div <div
class:bx--form__helper-text="{true}" class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}" class:bx--form__helper-text--disabled="{disabled}"
@ -216,12 +231,12 @@
{helperText} {helperText}
</div> </div>
{/if} {/if}
{#if invalid} {#if !isFluid && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}"> <div class:bx--form-requirement="{true}" id="{errorId}">
{invalidText} {invalidText}
</div> </div>
{/if} {/if}
{#if !invalid && warn} {#if !isFluid && !invalid && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div> <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
{/if} {/if}
</div> </div>