chore(combobox): move helper text below input

This commit is contained in:
josefaidt 2020-09-17 14:54:56 -05:00
commit 05bc19d96c
2 changed files with 8 additions and 7 deletions

View file

@ -15,6 +15,7 @@ export const Default = () => ({
size: select("Field size (size)", sizes, ""), size: select("Field size (size)", sizes, ""),
placeholder: text("Placeholder text (placeholder)", "Filter..."), placeholder: text("Placeholder text (placeholder)", "Filter..."),
titleText: text("Title (titleText)", "Combobox title"), titleText: text("Title (titleText)", "Combobox title"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
light: boolean("Light (light)", false), light: boolean("Light (light)", false),
disabled: boolean("Disabled (disabled)", false), disabled: boolean("Disabled (disabled)", false),
invalid: boolean("Invalid (invalid)", false), invalid: boolean("Invalid (invalid)", false),

View file

@ -187,13 +187,6 @@
{titleText} {titleText}
</label> </label>
{/if} {/if}
{#if helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
{helperText}
</div>
{/if}
<ListBox <ListBox
class="bx--combo-box" class="bx--combo-box"
id="{comboId}" id="{comboId}"
@ -304,4 +297,11 @@
</ListBoxMenu> </ListBoxMenu>
{/if} {/if}
</ListBox> </ListBox>
{#if !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
{helperText}
</div>
{/if}
</div> </div>