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

chore(textinput): move helper text below input

Browse source
This commit is contained in:
josefaidt 2020-09-17 15:07:02 -05:00
commit 020a91882f
3 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/TextInput/PasswordInput.svelte
View file

@ -132,13 +132,6 @@
{labelText} {labelText}
</label> </label>
{/if} {/if}
{#if helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
{helperText}
</div>
{/if}
<div <div
class:bx--text-input__field-wrapper="{true}" class:bx--text-input__field-wrapper="{true}"
data-invalid="{invalid || undefined}"> data-invalid="{invalid || undefined}">
@ -190,6 +183,13 @@
{/if} {/if}
</button> </button>
</div> </div>
{#if !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
{helperText}
</div>
{/if}
{#if invalid} {#if invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div> <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
{/if} {/if}

1
src/TextInput/TextInput.stories.js
View file

@ -37,6 +37,7 @@ export const TogglePasswordVisibility = () => ({
light: boolean("Light variant (light)", false), light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false), hideLabel: boolean("No label (hideLabel)", false),
labelText: text("Label text (labelText)", "Text Input label"), labelText: text("Label text (labelText)", "Text Input label"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
invalid: boolean("Show form validation UI (invalid)", false), invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text( invalidText: text(
"Content of form validation UI (invalidText)", "Content of form validation UI (invalidText)",

14
src/TextInput/TextInput.svelte
View file

@ -111,13 +111,6 @@
{labelText} {labelText}
</label> </label>
{/if} {/if}
{#if helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
{helperText}
</div>
{/if}
<div <div
data-invalid="{invalid || undefined}" data-invalid="{invalid || undefined}"
class:bx--text-input__field-wrapper="{true}"> class:bx--text-input__field-wrapper="{true}">
@ -149,6 +142,13 @@
on:focus on:focus
on:blur /> on:blur />
</div> </div>
{#if !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
{helperText}
</div>
{/if}
{#if invalid} {#if invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div> <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
{/if} {/if}