4989 - search x header alignment fixes

docs/CHANGELOG.md

@@ -43,6 +43,7 @@
 - `[Radar Chart]` Added support for double click. ([#3229](https://github.com/infor-design/enterprise/issues/3229))
 - `[Rating]` Fixed color of unclick rating star. ([#4853](https://github.com/infor-design/enterprise/issues/4853))
 - `[Popupmenu]` Fixed a lifecycle issue on menus that are shared between trigger elements, where these menus were incorrectly being torn down. ([NG#987](https://github.com/infor-design/enterprise-ng/issues/987))
+- `[Searchfield]` Fixed an issue where certain variants/scenarios had the clear button vertically below center ([#4989](https://github.com/infor-design/enterprise/issues/4989))
 - `[Switch]` Adjust styles to be more discernable between checked and checked+disabled ([#4341](https://github.com/infor-design/enterprise/issues/4341))
 - `[Tabs (Horizontal/Header)]` Fixed bug with the placement of the focus state in RTL mode, and other minor visual improvements. ([#4877](https://github.com/infor-design/enterprise/issues/4877))
 - `[Tabs Module]` Fixed a bug where clear button was missing when clearable setting is activated in tabs module searchfield. ([#4898](https://github.com/infor-design/enterprise/issues/4898))

docs/TESTING.md

@@ -2,6 +2,16 @@
 
 The IDS components are backed by both functional and end-to-end (e2e) test suites.  When contributing to the IDS enterprise project, before we can accept pull requests we expect that new tests will be provided to prove that new functionality works, and that all existing tests pass.
 
+- [Test Stack](#test-stack)
+- [Writing Tests](#writing-tests)
+- [Running functional tests](#running-functional-tests)
+- [Running e2e tests silently for continuous integration](#running-e2e-tests-silently-for-continuous-integration)
+- [Running E2E Tests Locally](#running-e2e-tests-locally)
+- [Debugging Functional Tests](#debugging-functional-tests)
+- [Working with Visual Regression Tests](#working-with-visual-regression-tests)
+- [Making Accessibility e2e Tests with Axe](#making-accessibility-e2e-tests-with-axe)
+- [Testing Resources](#testing-resources)
+
 ## Test Stack
 
 - [Karma](https://karma-runner.github.io/2.0/index.html) test runner for all tests.
@@ -168,9 +178,14 @@ Following the process below will safely create baseline images the CI can use du
 
 We created a docker image to help manage baselines. This is located in the [Infor Design System Docker Repos](https://hub.docker.com/r/infords/travis/tags).
 
-1. Download the docker image with `docker run --name travis-debug -dit infords/travis:v2`.
-1. Once downloaded, login to the VM with `docker exec -it travis-debug bash -l`.
-1. If you had a previous VM with travis-debug you may need to rename it. Do a rename and then login again to the VM:
+1. Download the git show-branchdocker image with `docker run --name travis-debug -dit infords/travis:v2`.
+1. Once the image has been downloaded, you can login to the VM/Docker container by running bash through `exec` e.g.
+
+```sh
+docker exec -it travis-debug bash -l
+```
+
+If you had a previous VM with travis-debug you may need to rename it. Do a rename and then login again to the VM:
 
   ```sh
   docker rename travis-debug travis-debug-old
@@ -190,8 +205,8 @@ In order to do this we clean the folders, update chrome and do a fresh `npm i`.
   rm -rf node_modules
   wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
   sudo dpkg -i google-chrome*.deb
-  npm i
   rm google-chrome-stable_current_amd64.deb
+  npm i
   ```
 
 This is good step to follow if you see an error similar to this one when running the test suite:
@@ -238,7 +253,7 @@ We used this set of instructions we needed to make the travis VM originally.
 1. Update/Install Node.js
 
     ```sh
-    nvm install 10
+    nvm install 14
     nvm alias default {insert exact version}
     nvm use default
     ```

src/components/applicationmenu/_applicationmenu-new.scss

@@ -12,6 +12,10 @@
     margin: 0 $ids-number-spacing-base;
     width: calc(100% - calc(#{$ids-number-spacing-base} * 2));
 
+    > svg.icon:not(.close) {
+      top: 13px;
+    }
+
     .searchfield {
       height: 40px;
 
@@ -43,6 +47,15 @@
     &:first-child {
       margin-top: 10px;
     }
+
+    button.close {
+      height: 24px;
+      right: 9px;
+      top: 8px;
+      & > svg.close.icon {
+        top: 0px;
+      }
+    }
   }
 
   .application-menu-header,

src/components/applicationmenu/_applicationmenu.scss

@@ -133,13 +133,22 @@ body.is-open-touch {
     }
 
     button.close {
+      align-items: center;
+      justify-content: center;
+      top: 5px;
+
+
       &:focus:not(.hide-focus) {
         box-shadow: 0 0 0 1px $body-color-primary-background, 0 0 0 2px transparent, 0 0 4px 3px rgba(33, 34, 36, 0.3);
 
         .icon {
           color: $ids-color-palette-white;
         }
       }
+
+      &:not(.is-empty) {
+        display: flex;
+      }
     }
 
     &.has-go-button {

src/components/button/_button.scss

@@ -2,7 +2,7 @@
 //================================================== //
 
 // Also see:
-// sass/controls/_icons.scss
+// sass/_icons.scss
 
 button {
   background-color: transparent;

src/components/searchfield/_searchfield-new.scss

@@ -9,15 +9,17 @@
 
 .searchfield-wrapper {
   > .icon {
-    top: 12px;
-
     &.close {
-      height: 12px;
-      right: 9px;
-      top: 13px;
+      padding: 1px 3px;
+      top: 50%;
+      transform: translateY(-50%);
     }
   }
 
+  &.non-collapsible > .icon:not(.close):not(.icon-error) {
+    top: 12px;
+  }
+
   .go-button {
     height: 100%;
   }
@@ -50,8 +52,9 @@
       padding-top: 6px;
     }
 
-    .icon.close {
-      top: 12px;
+    > .icon,
+    > .icon:not(.close) {
+      top: 10px;
     }
   }
 
@@ -61,15 +64,23 @@
     }
   }
 
-  &.has-text .icon.close {
-    top: 11px;
+  .btn-icon.close {
+    overflow: visible;
+    &:not(.is-empty) {
+      top: 6px;
+    }
+
+    & > svg.close.icon {
+      top: calc( 50% - 6px );
+      transform: translateY(-50%);
+    }
   }
 }
 
 .toolbar-searchfield-wrapper {
   &.searchfield-wrapper {
     &.non-collapsible {
-      svg.icon {
+      svg.icon:not(.close) {
         top: 11px;
       }
     }

src/components/searchfield/_searchfield.scss

@@ -41,8 +41,7 @@
 
     &.close {
       outline: none;
-      right: 5px;
-      top: 10px;
+      right: 8px;
     }
 
     &.icon-error {
@@ -95,6 +94,10 @@
     white-space: nowrap;
     width: 100%;
 
+    > button.close {
+      top: 5px;
+    }
+
     > .searchfield {
       background-color: $searchfield-context-bg;
       border-bottom: 1px solid $searchfield-context-border-color;
@@ -125,7 +128,8 @@
       }
 
       &.close {
-        right: 6px;
+        padding: 1px 3px;
+        right: 8px;
       }
     }
 
@@ -319,17 +323,21 @@
       }
     }
 
-    button.close {
-      right: 35px;
-      top: 4px;
+    button.close:not(.is-empty) {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      position: absolute;
+      top: 0;
 
       @media (min-width: $breakpoint-phone-to-tablet) {
         right: 45px;
       }
 
       svg.close {
         left: 0;
-        top: 0 !important;
+        top: 8px !important;
       }
     }
   }

test/components/datagrid/datagrid.e2e-spec.js

@@ -1,10 +1,39 @@
+/* eslint-disable compat/compat */
+const { browser, element } = require('protractor');
+
 const { browserStackErrorReporter } = requireHelper('browserstack-error-reporter');
 const utils = requireHelper('e2e-utils');
 const config = requireHelper('e2e-config');
+const until = protractor.ExpectedConditions;
 requireHelper('rejection');
 
 jasmine.getEnv().addReporter(browserStackErrorReporter);
 
+/**
+ * general CSS selectors used throughout these tests
+ */
+const S = {
+  gridRow: ({ row } = {}) => {
+    const rSelector = row ? `:nth-child(${row})` : '';
+    return `#datagrid .datagrid-wrapper tbody tr${rSelector}`;
+  },
+  gridColumn: ({ row, column } = {}) => {
+    const cSelector = column ? `:nth-child(${column})` : '';
+    const rSelector = row ? `:nth-child(${row})` : '';
+    return `#datagrid .datagrid-wrapper tbody tr${rSelector} td${cSelector}`;
+  },
+  gridRowCheckbox: ({ row, column = 1, checked }) => {
+    const checkedState = `${!checked ? ':not(' : ''}.is-checked${!checked ? ')' : ''}`;
+
+    return (
+      `#datagrid .datagrid-wrapper tbody tr:nth-child(${row}) ` +
+      `td:nth-child(${column}) ` +
+      `[role="checkbox"]${checkedState}`
+    );
+  },
+  removeRowButton: () => '#remove-btn'
+};
+
 const openPersonalizationDialog = async () => {
   await element.all(by.css('.btn-actions')).first().click();
   await browser.driver
@@ -1260,9 +1289,9 @@ describe('Datagrid multiselect tests', () => {
   beforeEach(async () => {
     await utils.setPage('/components/datagrid/example-multiselect.html?theme=classic&layout=nofrills');
 
-    const datagridEl = await element(by.css('#datagrid tbody tr:nth-child(1)'));
+    const datagridEl = await element(by.css('#datagrid tbody tr:nth-child(3)'));
     await browser.driver
-      .wait(protractor.ExpectedConditions.presenceOf(datagridEl), config.waitsFor);
+      .wait(protractor.ExpectedConditions.visibilityOf(datagridEl), config.waitsFor);
   });
 
   it('Should not have errors', async () => {
@@ -1289,14 +1318,27 @@ describe('Datagrid multiselect tests', () => {
   });
 
   it('Should handle removing selected rows ', async () => {
-    expect(await element.all(by.css('.datagrid-row')).count()).toEqual(7);
+    await browser.wait(until.presenceOf($(S.gridRow())));
+    const prevRowCount = await $$(S.gridRow()).count();
 
-    await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(1)')).click();
-    await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).click();
+    expect(prevRowCount).toEqual(7);
 
-    await element(by.id('remove-btn')).click();
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: false }))));
+    await $(S.gridColumn({ row: 1, column: 1 })).click();
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: true }))));
 
-    expect(await element.all(by.css('.datagrid-row')).count()).toEqual(5);
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: false }))));
+    await $(S.gridColumn({ row: 2, column: 1 })).click();
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: true }))));
+
+    await $(S.removeRowButton()).click();
+
+    await Promise.all([
+      browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount - 1 })))),
+      browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount }))))
+    ]);
+
+    expect(await $$(S.gridRow()).count()).toEqual(prevRowCount - 2);
   });
 
   it('Should have aria-checked and not aria-selected', async () => {
@@ -1345,23 +1387,47 @@ describe('Datagrid multiselect tests', () => {
     expect(await element.all(by.css('.modal-content input[type="checkbox"]')).count()).toEqual(5);
   });
 
-  it('Should remove rows in order', async () => {
-    await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).click();
-    await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).click();
-    await element(by.css('#remove-btn')).click();
-
-    expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).getText()).toEqual('2342203');
-    expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).getText()).toEqual('2445204');
-  });
-
-  it('Should remove rows in reverse order', async () => {
-    await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).click();
-    await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).click();
-    await element(by.css('#remove-btn')).click();
-    await browser.driver.sleep(config.sleep);
-
-    expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(1) td:nth-child(2)')).getText()).toEqual('2342203');
-    expect(await element(by.css('#datagrid .datagrid-wrapper tbody tr:nth-child(2) td:nth-child(2)')).getText()).toEqual('2445204');
+  it('Should remove two rows after selecting them in order', async () => {
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: false }))));
+    await $(S.gridColumn({ row: 1, column: 2 })).click();
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: true }))));
+
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: false }))));
+    await $(S.gridColumn({ row: 2, checked: false })).click();
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: true }))));
+
+    const prevRowCount = await $$(S.gridRow()).count();
+    await browser.wait(until.presenceOf($(S.removeRowButton())));
+    await $(S.removeRowButton()).click();
+
+    await Promise.all([
+      browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount - 1 })))),
+      browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount }))))
+    ]);
+
+    expect(await $$(S.gridRow()).count()).toEqual(prevRowCount - 2);
+    expect(await $(S.gridColumn({ row: 1, column: 2 })).getText()).toEqual('2342203');
+    expect(await $(S.gridColumn({ row: 2, column: 2 })).getText()).toEqual('2445204');
+  });
+
+  it('Should remove two rows after selecting them in reverse order', async () => {
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: false }))));
+    await $(S.gridColumn({ row: 2, column: 2 })).click();
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 2, checked: true }))));
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: false }))));
+    await $(S.gridColumn({ row: 1, column: 2 })).click();
+    await browser.wait(until.presenceOf($(S.gridRowCheckbox({ row: 1, checked: true }))));
+    const prevRowCount = await $$(S.gridRow()).count();
+    await browser.wait(until.presenceOf($(S.removeRowButton())));
+    await $(S.removeRowButton()).click();
+    await Promise.all([
+      browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount - 1 })))),
+      browser.wait(until.stalenessOf($(S.gridRow({ row: prevRowCount }))))
+    ]);
+
+    expect(await ($$(S.gridRow()).count())).toEqual(prevRowCount - 2);
+    expect(await $(S.gridColumn({ row: 1, column: 2 })).getText()).toEqual('2342203');
+    expect(await $(S.gridColumn({ row: 2, column: 2 })).getText()).toEqual('2445204');
   });
 
   if (utils.isChrome() && utils.isCI()) {