refactor(core/search): Use flex classes

spinnaker · Jan 20, 2018 · 864ecc6 · 864ecc6
1 parent f9d7528
commit 864ecc6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 20 deletions.
diff --git a/app/scripts/modules/core/src/search/searchResult/DefaultSearchResultTab.tsx b/app/scripts/modules/core/src/search/searchResult/DefaultSearchResultTab.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as classNames from 'classnames';
 
 import { Spinner } from 'core/widgets';
 import { Tooltip } from 'core/presentation';
@@ -22,12 +21,6 @@ export class DefaultSearchResultTab extends React.Component<ISearchResultTabProp
     const resultsCount = results.length;
     const countLabel = resultsCount < SearchService.DEFAULT_PAGE_SIZE ? `${resultsCount}` : `${resultsCount}+`;
 
-    const className = classNames({
-      'search-group': true,
-      'search-group--focus': isActive,
-      'search-group--blur': !isActive,
-    });
-
     const Badge = () => {
       switch (status) {
         case SearchStatus.SEARCHING:
@@ -49,11 +42,13 @@ export class DefaultSearchResultTab extends React.Component<ISearchResultTabProp
       }
     };
 
+    const focusOrBlurClass = isActive ? 'search-group--focus' : 'search-group--blur';
+
     return (
-      <div className={className}>
-        <span className={`search-group-icon ${iconClass}`}/>
-        <div className="search-group-name">{type.displayName}</div>
-        <Badge/>
+      <div className={`flex-container-h baseline search-group ${focusOrBlurClass}`}>
+        <span className={`flex-nogrow search-group-icon ${iconClass}`}/>
+        <div className="flex-grow search-group-name">{type.displayName}</div>
+        <div className="flex-nogrow"><Badge/></div>
       </div>
     );
   }

diff --git a/app/scripts/modules/core/src/search/searchResult/searchResults.less b/app/scripts/modules/core/src/search/searchResult/searchResults.less
@@ -19,13 +19,7 @@
     width: 275px;
 
     .search-group {
-      > * {
-        flex: 0 0 auto;
-      }
-
-      align-items: baseline;
       .clickable();
-      display: flex;
       padding: 10px;
       margin-bottom: 1px;
 
@@ -44,7 +38,6 @@
 
       .search-group-name {
         color: var(--color-primary);
-        flex: 1 1 auto;
         font-size: 110%;
         font-weight: 600;
         text-transform: uppercase;
@@ -69,6 +62,7 @@
       &:hover {
         background-color: var(--color-accent-g2);
         transition: all 0.15s ease-in-out;
+
         &.faded {
           background-color: var(--color-alabaster);
         }
@@ -77,8 +71,6 @@
   }
 
   .search-result-grid {
-
-    flex: 1 0 auto;
     padding-left: 15px;
 
     .small {