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);
+    const chipGroup = wrapper.find(ChipGroup);
-    wrapper.instance().showOverflow();
+    expect(chipGroup).toHaveLength(1);
-    expect(wrapper.state('showOverflow')).toBe(true);
+    expect(chipGroup.prop('showOverflowAfter')).toEqual(5);
-  });
-  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);
   });
+
   test('Clicking remove on chip calls onRemove callback prop with correct params', () => {
     const onRemove = jest.fn();
     const mockSelected = [

__tests__/pages/Organizations/components/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap

@@ -29,6 +29,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
           isDisabled={false}
           isFocus={false}
           isHover={false}
+          isInline={false}
           onClick={[Function]}
           type="button"
           variant="danger"
@@ -44,6 +45,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
           isDisabled={false}
           isFocus={false}
           isHover={false}
+          isInline={false}
           onClick={[Function]}
           type="button"
           variant="secondary"
@@ -69,6 +71,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
             isDisabled={false}
             isFocus={false}
             isHover={false}
+            isInline={false}
             onClick={[Function]}
             type="button"
             variant="danger"
@@ -84,6 +87,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
             isDisabled={false}
             isFocus={false}
             isHover={false}
+            isInline={false}
             onClick={[Function]}
             type="button"
             variant="secondary"
@@ -112,85 +116,81 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                 class="pf-l-bullseye"
               >
                 <div
-                  class="pf-l-bullseye"
+                  aria-describedby="pf-modal-0"
+                  aria-label="Remove {0} Access"
+                  aria-modal="true"
+                  class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                  role="dialog"
                 >
-                  <div
+                  <button
-                    aria-describedby="pf-modal-0"
+                    aria-label="Close"
-                    aria-label="Remove {0} Access"
+                    class="pf-c-button pf-m-plain"
-                    aria-modal="true"
+                    type="button"
-                    class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
-                    role="dialog"
                   >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 352 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                        transform=""
+                      />
+                    </svg>
+                  </button>
+                  <h3
+                    class="pf-c-title pf-m-2xl"
+                  >
+                     
+                    Remove {0} Access
+                     
+                  </h3>
+                  <div
+                    class="pf-c-modal-box__body"
+                    id="pf-modal-0"
+                  >
+                    Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
+                    <br />
+                    <br />
+                    If you {0} want to remove access for this particular user, please remove them from the team.
+                    <svg
+                      aria-hidden="true"
+                      class="at-c-alertModal__icon"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                        transform=""
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="pf-c-modal-box__footer"
+                  >
+                     
                     <button
-                      aria-label="Close"
+                      aria-label="Confirm delete"
-                      class="pf-c-button pf-m-plain"
+                      class="pf-c-button pf-m-danger"
                       type="button"
                     >
-                      <svg
+                      Delete
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style="vertical-align: -0.125em;"
-                        viewBox="0 0 352 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                          transform=""
-                        />
-                      </svg>
                     </button>
-                    <h3
+                    <button
-                      class="pf-c-title pf-m-2xl"
+                      class="pf-c-button pf-m-secondary"
+                      type="button"
                     >
+                      Cancel
+                    </button>
                      
-                      Remove {0} Access
-                       
-                    </h3>
-                    <div
-                      class="pf-c-modal-box__body"
-                      id="pf-modal-0"
-                    >
-                      Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
-                      <br />
-                      <br />
-                      If you {0} want to remove access for this particular user, please remove them from the team.
-                      <svg
-                        aria-hidden="true"
-                        class="at-c-alertModal__icon"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style="vertical-align: -0.125em;"
-                        viewBox="0 0 512 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                          transform=""
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="pf-c-modal-box__footer"
-                    >
-                       
-                      <button
-                        aria-label="Confirm delete"
-                        class="pf-c-button pf-m-danger"
-                        type="button"
-                      >
-                        Delete
-                      </button>
-                      <button
-                        class="pf-c-button pf-m-secondary"
-                        type="button"
-                      >
-                        Cancel
-                      </button>
-                       
-                    </div>
                   </div>
                 </div>
               </div>
@@ -210,6 +210,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                 isDisabled={false}
                 isFocus={false}
                 isHover={false}
+                isInline={false}
                 onClick={[Function]}
                 type="button"
                 variant="danger"
@@ -225,6 +226,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                 isDisabled={false}
                 isFocus={false}
                 isHover={false}
+                isInline={false}
                 onClick={[Function]}
                 type="button"
                 variant="secondary"
@@ -250,233 +252,227 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
             <div
               className="pf-c-backdrop"
             >
-              <Bullseye
+              <FocusTrap
-                className=""
+                _createFocusTrap={[Function]}
-                component="div"
+                active={true}
+                className="pf-l-bullseye"
+                focusTrapOptions={
+                  Object {
+                    "clickOutsideDeactivates": true,
+                  }
+                }
+                paused={false}
+                tag="div"
               >
                 <div
                   className="pf-l-bullseye"
                 >
-                  <FocusTrap
+                  <ModalBox
-                    _createFocusTrap={[Function]}
+                    className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
-                    active={true}
+                    id="pf-modal-0"
-                    className="pf-l-bullseye"
+                    isLarge={false}
-                    focusTrapOptions={
+                    isSmall={false}
+                    style={
                       Object {
-                        "clickOutsideDeactivates": true,
+                        "width": null,
                       }
                     }
-                    paused={false}
+                    title="Remove {0} Access"
-                    tag="div"
                   >
                     <div
-                      className="pf-l-bullseye"
+                      aria-describedby="pf-modal-0"
-                    >
+                      aria-label="Remove {0} Access"
-                      <ModalBox
+                      aria-modal="true"
-                        className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                      className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
-                        id="pf-modal-0"
+                      role="dialog"
-                        isLarge={false}
+                      style={
-                        isSmall={false}
+                        Object {
-                        style={
+                          "width": null,
-                          Object {
-                            "width": null,
-                          }
                         }
-                        title="Remove {0} Access"
+                      }
+                    >
+                      <ModalBoxCloseButton
+                        className=""
+                        onClose={[Function]}
+                      >
+                        <Button
+                          aria-label="Close"
+                          className=""
+                          component="button"
+                          isActive={false}
+                          isBlock={false}
+                          isDisabled={false}
+                          isFocus={false}
+                          isHover={false}
+                          isInline={false}
+                          onClick={[Function]}
+                          type="button"
+                          variant="plain"
+                        >
+                          <button
+                            aria-disabled={null}
+                            aria-label="Close"
+                            className="pf-c-button pf-m-plain"
+                            disabled={false}
+                            onClick={[Function]}
+                            tabIndex={null}
+                            type="button"
+                          >
+                            <TimesIcon
+                              color="currentColor"
+                              size="sm"
+                              title={null}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                aria-labelledby={null}
+                                fill="currentColor"
+                                height="1em"
+                                role="img"
+                                style={
+                                  Object {
+                                    "verticalAlign": "-0.125em",
+                                  }
+                                }
+                                viewBox="0 0 352 512"
+                                width="1em"
+                              >
+                                <path
+                                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                                  transform=""
+                                />
+                              </svg>
+                            </TimesIcon>
+                          </button>
+                        </Button>
+                      </ModalBoxCloseButton>
+                      <ModalBoxHeader
+                        className=""
+                        hideTitle={false}
+                      >
+                        <Title
+                          className=""
+                          headingLevel="h3"
+                          size="2xl"
+                        >
+                          <h3
+                            className="pf-c-title pf-m-2xl"
+                          >
+                             
+                            Remove {0} Access
+                             
+                          </h3>
+                        </Title>
+                      </ModalBoxHeader>
+                      <ModalBoxBody
+                        className=""
+                        id="pf-modal-0"
                       >
                         <div
-                          aria-describedby="pf-modal-0"
+                          className="pf-c-modal-box__body"
-                          aria-label="Remove {0} Access"
+                          id="pf-modal-0"
-                          aria-modal="true"
-                          className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
-                          role="dialog"
-                          style={
-                            Object {
-                              "width": null,
-                            }
-                          }
                         >
-                          <ModalBoxCloseButton
+                          Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
-                            className=""
+                          <br />
-                            onClose={[Function]}
+                          <br />
+                          If you {0} want to remove access for this particular user, please remove them from the team.
+                          <ExclamationCircleIcon
+                            className="at-c-alertModal__icon"
+                            color="currentColor"
+                            size="sm"
+                            title={null}
                           >
-                            <Button
+                            <svg
-                              aria-label="Close"
+                              aria-hidden={true}
-                              className=""
+                              aria-labelledby={null}
-                              component="button"
+                              className="at-c-alertModal__icon"
-                              isActive={false}
+                              fill="currentColor"
-                              isBlock={false}
+                              height="1em"
-                              isDisabled={false}
+                              role="img"
-                              isFocus={false}
+                              style={
-                              isHover={false}
+                                Object {
-                              onClick={[Function]}
+                                  "verticalAlign": "-0.125em",
-                              type="button"
+                                }
-                              variant="plain"
+                              }
+                              viewBox="0 0 512 512"
+                              width="1em"
                             >
-                              <button
+                              <path
-                                aria-disabled={null}
+                                d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                                aria-label="Close"
+                                transform=""
-                                className="pf-c-button pf-m-plain"
+                              />
-                                disabled={false}
+                            </svg>
-                                onClick={[Function]}
+                          </ExclamationCircleIcon>
-                                tabIndex={null}
-                                type="button"
-                              >
-                                <TimesIcon
-                                  color="currentColor"
-                                  size="sm"
-                                  title={null}
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    aria-labelledby={null}
-                                    fill="currentColor"
-                                    height="1em"
-                                    role="img"
-                                    style={
-                                      Object {
-                                        "verticalAlign": "-0.125em",
-                                      }
-                                    }
-                                    viewBox="0 0 352 512"
-                                    width="1em"
-                                  >
-                                    <path
-                                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                                      transform=""
-                                    />
-                                  </svg>
-                                </TimesIcon>
-                              </button>
-                            </Button>
-                          </ModalBoxCloseButton>
-                          <ModalBoxHeader
-                            className=""
-                            hideTitle={false}
-                          >
-                            <Title
-                              className=""
-                              headingLevel="h3"
-                              size="2xl"
-                            >
-                              <h3
-                                className="pf-c-title pf-m-2xl"
-                              >
-                                 
-                                Remove {0} Access
-                                 
-                              </h3>
-                            </Title>
-                          </ModalBoxHeader>
-                          <ModalBoxBody
-                            className=""
-                            id="pf-modal-0"
-                          >
-                            <div
-                              className="pf-c-modal-box__body"
-                              id="pf-modal-0"
-                            >
-                              Are you sure you want to remove {0} access from {1}?  Doing so affects all members of the team.
-                              <br />
-                              <br />
-                              If you {0} want to remove access for this particular user, please remove them from the team.
-                              <ExclamationCircleIcon
-                                className="at-c-alertModal__icon"
-                                color="currentColor"
-                                size="sm"
-                                title={null}
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  aria-labelledby={null}
-                                  className="at-c-alertModal__icon"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  style={
-                                    Object {
-                                      "verticalAlign": "-0.125em",
-                                    }
-                                  }
-                                  viewBox="0 0 512 512"
-                                  width="1em"
-                                >
-                                  <path
-                                    d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                                    transform=""
-                                  />
-                                </svg>
-                              </ExclamationCircleIcon>
-                            </div>
-                          </ModalBoxBody>
-                          <ModalBoxFooter
-                            className=""
-                          >
-                            <div
-                              className="pf-c-modal-box__footer"
-                            >
-                               
-                              <Button
-                                aria-label="Confirm delete"
-                                className=""
-                                component="button"
-                                isActive={false}
-                                isBlock={false}
-                                isDisabled={false}
-                                isFocus={false}
-                                isHover={false}
-                                key="delete"
-                                onClick={[Function]}
-                                type="button"
-                                variant="danger"
-                              >
-                                <button
-                                  aria-disabled={null}
-                                  aria-label="Confirm delete"
-                                  className="pf-c-button pf-m-danger"
-                                  disabled={false}
-                                  onClick={[Function]}
-                                  tabIndex={null}
-                                  type="button"
-                                >
-                                  Delete
-                                </button>
-                              </Button>
-                              <Button
-                                aria-label={null}
-                                className=""
-                                component="button"
-                                isActive={false}
-                                isBlock={false}
-                                isDisabled={false}
-                                isFocus={false}
-                                isHover={false}
-                                key="cancel"
-                                onClick={[Function]}
-                                type="button"
-                                variant="secondary"
-                              >
-                                <button
-                                  aria-disabled={null}
-                                  aria-label={null}
-                                  className="pf-c-button pf-m-secondary"
-                                  disabled={false}
-                                  onClick={[Function]}
-                                  tabIndex={null}
-                                  type="button"
-                                >
-                                  Cancel
-                                </button>
-                              </Button>
-                               
-                            </div>
-                          </ModalBoxFooter>
                         </div>
-                      </ModalBox>
+                      </ModalBoxBody>
+                      <ModalBoxFooter
+                        className=""
+                      >
+                        <div
+                          className="pf-c-modal-box__footer"
+                        >
+                           
+                          <Button
+                            aria-label="Confirm delete"
+                            className=""
+                            component="button"
+                            isActive={false}
+                            isBlock={false}
+                            isDisabled={false}
+                            isFocus={false}
+                            isHover={false}
+                            isInline={false}
+                            key="delete"
+                            onClick={[Function]}
+                            type="button"
+                            variant="danger"
+                          >
+                            <button
+                              aria-disabled={null}
+                              aria-label="Confirm delete"
+                              className="pf-c-button pf-m-danger"
+                              disabled={false}
+                              onClick={[Function]}
+                              tabIndex={null}
+                              type="button"
+                            >
+                              Delete
+                            </button>
+                          </Button>
+                          <Button
+                            aria-label={null}
+                            className=""
+                            component="button"
+                            isActive={false}
+                            isBlock={false}
+                            isDisabled={false}
+                            isFocus={false}
+                            isHover={false}
+                            isInline={false}
+                            key="cancel"
+                            onClick={[Function]}
+                            type="button"
+                            variant="secondary"
+                          >
+                            <button
+                              aria-disabled={null}
+                              aria-label={null}
+                              className="pf-c-button pf-m-secondary"
+                              disabled={false}
+                              onClick={[Function]}
+                              tabIndex={null}
+                              type="button"
+                            >
+                              Cancel
+                            </button>
+                          </Button>
+                           
+                        </div>
+                      </ModalBoxFooter>
                     </div>
-                  </FocusTrap>
+                  </ModalBox>
                 </div>
-              </Bullseye>
+              </FocusTrap>
             </div>
           </Backdrop>
         </ModalContent>

__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap

@@ -714,7 +714,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                                   </div>
                                                                                 }
                                                                               >
-                                                                                <DropdownToggle
+                                                                                <Toggle
                                                                                   ariaHasPopup={true}
                                                                                   className=""
                                                                                   id="awx-search"
@@ -804,7 +804,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                                       </svg>
                                                                                     </CaretDownIcon>
                                                                                   </button>
-                                                                                </DropdownToggle>
+                                                                                </Toggle>
                                                                               </DropdownToggle>
                                                                             </div>
                                                                           </Dropdown>
@@ -932,6 +932,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                             isDisabled={false}
                                                                             isFocus={false}
                                                                             isHover={false}
+                                                                            isInline={false}
                                                                             onClick={[Function]}
                                                                             type="button"
                                                                             variant="tertiary"
@@ -984,20 +985,37 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                       </Styled(ToolbarItem)>
                                                       <VerticalSeparator>
                                                         <div>
-                                                          <span
+                                                          <VerticalSeparator__Separator>
-                                                            style={
+                                                            <StyledComponent
-                                                              Object {
+                                                              forwardedComponent={
-                                                                "backgroundColor": "#d7d7d7",
+                                                                Object {
-                                                                "content": "",
+                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                "display": "inline-block",
+                                                                  "attrs": Array [],
-                                                                "height": "30px",
+                                                                  "componentStyle": ComponentStyle {
-                                                                "marginLeft": "20px",
+                                                                    "componentId": "VerticalSeparator__Separator-sc-1256nz7-0",
-                                                                "marginRight": "20px",
+                                                                    "isStatic": true,
-                                                                "verticalAlign": "middle",
+                                                                    "lastClassName": "kgxyCB",
-                                                                "width": "1px",
+                                                                    "rules": Array [
+                                                                      "display:inline-block;width:1px;height:30px;margin-right:20px;margin-left:20px;background-color:#d7d7d7;vertical-align:middle;",
+                                                                    ],
+                                                                  },
+                                                                  "displayName": "VerticalSeparator__Separator",
+                                                                  "foldedComponentIds": Array [],
+                                                                  "render": [Function],
+                                                                  "styledComponentId": "VerticalSeparator__Separator-sc-1256nz7-0",
+                                                                  "target": "span",
+                                                                  "toString": [Function],
+                                                                  "warnTooManyClasses": [Function],
+                                                                  "withComponent": [Function],
+                                                                }
                                                               }
-                                                            }
+                                                              forwardedRef={null}
-                                                          />
+                                                            >
+                                                              <span
+                                                                className="VerticalSeparator__Separator-sc-1256nz7-0 kgxyCB"
+                                                              />
+                                                            </StyledComponent>
+                                                          </VerticalSeparator__Separator>
                                                         </div>
                                                       </VerticalSeparator>
                                                     </div>
@@ -1327,7 +1345,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                             </div>
                                                                           }
                                                                         >
-                                                                          <DropdownToggle
+                                                                          <Toggle
                                                                             ariaHasPopup={true}
                                                                             className=""
                                                                             id="awx-sort"
@@ -1418,7 +1436,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                                 </svg>
                                                                               </CaretDownIcon>
                                                                             </button>
-                                                                          </DropdownToggle>
+                                                                          </Toggle>
                                                                         </DropdownToggle>
                                                                       </div>
                                                                     </Dropdown>
@@ -1466,6 +1484,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                       isDisabled={false}
                                                                       isFocus={false}
                                                                       isHover={false}
+                                                                      isInline={false}
                                                                       onClick={[Function]}
                                                                       type="button"
                                                                       variant="plain"
@@ -2748,7 +2767,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                       <div
                                         className="pf-c-pagination pf-m-footer Pagination__AWXPagination-c2dclb-0 dXBcqV"
                                       >
-                                        <OptionsMenu
+                                        <PaginationOptionsMenu
                                           dropDirection="up"
                                           firstIndex={1}
                                           itemCount={2}
@@ -2964,7 +2983,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                     <span
                                                       className="pf-c-options-menu__toggle-text"
                                                     >
-                                                      <ToggleTamplate
+                                                      <ToggleTemplate
                                                         firstIndex={1}
                                                         itemCount={2}
                                                         itemsTitle="items"
@@ -2981,7 +3000,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                         </strong>
                                                          
                                                         items
-                                                      </ToggleTamplate>
+                                                      </ToggleTemplate>
                                                     </span>
                                                     <button
                                                       aria-expanded={false}
@@ -3024,7 +3043,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                               </div>
                                             </Dropdown>
                                           </div>
-                                        </OptionsMenu>
+                                        </PaginationOptionsMenu>
                                         <Navigation
                                           currPage="Current page"
                                           lastPage={1}
@@ -3056,6 +3075,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                               isDisabled={true}
                                               isFocus={false}
                                               isHover={false}
+                                              isInline={false}
                                               onClick={[Function]}
                                               type="button"
                                               variant="plain"
@@ -3107,6 +3127,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                               isDisabled={true}
                                               isFocus={false}
                                               isHover={false}
+                                              isInline={false}
                                               onClick={[Function]}
                                               type="button"
                                               variant="plain"
@@ -3179,6 +3200,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                               isDisabled={true}
                                               isFocus={false}
                                               isHover={false}
+                                              isInline={false}
                                               onClick={[Function]}
                                               type="button"
                                               variant="plain"
@@ -3230,6 +3252,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                               isDisabled={true}
                                               isFocus={false}
                                               isHover={false}
+                                              isInline={false}
                                               onClick={[Function]}
                                               type="button"
                                               variant="plain"

package-lock.json

@@ -1179,6 +1179,19 @@
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
       "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz",
+      "integrity": "sha512-834DrzO2Ne3upCW+mJJPC/E6BsFcj+2Z1HmPIhbpbj8UaKmXWum4NClqLpUiMetugRlHuG4jbIHNdv2/lc3c1Q=="
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz",
+      "integrity": "sha512-nhEWctDOP6f+Ka10LXAFoF+6mtWidC2iQgTBGRGgydmhBtcIEwyxWVx5wQHa86A1zAMi5TnipDAYQs2qn7DD6A==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.18"
+      }
+    },
     "@jest/console": {
       "version": "24.7.1",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -1762,18 +1775,18 @@
       }
     },
     "@patternfly/patternfly": {
-      "version": "2.6.5",
+      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.6.5.tgz",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-2.7.0.tgz",
-      "integrity": "sha512-L0k+ea2N679ytQwTqYJ7RewVDx6FDpm9burtHgD8fhcIN0UJJo7v2IkhLya2WzH2/O7L7TiF45lb/ZVoFVckDA=="
+      "integrity": "sha512-mewkgiqaQQTLabpOUCi9BrFJ6cQAvgNtOT7Z+LHS3PKIGFKkTfjAd+hm0TktbohNQJS8KvH5qcUV/WuLZ2/UbA=="
     },
     "@patternfly/react-core": {
-      "version": "3.2.6",
+      "version": "3.16.14",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-3.16.14.tgz",
-      "integrity": "sha512-58GBM8SfhoggQldGArUR3LwvcMe+GaW/uTjB1/a3RTG6HXTfFfs33UXnQnN2IgWZmHOyxpjnWq2yEh5xwJs5HQ==",
+      "integrity": "sha512-JKBwXs6+YlmOSQGsKOraiioLIYysdHqMYWsTgLqomXouOyAk3q30/TKQudZbRs/Iw7Gg3W2Ub9ed3pDI7D+R6Q==",
       "requires": {
-        "@patternfly/react-icons": "^3.7.4",
+        "@patternfly/react-icons": "^3.9.1",
-        "@patternfly/react-styles": "^3.0.2",
+        "@patternfly/react-styles": "^3.2.0",
-        "@patternfly/react-tokens": "^2.3.3",
+        "@patternfly/react-tokens": "^2.5.1",
         "@tippy.js/react": "^1.1.1",
         "emotion": "^9.2.9",
         "exenv": "^1.2.2",
@@ -1781,14 +1794,17 @@
       },
       "dependencies": {
         "@patternfly/react-icons": {
-          "version": "3.7.5",
+          "version": "3.9.2",
-          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.7.5.tgz",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.9.2.tgz",
-          "integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
+          "integrity": "sha512-EwPB+Nodd7zwiFh7R3Qq6Dif+xUR3WOwaJ+SRbP5NsxEAJf3CyYyrd7rbN8yFrFLTMKzknT2ez9XrP/5Lgr5LQ==",
+          "requires": {
+            "@fortawesome/free-brands-svg-icons": "^5.8.1"
+          }
         },
         "@patternfly/react-tokens": {
-          "version": "2.3.3",
+          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.3.3.tgz",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.5.1.tgz",
-          "integrity": "sha512-+2SSGvOV1rZr1l6+p2QzORVJhpOKjrHqCBfkp10La7O93+mVLYU0vugTp1elhxeh32IuLCJAPDLrCJPBAfmYKw=="
+          "integrity": "sha512-ZykUfWT4yCELXhGGwQxcNqnXwe3sqfSuoL6IlQRV6wtUKk+/et7NkVvrRwvci926+Usemr4IQVc8V9gbHqRN/A=="
         }
       }
     },
@@ -1798,9 +1814,9 @@
       "integrity": "sha512-Bejd6GAWfcDgA7YxvIcrohcBPVZUG34E3LWaJSHLUf8XADf33q7UvQ4YQ1eWk477o/GjZA3AX/71Y6op71WdDA=="
     },
     "@patternfly/react-styles": {
-      "version": "3.0.2",
+      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-3.2.0.tgz",
-      "integrity": "sha512-JiGxDkC4JArQJ13RQOjSUE4jPmwrAq8f5E+qg0tVws1A9BQ2l3uGCRFMVbfa57qqjqk0jXNmIVdFSeCG18qwJQ==",
+      "integrity": "sha512-8M7bo4kPvypHlbzuynV53xjk5176EktfEgZ283sfHmvUlU3Yvq2+m8hS9ERHE9gd91Ip4HiyucAVVACd2gtHNQ==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.0.0-beta.48",
         "camel-case": "^3.0.0",
@@ -3279,7 +3295,7 @@
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
       "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U="
     },
     "babel-plugin-syntax-trailing-function-commas": {

package.json

@@ -51,8 +51,8 @@
   },
   "dependencies": {
     "@lingui/react": "^2.7.2",
-    "@patternfly/patternfly": "^2.6.5",
+    "@patternfly/patternfly": "^2.7.0",
-    "@patternfly/react-core": "^3.2.6",
+    "@patternfly/react-core": "^3.16.14",
     "@patternfly/react-icons": "^3.7.5",
     "@patternfly/react-tokens": "^2.3.3",
     "axios": "^0.18.0",

src/app.scss

@@ -303,13 +303,6 @@
   text-align: right;
 }
 
