Add AssistedInput component.

ui_framework/components/_mixins.scss

@@ -109,7 +109,7 @@
  */
 @mixin formControlBase {
   appearance: none;
-  padding: 3px 12px 4px;
+  padding: $formControlPadding;
   font-size: $globalFontSize;
   font-weight: 400;
   line-height: $globalLineHeight;

ui_framework/components/_variables.scss

@@ -63,3 +63,7 @@ $toolBarHeight: 50px;
 $toolBarPadding: 10px;
 $toolBarSectionSpacing: 50px;
 $toolBarItsemSpacing: 10px;
+
+// Form
+$formControlPaddingSides: 12px;
+$formControlPadding: 3px $formControlPaddingSides 4px;

ui_framework/components/form/_assisted_input.scss

@@ -0,0 +1,17 @@
+/**
+ * 1. Set inline-block so this wrapper shrinks to fit the input.
+ */
+.kuiAssistedInput {
+  display: inline-block; /* 1 */
+  position: relative;
+}
+
+  /**
+   * 1. Vertically center the assistance, regardless of its height.
+   */
+  .kuiAssistedInput__assistance {
+    position: absolute;
+    right: $formControlPaddingSides;
+    top: 50%; /* 1 */
+    transform: translateY(-50%); /* 1 */
+  }

ui_framework/components/form/_index.scss

@@ -1,3 +1,4 @@
+@import "assisted_input";
 @import "check_box";
 @import "search_input";
 @import "select";

ui_framework/dist/ui_framework.css

@@ -629,6 +629,26 @@ body {
   line-height: 1.5;
   color: #9fa3a7; }
 
+/**
+ * 1. Set inline-block so this wrapper shrinks to fit the input.
+ */
+.kuiAssistedInput {
+  display: inline-block;
+  /* 1 */
+  position: relative; }
+
+/**
+   * 1. Vertically center the assistance, regardless of its height.
+   */
+.kuiAssistedInput__assistance {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  /* 1 */
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  /* 1 */ }
+
 /**
  * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
  *    ugly default appearance which we can't customize, so our best option is to give Firefox

ui_framework/doc_site/src/views/form/assisted_input.html

@@ -0,0 +1,14 @@
+<div class="kuiAssistedInput">
+  <input
+    style="width: 300px; padding-right: 5.5em"
+    type="text"
+    class="kuiTextInput"
+    placeholder="Enter API command"
+  >
+
+  <div class="kuiAssistedInput__assistance">
+    <p class="kuiText">
+      <a class="kuiLink" href="#">API docs</a>
+    </p>
+  </div>
+</div>

ui_framework/doc_site/src/views/form/form_example.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {
+  GuideCode,
   GuideDemo,
   GuidePage,
   GuideSection,
@@ -9,6 +10,7 @@ import {
 } from '../../components';
 
 const textInputHtml = require('./text_input.html');
+const assistedInputHtml = require('./assisted_input.html');
 const searchInputHtml = require('./search_input.html');
 const staticInputHtml = require('./static_input.html');
 const textAreaHtml = require('./text_area.html');
@@ -35,6 +37,30 @@ export default props => (
       />
     </GuideSection>
 
+    <GuideSection
+      title="AssistedInput"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: assistedInputHtml,
+      }]}
+    >
+      <GuideText>
+        <strong>Note:</strong> You have to specify right-side padding using a custom class or
+        inline style to keep the input text from overlapping with the assistance content.
+        Use <GuideCode>em</GuideCode> units for this padding so that it scales appropriately if the
+        user changes their root font-size.
+      </GuideText>
+
+      <GuideDemo
+        html={assistedInputHtml}
+      />
+
+      <GuideDemo
+        html={assistedInputHtml}
+        isDarkTheme={true}
+      />
+    </GuideSection>
+
     <GuideSection
       title="SearchInput"
       source={[{