diff --git a/__tests__/components/Lookup.test.jsx b/__tests__/components/Lookup.test.jsx
index 9402dcbbcc..c505fe1bc1 100644
--- a/__tests__/components/Lookup.test.jsx
+++ b/__tests__/components/Lookup.test.jsx
@@ -114,8 +114,7 @@ describe('', () => {
removeIcon.simulate('click');
expect(spy).toHaveBeenCalled();
});
- test('"wrapTags" method properly handles data', () => {
- const spy = jest.spyOn(Lookup.prototype, 'wrapTags');
+ test('renders chips from prop value', () => {
mockData = [{ name: 'foo', id: 0 }, { name: 'bar', id: 1 }];
const wrapper = mount(
@@ -130,9 +129,10 @@ describe('', () => {
/>
);
- expect(spy).toHaveBeenCalled();
- const pill = wrapper.find('span.awx-c-tag--pill');
- expect(pill).toHaveLength(2);
+ const chip = wrapper.find('li.pf-c-chip');
+ const overflowChip = wrapper.find('.pf-c-chip.pf-m-overflow');
+ expect(chip).toHaveLength(1);
+ expect(overflowChip).toHaveLength(1);
});
test('toggleSelected successfully adds/removes row from lookupSelectedItems state', () => {
mockData = [{ name: 'foo', id: 1 }];
diff --git a/src/app.scss b/src/app.scss
index 0a1e430ded..934240376c 100644
--- a/src/app.scss
+++ b/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;
diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx
index 54fb3dbebf..8568498f8e 100644
--- a/src/components/Lookup/Lookup.jsx
+++ b/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 => (
-
- {tag.name}
-
-
- ));
- }
-
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 = (
+
+ {value.map(chip => (
+ this.toggleSelected(chip)}>
+ {chip.name}
+
+ ))}
+
+ );
+ }
+
return (
{({ i18n }) => (
@@ -166,7 +170,7 @@ class Lookup extends React.Component {
- {this.wrapTags(value)}
+ {chips}