Fleet UI styleguide update: Replace all search bars and icons with new styling (#12312)

frontend/components/TableContainer/_styles.scss

@@ -105,17 +105,6 @@
       }
     }
 
-    &::before {
-      display: inline-block;
-      position: absolute;
-      padding: 5px 0 0 0; // centers spin
-      content: url(../assets/images/icon-search-fleet-black-16x16@2x.png);
-      transform: scale(0.5);
-      height: 20px;
-      top: 3px;
-      left: 8px;
-    }
-
     .input-field {
       padding-left: 42px;
       width: 100%;

frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.jsx

@@ -32,6 +32,8 @@ class ConfirmInviteForm extends Component {
           <InputFieldWithIcon
             {...fields.name}
             autofocus
+            role="textbox"
+            label="Full name"
             placeholder="Full name"
             inputOptions={{
               maxLength: "80",
@@ -39,6 +41,7 @@ class ConfirmInviteForm extends Component {
           />
           <InputFieldWithIcon
             {...fields.password}
+            label="Password"
             placeholder="Password"
             type="password"
             hint={[
@@ -47,6 +50,7 @@ class ConfirmInviteForm extends Component {
           />
           <InputFieldWithIcon
             {...fields.password_confirmation}
+            label="Confirm password"
             placeholder="Confirm password"
             type="password"
           />

frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx

@@ -4,12 +4,11 @@ import PropTypes from "prop-types";
 import Button from "components/buttons/Button";
 import Form from "components/forms/Form";
 import formFieldInterface from "interfaces/form_field";
-import helpers from "components/forms/ForgotPasswordForm/helpers";
 import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon";
+import validate from "./validate";
 
 const baseClass = "forgot-password-form";
 const fieldNames = ["email"];
-const { validate } = helpers;
 
 class ForgotPasswordForm extends Component {
   static propTypes = {
@@ -26,7 +25,12 @@ class ForgotPasswordForm extends Component {
     return (
       <form onSubmit={handleSubmit} className={baseClass} autoComplete="off">
         {baseError && <div className="form__base-error">{baseError}</div>}
-        <InputFieldWithIcon {...fields.email} autofocus placeholder="Email" />
+        <InputFieldWithIcon
+          {...fields.email}
+          autofocus
+          label="Email"
+          placeholder="Email"
+        />
         <div className={`${baseClass}__button-wrap`}>
           <Button
             className={`${baseClass}__submit-btn`}

frontend/components/forms/ForgotPasswordForm/validate.js

@@ -1,14 +1,14 @@
 import { size } from "lodash";
 import validatePresence from "components/forms/validators/validate_presence";
-import validEmail from "components/forms/validators/valid_email";
+import validateEmail from "components/forms/validators/valid_email";
 
 const validate = (formData) => {
-  const { email } = formData;
   const errors = {};
+  const { email } = formData;
 
   if (!validatePresence(email)) {
     errors.email = "Email field must be completed";
-  } else if (!validEmail(email)) {
+  } else if (!validateEmail(email)) {
     errors.email = "Email must be a valid email address";
   }
 
@@ -17,4 +17,4 @@ const validate = (formData) => {
   return { valid, errors };
 };
 
-export default { validate };
+export default validate;

frontend/components/forms/LoginForm/LoginForm.jsx

@@ -85,9 +85,15 @@ class LoginForm extends Component {
       <form onSubmit={handleSubmit} className={loginFormClass}>
         <div className={`${baseClass}__container`}>
           {baseError && <div className="form__base-error">{baseError}</div>}
-          <InputFieldWithIcon {...fields.email} autofocus placeholder="Email" />
+          <InputFieldWithIcon
+            {...fields.email}
+            autofocus
+            label="Email"
+            placeholder="Email"
+          />
           <InputFieldWithIcon
             {...fields.password}
+            label="Password"
             placeholder="Password"
             type="password"
           />

frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx

@@ -29,6 +29,7 @@ class ResetPasswordForm extends Component {
         <InputFieldWithIcon
           {...fields.new_password}
           autofocus
+          label="New password"
           placeholder="New password"
           className={`${baseClass}__input`}
           type="password"
@@ -38,6 +39,7 @@ class ResetPasswordForm extends Component {
         />
         <InputFieldWithIcon
           {...fields.new_password_confirmation}
+          label="Confirm password"
           placeholder="Confirm password"
           className={`${baseClass}__input`}
           type="password"

frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
+import Icon from "components/Icon/Icon";
 import FleetIcon from "components/icons/FleetIcon";
 import TooltipWrapper from "components/TooltipWrapper";
 import InputField from "../InputField";
@@ -14,6 +15,7 @@ class InputFieldWithIcon extends InputField {
     error: PropTypes.string,
     hint: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
     iconName: PropTypes.string,
+    iconSvg: PropTypes.string,
     label: PropTypes.string,
     name: PropTypes.string,
     onChange: PropTypes.func,
@@ -67,6 +69,7 @@ class InputFieldWithIcon extends InputField {
       className,
       error,
       iconName,
+      iconSvg,
       name,
       placeholder,
       tabIndex,
@@ -100,9 +103,11 @@ class InputFieldWithIcon extends InputField {
       { [`${baseClass}__icon--active`]: value }
     );
 
+    console.log("iconSvg", iconSvg);
     return (
       <div className={wrapperClasses}>
-        {this.renderHeading()}
+        {this.props.label && this.renderHeading()}
+        {iconSvg && <Icon name={iconSvg} className={iconClasses} />}
         <input
           id={name}
           name={name}

frontend/components/forms/fields/InputFieldWithIcon/_styles.scss

@@ -7,7 +7,6 @@
     position: absolute;
     right: 6px;
     top: 28px;
-    font-size: 18px;
     color: $core-fleet-blue;
 
     &--active {
@@ -21,12 +20,27 @@
     }
   }
 
+  // Refactor to include svg icons
+  &--icon-start {
+    margin-top: 0;
+
+    .input-icon-field__icon {
+      position: absolute;
+      left: 12px;
+      top: 13px;
+      width: 16px;
+      font-size: $x-small;
+      color: $core-fleet-blue;
+      z-index: 1;
+    }
+  }
+
   &__input {
     border: 1px solid $ui-fleet-black-10;
     background-color: $ui-light-grey;
     border-radius: $border-radius;
     padding: 9px 30px 9px $pad-medium;
-    font-size: $small;
+    font-size: $x-small;
     text-indent: 1px;
     position: relative;
     width: 100%;
@@ -95,7 +109,7 @@
   // overwrite icon position and input padding
   &--icon-start {
     input {
-      padding: 9px 1rem 9px 3rem;
+      padding: 9.5px 12px 9.5px 36px; // New figma styling
     }
     .fleeticon {
       right: auto;

frontend/components/forms/fields/SearchField/SearchField.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 // @ts-ignore
-import InputField from "../InputField";
+import InputFieldWithIcon from "../InputFieldWithIcon";
 
 const baseClass = "search-field";
 
@@ -28,11 +28,14 @@ const SearchField = ({
   };
 
   return (
-    <InputField
+    <InputFieldWithIcon
+      name="search"
       placeholder={placeholder}
       value={searchQueryInput}
-      inputWrapperClass={`${baseClass}__input-wrapper`}
+      // inputWrapperClass={`${baseClass}__input-wrapper`}
       onChange={onInputChange}
+      iconPosition="start"
+      iconSvg="search"
     />
   );
 };

frontend/components/icons/Search.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
+import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";
+
+interface ISearchProps {
+  color?: Colors;
+  size?: IconSizes;
+}
+
+const Search = ({
+  size = "medium",
+  color = "ui-fleet-black-75",
+}: ISearchProps) => {
+  return (
+    <svg
+      width={ICON_SIZES[size]}
+      height={ICON_SIZES[size]}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 6.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-.665 5.249a6.5 6.5 0 1 1 1.414-1.414l3.958 3.958a1 1 0 0 1-1.414 1.414l-3.958-3.958Z"
+        fill={COLORS[color]}
+      />
+    </svg>
+  );
+};
+
+export default Search;

frontend/components/icons/index.ts

@@ -24,6 +24,7 @@ import More from "./More";
 import Plus from "./Plus";
 import PremiumFeature from "./PremiumFeature";
 import Query from "./Query";
+import Search from "./Search";
 
 import LowDiskSpaceHosts from "./LowDiskSpaceHosts";
 import MissingHosts from "./MissingHosts";
@@ -100,6 +101,7 @@ export const ICON_MAP = {
   copy: Copy,
   eye: Eye,
   pencil: Pencil,
+  search: Search,
   transfer: Transfer,
   trash: TrashCan,
   success: Success,

frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx

@@ -61,6 +61,7 @@ const CustomLabelGroupHeading = (
         </div>
       </div>
       <div className={`${baseClass}__field`}>
+        <Icon name="search" />
         <input
           className={`${baseClass}__input`}
           ref={inputRef}

frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss

@@ -20,15 +20,11 @@
 
   &__field {
     position: relative;
-    &::before {
-      display: inline-block;
+
+    .icon {
       position: absolute;
-      padding: 5px 0 0 0; // centers spin
-      content: url(../assets/images/icon-search-fleet-black-16x16@2x.png);
-      transform: scale(0.5);
-      height: 20px;
-      top: 3px;
-      left: 8px;
+      left: 12px;
+      top: 12px;
     }
   }
 
@@ -39,9 +35,10 @@
     border: solid 1px $ui-fleet-black-10;
     border-radius: 4px;
     font-size: $small;
-    padding: $pad-xsmall 12px $pad-xsmall 42px;
+    padding: 9.5px 12px 9.5px 36px;
     color: $core-fleet-blue;
     font-family: "Inter", sans-serif;
+    font-size: $x-small;
     box-sizing: border-box;
     height: 40px;
 

frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx

@@ -7,7 +7,7 @@ import { AppContext } from "context/app";
 import Button from "components/buttons/Button";
 import Modal from "components/Modal";
 // @ts-ignore
-import InputField from "components/forms/fields/InputField";
+import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon";
 
 import DataError from "components/DataError";
 import permissions from "utilities/permissions";
@@ -135,12 +135,14 @@ const SelectQueryModal = ({
         <div>
           <div className={`${baseClass}__filter-create-wrapper`}>
             <div className={`${baseClass}__filter-queries`}>
-              <InputField
+              <InputFieldWithIcon
                 name="query-filter"
                 onChange={onFilterQueries}
                 placeholder="Filter queries"
                 value={queriesFilter}
                 autofocus
+                iconSvg="search"
+                iconPosition="start"
               />
             </div>
             {(!isOnlyObserver || isObserverPlus || isHostsTeamObserverPlus) && (
@@ -160,12 +162,14 @@ const SelectQueryModal = ({
         <div>
           <div className={`${baseClass}__filter-create-wrapper`}>
             <div className={`${baseClass}__filter-queries`}>
-              <InputField
+              <InputFieldWithIcon
                 name="query-filter"
                 onChange={onFilterQueries}
                 placeholder="Filter queries"
                 value={queriesFilter}
                 autofocus
+                iconSvg="search"
+                iconPosition="start"
               />
             </div>
             {(!isOnlyObserver || isObserverPlus || isHostsTeamObserverPlus) && (

frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss

@@ -43,17 +43,6 @@
     flex-grow: 3;
     position: relative;
 
-    &::before {
-      display: inline-block;
-      position: absolute;
-      padding: 5px 0 0 0; // centers spin
-      content: url(../assets/images/icon-search-fleet-black-16x16@2x.png);
-      transform: scale(0.5);
-      height: 20px;
-      top: 3px;
-      left: 8px;
-    }
-
     .form-field {
       margin-bottom: 0;
     }