Merge pull request #277 from josefaidt/276-textinput-inline-variant

feat(text-input): add inline option for TextInput

src/TextInput/TextInput.stories.js

@@ -29,6 +29,7 @@ export const Default = () => ({
       'This will overwrite your current settings'
     ),
     placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
+    inline: boolean('Inline variant (inline)', false),
     id: text("TextInput id", "text-input-id"),
     name: text("TextInput name", "text-input-name"),
   },

src/TextInput/TextInput.svelte

@@ -101,6 +101,12 @@
    */
   export let required = false;
 
+  /**
+   * Set to `true` to use inline version
+   * @type {boolean} [inline=false]
+   */
+  export let inline = false;
+
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
 
@@ -111,20 +117,49 @@
 <div
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
+  class:bx--text-input-wrapper--inline="{inline}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave>
+  {#if inline}
+    <div class="bx--text-input__label-helper-wrapper">
       {#if labelText}
         <label
           for="{id}"
           class:bx--label="{true}"
           class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}">
+          class:bx--label--disabled="{disabled}"
+          class:bx--label--inline="{inline}"
+          class="{inline && !!size && `bx--label--inline--${size}`}">
           {labelText}
         </label>
       {/if}
+      {#if helperText}
+        <div
+          class:bx--form__helper-text="{true}"
+          class:bx--form__helper-text--disabled="{disabled}"
+          class:bx--form__helper-text--inline="{inline}">
+          {helperText}
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if !inline && labelText}
+    <label
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+      class:bx--label--disabled="{disabled}"
+      class:bx--label--inline="{inline}"
+      class="{inline && !!size && `bx--label--inline--${size}`}">
+      {labelText}
+    </label>
+  {/if}
+  <div
+    class:bx--text-input__field-outer-wrapper="{true}"
+    class:bx--text-input__field-outer-wrapper--inline="{inline}">
     <div
       data-invalid="{invalid || undefined}"
       data-warn="{warn || undefined}"
@@ -164,17 +199,21 @@
         on:focus
         on:blur />
     </div>
-  {#if !invalid && !warn && helperText}
+    {#if !invalid && !warn && !inline && helperText}
       <div
         class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}">
+        class:bx--form__helper-text--disabled="{disabled}"
+        class:bx--form__helper-text--inline="{inline}">
         {helperText}
       </div>
     {/if}
     {#if invalid}
-    <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
+      <div class:bx--form-requirement="{true}" id="{errorId}">
+        {invalidText}
+      </div>
     {/if}
     {#if !invalid && warn}
       <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
     {/if}
   </div>
+</div>