Replaced InputWithIcon with InputField throughout the project (#2920)

* Replaced InputWithIcon with InputField throughout the project * added data-testid=clearIcon so old tests can test InputField without error * updated test for AddCourseWithInput
ita-social-projects · Dec 3, 2024 · e231169 · e231169
1 parent b602aa2
commit e231169
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 67 deletions.
diff --git a/src/components/app-menu-button/AppMenuButton.styles.ts b/src/components/app-menu-button/AppMenuButton.styles.ts
@@ -6,10 +6,8 @@ export const styles = {
   input: {
     m: '0 auto',
     width: '100%',
-    borderRadius: '6px',
-    p: { xs: 0, sm: 0 },
-    border: `1px solid ${palette.primary[400]}`,
-    '& div': { pl: '10px' }
+    height: '40px',
+    p: { xs: 0, sm: 0 }
   },
   clearAll: {
     display: 'flex',

diff --git a/src/components/app-menu-button/AppMenuButton.tsx b/src/components/app-menu-button/AppMenuButton.tsx
@@ -4,7 +4,9 @@ import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import ClearIcon from '@mui/icons-material/Clear'
 import AppButton from '~/components/app-button/AppButton'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+
+import InputField from '~scss-components/input-field/InputField'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 import { styles } from '~/components/app-menu-button/AppMenuButton.styles'
 import { ButtonVariantEnum } from '~/types'
@@ -37,12 +39,14 @@ const AppMenuButton: FC<AppMenuButtonProps> = ({
   return (
     <>
       <Box sx={styles.inputWrapper}>
-        <InputWithIcon
+        <InputField
           onChange={handleInputChange}
           onClear={handleInputReset}
           placeholder={t('common.search')}
+          search
           sx={styles.input}
           value={inputValue}
+          variant={InputFieldVariantEnum.Outlined}
         />
       </Box>
       <AppButton

diff --git a/src/components/find-block/FindBlock.tsx b/src/components/find-block/FindBlock.tsx
@@ -2,12 +2,11 @@ import { ChangeEvent, KeyboardEvent, useCallback, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import SearchIcon from '@mui/icons-material/Search'
 
 import useBreakpoints from '~/hooks/use-breakpoints'
 import TitleBlock from '~/components/title-block/TitleBlock'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import AppButton from '~/components/app-button/AppButton'
+import InputField from '~scss-components/input-field/InputField'
 
 import bag from '~/assets/img/student-home/bag.png'
 import { authRoutes } from '~/router/constants/authRoutes'
@@ -45,13 +44,12 @@ const FindBlock = ({ translationKey }: FindBlockProps) => {
       style={styles.container}
       translationKey={translationKey}
     >
-      <InputWithIcon
-        fullWidth={isMobile}
+      <InputField
         onChange={onChange}
         onClear={onClear}
         onKeyDown={handleEnterPress}
         placeholder={t(`${translationKey}.label`)}
-        startIcon={<SearchIcon />}
+        search
         sx={styles.input}
         value={inputValue}
       />

diff --git a/src/components/find-block/find-block.styles.ts b/src/components/find-block/find-block.styles.ts
@@ -14,14 +14,11 @@ export const styles = {
   },
 
   input: {
-    py: { xs: 0 },
     display: 'flex',
     flexGrow: '1',
-    gap: '8px',
     mr: { sm: 3, xs: 0 },
     mb: { sm: 0, xs: 2 },
     backgroundColor: 'basic.white',
-    borderRadius: '4px',
     maxHeight: '48px'
   }
 }
diff --git a/src/components/search-by-message/SearchByMessage.tsx b/src/components/search-by-message/SearchByMessage.tsx
@@ -2,8 +2,8 @@ import { useState, ChangeEvent, useEffect, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
 import IconsWithCounter from '~/components/icons-with-counter/IconsWithCounter'
+import InputField from '~scss-components/input-field/InputField'
 import { useDebounce } from '~/hooks/use-debounce'
 
 import { styles } from '~/components/search-by-message/SearchByMessage.styles'
@@ -61,11 +61,12 @@ const SearchByMessage: FC<SearchByMessageProps> = ({
         maxValue={findMessage.length}
         onFilteredIndexChange={onFilteredIndexChange}
       />
-      <InputWithIcon
+      <InputField
         inputProps={{ maxLength: 30 }}
         onChange={onChange}
         onClear={onClose}
         placeholder={`${t('common.search')}...`}
+        search
         sx={styles.input}
         value={search}
       />

diff --git a/src/components/search-filter-input/SearchFilterInput.tsx b/src/components/search-filter-input/SearchFilterInput.tsx
@@ -2,13 +2,13 @@ import { KeyboardEvent, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { InputBaseProps } from '@mui/material/InputBase'
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
-
 import AppButton from '~/components/app-button/AppButton'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 
 import { ButtonVariantEnum } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
+
 import { styles } from '~/components/search-filter-input/SearchFilterInput.styles'
 
 interface SearchFilterInputProps {
@@ -53,16 +53,16 @@ const SearchFilterInput = ({
 
   return (
     <Box sx={styles.container}>
-      <InputWithIcon
+      <InputField
         onChange={onChange}
         onClear={onClear}
         onKeyDown={onKeyDown}
-        startIcon={<SearchIcon sx={styles.searchIcon} />}
+        placeholder={t(`${textFieldProps?.placeholder}`)}
+        search
         sx={styles.input}
         value={search}
-        {...textFieldProps}
+        variant={InputFieldVariantEnum.Small}
       />
-
       <AppButton
         onClick={onSearch}
         sx={styles.searchBtn}

diff --git a/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx b/src/containers/cooperation-details/add-course-modal-modal/AddCourseTemplateModal.tsx
@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { SelectChangeEvent } from '@mui/material/Select'
 import SimpleBar from 'simplebar-react'
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 
 import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
@@ -15,7 +14,7 @@ import useSort from '~/hooks/table/use-sort'
 import Loader from '~/components/loader/Loader'
 import AppButton from '~/components/app-button/AppButton'
 import NotFoundResults from '~/components/not-found-results/NotFoundResults'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import CoursesFilterBar from '~/containers/find-course/courses-filter-bar/CoursesFilterBar'
 import MyCorsesCardsList from '~/containers/my-courses/my-courses-container/MyCorsesCardsList'
@@ -38,6 +37,8 @@ import {
   UserRole,
   UserResponse
 } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
+
 import { setIsActivityCreated } from '~/redux/features/cooperationsSlice'
 
 interface AddCourseTemplateModalProps {
@@ -178,13 +179,14 @@ const AddCourseTemplateModal: FC<AddCourseTemplateModalProps> = ({
 
       <Box sx={styles.toolbar}>
         <Box sx={styles.toolbarContainer}>
-          <InputWithIcon
-            endAdornment={<SearchIcon sx={styles.searchIcon} />}
+          <InputField
             onChange={onSearchChange}
             onClear={onSearchReset}
             placeholder={t('common.search')}
+            search
             sx={styles.searchInput}
             value={searchValue}
+            variant={InputFieldVariantEnum.Small}
           />
           <Box onClick={toggleFilters} sx={styles.filtersBtn}>
             <FiltersToggle />

diff --git a/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.styles.ts b/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.styles.ts
@@ -9,10 +9,8 @@ export const styles = {
   searchIcon: { color: 'primary.700' },
   input: {
     flex: 1,
-    maxWidth: '580px',
-    border: '1px solid',
-    borderColor: 'primary.500',
-    borderRadius: '6px'
+    height: '48px',
+    maxWidth: '580px'
   },
   actionBlock: { display: 'flex', gap: '24px' },
   select: { flex: { xs: 1, sm: 0 } }

diff --git a/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.tsx b/src/containers/my-cooperations/cooperation-offer-toolbar/CooperationOfferToolbar.tsx
@@ -1,10 +1,10 @@
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 import { ChangeEvent, FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import AppSelect from '~/components/app-select/AppSelect'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
+
 import ViewSwitcher from '~/components/view-switcher/ViewSwitcher'
 import { FilterHook } from '~/hooks/table/use-filter'
 import { SortHook } from '~/hooks/table/use-sort'
@@ -18,6 +18,7 @@ import {
   MyCooperationsFilters,
   SelectFieldType
 } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 interface CooperationOfferToolbarProps {
   filterOptions: FilterHook<MyCooperationsFilters>
@@ -66,13 +67,14 @@ const CooperationOfferToolbar: FC<CooperationOfferToolbarProps> = ({
 
   return (
     <Box sx={styles.root}>
-      <InputWithIcon
+      <InputField
         onChange={handleInputChange}
         onClear={handleInputReset}
         placeholder={t('cooperationsPage.search')}
-        startIcon={<SearchIcon sx={styles.searchIcon} />}
+        search
         sx={styles.input}
         value={inputValue}
+        variant={InputFieldVariantEnum.Outlined}
       />
       <Box sx={styles.actionBlock}>
         {!withoutSort && (

diff --git a/src/containers/my-courses/add-course-with-input/AddCourseWithInput.styles.ts b/src/containers/my-courses/add-course-with-input/AddCourseWithInput.styles.ts
@@ -18,13 +18,9 @@ export const styles = {
   addIcon: { width: { xs: '18px', sm: '22px' }, ml: '5px' },
   searchIcon: { color: 'primary.700' },
   input: {
-    flex: 1,
     maxWidth: '285px',
     width: '100%',
-    height: '44px',
-    border: '1px solid',
-    borderColor: 'primary.200',
-    borderRadius: '4px'
+    height: '44px'
   },
   addBtn: {
     width: '100%',

diff --git a/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx b/src/containers/my-courses/add-course-with-input/AddCourseWithInput.tsx
@@ -2,12 +2,11 @@ import { FC, ChangeEvent } from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import AddIcon from '@mui/icons-material/Add'
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 
 import FiltersToggle from '~/components/filters-toggle/FiltersToggle'
 import AppButton from '~/components/app-button/AppButton'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 import CoursesFilterBar from '~/containers/find-course/courses-filter-bar/CoursesFilterBar'
 import CoursesFiltersDrawer from '~/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer'
 
@@ -17,6 +16,7 @@ import { useDrawer } from '~/hooks/use-drawer'
 import useBreakpoints from '~/hooks/use-breakpoints'
 
 import { CourseFilters, FiltersActions } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 import { styles } from '~/containers/my-courses/add-course-with-input/AddCourseWithInput.styles'
 
 interface AddCoursesWithInputProps {
@@ -63,13 +63,14 @@ const AddCourseWithInput: FC<AddCoursesWithInputProps> = ({
         handleToggle={handleToggle}
       />
       <CoursesFilterBar onValueChange={setSort} value={sort} />
-      <InputWithIcon
-        endAdornment={<SearchIcon sx={styles.searchIcon} />}
+      <InputField
         onChange={onChange}
         onClear={onClear}
         placeholder={t('common.search')}
+        search
         sx={styles.input}
         value={filters.title}
+        variant={InputFieldVariantEnum.Outlined}
       />
     </Box>
   )

diff --git a/src/containers/my-resources/add-resource-modal/AddResourceModal.styles.ts b/src/containers/my-resources/add-resource-modal/AddResourceModal.styles.ts
@@ -20,8 +20,8 @@ export const styles = {
   inputWithFilter: { display: 'flex', gap: '16px' },
   searchIcon: { color: 'primary.700' },
   titleInput: {
+    height: '48px',
     maxWidth: '350px',
-    border: '1px solid',
     ...input
   },
   categoryInput: { maxWidth: '200px', ...input },

diff --git a/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx b/src/containers/my-resources/add-resource-modal/AddResourceModal.tsx
@@ -1,15 +1,14 @@
 import { ChangeEvent, useState, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import SearchIcon from '@mui/icons-material/Search'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
 import EnhancedTable, {
   EnhancedTableProps
 } from '~/components/enhanced-table/EnhancedTable'
 import AppButton from '~/components/app-button/AppButton'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
 import CheckboxWithTooltip from '~/components/checkbox-with-tooltip/CheckboxWithTooltip'
 
@@ -23,6 +22,7 @@ import {
   ResourcesTabsEnum,
   TableItem
 } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 interface AddResourceModalProps<T>
   extends Omit<EnhancedTableProps<T, undefined>, 'data'> {
@@ -78,13 +78,14 @@ const AddResourceModal = <T extends TableItem>({
       </Typography>
 
       <Box sx={styles.inputWithFilter}>
-        <InputWithIcon
-          endAdornment={<SearchIcon sx={styles.searchIcon} />}
+        <InputField
           onChange={handleInputChange}
           onClear={handleInputReset}
           placeholder={t('common.search')}
+          search
           sx={styles.titleInput}
           value={inputValue}
+          variant={InputFieldVariantEnum.Outlined}
         />
         <AppButtonMenu<CategoryNameInterface>
           selectedItems={selectedItems}

diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts
@@ -8,10 +8,8 @@ export const styles = {
   searchIcon: { color: 'primary.700' },
   input: {
     flex: 1,
+    height: '48px',
     maxWidth: '500px',
-    border: '1px solid',
-    borderColor: 'primary.500',
-    borderRadius: '6px',
     width: '285px'
   },
   filterWithInput: {

diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx
@@ -9,7 +9,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
-import SearchIcon from '@mui/icons-material/Search'
 import AddIcon from '@mui/icons-material/Add'
 import Box from '@mui/material/Box'
 
@@ -18,12 +17,14 @@ import { useDebounce } from '~/hooks/use-debounce'
 import { SortHook } from '~/hooks/table/use-sort'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import AppButton from '~/components/app-button/AppButton'
-import InputWithIcon from '~/components/input-with-icon/InputWithIcon'
+import InputField from '~scss-components/input-field/InputField'
+
 import AppButtonMenu from '~/components/app-button-menu/AppButtonMenu'
 import ResourcesToolBarDrawer from '~/containers/my-resources/resources-toolbar-drawer/ResourcesToolbarDrawer'
 
 import { styles } from '~/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles'
 import { CategoryNameInterface, PositionEnum, SizeEnum } from '~/types'
+import { InputFieldVariantEnum } from '~scss-components/input-field/InputField.constants'
 
 interface AddResourceWithInputProps {
   btnText?: string
@@ -93,13 +94,14 @@ const AddResourceWithInput: FC<AddResourceWithInputProps> = ({
           valueField={'name'}
         />
       )}
-      <InputWithIcon
-        endAdornment={<SearchIcon sx={styles.searchIcon} />}
+      <InputField
         onChange={onChange}
         onClear={onClear}
         placeholder={t(placeholder)}
+        search
         sx={styles.input}
         value={searchInput}
+        variant={InputFieldVariantEnum.Outlined}
       />
     </>
   )