Inset button wrap fix (#211)

* Inset button wrap fix * Fixed visual test
blackbaud · Oct 1, 2020 · c1e2851 · c1e2851
1 parent 4757102
commit c1e2851
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 9 deletions.
diff --git a/e2e/input-box.e2e-spec.ts b/e2e/input-box.e2e-spec.ts
@@ -326,7 +326,7 @@ describe('Input box', () => {
     it('should match previous input box with select when disabled', async (done) => {
       await SkyHostBrowser.scrollTo('#input-box-select-disabled');
 
-      expect('#input-box-select').toMatchBaselineScreenshot(done, {
+      expect('#input-box-select-disabled').toMatchBaselineScreenshot(done, {
         screenshotName: getScreenshotName('input-box-select-disabled')
       });
     });
@@ -519,6 +519,17 @@ describe('Input box', () => {
         });
       }
     );
+
+    it(
+      'should match previous narrow input box with an inset button',
+      async (done) => {
+        await SkyHostBrowser.scrollTo('#input-box-button-inset-narrow');
+
+        expect('#input-box-button-inset-narrow').toMatchBaselineScreenshot(done, {
+          screenshotName: getScreenshotName('input-box-button-inset-narrow')
+        });
+      }
+    );
   }
 
   beforeEach(async () => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@angular/platform-browser": "9.1.12",
     "@angular/platform-browser-dynamic": "9.1.12",
     "@angular/router": "9.1.12",
-    "@blackbaud/auth-client": "2.34.0",
+    "@blackbaud/auth-client": "2.35.0",
     "@blackbaud/skyux-lib-clipboard": "4.0.0",
     "@blackbaud/skyux-lib-code-block": "4.0.1",
     "@blackbaud/skyux-lib-media": "4.0.0",
@@ -53,7 +53,7 @@
     "@skyux/core": "4.3.0",
     "@skyux/datetime": "4.5.2",
     "@skyux/docs-tools": "4.7.1",
-    "@skyux/forms": "4.13.0",
+    "@skyux/forms": "4.13.1",
     "@skyux/http": "4.0.1",
     "@skyux/i18n": "4.0.2",
     "@skyux/indicators": "4.5.0",

diff --git a/...nshots-baseline/input-Box-Select-Disabled-Modern-Dark-chrome-1044x788-dpr-1.png b/...nshots-baseline/input-Box-Select-Disabled-Modern-Dark-chrome-1044x788-dpr-1.png
diff --git a/...shots-baseline/input-Box-Select-Disabled-Modern-Light-chrome-1044x788-dpr-1.png b/...shots-baseline/input-Box-Select-Disabled-Modern-Light-chrome-1044x788-dpr-1.png
diff --git a/screenshots-baseline/input-Box-Select-Disabled-chrome-1044x788-dpr-1.png b/screenshots-baseline/input-Box-Select-Disabled-chrome-1044x788-dpr-1.png
diff --git a/src/app/public/modules/input-box/input-box.component.scss b/src/app/public/modules/input-box/input-box.component.scss
@@ -205,6 +205,7 @@ sky-input-box {
       background-color: $sky-color-white;
       @include sky-input-box-modern-border;
       color: $sky-theme-modern-font-data-label-color;
+      flex-wrap: nowrap;
       margin-bottom: 0;
       padding: 0;
 

diff --git a/src/app/visual/input-box/input-box-visual.component.html b/src/app/visual/input-box/input-box-visual.component.html
@@ -686,6 +686,43 @@
       </sky-column>
     </sky-row>
 
+    <sky-row>
+      <sky-column>
+        <div
+          id="input-box-button-inset-narrow"
+        >
+          <sky-input-box
+            class="sky-margin-stacked-lg"
+          >
+            <label
+              class="sky-control-label"
+              [for]="inputBoxButtonInsetNarrow.id"
+            >
+              Input with inset button (narrow)
+            </label>
+            <input
+              class="sky-form-control"
+              skyId
+              type="text"
+              #inputBoxButtonInsetNarrow="skyId"
+            >
+            <div
+              class="sky-input-group-btn sky-input-box-btn-inset"
+            >
+              <button
+                class="sky-btn sky-btn-default"
+                type="button"
+              >
+                <sky-icon
+                  icon="search"
+                ></sky-icon>
+              </button>
+            </div>
+          </sky-input-box>
+        </div>
+      </sky-column>
+    </sky-row>
+
   </sky-fluid-grid>
 
 </div>
diff --git a/src/app/visual/input-box/input-box-visual.component.scss b/src/app/visual/input-box/input-box-visual.component.scss
@@ -3,3 +3,7 @@
   min-height: 1px;
   min-width: 1px;
 }
+
+#input-box-button-inset-narrow {
+  width: 300px;
+}