-.awx-c-chip {
-  padding: 3px 0;
-  height: 24px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
-
 .awx-orgTabs-container{
   display: flex
 }

src/components/BasicChip/BasicChip.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Chip } from '@patternfly/react-core';
-import './basicChip.scss';
-
-const BasicChip = ({ children, onToggle, isOverflowChip }) => (
-  <Chip
-    className="awx-c-chip--basic"
-    onClick={onToggle}
-    isOverflowChip={isOverflowChip}
-  >
-    {children}
-  </Chip>
-);
-
-BasicChip.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default BasicChip;

src/components/BasicChip/basicChip.scss

@@ -1,18 +0,0 @@
-.awx-c-chip--basic {
-  padding: 3px 8px;
-  height: 24px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-
-  &.pf-c-chip {
-    margin-top: 0;
-  }
-
-  &.pf-m-overflow {
-    padding: 0;
-  }
-
-  &:not(.pf-m-overflow) .pf-c-button {
-    display: none;
-  }
-}

src/components/Chip/Chip.jsx

@@ -0,0 +1,18 @@
+
+import { Chip } from '@patternfly/react-core';
+import styled from 'styled-components';
+
+export default styled(Chip)`
+  --pf-c-chip--m-read-only--PaddingTop: 3px;
+  --pf-c-chip--m-read-only--PaddingRight: 8px;
+  --pf-c-chip--m-read-only--PaddingBottom: 3px;
+  --pf-c-chip--m-read-only--PaddingLeft: 8px;
+
+  & > .pf-c-button {
+    padding: 3px 8px;
+  }
+
+  ${props => (props.isOverflowChip && `
+    padding: 0;
+  `)}
+`;

