Standardize chip height (#213)

* make all chips the same size

* create DetailList, Detail components; clean up Chips, ChipGroup

* delete BasicChip in favor of <Chip isReadOnly>

* create our own ChipGroup to handle overflow

__tests__/components/Chip/ChipGroup.test.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '../../enzymeHelpers';
+import { ChipGroup, Chip } from '../../../src/components/Chip';
+
+describe('<ChipGroup />', () => {
+  test('should render all chips', () => {
+    const wrapper = mountWithContexts(
+      <ChipGroup>
+        <Chip>One</Chip>
+        <Chip>Two</Chip>
+        <Chip>Three</Chip>
+        <Chip>Four</Chip>
+        <Chip>Five</Chip>
+        <Chip>Six</Chip>
+      </ChipGroup>
+    );
+    expect(wrapper.find(Chip)).toHaveLength(6);
+    expect(wrapper.find('li')).toHaveLength(6);
+  });
+
+  test('should render show more toggle', () => {
+    const wrapper = mountWithContexts(
+      <ChipGroup showOverflowAfter={5}>
+        <Chip>One</Chip>
+        <Chip>Two</Chip>
+        <Chip>Three</Chip>
+        <Chip>Four</Chip>
+        <Chip>Five</Chip>
+        <Chip>Six</Chip>
+        <Chip>Seven</Chip>
+      </ChipGroup>
+    );
+    expect(wrapper.find(Chip)).toHaveLength(6);
+    const toggle = wrapper.find(Chip).at(5);
+    expect(toggle.prop('isOverflowChip')).toBe(true);
+    expect(toggle.text()).toEqual('2 more');
+  });
+
+  test('should render show less toggle', () => {
+    const wrapper = mountWithContexts(
+      <ChipGroup showOverflowAfter={5}>
+        <Chip>One</Chip>
+        <Chip>Two</Chip>
+        <Chip>Three</Chip>
+        <Chip>Four</Chip>
+        <Chip>Five</Chip>
+        <Chip>Six</Chip>
+        <Chip>Seven</Chip>
+      </ChipGroup>
+    );
+    expect(wrapper.find(Chip)).toHaveLength(6);
+    const toggle = wrapper.find(Chip).at(5);
+    expect(toggle.prop('isOverflowChip')).toBe(true);
+    act(() => {
+      toggle.prop('onClick')();
+    });
+    wrapper.update();
+    expect(wrapper.find(Chip)).toHaveLength(8);
+    expect(wrapper.find(Chip).at(7).text()).toEqual('Show Less');
+    act(() => {
+      const toggle2 = wrapper.find(Chip).at(7);
+      expect(toggle2.prop('isOverflowChip')).toBe(true);
+      toggle2.prop('onClick')();
+    });
+    wrapper.update();
+    expect(wrapper.find(Chip)).toHaveLength(6);
+  });
+});

__tests__/components/Lookup.test.jsx

@@ -141,7 +141,7 @@ describe('<Lookup />', () => {
         sortedColumnKey="name"
       />
     ).find('Lookup');
-    const chip = wrapper.find('li.pf-c-chip');
+    const chip = wrapper.find('.pf-c-chip');
     expect(chip).toHaveLength(2);
   });
 

__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap

@@ -111,6 +111,7 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
               isDisabled={true}
               isFocus={false}
               isHover={false}
+              isInline={false}
               onClick={[Function]}
               type="button"
               variant="plain"

__tests__/components/SelectedList.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SelectedList from '../../src/components/SelectedList';
+import { ChipGroup } from '../../src/components/Chip';
 
 describe('<SelectedList />', () => {
   test('initially renders succesfully', () => {
@@ -22,7 +23,8 @@ describe('<SelectedList />', () => {
       />
     );
   });
-  test('showOverflow should set showOverflow state to true', () => {
+
+  test('showOverflow should set showOverflow on ChipGroup', () => {
     const wrapper = mount(
       <SelectedList
         label="Selected"
@@ -31,73 +33,11 @@ describe('<SelectedList />', () => {
         onRemove={() => {}}
       />
     );
-    expect(wrapper.state('showOverflow')).toBe(false);
-    wrapper.instance().showOverflow();
-    expect(wrapper.state('showOverflow')).toBe(true);
-  });
-  test('Overflow chip should be shown when more selected.length exceeds showOverflowAfter', () => {
-    const mockSelected = [
-      {
-        id: 1,
-        name: 'foo'
-      }, {
-        id: 2,
-        name: 'bar'
-      }, {
-        id: 3,
-        name: 'foobar'
-      }, {
-        id: 4,
-        name: 'baz'
-      }, {
-        id: 5,
-        name: 'foobaz'
-      }
-    ];
-    const wrapper = mount(
-      <SelectedList
-        label="Selected"
-        selected={mockSelected}
-        showOverflowAfter={3}
-        onRemove={() => {}}
-      />
-    );
-    expect(wrapper.find('Chip').length).toBe(4);
-    expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
-  });
-  test('Clicking overflow chip should show all chips', () => {
-    const mockSelected = [
-      {
-        id: 1,
-        name: 'foo'
-      }, {
-        id: 2,
-        name: 'bar'
-      }, {
-        id: 3,
-        name: 'foobar'
-      }, {
-        id: 4,
-        name: 'baz'
-      }, {
-        id: 5,
-        name: 'foobaz'
-      }
-    ];
-    const wrapper = mount(
-      <SelectedList
-        label="Selected"
-        selected={mockSelected}
-        showOverflowAfter={3}
-        onRemove={() => {}}
-      />
-    );
-    expect(wrapper.find('Chip').length).toBe(4);
-    expect(wrapper.find('[isOverflowChip=true]').length).toBe(1);
-    wrapper.find('[isOverflowChip=true] button').simulate('click');
-    expect(wrapper.find('Chip').length).toBe(5);
-    expect(wrapper.find('[isOverflowChip=true]').length).toBe(0);
+    const chipGroup = wrapper.find(ChipGroup);
+    expect(chipGroup).toHaveLength(1);
+    expect(chipGroup.prop('showOverflowAfter')).toEqual(5);
   });
+
   test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
     const onRemove = jest.fn();
     const mockSelected = [