From a87c6ddf1b87c6c5c2ebb2e1b55e06d9ccf7a9bd Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Fri, 10 May 2019 17:21:31 -0400
Subject: [PATCH] Convert DataListToolbar to a styled-component.

---
 .../DataListToolbar/DataListToolbar.jsx       | 51 ++++++++----
 src/components/DataListToolbar/styles.scss    | 78 ++++++++++---------
 .../PaginatedDataList/ToolbarDeleteButton.jsx |  1 +
 src/components/Search/Search.jsx              | 43 +++++++++-
 src/components/Sort/Sort.jsx                  | 38 ++++++++-
 5 files changed, 153 insertions(+), 58 deletions(-)

diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index 74f57e1fd6..070c56359f 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -6,16 +6,43 @@ import {
   Checkbox,
   Level,
   LevelItem,
-  Toolbar,
-  ToolbarGroup,
+  Toolbar as PFToolbar,
+  ToolbarGroup as PFToolbarGroup,
   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);
+
+  border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
+  background-color: var(--awx-toolbar--BackgroundColor);
+  display: flex;
+  min-height: 70px;
+  padding-top: 5px;
+
+  --pf-global--target-size--MinHeight: 0px;
+  --pf-global--target-size--MinWidth: 0px;
+  --pf-global--FontSize--md: 14px;
+`;
+
+const Toolbar = styled(PFToolbar)`
+  flex-grow: 1;
+  margin-left: ${props => (props.noleftmargin ? '0' : '20px')};
+`;
+
+const ToolbarGroup = styled(PFToolbarGroup)`
+  &&& {
+    margin: 0;
+  }
+`;
 class DataListToolbar extends React.Component {
   render () {
     const {
@@ -38,12 +65,12 @@ class DataListToolbar extends React.Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <div className="awx-toolbar">
-            <Level>
-              <LevelItem style={{ display: 'flex', flexBasis: '700px' }}>
-                <Toolbar style={{ marginLeft: noLeftMargin ? '0px' : '20px', flexGrow: '1' }}>
+          <AWXToolbar className="awx-toolbar">
+            <Level css="flex-grow: 1;">
+              <LevelItem css="display: flex; flex-basis: 700px">
+                <Toolbar noleftmargin={noLeftMargin}>
                   { showSelectAll && (
-                    <ToolbarGroup>
+                    <ToolbarGroup css="margin: 0;">
                       <ToolbarItem>
                         <Checkbox
                           checked={isAllSelected}
@@ -55,8 +82,8 @@ class DataListToolbar extends React.Component {
                       <VerticalSeparator />
                     </ToolbarGroup>
                   )}
-                  <ToolbarGroup style={{ flexGrow: '1' }}>
-                    <ToolbarItem style={{ flexGrow: '1' }}>
+                  <ToolbarGroup css="margin: 0; flex-grow: 1;">
+                    <ToolbarItem css="flex-grow: 1;">
                       <Search
                         columns={columns}
                         onSearch={onSearch}
@@ -65,9 +92,7 @@ class DataListToolbar extends React.Component {
                     </ToolbarItem>
                     <VerticalSeparator />
                   </ToolbarGroup>
-                  <ToolbarGroup
-                    className="sortDropdownGroup"
-                  >
+                  <ToolbarGroup>
                     <ToolbarItem>
                       <Sort
                         columns={columns}
@@ -100,7 +125,7 @@ class DataListToolbar extends React.Component {
                 {additionalControls}
               </LevelItem>
             </Level>
-          </div>
+          </AWXToolbar>
         )}
       </I18n>
     );
diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss
index 721855f930..fb10fa7168 100644
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -1,69 +1,71 @@
 .awx-toolbar {
-  --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --awx-toolbar--BorderColor: #ebebeb;
-  --awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
+  // --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;
+  // 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;
+  // --pf-global--target-size--MinHeight: 0px;
+  // --pf-global--target-size--MinWidth: 0px;
+  // --pf-global--FontSize--md: 14px;
 }
 
 .awx-toolbar .pf-l-level {
-  flex: 1;
+  // flex: 1;
 }
 
 .awx-toolbar .pf-c-button.pf-m-plain {
-  --pf-c-button--m-plain--PaddingLeft: 0px;
-  --pf-c-button--m-plain--PaddingRight: 0px;
+  // --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;
+    // --pf-l-toolbar__group--MarginRight: 0px;
+    // --pf-l-toolbar__group--MarginLeft: 0px;
 }
 
 .awx-toolbar button.pf-c-button {
-  height: 30px;
-  width: 30px;
-  padding: 0px;
+  // height: 30px;
+  // width: 30px;
+  // padding: 0px;
 }
 
-.awx-toolbar .pf-c-input-group {
-  min-height: 0px;
-  height: 30px;
+// SEARCH
+// .awx-toolbar .pf-c-input-group {
+//   // min-height: 0px;
+//   // height: 30px;
 
-  .pf-m-tertiary {
-    width: 34px;
-    padding: 0px;
-  }
-}
+//   .pf-m-tertiary {
+//     // width: 34px;
+//     // padding: 0px;
+//   }
+// }
 
+// SEARCH
 .awx-toolbar .pf-c-dropdown__toggle {
-  min-height: 30px;
-  min-width: 70px;
-  height: 30px;
-  padding: 0 10px;
-  margin: 0px;
+  // min-height: 30px;
+  // min-width: 70px;
+  // height: 30px;
+  // padding: 0 10px;
+  // margin: 0px;
 
   .pf-c-dropdown__toggle-text {
-    width: auto;
+    // width: auto;
   }
 
   .pf-c-dropdown__toggle-icon {
-    margin: 0px;
-    padding-top: 3px;
-    padding-left: 3px;
+    // margin: 0px;
+    // padding-top: 3px;
+    // padding-left: 3px;
   }
 }
 
 .awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button {
-  margin-left: 20px;
+  // margin-left: 20px;
 }
 
 // .awx-toolbar .pf-c-button.pf-m-primary {
@@ -78,7 +80,7 @@
 // }
 
 .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
-  font-size: 18px;
+  // font-size: 18px;
 }
 
 // .awx-ToolBarBtn {
diff --git a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
index 49600c19e9..d9ff520ee2 100644
--- a/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
@@ -15,6 +15,7 @@ const Button = styled(PFButton)`
   justify-content: center;
   margin-right: 20px;
   border-radius: 3px;
+  padding: 0;
 
 
   &:disabled {
diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
index ec23b2d071..4df3abf9bc 100644
--- a/src/components/Search/Search.jsx
+++ b/src/components/Search/Search.jsx
@@ -3,14 +3,49 @@ import PropTypes from 'prop-types';
 import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
-  Button,
-  Dropdown,
+  Button as PFButton,
+  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);
@@ -103,7 +138,7 @@ class Search extends React.Component {
               aria-label={i18n._(t`Search`)}
               onClick={this.handleSearch}
             >
-              <i className="fas fa-search" aria-hidden="true" />
+              <SearchIcon />
             </Button>
           </div>
         )}
diff --git a/src/components/Sort/Sort.jsx b/src/components/Sort/Sort.jsx
index 3f1e6f592e..283bfb2dc3 100644
--- a/src/components/Sort/Sort.jsx
+++ b/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 { /* carret 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);
 
@@ -104,8 +133,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>
         )}