src/components/Chip/ChipGroup.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { number } from 'prop-types';
+import styled from 'styled-components';
+import Chip from './Chip';
+
+const ChipGroup = ({ children, className, showOverflowAfter, ...props }) => {
+  const [isExpanded, setIsExpanded] = useState(!showOverflowAfter);
+  const toggleIsOpen = () => setIsExpanded(!isExpanded);
+
+  const mappedChildren = React.Children.map(children, c => (
+    React.cloneElement(c, { component: 'li' })
+  ));
+  const showOverflowToggle = showOverflowAfter && children.length > showOverflowAfter;
+  const numToShow = isExpanded
+    ? children.length
+    : Math.min(showOverflowAfter, children.length);
+  const expandedText = 'Show Less';
+  const collapsedText = `${children.length - showOverflowAfter} more`;
+
+  return (
+    <ul className={`pf-c-chip-group ${className}`} {...props}>
+      {mappedChildren.slice(0, numToShow)}
+      {showOverflowToggle && (
+        <Chip isOverflowChip onClick={toggleIsOpen} component="li">
+          {isExpanded ? expandedText : collapsedText}
+        </Chip>
+      )}
+    </ul>
+  );
+};
+ChipGroup.propTypes = {
+  showOverflowAfter: number,
+};
+ChipGroup.defaultProps = {
+  showOverflowAfter: null,
+};
+
+export default styled(ChipGroup)`
+  --pf-c-chip-group--c-chip--MarginRight: 10px;
+  --pf-c-chip-group--c-chip--MarginBottom: 10px;
+`;

