Merge pull request #204 from ansible/use-styled-components

✨Use styled-components✨

__tests__/components/DataListToolbar.test.jsx

@@ -57,10 +57,9 @@ describe('<DataListToolbar />', () => {
   });
 
   test('dropdown items sortable columns work', () => {
-    const sortDropdownToggleSelector = '.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button';
+    const sortDropdownToggleSelector = 'button[id="awx-sort"]';
-    const sortDropdownItemsSelector = '.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item';
+    const searchDropdownToggleSelector = 'button[id="awx-search"]';
-    const searchDropdownToggleSelector = '.pf-c-dropdown.searchKeyDropdown .pf-c-dropdown__toggle';
+    const dropdownMenuItems = 'DropdownMenu > ul';
-    const searchDropdownItemsSelector = '.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item';
 
     const multipleColumns = [
       { name: 'Foo', key: 'foo', isSortable: true },
@@ -80,12 +79,10 @@ describe('<DataListToolbar />', () => {
       />
     );
     const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
-    expect(sortDropdownToggle.length).toBe(2);
+    expect(sortDropdownToggle.length).toBe(1);
-    sortDropdownToggle.at(1).simulate('click');
+    sortDropdownToggle.simulate('click');
-    sortDropdownToggle.at(0).simulate('click');
     toolbar.update();
-
+    const sortDropdownItems = toolbar.find(dropdownMenuItems).children();
-    const sortDropdownItems = toolbar.find(sortDropdownItemsSelector);
     expect(sortDropdownItems.length).toBe(2);
 
     const mockedSortEvent = { target: { innerText: 'Bar' } };
@@ -101,13 +98,13 @@ describe('<DataListToolbar />', () => {
     toolbar.update();
 
     const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
-    expect(sortDropdownToggleDescending.length).toBe(2);
+    expect(sortDropdownToggleDescending.length).toBe(1);
-    sortDropdownToggleDescending.at(1).simulate('click');
+    sortDropdownToggleDescending.simulate('click');
-    sortDropdownToggleDescending.at(0).simulate('click');
     toolbar.update();
 
-    const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector);
+    const sortDropdownItemsDescending = toolbar.find(dropdownMenuItems).children();
     expect(sortDropdownItemsDescending.length).toBe(2);
+    sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown
 
     const mockedSortEventDescending = { target: { innerText: 'Bar' } };
     sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
@@ -115,10 +112,10 @@ describe('<DataListToolbar />', () => {
 
     const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
     expect(searchDropdownToggle.length).toBe(1);
-    searchDropdownToggle.at(0).simulate('click');
+    searchDropdownToggle.simulate('click');
     toolbar.update();
 
-    const searchDropdownItems = toolbar.find(searchDropdownItemsSelector);
+    const searchDropdownItems = toolbar.find(dropdownMenuItems).children();
     expect(searchDropdownItems.length).toBe(3);
 
     const mockedSearchEvent = { target: { innerText: 'Bar' } };

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

@@ -69,57 +69,92 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
         trigger="mouseenter focus"
         zIndex={9999}
       >
-        <Button
+        <ToolbarDeleteButton__Button
           aria-label="Delete"
-          className="awx-ToolBarBtn"
-          component="button"
-          isActive={false}
-          isBlock={false}
           isDisabled={true}
-          isFocus={false}
-          isHover={false}
           onClick={[Function]}
-          type="button"
           variant="plain"
         >
-          <button
+          <StyledComponent
-            aria-disabled={null}
             aria-label="Delete"
-            className="pf-c-button pf-m-plain pf-m-disabled awx-ToolBarBtn"
+            forwardedComponent={
-            disabled={true}
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "attrs": Array [],
+                "componentStyle": ComponentStyle {
+                  "componentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
+                  "isStatic": true,
+                  "lastClassName": "iyjqWq",
+                  "rules": Array [
+                    "width:30px;height:30px;display:flex;justify-content:center;margin-right:20px;border-radius:3px;padding:0;&:disabled{cursor:not-allowed;&:hover{background-color:white;> svg{color:#d2d2d2;}}}&:hover{background-color:#d9534f;> svg{color:white;}}",
+                  ],
+                },
+                "displayName": "ToolbarDeleteButton__Button",
+                "foldedComponentIds": Array [],
+                "render": [Function],
+                "styledComponentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
+                "target": [Function],
+                "toString": [Function],
+                "warnTooManyClasses": [Function],
+                "withComponent": [Function],
+              }
+            }
+            forwardedRef={null}
+            isDisabled={true}
             onClick={[Function]}
-            tabIndex={null}
+            variant="plain"
-            type="button"
           >
-            <TrashAltIcon
+            <Button
-              className="awx-ToolBarTrashCanIcon"
+              aria-label="Delete"
-              color="currentColor"
+              className="ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
-              size="sm"
+              component="button"
-              title={null}
+              isActive={false}
+              isBlock={false}
+              isDisabled={true}
+              isFocus={false}
+              isHover={false}
+              onClick={[Function]}
+              type="button"
+              variant="plain"
             >
-              <svg
+              <button
-                aria-hidden={true}
+                aria-disabled={null}
-                aria-labelledby={null}
+                aria-label="Delete"
-                className="awx-ToolBarTrashCanIcon"
+                className="pf-c-button pf-m-plain pf-m-disabled ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
-                fill="currentColor"
+                disabled={true}
-                height="1em"
+                onClick={[Function]}
-                role="img"
+                tabIndex={null}
-                style={
+                type="button"
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 448 512"
-                width="1em"
               >
-                <path
+                <TrashAltIcon
-                  d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
+                  color="currentColor"
-                  transform=""
+                  size="sm"
-                />
+                  title={null}
-              </svg>
+                >
-            </TrashAltIcon>
+                  <svg
-          </button>
+                    aria-hidden={true}
-        </Button>
+                    aria-labelledby={null}
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style={
+                      Object {
+                        "verticalAlign": "-0.125em",
+                      }
+                    }
+                    viewBox="0 0 448 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
+                      transform=""
+                    />
+                  </svg>
+                </TrashAltIcon>
+              </button>
+            </Button>
+          </StyledComponent>
+        </ToolbarDeleteButton__Button>
         <Portal
           containerInfo={
             <div>

__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap

@@ -41,20 +41,8 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
               className=""
               dataListCells={
                 Array [
-                  <DataListCell
+                  <ForwardRef>
-                    alignRight={false}
+                    <ForwardRef
-                    className=""
-                    isFilled={true}
-                    isIcon={false}
-                    width={1}
-                  >
-                    <Link
-                      replace={false}
-                      style={
-                        Object {
-                          "marginRight": "1.5em",
-                        }
-                      }
                       to={
                         Object {
                           "pathname": "/foo",
@@ -66,51 +54,33 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                       >
                         Foo
                       </b>
-                    </Link>
+                    </ForwardRef>
-                    <Badge
+                    <ForwardRef
-                      className=""
                       isRead={true}
-                      style={
-                        Object {
-                          "textTransform": "capitalize",
-                        }
-                      }
                     >
                       slack
-                    </Badge>
+                    </ForwardRef>
-                  </DataListCell>,
+                  </ForwardRef>,
-                  <DataListCell
+                  <ForwardRef
-                    alignRight={false}
+                    righthalf="true"
-                    className=""
-                    isFilled={true}
-                    isIcon={false}
-                    style={
-                      Object {
-                        "display": "flex",
-                        "justifyContent": "flex-end",
-                      }
-                    }
-                    width={1}
                   >
-                    <Switch
+                    <ForwardRef
                       aria-label="Toggle notification success"
-                      className=""
                       id="notification-9000-success-toggle"
                       isChecked={false}
                       isDisabled={false}
                       label="Successful"
                       onChange={[Function]}
                     />
-                    <Switch
+                    <ForwardRef
                       aria-label="Toggle notification failure"
-                      className=""
                       id="notification-9000-error-toggle"
                       isChecked={false}
                       isDisabled={false}
                       label="Failure"
                       onChange={[Function]}
                     />
-                  </DataListCell>,
+                  </ForwardRef>,
                 ]
               }
               key=".0"
@@ -119,170 +89,366 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
               <div
                 className="pf-c-data-list__item-content"
               >
-                <DataListCell
+                <NotificationListItem__DataListCell
-                  alignRight={false}
-                  className=""
-                  isFilled={true}
-                  isIcon={false}
                   key="name"
-                  width={1}
                 >
-                  <div
+                  <StyledComponent
-                    className="pf-c-data-list__cell"
+                    forwardedComponent={
-                  >
-                    <Link
-                      replace={false}
-                      style={
-                        Object {
-                          "marginRight": "1.5em",
-                        }
-                      }
-                      to={
-                        Object {
-                          "pathname": "/foo",
-                        }
-                      }
-                    >
-                      <a
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "marginRight": "1.5em",
-                          }
-                        }
-                      >
-                        <b
-                          id="items-list-item-9000"
-                        >
-                          Foo
-                        </b>
-                      </a>
-                    </Link>
-                    <Badge
-                      className=""
-                      isRead={true}
-                      style={
-                        Object {
-                          "textTransform": "capitalize",
-                        }
-                      }
-                    >
-                      <span
-                        className="pf-c-badge pf-m-read"
-                        style={
-                          Object {
-                            "textTransform": "capitalize",
-                          }
-                        }
-                      >
-                        slack
-                      </span>
-                    </Badge>
-                  </div>
-                </DataListCell>
-                <DataListCell
-                  alignRight={false}
-                  className=""
-                  isFilled={true}
-                  isIcon={false}
-                  key="toggles"
-                  style={
-                    Object {
-                      "display": "flex",
-                      "justifyContent": "flex-end",
-                    }
-                  }
-                  width={1}
-                >
-                  <div
-                    className="pf-c-data-list__cell"
-                    style={
                       Object {
-                        "display": "flex",
+                        "$$typeof": Symbol(react.forward_ref),
-                        "justifyContent": "flex-end",
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "NotificationListItem__DataListCell-j7c411-0",
+                          "isStatic": false,
+                          "lastClassName": "hoXOpW",
+                          "rules": Array [
+                            "display:flex;justify-content:",
+                            [Function],
+                            ";padding-bottom:",
+                            [Function],
+                            ";@media screen and (min-width:768px){justify-content:",
+                            [Function],
+                            ";padding-bottom:0;}",
+                          ],
+                        },
+                        "displayName": "NotificationListItem__DataListCell",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
+                        "target": [Function],
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
                       }
                     }
+                    forwardedRef={null}
                   >
-                    <Switch
+                    <DataListCell
-                      aria-label="Toggle notification success"
+                      alignRight={false}
-                      className=""
+                      className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
-                      id="notification-9000-success-toggle"
+                      isFilled={true}
-                      isChecked={false}
+                      isIcon={false}
-                      isDisabled={false}
+                      width={1}
-                      label="Successful"
-                      onChange={[Function]}
                     >
-                      <label
+                      <div
-                        className="pf-c-switch"
+                        className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
-                        htmlFor="notification-9000-success-toggle"
                       >
-                        <input
+                        <Styled(Link)
+                          to={
+                            Object {
+                              "pathname": "/foo",
+                            }
+                          }
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-bdVaJa",
+                                  "isStatic": true,
+                                  "lastClassName": "eBseNd",
+                                  "rules": Array [
+                                    "margin-right: 1.5em;",
+                                  ],
+                                },
+                                "displayName": "Styled(Link)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-bdVaJa",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                            to={
+                              Object {
+                                "pathname": "/foo",
+                              }
+                            }
+                          >
+                            <Link
+                              className="sc-bdVaJa eBseNd"
+                              replace={false}
+                              to={
+                                Object {
+                                  "pathname": "/foo",
+                                }
+                              }
+                            >
+                              <a
+                                className="sc-bdVaJa eBseNd"
+                                onClick={[Function]}
+                              >
+                                <b
+                                  id="items-list-item-9000"
+                                >
+                                  Foo
+                                </b>
+                              </a>
+                            </Link>
+                          </StyledComponent>
+                        </Styled(Link)>
+                        <Styled(Badge)
+                          isRead={true}
+                        >
+                          <StyledComponent
+                            forwardedComponent={
+                              Object {
+                                "$$typeof": Symbol(react.forward_ref),
+                                "attrs": Array [],
+                                "componentStyle": ComponentStyle {
+                                  "componentId": "sc-bwzfXH",
+                                  "isStatic": true,
+                                  "lastClassName": "chTbOZ",
+                                  "rules": Array [
+                                    "text-transform: capitalize;",
+                                  ],
+                                },
+                                "displayName": "Styled(Badge)",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "sc-bwzfXH",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                            isRead={true}
+                          >
+                            <Badge
+                              className="sc-bwzfXH chTbOZ"
+                              isRead={true}
+                            >
+                              <span
+                                className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ"
+                              >
+                                slack
+                              </span>
+                            </Badge>
+                          </StyledComponent>
+                        </Styled(Badge)>
+                      </div>
+                    </DataListCell>
+                  </StyledComponent>
+                </NotificationListItem__DataListCell>
+                <NotificationListItem__DataListCell
+                  key="toggles"
+                  righthalf="true"
+                >
+                  <StyledComponent
+                    forwardedComponent={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "attrs": Array [],
+                        "componentStyle": ComponentStyle {
+                          "componentId": "NotificationListItem__DataListCell-j7c411-0",
+                          "isStatic": false,
+                          "lastClassName": "hoXOpW",
+                          "rules": Array [
+                            "display:flex;justify-content:",
+                            [Function],
+                            ";padding-bottom:",
+                            [Function],
+                            ";@media screen and (min-width:768px){justify-content:",
+                            [Function],
+                            ";padding-bottom:0;}",
+                          ],
+                        },
+                        "displayName": "NotificationListItem__DataListCell",
+                        "foldedComponentIds": Array [],
+                        "render": [Function],
+                        "styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
+                        "target": [Function],
+                        "toString": [Function],
+                        "warnTooManyClasses": [Function],
+                        "withComponent": [Function],
+                      }
+                    }
+                    forwardedRef={null}
+                    righthalf="true"
+                  >
+                    <DataListCell
+                      alignRight={false}
+                      className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
+                      isFilled={true}
+                      isIcon={false}
+                      righthalf="true"
+                      width={1}
+                    >
+                      <div
+                        className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
+                        righthalf="true"
+                      >
+                        <NotificationListItem__Switch
                           aria-label="Toggle notification success"
-                          checked={false}
-                          className="pf-c-switch__input"
-                          disabled={false}
                           id="notification-9000-success-toggle"
+                          isChecked={false}
+                          isDisabled={false}
+                          label="Successful"
                           onChange={[Function]}
-                          type="checkbox"
-                        />
-                        <span
-                          className="pf-c-switch__toggle"
-                        />
-                        <span
-                          aria-hidden="true"
-                          className="pf-c-switch__label pf-m-on"
                         >
-                          Successful
+                          <StyledComponent
-                        </span>
+                            aria-label="Toggle notification success"
-                        <span
+                            forwardedComponent={
-                          aria-hidden="true"
+                              Object {
-                          className="pf-c-switch__label pf-m-off"
+                                "$$typeof": Symbol(react.forward_ref),
-                        >
+                                "attrs": Array [],
-                          Successful
+                                "componentStyle": ComponentStyle {
-                        </span>
+                                  "componentId": "NotificationListItem__Switch-j7c411-1",
-                      </label>
+                                  "isStatic": true,
-                    </Switch>
+                                  "lastClassName": "ceuHGn",
-                    <Switch
+                                  "rules": Array [
-                      aria-label="Toggle notification failure"
+                                    "display:flex;flex-wrap:no-wrap;",
-                      className=""
+                                  ],
-                      id="notification-9000-error-toggle"
+                                },
-                      isChecked={false}
+                                "displayName": "NotificationListItem__Switch",
-                      isDisabled={false}
+                                "foldedComponentIds": Array [],
-                      label="Failure"
+                                "render": [Function],
-                      onChange={[Function]}
+                                "styledComponentId": "NotificationListItem__Switch-j7c411-1",
-                    >
+                                "target": [Function],
-                      <label
+                                "toString": [Function],
-                        className="pf-c-switch"
+                                "warnTooManyClasses": [Function],
-                        htmlFor="notification-9000-error-toggle"
+                                "withComponent": [Function],
-                      >
+                              }
-                        <input
+                            }
+                            forwardedRef={null}
+                            id="notification-9000-success-toggle"
+                            isChecked={false}
+                            isDisabled={false}
+                            label="Successful"
+                            onChange={[Function]}
+                          >
+                            <Switch
+                              aria-label="Toggle notification success"
+                              className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                              id="notification-9000-success-toggle"
+                              isChecked={false}
+                              isDisabled={false}
+                              label="Successful"
+                              onChange={[Function]}
+                            >
+                              <label
+                                className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                htmlFor="notification-9000-success-toggle"
+                              >
+                                <input
+                                  aria-label="Toggle notification success"
+                                  checked={false}
+                                  className="pf-c-switch__input"
+                                  disabled={false}
+                                  id="notification-9000-success-toggle"
+                                  onChange={[Function]}
+                                  type="checkbox"
+                                />
+                                <span
+                                  className="pf-c-switch__toggle"
+                                />
+                                <span
+                                  aria-hidden="true"
+                                  className="pf-c-switch__label pf-m-on"
+                                >
+                                  Successful
+                                </span>
+                                <span
+                                  aria-hidden="true"
+                                  className="pf-c-switch__label pf-m-off"
+                                >
+                                  Successful
+                                </span>
+                              </label>
+                            </Switch>
+                          </StyledComponent>
+                        </NotificationListItem__Switch>
+                        <NotificationListItem__Switch
                           aria-label="Toggle notification failure"
-                          checked={false}
-                          className="pf-c-switch__input"
-                          disabled={false}
                           id="notification-9000-error-toggle"
+                          isChecked={false}
+                          isDisabled={false}
+                          label="Failure"
                           onChange={[Function]}
-                          type="checkbox"
-                        />
-                        <span
-                          className="pf-c-switch__toggle"
-                        />
-                        <span
-                          aria-hidden="true"
-                          className="pf-c-switch__label pf-m-on"
                         >
-                          Failure
+                          <StyledComponent
-                        </span>
+                            aria-label="Toggle notification failure"
-                        <span
+                            forwardedComponent={
-                          aria-hidden="true"
+                              Object {
-                          className="pf-c-switch__label pf-m-off"
+                                "$$typeof": Symbol(react.forward_ref),
-                        >
+                                "attrs": Array [],
-                          Failure
+                                "componentStyle": ComponentStyle {
-                        </span>
+                                  "componentId": "NotificationListItem__Switch-j7c411-1",
-                      </label>
+                                  "isStatic": true,
-                    </Switch>
+                                  "lastClassName": "ceuHGn",
-                  </div>
+                                  "rules": Array [
-                </DataListCell>
+                                    "display:flex;flex-wrap:no-wrap;",
+                                  ],
+                                },
+                                "displayName": "NotificationListItem__Switch",
+                                "foldedComponentIds": Array [],
+                                "render": [Function],
+                                "styledComponentId": "NotificationListItem__Switch-j7c411-1",
+                                "target": [Function],
+                                "toString": [Function],
+                                "warnTooManyClasses": [Function],
+                                "withComponent": [Function],
+                              }
+                            }
+                            forwardedRef={null}
+                            id="notification-9000-error-toggle"
+                            isChecked={false}
+                            isDisabled={false}
+                            label="Failure"
+                            onChange={[Function]}
+                          >
+                            <Switch
+                              aria-label="Toggle notification failure"
+                              className="NotificationListItem__Switch-j7c411-1 ceuHGn"
+                              id="notification-9000-error-toggle"
+                              isChecked={false}
+                              isDisabled={false}
+                              label="Failure"
+                              onChange={[Function]}
+                            >
+                              <label
+                                className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
+                                htmlFor="notification-9000-error-toggle"
+                              >
+                                <input
+                                  aria-label="Toggle notification failure"
+                                  checked={false}
+                                  className="pf-c-switch__input"
+                                  disabled={false}
+                                  id="notification-9000-error-toggle"
+                                  onChange={[Function]}
+                                  type="checkbox"
+                                />
+                                <span
+                                  className="pf-c-switch__toggle"
+                                />
+                                <span
+                                  aria-hidden="true"
+                                  className="pf-c-switch__label pf-m-on"
+                                >
+                                  Failure
+                                </span>
+                                <span
+                                  aria-hidden="true"
+                                  className="pf-c-switch__label pf-m-off"
+                                >
+                                  Failure
+                                </span>
+                              </label>
+                            </Switch>
+                          </StyledComponent>
+                        </NotificationListItem__Switch>
+                      </div>
+                    </DataListCell>
+                  </StyledComponent>
+                </NotificationListItem__DataListCell>
               </div>
             </DataListItemCells>
           </div>

babel.config.js

@@ -2,6 +2,7 @@ module.exports = api => {
   api.cache(false);
   return {
     plugins: [
+      'babel-plugin-styled-components',
       '@babel/plugin-proposal-class-properties',
       'macros'
     ],

package-lock.json

@@ -163,7 +163,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
       "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -1134,6 +1133,21 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz",
       "integrity": "sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
+      "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
+      "requires": {
+        "@emotion/memoize": "0.7.1"
+      },
+      "dependencies": {
+        "@emotion/memoize": {
+          "version": "0.7.1",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
+          "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+        }
+      }
+    },
     "@emotion/memoize": {
       "version": "0.6.6",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
@@ -2219,7 +2233,7 @@
     },
     "ansi-colors": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
       "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
       "requires": {
         "ansi-wrap": "^0.1.0"
@@ -3237,14 +3251,25 @@
         "resolve": "^1.8.1"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz",
+      "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.10"
+      }
+    },
     "babel-plugin-syntax-class-properties": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
       "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
     },
     "babel-plugin-syntax-flow": {
       "version": "6.18.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
       "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
     },
     "babel-plugin-syntax-jsx": {
@@ -4154,6 +4179,11 @@
         }
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-lite": {
       "version": "1.0.30000902",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000902.tgz",
@@ -4885,6 +4915,11 @@
         "urix": "^0.1.0"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-loader": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
@@ -4962,6 +4997,16 @@
         }
       }
     },
+    "css-to-react-native": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz",
+      "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -5421,7 +5466,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "requires": {
             "core-util-is": "~1.0.0",
@@ -6640,7 +6685,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "requires": {
             "core-util-is": "~1.0.0",
@@ -7027,8 +7072,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7049,14 +7093,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7071,20 +7113,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7201,8 +7240,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7214,7 +7252,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7229,7 +7266,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7237,14 +7273,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -7263,7 +7297,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7344,8 +7377,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7357,7 +7389,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7443,8 +7474,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7480,7 +7510,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7500,7 +7529,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7544,14 +7572,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -7803,8 +7829,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-      "dev": true
     },
     "has-symbols": {
       "version": "1.0.0",
@@ -10625,7 +10650,7 @@
     },
     "kind-of": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
       "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ="
     },
     "kleur": {
@@ -10951,6 +10976,11 @@
         }
       }
     },
+    "memoize-one": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
+      "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -12639,8 +12669,7 @@
     "postcss-value-parser": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-      "dev": true
     },
     "prelude-ls": {
       "version": "1.1.2",
@@ -14922,6 +14951,39 @@
         "schema-utils": "^1.0.0"
       }
     },
