Input box inline help (#265)

* initial work

* character-count

* padding tweaks

* build fix

* fixed merge

* final positioning for inline help widget

* visual test tweak, test fix

* style tweaks

* updated selector to use sky-control-help

Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me>

e2e/input-box.e2e-spec.ts

@@ -110,6 +110,23 @@ describe('Input box', () => {
       });
     });
 
+    it('should match previous input box screenshot with an inline help component', async (done) => {
+      await SkyHostBrowser.scrollTo('#input-box-help-inline');
+
+      expect('#input-box-help-inline').toMatchBaselineScreenshot(done, {
+        screenshotName: getScreenshotName('input-box-help-inline')
+      });
+    });
+
+    it(`should match previous input box screenshot with an inline help component
+        along side a character counter and required indicator`, async (done) => {
+      await SkyHostBrowser.scrollTo('#input-box-help-inline-required-with-character-counter');
+
+      expect('#input-box-help-inline-required-with-character-counter').toMatchBaselineScreenshot(done, {
+        screenshotName: getScreenshotName('input-box-help-inline-required-with-character-counter')
+      });
+    });
+
     it('should match previous textarea input box screenshot when focused', async (done) => {
       await SkyHostBrowser.scrollTo('#input-box-textarea');
 

package.json

@@ -37,13 +37,13 @@
     "@angular/platform-browser": "9.1.13",
     "@angular/platform-browser-dynamic": "9.1.13",
     "@angular/router": "9.1.13",
-    "@blackbaud/auth-client": "2.46.0",
+    "@blackbaud/auth-client": "2.48.0",
     "@blackbaud/skyux-lib-clipboard": "4.0.0",
     "@blackbaud/skyux-lib-code-block": "4.0.2",
     "@blackbaud/skyux-lib-media": "4.0.0",
     "@blackbaud/skyux-lib-restricted-view": "4.2.1",
     "@blackbaud/skyux-lib-stache": "4.2.2",
-    "@skyux-sdk/builder": "4.8.2",
+    "@skyux-sdk/builder": "4.9.0",
     "@skyux-sdk/builder-plugin-skyux": "4.1.4",
     "@skyux-sdk/e2e": "4.0.2",
     "@skyux-sdk/testing": "4.2.3",
@@ -53,18 +53,18 @@
     "@skyux/core": "4.5.1",
     "@skyux/datetime": "4.11.1",
     "@skyux/docs-tools": "4.9.0",
-    "@skyux/forms": "4.17.1",
+    "@skyux/forms": "4.18.0",
     "@skyux/http": "4.2.0",
-    "@skyux/i18n": "4.1.0",
-    "@skyux/indicators": "4.9.2",
+    "@skyux/i18n": "4.2.1",
+    "@skyux/indicators": "4.10.0",
     "@skyux/inline-form": "4.1.1",
     "@skyux/layout": "4.6.2",
     "@skyux/lists": "4.7.2",
-    "@skyux/lookup": "4.13.1",
+    "@skyux/lookup": "4.14.1",
     "@skyux/modals": "4.5.3",
     "@skyux/omnibar-interop": "4.0.1",
     "@skyux/popovers": "4.5.2",
-    "@skyux/router": "4.1.0",
+    "@skyux/router": "4.2.1",
     "@skyux/tabs": "4.6.6",
     "@skyux/theme": "4.16.3",
     "codelyzer": "5.2.2",

src/app/app-extras.module.ts

@@ -21,6 +21,7 @@ import {
 } from '@skyux/http';
 
 import {
+  SkyHelpInlineModule,
   SkyIconModule,
   SkyStatusIndicatorModule
 } from '@skyux/indicators';
@@ -53,6 +54,7 @@ import {
     SkyDocsToolsModule,
     SkyFileAttachmentsModule,
     SkyFluidGridModule,
+    SkyHelpInlineModule,
     SkyIconModule,
     SkyIdModule,
     SkyInputBoxModule,

src/app/public/modules/input-box/fixtures/input-box.component.fixture.html

@@ -15,7 +15,34 @@
       skyId
       [disabled]="basicDisabled"
       #basicInput="skyId"
-    >f
+    >
+  </sky-input-box>
+</div>
+
+<div
+  class="input-inline-help"
+>
+  <sky-input-box>
+    <label
+      class="sky-control-label"
+      [for]="inlineHelp.id"
+    >
+      Basic input with inline help
+    </label>
+    <div
+      class="sky-control-help"
+    >
+      <button
+        type="button"
+      >
+        CUSTOM HELP WIDGET
+      </button>
+    </div>
+    <input
+      class="sky-form-control"
+      skyId
+      #inlineHelp="skyId"
+    >
   </sky-input-box>
 </div>
 

src/app/public/modules/input-box/input-box-adapter.service.ts

@@ -16,4 +16,21 @@ import {
     }
   }
 
+  /**
+   * Returns the inline help element.
+   */
+  public getInlineHelpElement(elRef: ElementRef): HTMLElement {
+    return elRef.nativeElement.querySelector('.sky-control-help');
+  }
+
+  /**
+   * Returns true if the provided element contains the focused element.
+   */
+  public isFocusInElement(el: HTMLElement): boolean {
+    if (el) {
+      return el === document.activeElement || el.contains(document.activeElement);
+    }
+    return false;
+  }
+
  }

src/app/public/modules/input-box/input-box.component.html

@@ -7,9 +7,19 @@
     <div
       class="sky-form-group"
     >
-      <ng-container
-        *ngTemplateOutlet="labelTemplate"
-      ></ng-container>
+      <div
+        class="sky-input-box-label-wrapper"
+      >
+        <ng-container
+          *ngTemplateOutlet="labelTemplate"
+        ></ng-container>
+        <ng-container
+          *ngTemplateOutlet="inlineHelpTemplate"
+        ></ng-container>
+        <ng-container
+          *ngTemplateOutlet="characterCountTemplate"
+        ></ng-container>
+      </div>
       <div
         class="sky-input-group"
       >
@@ -72,9 +82,19 @@
           <div
             class="sky-input-box-form-group-inner"
           >
-            <ng-container
-              *ngTemplateOutlet="labelTemplate"
-            ></ng-container>
+            <div
+              class="sky-input-box-label-wrapper"
+            >
+              <ng-container
+                *ngTemplateOutlet="labelTemplate"
+              ></ng-container>
+              <ng-container
+                *ngTemplateOutlet="inlineHelpTemplate"
+              ></ng-container>
+              <ng-container
+                *ngTemplateOutlet="characterCountTemplate"
+              ></ng-container>
+            </div>
             <ng-container
               *ngTemplateOutlet="inputTemplate"
             ></ng-container>
@@ -102,6 +122,19 @@
   <ng-content
     select=".sky-control-label"
   ></ng-content>
+</ng-template>
+
+<ng-template
+  #inlineHelpTemplate
+>
+  <ng-content
+    select=".sky-control-help"
+  ></ng-content>
+</ng-template>
+
+<ng-template
+  #characterCountTemplate
+>
   <ng-content
     select="sky-character-counter-indicator"
   ></ng-content>

src/app/public/modules/input-box/input-box.component.scss

@@ -15,6 +15,15 @@ sky-input-box {
   .sky-form-group {
     display: flex;
     flex-wrap: wrap;
+
+    .sky-control-help {
+      margin: 0 0 0 4px;
+    }
+
+    .sky-input-box-label-wrapper {
+      display: flex;
+      width: 100%;
+    }
   }
 
   .sky-input-box-input-group-inner {
@@ -56,14 +65,11 @@ sky-input-box {
     }
   }
 
-  .sky-control-label {
-    flex-grow: 1;
-  }
-
   sky-character-counter-indicator {
     flex-grow: 1;
     text-align: right;
     margin-bottom: $sky-margin-half;
+    margin-left: auto;
   }
 
   .sky-control-label + sky-character-counter-indicator {
@@ -213,24 +219,52 @@ sky-input-box {
       margin-bottom: 0;
       padding: 0;
 
-      .sky-control-label,
-      sky-character-counter-indicator {
-        margin-bottom: 0;
-        padding: 6px 15px 1px 15px;
-        position: relative;
-        /*
-          The label should be above input elements so clicking on it will focus on the
-          input element. It is important the user be able to click on the label rather
-          than the input element's top padding, because clicking the label will place
-          the cursor where the user last left it, while clicking the input's padding
-          always places the cursor at the beginning of the text.
-        */
-        z-index: 2;
-      }
+      .sky-input-box-label-wrapper {
+        display: flex;
+        padding: $sky-theme-modern-padding-h-md;
+        width: 100%;
+
+        .sky-control-label,
+        .sky-control-help,
+        sky-character-counter-indicator {
+          margin-bottom: 0;
+          position: relative;
+          /*
+            The label elements should be above input elements so clicking on it will focus on the
+            input element. It is important the user be able to click on the label rather
+            than the input element's top padding, because clicking the label will place
+            the cursor where the user last left it, while clicking the input's padding
+            always places the cursor at the beginning of the text.
+          */
+          z-index: 2;
+        }
+
+        .sky-control-label {
+          padding: 6px 0 1px 0;
+        }
 
-      .sky-control-label,
-      .sky-character-count-label {
-        font-size: 13px;
+        .sky-control-label,
+        .sky-character-count-label {
+          font-size: 13px;
+        }
+
+        .sky-control-help {
+          margin: 0;
+
+          .sky-help-inline {
+            font-size: 16px;
+            padding: 3px $sky-theme-modern-margin-inline-sm 0;
+          }
+
+          &:last-child .sky-help-inline {
+            padding: 3px 0 0 $sky-theme-modern-margin-inline-sm;
+          }
+        }
+
+        sky-character-counter-indicator {
+          margin-left: auto;
+          padding: 3px 0 0;
+        }
       }
 
       .sky-form-control {
@@ -293,12 +327,10 @@ sky-input-box {
         }
       }
 
-      .sky-input-box-form-group-inner {
-        > .sky-form-control:first-child,
-        > *:first-child .sky-form-control {
-          margin-top: 0;
-          padding-top: 10px;
-        }
+      .sky-input-box-label-wrapper:empty + .sky-form-control,
+      .sky-input-box-label-wrapper:empty + *:first-child .sky-form-control {
+        margin-top: 0;
+        padding-top: $sky-theme-modern-space-sm;
       }
 
       /* Firefox puts an extra 5px left padding on select elements. This removes it. */