Merge pull request #155 from marshmalien/ux-instance-groups-lookup-height

UX - Lookup static height

__tests__/components/Lookup.test.jsx

@@ -62,7 +62,7 @@ describe('<Lookup />', () => {
     ).find('Lookup');
     expect(spy).not.toHaveBeenCalled();
     expect(wrapper.state('lookupSelectedItems')).toEqual(mockSelected);
-    const searchItem = wrapper.find('.pf-c-input-group__text#search');
+    const searchItem = wrapper.find('button[aria-label="Search"]');
     searchItem.first().simulate('click');
     expect(spy).toHaveBeenCalled();
     expect(wrapper.state('lookupSelectedItems')).toEqual([{
@@ -89,7 +89,7 @@ describe('<Lookup />', () => {
       </I18nProvider>
     );
     setImmediate(() => {
-      const searchItem = wrapper.find('.pf-c-input-group__text#search');
+      const searchItem = wrapper.find('button[aria-label="Search"]');
       searchItem.first().simulate('click');
       wrapper.find('input[type="checkbox"]').simulate('change');
       expect(spy).toHaveBeenCalled();

src/app.scss

@@ -132,12 +132,6 @@
   }
 }
 
-.pf-c-input-group__text {
-  &:hover {
-    cursor: pointer;
-  }
-}
-
 //
 // pf modal overrides
 //
@@ -220,12 +214,10 @@
 // note that these should be given a consistent prefix
 // and bem style, as well as moved into component-based scss files
 //
-.awx-lookup {
-  min-height: 36px;
 
-  .pf-c-form-control {
-    --pf-c-form-control--Height: auto;
-  }
+.awx-lookup .pf-c-form-control {
+  --pf-c-form-control--Height: 90px;
+  overflow-y: auto;
 }
 
 .awx-c-list {

src/components/Lookup/Lookup.jsx

@@ -2,12 +2,14 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { SearchIcon, CubesIcon } from '@patternfly/react-icons';
 import {
-  Chip,
-  Modal,
   Button,
+  ButtonVariant,
+  Chip,
   EmptyState,
-  EmptyStateIcon,
   EmptyStateBody,
+  EmptyStateIcon,
+  InputGroup,
+  Modal,
   Title
 } from '@patternfly/react-core';
 import { I18n } from '@lingui/react';
@@ -172,16 +174,20 @@ class Lookup extends React.Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <div className="pf-c-input-group awx-lookup">
-            <Button
-              className="pf-c-input-group__text"
-              aria-label="search"
-              id={id}
-              onClick={this.handleModalToggle}
-            >
-              <SearchIcon />
-            </Button>
-            <div className="pf-c-form-control">{chips}</div>
+          <Fragment>
+            <InputGroup className="awx-lookup">
+              <Button
+                aria-label="Search"
+                id={id}
+                onClick={this.handleModalToggle}
+                variant={ButtonVariant.tertiary}
+              >
+                <SearchIcon />
+              </Button>
+              <div className="pf-c-form-control">
+                {chips}
+              </div>
+            </InputGroup>
             <Modal
               className="awx-c-modal"
               title={`Select ${lookupHeader}`}
@@ -245,7 +251,7 @@ class Lookup extends React.Component {
               )}
               { error ? <div>error</div> : '' }
             </Modal>
-          </div>
+          </Fragment>
         )}
       </I18n>
     );