refactor: styles clean up and fix the clear state issue

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.53-beta-2",
+    "version": "0.0.53-beta-3",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

src/Common/SearchBar/SearchBar.component.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FunctionComponent, useCallback, useState } from 'react'
+import { ChangeEvent, FunctionComponent, useCallback, useRef, useState, KeyboardEvent } from 'react'
 import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
 import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
 import { SearchBarProps } from './types'
@@ -17,53 +17,59 @@ const SearchBar: FunctionComponent<SearchBarProps> = ({
     shouldDebounce = false,
     debounceTimeout = 300,
 }) => {
-    const [isSearchApplied, setIsSearchApplied] = useState(!!initialSearchText)
+    const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
+    const inputRef = useRef<HTMLInputElement>()
     const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
         handleSearchChange,
         debounceTimeout,
     ])
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target
-        setIsSearchApplied(!!value)
+        setShowClearButton(!!value)
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
             handleSearchChange(value)
         }
     }
 
-    const handleKeyDown = (e) => {
-        const keyCode = e.key
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        const { key } = e
 
-        if (keyCode === 'Enter') {
-            const event = { ...e, target: { ...e.target, value: e.target.value?.trim() } }
+        if (key === 'Enter') {
+            const inputTarget = e.target as HTMLInputElement
+            const event = { ...e, target: { ...inputTarget, value: inputTarget.value.trim() } }
             handleSearchChange(event.target.value)
             handleEnter(event)
         }
     }
 
     const clearSearch = () => {
+        inputRef.current.value = ''
         handleSearchChange('')
     }
 
     return (
         <div className={containerClassName}>
-            <div className="search-bar dc__position-rel en-2 bw-1 br-4 h-32">
-                <Search className="search-bar__icon icon-dim-18" />
+            <div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
+                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
                 <input
                     placeholder="Search"
-                    {...inputProps}
-                    type="text"
                     data-testid="search-bar"
+                    type="text"
+                    {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input bcn-0 ${isSearchApplied ? 'search-bar__input--applied' : ''}`}
+                    className={`search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                        showClearButton ? 'pr-30' : 'pr-10'
+                    }`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
+                    ref={inputRef}
                 />
-                {isSearchApplied && (
+                {showClearButton && (
                     <button
-                        className="flex search-bar__clear-button"
+                        className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"
                         type="button"
                         onClick={clearSearch}
                         aria-label="Clear search"

src/Common/SearchBar/searchBar.scss

@@ -1,65 +1,31 @@
 .search-bar {
-    margin-right: 0;
-    margin-bottom: 0;
-    background-color: var(--N0);
-    display: block;
-    width: 100%;
-    min-width: 200px;
-    height: 32px;
-    position: relative;
 
-    &:focus, &:focus-within {
+    &:focus,
+    &:focus-within {
         outline: none;
         border: solid 1px var(--B500);
     }
 
     &__input {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 4px;
-        border: none;
-        padding: 6px 10px 6px 30px;
-        font-size: 13px;
-        line-height: 20px;
-        color: var(--N900);
-
-        &--applied {
-            width: calc(100% - 22px);
-        }
 
         &:focus,
         &:focus-visible {
             border: none;
             outline: none;
         }
-
-        &::placeholder {
-            font-weight: 400;
-            color: var(--N500);
-        }
     }
 
     &__icon {
-        position: absolute;
         z-index: 1;
-        color: var(--N600);
         top: 50%;
         left: 8px;
         transform: translateY(-50%);
-        line-height: 1.9;
     }
 
     &__clear-button {
-        background-color: transparent;
-        position: absolute;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
         z-index: 1;
-        border: none;
-        padding: 2px;
-        color: var(--N600);
-        margin: 0px 5px;
     }
 }