src/components/Chip/index.js

@@ -0,0 +1,2 @@
+export { default as ChipGroup } from './ChipGroup';
+export { default as Chip } from './Chip';

src/components/DetailList/Detail.jsx

@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+import { node, bool } from 'prop-types';
+import { TextListItem, TextListItemVariants } from '@patternfly/react-core';
+import styled from 'styled-components';
+
+const DetailName = styled(({ fullWidth, ...props }) => (
+  <TextListItem {...props} />
+))`
+  font-weight: var(--pf-global--FontWeight--bold);
+  text-align: right;
+  ${props => props.fullWidth && `
+    grid-column: 1;
+  `}
+`;
+
+const DetailValue = styled(({ fullWidth, ...props }) => (
+  <TextListItem {...props} />
+))`
+  word-break: break-all;
+  ${props => props.fullWidth && `
+    grid-column: 2 / -1;
+  `}
+`;
+
+const Detail = ({ label, value, fullWidth }) => {
+  if (!value) return null;
+  return (
+    <Fragment>
+      <DetailName
+        component={TextListItemVariants.dt}
+        fullWidth={fullWidth}
+      >
+        {label}
+      </DetailName>
+      <DetailValue
+        component={TextListItemVariants.dd}
+        fullWidth={fullWidth}
+      >
+        {value}
+      </DetailValue>
+    </Fragment>
+  );
+};
+Detail.propTypes = {
+  label: node.isRequired,
+  value: node,
+  fullWidth: bool,
+};
+Detail.defaultProps = {
+  value: null,
+  fullWidth: false,
+};
+
+export default Detail;
+export { DetailName };
+export { DetailValue };

