Replace Lookup tags with pf-react Chip component

__tests__/components/Lookup.test.jsx

@@ -114,8 +114,7 @@ describe('<Lookup />', () => {
     removeIcon.simulate('click');
     expect(spy).toHaveBeenCalled();
   });
-  test('"wrapTags" method properly handles data', () => {
+  test('renders chips from prop value', () => {
-    const spy = jest.spyOn(Lookup.prototype, 'wrapTags');
     mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }];
     const wrapper = mount(
       <I18nProvider>
@@ -130,9 +129,10 @@ describe('<Lookup />', () => {
         />
       </I18nProvider>
     );
-    expect(spy).toHaveBeenCalled();
+    const chip = wrapper.find('li.pf-c-chip');
-    const pill = wrapper.find('span.awx-c-tag--pill');
+    const overflowChip = wrapper.find('.pf-c-chip.pf-m-overflow');
-    expect(pill).toHaveLength(2);
+    expect(chip).toHaveLength(1);
+    expect(overflowChip).toHaveLength(1);
   });
   test('toggleSelected successfully adds/removes row from lookupSelectedItems state', () => {
     mockData = [{ name: 'foo', id: 1 }];

src/app.scss

@@ -228,26 +228,10 @@
   }
 }
 
-.awx-c-icon--remove {
-  padding-left: 10px;
-  &:hover {
-    cursor: pointer;
-  }
-}
-
 .awx-c-list {
   border-bottom: 1px solid #d7d7d7;
 }
 
-.awx-c-tag--pill {
-  color: var(--pf-global--BackgroundColor--light-100);
-  background-color: rgb(0, 123, 186);
-  border-radius: 3px;
-  margin: 1px 2px;
-  padding: 0 10px;
-  display: inline-block;
-}
-
 .at-c-listCardBody {
   --pf-c-card__footer--PaddingX: 0;
   --pf-c-card__footer--PaddingY: 0;

src/components/Lookup/Lookup.jsx

@@ -2,6 +2,8 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { SearchIcon, CubesIcon } from '@patternfly/react-icons';
 import {
+  Chip,
+  ChipGroup,
   Modal,
   Button,
   EmptyState,
@@ -134,17 +136,6 @@ class Lookup extends React.Component {
     this.handleModalToggle();
   }
 
-  wrapTags (tags = []) {
-    return tags.map(tag => (
-      <span className="awx-c-tag--pill" key={tag.id}>
-        {tag.name}
-        <Button className="awx-c-icon--remove" id={tag.id} onClick={() => this.toggleSelected(tag)}>
-          x
-        </Button>
-      </span>
-    ));
-  }
-
   render () {
     const {
       isModalOpen,
@@ -159,6 +150,19 @@ class Lookup extends React.Component {
     } = this.state;
     const { lookupHeader = 'items', value, columns } = this.props;
 
+    let chips = null;
+    if (value) {
+      chips = (
+        <ChipGroup>
+          {value.map(chip => (
+            <Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
+              {chip.name}
+            </Chip>
+          ))}
+        </ChipGroup>
+      );
+    }
+
     return (
       <I18n>
         {({ i18n }) => (
@@ -166,7 +170,7 @@ class Lookup extends React.Component {
             <Button className="pf-c-input-group__text" aria-label="search" id="search" onClick={this.handleModalToggle}>
               <SearchIcon />
             </Button>
-            <div className="pf-c-form-control">{this.wrapTags(value)}</div>
+            <div className="pf-c-form-control">{chips}</div>
             <Modal
               className="awx-c-modal"
               title={`Select ${lookupHeader}`}