Merge master into 5.0.0-next (#285)

* 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> * Build #skyux-forms-push-929062241-56873: Added new baseline screenshots. [ci skip] * Update changelog/package.json for 4.19.0 release (#270) Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me> * Fix single file attachment to show full file name in title attribute (#271) * Update changelog/package.json for 4.19.1 release (#272) * Added left inset icon for input-box; fix padding bug with country field (#273) * Added left inset icon for input-box * visual tweaks * unit tests * added scss variables * fix country field spacing Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me> * Build #skyux-forms-push-990175149-08428: Added new baseline screenshots. [ci skip] * 4.20.0 release (#274) * 4.20.0 release * package lock * Update CHANGELOG.md Co-authored-by: Paula Hodgkins <77297281+blackbaud-paulah@users.noreply.github.com> Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me> Co-authored-by: Paula Hodgkins <77297281+blackbaud-paulah@users.noreply.github.com> Co-authored-by: John Lyons <John.Lyons@blackbaud.com> * Fix docs for checkbox (#276) * Fix async disable selection box (#280) * all changes associated to trying to fix the selection box disable bug... WIP for Alex's review * complete disable selection-box unit test. fix broken radio disable test. * remove unnecesary local experimentation leftovers * typo * fixing things according to Alex's comments * remove editor ruler and word wrap * fix template style guide violations * add disable/enable button to /visual selection-box component * correct typo and a style guide violation * missed style guide violation * update changelog. skyux upgrade. (#282) * update changelog. skyux upgrade. * Update CHANGELOG.md Co-authored-by: John Lyons <John.Lyons@blackbaud.com> * Update CHANGELOG.md Co-authored-by: John Lyons <John.Lyons@blackbaud.com> Co-authored-by: John Lyons <John.Lyons@blackbaud.com> * Fix overlapping input box value and label for textareas in modern theme (#279) * Fix overlapping input box value and label for textareas in modern theme * reverted accidental comments * removed baselines to allow for tiny shift in padding * fixed visual test * fix e2e test * e2e fix Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me> Co-authored-by: Paul Crowder <paul.crowder@blackbaud.com> * Build #skyux-forms-push-1049895399-36432: Added new baseline screenshots. [ci skip] * Changelog update; redo 4.20.1 release (#283) * changelog update * Update CHANGELOG.md Co-authored-by: John Lyons <John.Lyons@blackbaud.com> * Update CHANGELOG.md Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me> Co-authored-by: John Lyons <John.Lyons@blackbaud.com> * Removed accidental disabled e2e tests for input box (#284) Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me> Co-authored-by: Alex <alex.kingman@blackbaud.com> Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me> Co-authored-by: Blackbaud Sky Build User <sky-build-user@blackbaud.com> Co-authored-by: Steve Brush <steve.brush@blackbaud.com> Co-authored-by: Paula Hodgkins <77297281+blackbaud-paulah@users.noreply.github.com> Co-authored-by: John Lyons <John.Lyons@blackbaud.com> Co-authored-by: Braden Bisping <63625452+bradenbiz@users.noreply.github.com>
blackbaud · Jul 29, 2021 · 0cee055 · 0cee055
1 parent 62de390
commit 0cee055
Show file tree

Hide file tree

Showing 29 changed files with 543 additions and 307 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,11 +1,9 @@
 // Place your settings in this file to overwrite default and user settings.
 {
     // Columns at which to show vertical rulers
-    "editor.rulers": [100],
+    "editor.rulers": [],
 
     // Controls after how many characters the editor will wrap to the next line. Setting this to 0 turns on viewport width wrapping (word wrapping). Setting this to -1 forces the editor to never wrap.
-    "editor.wordWrap": "wordWrapColumn",
-    "editor.wordWrapColumn": 100,
 
     "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 4.20.1 (2021-07-21)
+
+- Fixed the selection box component to properly style selection boxes that are disabled after initialization. [#280](https://github.com/blackbaud/skyux-forms/pull/280)
+- Fixed the input box component to prevent overlap between the label and the `textarea` element. [#279](https://github.com/blackbaud/skyux-forms/pull/279)
+
 # 5.0.0-beta.0 (2021-07-07)
 
 - Initial beta release.

diff --git a/e2e/input-box.e2e-spec.ts b/e2e/input-box.e2e-spec.ts
@@ -11,6 +11,9 @@ import {
   SkyVisualThemeSelector
 } from '@skyux-sdk/e2e';
 
+// tslint:disable-next-line: max-line-length
+const LONG_STRING = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis massa id justo sagittis auctor quis ac orci. Donec scelerisque varius mi, non dignissim est rhoncus eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam at quam erat. Integer at dignissim massa. Pellentesque dictum lacinia malesuada. Quisque quis aliquet enim. Duis suscipit velit interdum libero venenatis, eget fringilla erat faucibus. Duis tincidunt ipsum arcu, ac egestas erat pharetra volutpat. Sed quam tortor, ultrices ac rhoncus non, tincidunt at mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis massa id justo sagittis auctor quis ac orci. Donec scelerisque varius mi, non dignissim est rhoncus eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam at quam erat. Integer at dignissim massa. Pellentesque dictum lacinia malesuada. Quisque quis aliquet enim. Duis suscipit velit interdum libero venenatis, eget fringilla erat faucibus. Duis tincidunt ipsum arcu, ac egestas erat pharetra volutpat. Sed quam tortor, ultrices ac rhoncus non, tincidunt at mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.`;
+
 describe('Input box', () => {
   let currentTheme: string;
   let currentThemeMode: string;
@@ -45,6 +48,15 @@ describe('Input box', () => {
     await SkyHostBrowser.moveCursorOffScreen();
   }
 
+  async function sendKeysToInput(wrapperId: string, value: string): Promise<void> {
+    const input = await element(
+      by.css(`#${wrapperId} input, #${wrapperId} textarea`)
+    );
+
+    await input.clear();
+    await input.sendKeys(value);
+  }
+
   async function hoverElement(selector: string): Promise<void> {
     await browser.actions().mouseMove(element(by.css(selector))).perform();
   }
@@ -138,6 +150,18 @@ describe('Input box', () => {
 
     });
 
+    it('should match previous textarea input box screenshot when text overflows into label', async (done) => {
+      await SkyHostBrowser.scrollTo('#input-box-textarea');
+
+      await clickLabel('input-box-textarea');
+      await sendKeysToInput('input-box-textarea', LONG_STRING);
+
+      expect('#input-box-textarea').toMatchBaselineScreenshot(done, {
+        screenshotName: getScreenshotName('input-box-textarea-overflow')
+      });
+
+    });
+
     it(
       'should match previous input box with a button screenshot when input is focused',
       async (done) => {
@@ -598,11 +622,11 @@ describe('Input box', () => {
     );
 
     it(
-      'should match previous input box with a left inset button screenshot when input is focused',
+      'should match previous input box with a left inset icon screenshot when input is focused',
       async (done) => {
         await SkyHostBrowser.scrollTo('#input-box-icon-inset-left');
 
-        await clickLabel('input-box-button-inset');
+        await clickLabel('input-box-icon-inset-left');
 
         expect('#input-box-icon-inset-left').toMatchBaselineScreenshot(done, {
           screenshotName: getScreenshotName('input-box-icon-inset-left-focused')