Input box inset button (#204)

* Added inset button feature to input box

* Delete input-Box-Select-No-Label-chrome-1044x788-dpr-1.png

e2e/input-box.e2e-spec.ts

@@ -481,6 +481,44 @@ describe('Input box', () => {
       }
     );
 
+    // Inset button
+    it(
+      'should match previous input box with an inset button',
+      async (done) => {
+        await SkyHostBrowser.scrollTo('#input-box-button-inset');
+
+        expect('#input-box-button-inset').toMatchBaselineScreenshot(done, {
+          screenshotName: getScreenshotName('input-box-button-inset')
+        });
+      }
+    );
+
+    it(
+      'should match previous input box with an inset button screenshot when input is focused',
+      async (done) => {
+        await SkyHostBrowser.scrollTo('#input-box-button-inset');
+
+        await clickLabel('input-box-button-inset');
+
+        expect('#input-box-button-inset').toMatchBaselineScreenshot(done, {
+          screenshotName: getScreenshotName('input-box-button-inset-input')
+        });
+      }
+    );
+
+    it(
+      'should match previous input box with an inset button screenshot when button is focused',
+      async (done) => {
+        await SkyHostBrowser.scrollTo('#input-box-button-inset');
+
+        await clickLabel('input-box-button-inset');
+        await tabToNextElement();
+
+        expect('#input-box-button-inset').toMatchBaselineScreenshot(done, {
+          screenshotName: getScreenshotName('input-box-button-inset-button')
+        });
+      }
+    );
   }
 
   beforeEach(async () => {

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

@@ -245,3 +245,31 @@
     >
   </sky-input-box>
 </div>
+
+<div
+  class="input-button-inset"
+>
+  <sky-input-box>
+    <label
+      class="sky-control-label"
+      [for]="inputBoxButtonInset.id"
+    >
+      Input with inset button
+    </label>
+    <input
+      class="sky-form-control"
+      skyId
+      type="text"
+      #inputBoxButtonInset="skyId"
+    >
+    <div
+      class="sky-input-group-btn sky-input-box-btn-inset"
+    >
+      <button
+        aria-label="Inset button"
+        class="sky-btn sky-btn-default test-button-inset"
+        type="button"
+      ></button>
+    </div>
+  </sky-input-box>
+</div>

src/app/public/modules/input-box/input-box-populate-args.ts

@@ -13,4 +13,6 @@ export interface SkyInputBoxPopulateArgs {
 
   buttonsLeftTemplate?: TemplateRef<any>;
 
+  buttonsInsetTemplate?: TemplateRef<any>;
+
 }

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

@@ -23,9 +23,22 @@
         <ng-container
           *ngTemplateOutlet="buttonsLeftTemplate"
         ></ng-container>
-        <ng-container
-          *ngTemplateOutlet="inputTemplate"
-        ></ng-container>
+        <div
+          class="sky-input-box-input-group-inner"
+          [ngClass]="{
+            'sky-field-status-active': formControlHasFocus,
+            'sky-field-status-invalid': hasErrorsComputed
+          }"
+          (focusin)="formControlFocusIn()"
+          (focusout)="formControlFocusOut()"
+        >
+          <ng-container
+            *ngTemplateOutlet="inputTemplate"
+          ></ng-container>
+          <ng-container
+            *ngTemplateOutlet="buttonsInsetTemplate"
+          ></ng-container>
+        </div>
         <ng-container
           *ngTemplateOutlet="buttonsTemplate"
         ></ng-container>
@@ -64,11 +77,18 @@
         <div
           class="sky-form-group"
         >
+          <div
+            class="sky-input-box-form-group-inner"
+          >
+            <ng-container
+              *ngTemplateOutlet="labelTemplate"
+            ></ng-container>
+            <ng-container
+              *ngTemplateOutlet="inputTemplate"
+            ></ng-container>
+          </div>
           <ng-container
-            *ngTemplateOutlet="labelTemplate"
-          ></ng-container>
-          <ng-container
-            *ngTemplateOutlet="inputTemplate"
+            *ngTemplateOutlet="buttonsInsetTemplate"
           ></ng-container>
         </div>
       </div>
@@ -119,13 +139,24 @@
   #buttonsTemplate
 >
   <ng-content
-    select=".sky-input-group-btn:not(.sky-input-box-btn-left)"
+    select=".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)"
   ></ng-content>
   <ng-container
     *ngTemplateOutlet="hostButtonsTemplate"
   ></ng-container>
 </ng-template>
 
+<ng-template
+  #buttonsInsetTemplate
+>
+  <ng-content
+    select=".sky-input-group-btn.sky-input-box-btn-inset"
+  ></ng-content>
+  <ng-container
+    *ngTemplateOutlet="hostButtonsInsetTemplate"
+  ></ng-container>
+</ng-template>
+
 <ng-template
   #errorLabelTemplate
 >

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

@@ -16,6 +16,24 @@ sky-input-box {
     flex-wrap: wrap;
   }
 
+  .sky-input-box-input-group-inner {
+    display: flex;
+    background-color: #fff;
+    width: 100%;
+    z-index: 1;
+
+    &:not(.sky-field-status-active):not(.sky-field-status-invalid) {
+      @include sky-border(dark, top, bottom, left, right);
+    }
+  }
+
+  .sky-input-box-btn-inset {
+    .sky-btn {
+      background-color: transparent;
+      border: none;
+    }
+  }
+
   .sky-control-label {
     flex-grow: 1;
   }
@@ -31,8 +49,16 @@ sky-input-box {
     flex-shrink: 0.001;
   }
 
-  .sky-form-control {
+  .sky-form-control,
+  .sky-form-control:focus {
+    border: none;
     flex-basis: 100%;
+
+    &:focus,
+    &.ng-invalid.ng-touched {
+      border: none;
+      box-shadow: none;
+    }
   }
 }
 
@@ -94,18 +120,24 @@ sky-input-box {
       }
     }
 
+    .sky-input-box-form-group-inner {
+      display: flex;
+      flex-grow: 1;
+      flex-wrap: wrap;
+    }
+
     .sky-input-group-btn {
       .sky-btn {
         border-radius: 0;
         color: $sky-theme-modern-font-deemphasized-color;
         margin: 0;
-        padding: 0 13px;
+        padding: 0;
         position: relative;
         transition: $input-box-transitions;
+        width: 55px;
 
         .sky-icon {
           font-size: 24px;
-          width: 29px;
         }
       }
 
@@ -220,10 +252,24 @@ sky-input-box {
         }
       }
 
-      > .sky-form-control:only-child,
-      > *:only-child .sky-form-control {
-        margin-top: 0;
-        padding-top: 10px;
+      .sky-input-box-btn-inset {
+        .sky-btn {
+          background-color: transparent;
+          border-radius: $sky-theme-modern-box-border-radius-default;
+          transition-property: none;
+
+          &:not(:active):not(:focus):not(:hover) {
+            box-shadow: none;
+          }
+        }
+      }
+
+      .sky-input-box-form-group-inner {
+        > .sky-form-control:first-child,
+        > *:first-child .sky-form-control {
+          margin-top: 0;
+          padding-top: 10px;
+        }
       }
 
       /* Firefox puts an extra 5px left padding on select elements. This removes it. */