+    "styled-components": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz",
+      "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/is-prop-valid": "^0.7.3",
+        "@emotion/unitless": "^0.7.0",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^2.2.2",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.5.4",
+        "react-is": "^16.6.0",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "@emotion/unitless": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
+          "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "stylis": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",

package.json

@@ -28,6 +28,7 @@
     "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.4",
     "babel-plugin-macros": "^2.4.2",
+    "babel-plugin-styled-components": "^1.10.0",
     "css-loader": "^1.0.0",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
@@ -59,6 +60,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-router-dom": "^4.3.1"
+    "react-router-dom": "^4.3.1",
+    "styled-components": "^4.2.0"
   }
 }

src/app.scss

@@ -128,17 +128,6 @@
   --pf-c-data-list__cell--PaddingTop: 16px;
   --pf-c-data-list__cell-cell--PaddingTop: 16px;
 
-  .awx-c-list-group {
-    display: inline-flex;
-    margin-right: 20px;
-
-    &--badge {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      margin-left: 10px;
-    }
-  }
 
   &.pf-c-data-list__cell--divider {
     --pf-c-data-list__cell-cell--MarginRight: 0;

src/components/DataListToolbar/DataListToolbar.jsx

@@ -4,18 +4,71 @@ import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Checkbox,
-  Level,
+  Toolbar as PFToolbar,
-  LevelItem,
+  ToolbarGroup as PFToolbarGroup,
-  Toolbar,
-  ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
 
+import styled from 'styled-components';
 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
 import Sort from '../Sort';
 import VerticalSeparator from '../VerticalSeparator';
 
+const AWXToolbar = styled.div`
+  --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --awx-toolbar--BorderColor: #ebebeb;
+  --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
+
+  --pf-global--target-size--MinHeight: 0;
+  --pf-global--target-size--MinWidth: 0;
+  --pf-global--FontSize--md: 14px;
+
+  border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
+  background-color: var(--awx-toolbar--BackgroundColor);
+  display: flex;
+  min-height: 70px;
+  flex-grow: 1;
+`;
+
+const Toolbar = styled(PFToolbar)`
+  flex-grow: 1;
+  margin-left: ${props => (props.marginleft ? '0' : '20px')};
+`;
+
+const ToolbarGroup = styled(PFToolbarGroup)`
+  &&& {
+    margin: 0;
+  }
+`;
+
+const ColumnLeft = styled.div`
+  display: flex;
+  flex-basis: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10px 0 8px 0;
+
+  @media screen and (min-width: 980px) {
+    flex-basis: 50%;
+  }
+`;
+
+const ColumnRight = styled(ColumnLeft)`
+  padding: 8px 0 10px 0;
+
+  @media screen and (min-width: 980px) {
+    margin-left: 0;
+    padding: 10px 0 8px 0;
+  }
+`;
+
+const AdditionalControlsWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+`;
+
 class DataListToolbar extends React.Component {
   render () {
     const {
@@ -38,67 +91,62 @@ class DataListToolbar extends React.Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <div className="awx-toolbar">
+          <AWXToolbar>
-            <Level>
+            <Toolbar marginleft={noLeftMargin ? 1 : 0}>
-              <LevelItem style={{ display: 'flex', flexBasis: '700px' }}>
+              <ColumnLeft>
-                <Toolbar style={{ marginLeft: noLeftMargin ? '0px' : '20px', flexGrow: '1' }}>
+                { showSelectAll && (
-                  { showSelectAll && (
+                  <Fragment>
-                    <ToolbarGroup>
+                    <ToolbarItem>
-                      <ToolbarItem>
+                      <Checkbox
-                        <Checkbox
+                        checked={isAllSelected}
-                          checked={isAllSelected}
+                        onChange={onSelectAll}
-                          onChange={onSelectAll}
+                        aria-label={i18n._(t`Select all`)}
-                          aria-label={i18n._(t`Select all`)}
+                        id="select-all"
-                          id="select-all"
-                        />
-                      </ToolbarItem>
-                      <VerticalSeparator />
-                    </ToolbarGroup>
-                  )}
-                  <ToolbarGroup style={{ flexGrow: '1' }}>
-                    <ToolbarItem style={{ flexGrow: '1' }}>
-                      <Search
-                        columns={columns}
-                        onSearch={onSearch}
-                        sortedColumnKey={sortedColumnKey}
                       />
                     </ToolbarItem>
                     <VerticalSeparator />
-                  </ToolbarGroup>
+                  </Fragment>
-                  <ToolbarGroup
+                )}
-                    className="sortDropdownGroup"
+                <ToolbarItem css="flex-grow: 1;">
-                  >
+                  <Search
-                    <ToolbarItem>
+                    columns={columns}
-                      <Sort
+                    onSearch={onSearch}
-                        columns={columns}
+                    sortedColumnKey={sortedColumnKey}
-                        onSort={onSort}
+                  />
-                        sortOrder={sortOrder}
+                </ToolbarItem>
-                        sortedColumnKey={sortedColumnKey}
+                <VerticalSeparator />
+              </ColumnLeft>
+              <ColumnRight>
+                <ToolbarItem>
+                  <Sort
+                    columns={columns}
+                    onSort={onSort}
+                    sortOrder={sortOrder}
+                    sortedColumnKey={sortedColumnKey}
+                  />
+                </ToolbarItem>
+                {showExpandCollapse && (
+                  <Fragment>
+                    <VerticalSeparator />
+                    <ToolbarGroup>
+                      <ExpandCollapse
+                        isCompact={isCompact}
+                        onCompact={onCompact}
+                        onExpand={onExpand}
                       />
-                    </ToolbarItem>
+                    </ToolbarGroup>
-                  </ToolbarGroup>
+                    { additionalControls && (
-                  {showExpandCollapse && (
-                    <Fragment>
                       <VerticalSeparator />
-                      <ToolbarGroup>
+                    )}
-                        <ExpandCollapse
+                  </Fragment>
-                          isCompact={isCompact}
+                )}
-                          onCompact={onCompact}
+                <AdditionalControlsWrapper>
-                          onExpand={onExpand}
+                  {additionalControls}
-                        />
+                </AdditionalControlsWrapper>
-                      </ToolbarGroup>
+              </ColumnRight>
-                      { additionalControls && (
+            </Toolbar>
-                        <VerticalSeparator />
+          </AWXToolbar>
-                      )}
+
-                    </Fragment>
-                  )}
-                </Toolbar>
-              </LevelItem>
-              <LevelItem>
-                {additionalControls}
-              </LevelItem>
-            </Level>
-          </div>
         )}
       </I18n>
     );

src/components/DataListToolbar/styles.scss

@@ -1,108 +0,0 @@
-.awx-toolbar {
-  --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --awx-toolbar--BorderColor: #ebebeb;
-  --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
-
-  border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
-  background-color: var(--awx-toolbar--BackgroundColor);
-  display: flex;
-  height: 70px;
-  padding-top: 5px;
-
-  --pf-global--target-size--MinHeight: 0px;
-  --pf-global--target-size--MinWidth: 0px;
-  --pf-global--FontSize--md: 14px;
-}
-
-.awx-toolbar .pf-l-level {
-  flex: 1;
-}
-
-.awx-toolbar .pf-c-button.pf-m-plain {
-  --pf-c-button--m-plain--PaddingLeft: 0px;
-  --pf-c-button--m-plain--PaddingRight: 0px;
-}
-
-.awx-toolbar .pf-l-toolbar__group {
-    --pf-l-toolbar__group--MarginRight: 0px;
-    --pf-l-toolbar__group--MarginLeft: 0px;
-}
-
-.awx-toolbar button.pf-c-button {
-  height: 30px;
-  width: 30px;
-  padding: 0px;
-}
-
-.awx-toolbar .pf-c-input-group {
-  min-height: 0px;
-  height: 30px;
-
-  .pf-m-tertiary {
-    width: 34px;
-    padding: 0px;
-  }
-}
-
-.awx-toolbar .pf-c-dropdown__toggle {
-  min-height: 30px;
-  min-width: 70px;
-  height: 30px;
-  padding: 0 10px;
-  margin: 0px;
-
-  .pf-c-dropdown__toggle-text {
-    width: auto;
-  }
-
-  .pf-c-dropdown__toggle-icon {
-    margin: 0px;
-    padding-top: 3px;
-    padding-left: 3px;
-  }
-}
-
-.awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button {
-  margin-left: 20px;
-}
-
-.awx-toolbar .pf-c-button.pf-m-primary {
-  background-color: #5cb85c;
-  min-width: 0px;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  padding: 0px;
-  margin: 0px;
-  margin-right: 20px;
-}
-
-.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
-  font-size: 18px;
-}
-
-.awx-ToolBarBtn {
-  width: 30px;
-  display: flex;
-  justify-content: center;
-  margin-right: 20px;
-  border-radius: 3px;
-
-  &[disabled] {
-    cursor: not-allowed;
-  }
-}
-
-.awx-ToolBarBtn:hover {
-  .awx-ToolBarTrashCanIcon {
-    color: white;
-  }
-  background-color:#d9534f;
-}
-
-.awx-ToolBarBtn[disabled]:hover {
-  .awx-ToolBarTrashCanIcon {
-    color: #d2d2d2;
-  }
-  background-color: white;
-}

src/components/NotificationsList/NotificationListItem.jsx

@@ -5,13 +5,31 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
   Badge,
-  Switch,
+  Switch as PFSwitch,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
-  DataListCell,
+  DataListCell as PFDataListCell,
 } from '@patternfly/react-core';
 
+import styled from 'styled-components';
+
+const DataListCell = styled(PFDataListCell)`
+  display: flex;
+  justify-content: ${props => (props.righthalf ? 'flex-start' : 'inherit')};
+  padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
+  
+  @media screen and (min-width: 768px) {
+    justify-content: ${props => (props.righthalf ? 'flex-end' : 'inherit')};
+    padding-bottom: 0;
+  }
+`;
+
+const Switch = styled(PFSwitch)`
+  display: flex;
+  flex-wrap: no-wrap;
+`;
+
 function NotificationListItem (props) {
   const {
     canToggleNotifications,
@@ -21,13 +39,6 @@ function NotificationListItem (props) {
     errorTurnedOn,
     toggleNotification
   } = props;
-  const capText = {
-    textTransform: 'capitalize'
-  };
-  const toggleCellStyles = {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  };
 
   return (
     <I18n>
@@ -43,18 +54,18 @@ function NotificationListItem (props) {
                   to={{
                     pathname: detailUrl
                   }}
-                  style={{ marginRight: '1.5em' }}
+                  css="margin-right: 1.5em;"
                 >
                   <b id={`items-list-item-${notification.id}`}>{notification.name}</b>
                 </Link>
                 <Badge
-                  style={capText}
+                  css="text-transform: capitalize;"
                   isRead
                 >
                   {notification.notification_type}
                 </Badge>
               </DataListCell>,
-              <DataListCell key="toggles" style={toggleCellStyles}>
+              <DataListCell righthalf="true" key="toggles">
                 <Switch
                   id={`notification-${notification.id}-success-toggle`}
                   label={i18n._(t`Successful`)}

src/components/PaginatedDataList/ToolbarAddButton.jsx

@@ -1,10 +1,24 @@
 import React from 'react';
 import { string, func } from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Button } from '@patternfly/react-core';
+import { Button as PFButton } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import styled from 'styled-components';
+
+const Button = styled(PFButton)`
+  &&& { /* higher specificity order */
+    background-color: #5cb85c;
+    min-width: 0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    margin-right: 20px;
+  }
+`;
 
 function ToolbarAddButton ({ linkTo, onClick }) {
   if (!linkTo && !onClick) {
@@ -15,7 +29,7 @@ function ToolbarAddButton ({ linkTo, onClick }) {
     return (
       <I18n>
         {({ i18n }) => (
-          <Link to={linkTo} className="pf-c-button pf-m-primary">
+          <Link to={linkTo}>
             <Button
               variant="primary"
               aria-label={i18n._(t`Add`)}

src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -1,12 +1,42 @@
 import React, { Fragment } from 'react';
 import { func, bool, number, string, arrayOf, shape } from 'prop-types';
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Button as PFButton, Tooltip } from '@patternfly/react-core';
 import { TrashAltIcon } from '@patternfly/react-icons';
 import { I18n, i18nMark } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
+import styled from 'styled-components';
 import AlertModal from '../AlertModal';
 import { pluralize } from '../../util/strings';
 
+const Button = styled(PFButton)`
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  margin-right: 20px;
+  border-radius: 3px;
+  padding: 0;
+
+
+  &:disabled {
+    cursor: not-allowed;
+    &:hover {
+      background-color: white;
+
+      > svg {
+        color: #d2d2d2;
+      }
+    }
+  }
+
+  &:hover {
+    background-color:#d9534f;
+    > svg {
+      color: white;
+    }
+  }
+`;
+
 const ItemToDelete = shape({
   id: number.isRequired,
   name: string.isRequired,
@@ -102,13 +132,12 @@ class ToolbarDeleteButton extends React.Component {
               position="left"
             >
               <Button
-                className="awx-ToolBarBtn"
                 variant="plain"
                 aria-label={i18n._(t`Delete`)}
                 onClick={this.handleConfirmDelete}
                 isDisabled={isDisabled}
               >
-                <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
+                <TrashAltIcon />
               </Button>
             </Tooltip>
             { isModalOpen && (

src/components/Search/Search.jsx

@@ -3,17 +3,50 @@ import PropTypes from 'prop-types';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
-  Button,
+  Button as PFButton,
-  Dropdown,
+  Dropdown as PFDropdown,
   DropdownPosition,
   DropdownToggle,
   DropdownItem,
-  TextInput
+  TextInput as PFTextInput
 } from '@patternfly/react-core';
 import {
   SearchIcon
 } from '@patternfly/react-icons';
 
+import styled from 'styled-components';
+
+const TextInput = styled(PFTextInput)`
+  min-height: 0px;
+  height: 30px;
+`;
+
+const Button = styled(PFButton)`
+  width: 34px;
+  padding: 0px;
+`;
+
+const Dropdown = styled(PFDropdown)`
+  &&& { /* Higher specificity required because we are selecting unclassed elements */
+    > button {
+      min-height: 30px;
+      min-width: 70px;
+      height: 30px;
+      padding: 0 10px;
+      margin: 0px;
+
+      > span { /* text element */
+        width: auto;
+      }
+
+      > svg { /* caret icon */
+        margin: 0px;
+        padding-top: 3px;
+        padding-left: 3px;
+      }
+    }
+  }  
+`;
 class Search extends React.Component {
   constructor (props) {
     super(props);
@@ -80,13 +113,13 @@ class Search extends React.Component {
         {({ i18n }) => (
           <div className="pf-c-input-group">
             <Dropdown
-              className="searchKeyDropdown"
               onToggle={this.handleDropdownToggle}
               onSelect={this.handleDropdownSelect}
               direction={up}
               isOpen={isSearchDropdownOpen}
               toggle={(
                 <DropdownToggle
+                  id="awx-search"
                   onToggle={this.handleDropdownToggle}
                 >
                   {searchColumnName}

src/components/Sort/Sort.jsx

@@ -4,7 +4,7 @@ import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
-  Dropdown,
+  Dropdown as PFDropdown,
   DropdownPosition,
   DropdownToggle,
   DropdownItem
@@ -16,6 +16,36 @@ import {
   SortNumericUpIcon
 } from '@patternfly/react-icons';
 
+import styled from 'styled-components';
+
+const Dropdown = styled(PFDropdown)`
+  &&& {
+    > button {
+      min-height: 30px;
+      min-width: 70px;
+      height: 30px;
+      padding: 0 10px;
+      margin: 0px;
+
+      > span { /* text element within dropdown */
+        width: auto;
+      }
+
+      > svg { /* caret icon */
+        margin: 0px;
+        padding-top: 3px;
+        padding-left: 3px;
+      }
+    }
+  }  
+`;
+
+const IconWrapper = styled.span`
+  > svg {
+    font-size: 18px;
+  }
+`;
+
 class Sort extends React.Component {
   constructor (props) {
     super(props);
@@ -60,7 +90,6 @@ class Sort extends React.Component {
     const {
       isSortDropdownOpen
     } = this.state;
-
     const [{ name: sortedColumnName, isNumeric }] = columns
       .filter(({ key }) => key === sortedColumnKey);
 
@@ -92,6 +121,7 @@ class Sort extends React.Component {
                 isOpen={isSortDropdownOpen}
                 toggle={(
                   <DropdownToggle
+                    id="awx-sort"
                     onToggle={this.handleDropdownToggle}
                   >
                     {sortedColumnName}
@@ -104,8 +134,11 @@ class Sort extends React.Component {
               onClick={this.handleSort}
               variant="plain"
               aria-label={i18n._(t`Sort`)}
+              css="padding: 0;"
             >
-              <SortIcon />
+              <IconWrapper>
+                <SortIcon />
+              </IconWrapper>
             </Button>
           </React.Fragment>
         )}

src/index.jsx

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

src/pages/Organizations/components/OrganizationListItem.jsx

@@ -2,20 +2,52 @@ import React from 'react';
 import { string, bool, func } from 'prop-types';
 import { Trans } from '@lingui/macro';
 import {
-  Badge,
+  Badge as PFBadge,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
   DataListCheck,
-  DataListCell,
+  DataListCell as PFDataListCell,
 } from '@patternfly/react-core';
 import {
   Link
 } from 'react-router-dom';
 
+import styled from 'styled-components';
+
 import VerticalSeparator from '../../../components/VerticalSeparator';
 import { Organization } from '../../../types';
 
+const Badge = styled(PFBadge)`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-left: 10px;
+`;
+
+const ListGroup = styled.span`
+  display: flex;
+  margin-left: 40px;
+
+  @media screen and (min-width: 768px) {
+    margin-left: 20px;
+
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
+`;
+
+const DataListCell = styled(PFDataListCell)`
+  display: flex;
+  align-items: center;
+  padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
+
+  @media screen and (min-width: 768px) {
+    padding-bottom: 0;
+  }
+`;
+
 class OrganizationListItem extends React.Component {
   static propTypes = {
     organization: Organization.isRequired,
@@ -42,10 +74,8 @@ class OrganizationListItem extends React.Component {
             aria-labelledby={labelId}
           />
           <DataListItemCells dataListCells={[
-            <DataListCell key="divider" className="pf-c-data-list__cell--divider">
+            <DataListCell key="divider">
               <VerticalSeparator />
-            </DataListCell>,
-            <DataListCell key="org-name">
               <span id={labelId}>
                 <Link
                   to={`${detailUrl}`}
@@ -54,19 +84,19 @@ class OrganizationListItem extends React.Component {
                 </Link>
               </span>
             </DataListCell>,
-            <DataListCell key="org-members" width={2}>
+            <DataListCell key="org-members" righthalf="true" width={2}>
-              <span className="awx-c-list-group">
+              <ListGroup>
                 <Trans>Members</Trans>
-                <Badge className="awx-c-list-group--badge" isRead>
+                <Badge isRead>
                   {organization.summary_fields.related_field_counts.users}
                 </Badge>
-              </span>
+              </ListGroup>
-              <span className="awx-c-list-group">
+              <ListGroup>
                 <Trans>Teams</Trans>
-                <Badge className="awx-c-list-group--badge" isRead>
+                <Badge isRead>
                   {organization.summary_fields.related_field_counts.teams}
                 </Badge>
-              </span>
+              </ListGroup>
             </DataListCell>
           ]}
           />