src/components/DetailList/DetailList.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TextList, TextListVariants } from '@patternfly/react-core';
+import styled from 'styled-components';
+
+const DetailList = ({ children, stacked, ...props }) => (
+  <TextList component={TextListVariants.dl} {...props}>
+    {children}
+  </TextList>
+);
+
+export default styled(DetailList)`
+  display: grid;
+  grid-gap: 20px;
+  ${props => (props.stacked ? (`
+    grid-template-columns: auto 1fr;
+  `) : (`
+    --column-count: 1;
+    grid-template-columns: repeat(var(--column-count), auto minmax(10em, 1fr));
+
+    @media (min-width: 920px) {
+      --column-count: 2;
+    }
+
+    @media (min-width: 1210px) {
+      --column-count: 3;
+    }
+  `))}
+`;

src/components/DetailList/index.js

@@ -0,0 +1,2 @@
+export { default as DetailList } from './DetailList';
+export { default as Detail, DetailName, DetailValue } from './Detail';

src/components/Lookup/Lookup.jsx

@@ -5,7 +5,6 @@ import { SearchIcon } from '@patternfly/react-icons';
 import {
   Button,
   ButtonVariant,
-  Chip,
   InputGroup,
   Modal,
 } from '@patternfly/react-core';
@@ -17,6 +16,7 @@ import PaginatedDataList from '../PaginatedDataList';
 import DataListToolbar from '../DataListToolbar';
 import CheckboxListItem from '../ListItem';
 import SelectedList from '../SelectedList';
+import { ChipGroup, Chip } from '../Chip';
 import { getQSConfig, parseNamespacedQueryString } from '../../util/qs';
 
 class Lookup extends React.Component {
@@ -128,13 +128,13 @@ class Lookup extends React.Component {
     const header = lookupHeader || i18n._(t`items`);
 
     const chips = value ? (
-      <div className="pf-c-chip-group">
+      <ChipGroup>
         {value.map(chip => (
           <Chip key={chip.id} onClick={() => this.toggleSelected(chip)}>
             {chip.name}
           </Chip>
         ))}
-      </div>
+      </ChipGroup>
     ) : null;
 
     return (

src/components/SelectedList/SelectedList.jsx

@@ -1,40 +1,24 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {
+import { Split as PFSplit, SplitItem } from '@patternfly/react-core';
-  Chip
+import styled from 'styled-components';
-} from '@patternfly/react-core';
+import { ChipGroup, Chip } from '../Chip';
-
-import BasicChip from '../BasicChip/BasicChip';
 import VerticalSeparator from '../VerticalSeparator';
 
-const selectedRowStyling = {
+const Split = styled(PFSplit)`
-  paddingTop: '15px',
+  padding-top: 15px;
-  paddingBottom: '5px',
+  padding-bottom: 5px;
-  borderLeft: '0',
+  border-bottom: #ebebeb var(--pf-global--BorderWidth--sm) solid;
-  borderRight: '0'
+  align-items: baseline;
-};
+`;
 
-const selectedLabelStyling = {
+const SplitLabelItem = styled(SplitItem)`
-  alignSelf: 'center',
+  font-size: 14px;
-  fontSize: '14px',
+  font-weight: bold;
-  fontWeight: 'bold'
+  word-break: initial;
-};
+`;
 
 class SelectedList extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      showOverflow: false
-    };
-
-    this.showOverflow = this.showOverflow.bind(this);
-  }
-
-  showOverflow = () => {
-    this.setState({ showOverflow: true });
-  };
-
   render () {
     const {
       label,
@@ -44,58 +28,26 @@ class SelectedList extends Component {
       displayKey,
       isReadOnly
     } = this.props;
-    const { showOverflow } = this.state;
-    const visibleItems = selected.slice(0, showOverflow ? selected.length : showOverflowAfter);
     return (
-      <div className="awx-selectedList">
+      <Split>
-        <div className="pf-l-split" style={selectedRowStyling}>
+        <SplitLabelItem>
-          <div className="pf-l-split__item" style={selectedLabelStyling}>
+          {label}
-            {label}
+        </SplitLabelItem>
-          </div>
+        <VerticalSeparator />
-          <VerticalSeparator />
+        <SplitItem>
-          <div className="pf-l-split__item">
+          <ChipGroup showOverflowAfter={showOverflowAfter}>
-            <div className="pf-c-chip-group">
+            {selected.map(item => (
-              {isReadOnly ? (
+              <Chip
-                <Fragment>
+                key={item.id}
-                  {visibleItems
+                isReadOnly={isReadOnly}
-                    .map(selectedItem => (
+                onClick={() => onRemove(item)}
-                      <BasicChip
+              >
-                        key={selectedItem.id}
+                {item[displayKey]}
-                      >
+              </Chip>
-                        {selectedItem[displayKey]}
+            ))}
-                      </BasicChip>
+          </ChipGroup>
-                    ))
+        </SplitItem>
-                  }
+      </Split>
-                </Fragment>
-              ) : (
-                <Fragment>
-                  {visibleItems
-                    .map(selectedItem => (
-                      <Chip
-                        key={selectedItem.id}
-                        onClick={() => onRemove(selectedItem)}
-                      >
-                        {selectedItem[displayKey]}
-                      </Chip>
-                    ))
-                  }
-                </Fragment>
-              )}
-              {(
-                !showOverflow
-                && selected.length > showOverflowAfter
-              ) && (
-                <Chip
-                  isOverflowChip
-                  onClick={() => this.showOverflow()}
-                >
-                  {`${(selected.length - showOverflowAfter).toString()} more`}
-                </Chip>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
     );
   }
 }

src/components/SelectedList/styles.scss

@@ -1,22 +0,0 @@
-.awx-selectedList {
-  --awx-selectedList--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --awx-selectedList--BorderColor: #ebebeb;
-  --awx-selectedList--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --awx-selectedList--FontSize: var(--pf-c-chip__text--FontSize);
-
-  
-  .pf-l-split {
-    padding-top: 20px;
-    padding-bottom: 10px;
-    border-bottom: var(--awx-selectedList--BorderWidth) solid var(--awx-selectedList--BorderColor);
-  }
-  .pf-l-split__item:first-child {
-    display: flex;
-    white-space: nowrap;
-    height: 30px;
-  }
-  .pf-c-chip {
-    margin-right: 10px;
-    margin-bottom: 10px;
-  }
-}

src/components/VerticalSeparator/VerticalSeparator.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
+import styled from 'styled-components';
+
+const Separator = styled.span`
+  display: inline-block;
+  width: 1px;
+  height: 30px;
+  margin-right: 20px;
+  margin-left: 20px;
+  background-color: #d7d7d7;
+  vertical-align: middle;
+`;
 
 const VerticalSeparator = () => (
   <div>
-    <span style={{
+    <Separator />
-      content: '',
-      backgroundColor: '#d7d7d7',
-      width: '1px',
-      height: '30px',
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      marginLeft: '20px',
-      marginRight: '20px'
-    }}
-    />
   </div>
 );
 

src/index.jsx

@@ -12,7 +12,6 @@ import { t } from '@lingui/macro';
 
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.scss';
-import './components/SelectedList/styles.scss';
 import './components/AddRole/styles.scss';
 
 import { Config } from './contexts/Config';

src/pages/Organizations/components/OrganizationAccessItem.jsx

@@ -5,55 +5,21 @@ import { t } from '@lingui/macro';
 import {
   DataListItem,
   DataListItemRow,
-  DataListItemCells,
+  DataListItemCells as PFDataListItemCells,
   DataListCell,
   Text,
   TextContent,
   TextVariants,
-  Chip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { AccessRecord } from '../../../types';
-import BasicChip from '../../../components/BasicChip/BasicChip';
+import { DetailList, Detail } from '../../../components/DetailList';
+import { ChipGroup, Chip } from '../../../components/Chip';
 
-const userRolesWrapperStyle = {
+const DataListItemCells = styled(PFDataListItemCells)`
-  display: 'flex',
+  align-items: start;
-  flexWrap: 'wrap',
+`;
-};
-
-const detailWrapperStyle = {
-  display: 'grid',
-  gridTemplateColumns: 'minmax(70px, max-content) minmax(60px, max-content)',
-};
-
-const detailLabelStyle = {
-  fontWeight: '700',
-  lineHeight: '24px',
-  marginRight: '20px',
-};
-
-const detailValueStyle = {
-  lineHeight: '28px',
-  overflow: 'visible',
-};
-
-/* TODO: does PF offer any sort of <dl> treatment for this? */
-const Detail = ({ label, value, url, customStyles }) => {
-  let detail = null;
-  if (value) {
-    detail = (
-      <TextContent style={{ ...detailWrapperStyle, ...customStyles }}>
-        {url ? (
-          <Link to={{ pathname: url }}>
-            <Text component={TextVariants.h6} style={detailLabelStyle}>{label}</Text>
-          </Link>) : (<Text component={TextVariants.h6} style={detailLabelStyle}>{label}</Text>
-        )}
-        <Text component={TextVariants.p} style={detailValueStyle}>{value}</Text>
-      </TextContent>
-    );
-  }
-  return detail;
-};
 
 class OrganizationAccessItem extends React.Component {
   static propTypes = {
@@ -61,6 +27,11 @@ class OrganizationAccessItem extends React.Component {
     onRoleDelete: func.isRequired,
   };
 
+  constructor (props) {
+    super(props);
+    this.renderChip = this.renderChip.bind(this);
+  }
+
   getRoleLists () {
     const { accessRecord } = this.props;
     const teamRoles = [];
@@ -80,8 +51,21 @@ class OrganizationAccessItem extends React.Component {
     return [teamRoles, userRoles];
   }
 
+  renderChip (role) {
+    const { accessRecord, onRoleDelete } = this.props;
+    return (
+      <Chip
+        key={role.id}
+        isReadOnly={!role.user_capabilities.unattach}
+        onClick={() => { onRoleDelete(role, accessRecord); }}
+      >
+        {role.name}
+      </Chip>
+    );
+  }
+
   render () {
-    const { accessRecord, onRoleDelete, i18n } = this.props;
+    const { accessRecord, i18n } = this.props;
     const [teamRoles, userRoles] = this.getRoleLists();
 
     return (
@@ -90,76 +74,60 @@ class OrganizationAccessItem extends React.Component {
           <DataListItemCells dataListCells={[
             <DataListCell key="name">
               {accessRecord.username && (
-                <TextContent style={detailWrapperStyle}>
+                <TextContent>
                   {accessRecord.url ? (
-                    <Link to={{ pathname: accessRecord.url }}>
+                    <Text component={TextVariants.h6}>
-                      <Text component={TextVariants.h6} style={detailLabelStyle}>
+                      <Link
+                        to={{ pathname: accessRecord.url }}
+                        css="font-weight: bold"
+                      >
                         {accessRecord.username}
-                      </Text>
+                      </Link>
-                    </Link>
+                    </Text>
                   ) : (
-                    <Text component={TextVariants.h6} style={detailLabelStyle}>
+                    <Text
+                      component={TextVariants.h6}
+                      css="font-weight: bold"
+                    >
                       {accessRecord.username}
                     </Text>
                   )}
                 </TextContent>
               )}
               {accessRecord.first_name || accessRecord.last_name ? (
-                <Detail
+                <DetailList stacked>
-                  label={i18n._(t`Name`)}
+                  <Detail
-                  value={`${accessRecord.first_name} ${accessRecord.last_name}`}
+                    label={i18n._(t`Name`)}
-                  url={null}
+                    value={`${accessRecord.first_name} ${accessRecord.last_name}`}
-                  customStyles={null}
+                  />
-                />
+                </DetailList>
               ) : (
                 null
               )}
             </DataListCell>,
             <DataListCell key="roles">
-              {userRoles.length > 0 && (
+              <DetailList stacked>
-                <ul style={userRolesWrapperStyle}>
+                {userRoles.length > 0 && (
-                  <Text component={TextVariants.h6} style={detailLabelStyle}>
+                  <Detail
-                    {i18n._(t`User Roles`)}
+                    label={i18n._(t`User Roles`)}
-                  </Text>
+                    value={(
-                  {userRoles.map(role => (
+                      <ChipGroup>
-                    role.user_capabilities.unattach ? (
+                        {userRoles.map(this.renderChip)}
-                      <Chip
+                      </ChipGroup>
-                        key={role.id}
+                    )}
-                        className="awx-c-chip"
+                  />
-                        onClick={() => { onRoleDelete(role, accessRecord); }}
+                )}
-                      >
+                {teamRoles.length > 0 && (
-                        {role.name}
+                  <Detail
-                      </Chip>
+                    label={i18n._(t`Team Roles`)}
-                    ) : (
+                    value={(
-                      <BasicChip key={role.id}>
+                      <ChipGroup>
-                        {role.name}
+                        {teamRoles.map(this.renderChip)}
-                      </BasicChip>
+                      </ChipGroup>
-                    )
+                    )}
-                  ))}
+                  />
-                </ul>
+                )}
-              )}
+              </DetailList>
-              {teamRoles.length > 0 && (
-                <ul style={userRolesWrapperStyle}>
-                  <Text component={TextVariants.h6} style={detailLabelStyle}>
-                    {i18n._(t`Team Roles`)}
-                  </Text>
-                  {teamRoles.map(role => (
-                    role.user_capabilities.unattach ? (
-                      <Chip
-                        key={role.id}
-                        className="awx-c-chip"
-                        onClick={() => { onRoleDelete(role, accessRecord); }}
-                      >
-                        {role.name}
-                      </Chip>
-                    ) : (
-                      <BasicChip key={role.id}>
-                        {role.name}
-                      </BasicChip>
-                    )
-                  ))}
-                </ul>
-              )}
             </DataListCell>
           ]}
           />

src/pages/Organizations/screens/Organization/OrganizationDetail.jsx

@@ -2,75 +2,24 @@ import React, { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-
+import { CardBody as PFCardBody, Button } from '@patternfly/react-core';
-import {
-  CardBody as PFCardBody,
-  Button,
-  TextList,
-  TextListItem,
-  TextListVariants,
-  TextListItemVariants,
-} from '@patternfly/react-core';
 import styled from 'styled-components';
+import { DetailList, Detail } from '../../../../components/DetailList';
 import { withNetwork } from '../../../../contexts/Network';
-import BasicChip from '../../../../components/BasicChip/BasicChip';
+import { ChipGroup, Chip } from '../../../../components/Chip';
 
 const CardBody = styled(PFCardBody)`
   padding-top: 20px;
 `;
 
-const DetailList = styled(TextList)`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
-  grid-gap: 20px;
-
-  & > div {
-    display: grid;
-    grid-template-columns: 10em 1fr;
-    grid-gap: 20px;
-  }
-`;
-
-const DetailName = styled(TextListItem)`
-  && {
-    grid-column: 1;
-    font-weight: var(--pf-global--FontWeight--bold);
-    text-align: right;
-  }
-`;
-
-const DetailValue = styled(TextListItem)`
-  && {
-    grid-column: 2;
-    word-break: break-all;
-  }
-`;
-
-const InstanceGroupsDetail = styled.div`
-  grid-column: 1 / -1;
-`;
-
-const Detail = ({ label, value }) => {
-  if (!value) return null;
-  return (
-    <div>
-      <DetailName component={TextListItemVariants.dt}>{label}</DetailName>
-      <DetailValue component={TextListItemVariants.dd}>{value}</DetailValue>
-    </div>
-  );
-};
-
 class OrganizationDetail extends Component {
   constructor (props) {
     super(props);
 
     this.state = {
       instanceGroups: [],
-      isToggleOpen: false,
       error: false
     };
-
-    this.handleChipToggle = this.handleChipToggle.bind(this);
     this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
   }
 
@@ -78,12 +27,6 @@ class OrganizationDetail extends Component {
     this.loadInstanceGroups();
   }
 
-  handleChipToggle = () => {
-    this.setState((prevState) => ({
-      isToggleOpen: !prevState.isToggleOpen
-    }));
-  }
-
   async loadInstanceGroups () {
     const {
       api,
@@ -106,7 +49,6 @@ class OrganizationDetail extends Component {
     const {
       error,
       instanceGroups,
-      isToggleOpen,
     } = this.state;
 
     const {
@@ -121,30 +63,10 @@ class OrganizationDetail extends Component {
       match,
       i18n
     } = this.props;
-    const showOverflowChipAfter = 5;
-
-    const instanceGroupChips = instanceGroups.slice(0, isToggleOpen
-      ? instanceGroups.length : showOverflowChipAfter)
-      .map(instanceGroup => (
-        <BasicChip
-          key={instanceGroup.id}
-        >
-          {instanceGroup.name}
-        </BasicChip>
-      ));
-
-    const overflowChip = (instanceGroups.length > showOverflowChipAfter) ? (
-      <BasicChip
-        isOverflowChip
-        onToggle={this.handleChipToggle}
-      >
-        {isToggleOpen ? 'Show less' : `${(instanceGroups.length - showOverflowChipAfter).toString()} more`}
-      </BasicChip>
-    ) : null;
 
     return (
       <CardBody>
-        <DetailList component={TextListVariants.dl}>
+        <DetailList>
           <Detail
             label={i18n._(t`Name`)}
             value={name}
@@ -166,15 +88,17 @@ class OrganizationDetail extends Component {
             value={modified}
           />
           {(instanceGroups && instanceGroups.length > 0) && (
-            <InstanceGroupsDetail>
+            <Detail
-              <DetailName component={TextListItemVariants.dt}>
+              fullWidth
-                {i18n._(t`Instance Groups`)}
+              label={i18n._(t`Instance Groups`)}
-              </DetailName>
+              value={(
-              <DetailValue component={TextListItemVariants.dd}>
+                <ChipGroup showOverflowAfter={5}>
-                {instanceGroupChips}
+                  {instanceGroups.map(ig => (
-                {overflowChip}
+                    <Chip key={ig.id} isReadOnly>{ig.name}</Chip>
-              </DetailValue>
+                  ))}
-            </InstanceGroupsDetail>
+                </ChipGroup>
+              )}
+            />
           )}
         </DetailList>
         {summary_fields.user_capabilities.edit && (