fix: changes from review

apps/website/src/components/table-issues/filters/dropdown-filter.tsx

@@ -20,7 +20,7 @@ type Data = {
 type Props = {
   data: Data[]
   label: string
-  noPadding?: boolean
+  placeholder?: string
 }
 
 const isAvatar = (value: unknown): value is string => {
@@ -43,8 +43,8 @@ const RenderIcon = (props: Data) => {
   return cloneElement(props.avatar) || <></>
 }
 
-const FilterWithCheckboxes = (props: Props) => {
-  const { data, label, noPadding } = props
+const DropdownFilter = (props: Props) => {
+  const { data, label, placeholder } = props
 
   const [filterText, setFilterText] = useState('')
 
@@ -59,7 +59,7 @@ const FilterWithCheckboxes = (props: Props) => {
   const currentBreakpoint = useCurrentBreakpoint()
 
   return (
-    <div className={noPadding ? '' : 'pr-2'}>
+    <div>
       <DropdownMenu onOpenChange={() => setIsOpen(!isOpen)}>
         <Button
           size={32}
@@ -82,7 +82,7 @@ const FilterWithCheckboxes = (props: Props) => {
         >
           <div className="p-2 px-1">
             <Input
-              placeholder="Find epics"
+              placeholder={placeholder || 'Search'}
               icon={<SearchIcon size={20} />}
               size={32}
               value={filterText}
@@ -135,5 +135,5 @@ const FilterWithCheckboxes = (props: Props) => {
   )
 }
 
-export { FilterWithCheckboxes }
-export type { Props as FilterWithCheckboxesProps }
+export { DropdownFilter }
+export type { Props as DropdownFilterProps }

apps/website/src/components/table-issues/filters/dropdown-sort.tsx

@@ -11,17 +11,15 @@ type Data = {
 
 type Props = {
   data: Data[]
-
-  noPadding?: boolean
 }
 
-const Sort = (props: Props) => {
-  const { data, noPadding } = props
+const DropdownSort = (props: Props) => {
+  const { data } = props
 
   const [selectedValue, setSelectedValue] = useState<number>()
 
   return (
-    <div className={noPadding ? '' : 'pr-2'}>
+    <div>
       <DropdownMenu>
         <div className="relative">
           <IconButton icon={<SortIcon size={20} />} variant="outline" />
@@ -69,5 +67,5 @@ const Sort = (props: Props) => {
   )
 }
 
-export { Sort }
-export type { Props as SortProps }
+export { DropdownSort }
+export type { Props as DropdownSortProps }

apps/website/src/components/table-issues/filters/index.ts

@@ -1,3 +1,3 @@
-export { FilterWithCheckboxes } from './filter-with-checkboxes'
-export { Sort } from './sort'
+export { DropdownFilter } from './dropdown-filter'
+export { DropdownSort } from './dropdown-sort'
 export { Tabs } from './tabs'

apps/website/src/components/table-issues/table-issues.tsx

@@ -6,10 +6,10 @@ import Link from 'next/link'
 
 import { useCurrentBreakpoint } from '@/hooks/use-current-breakpoint'
 
-import { FilterWithCheckboxes, Sort, Tabs } from './filters'
+import { DropdownFilter, DropdownSort, Tabs } from './filters'
 
-import type { FilterWithCheckboxesProps } from './filters/filter-with-checkboxes'
-import type { SortProps } from './filters/sort'
+import type { DropdownFilterProps } from './filters/dropdown-filter'
+import type { DropdownSortProps } from './filters/dropdown-sort'
 import type { TextInput } from 'react-native'
 
 const issues = [
@@ -55,7 +55,7 @@ const issues = [
   },
 ]
 
-const authors: FilterWithCheckboxesProps['data'] = [
+const authors: DropdownFilterProps['data'] = [
   {
     id: 4,
     name: 'marcelines',
@@ -78,7 +78,7 @@ const authors: FilterWithCheckboxesProps['data'] = [
   },
 ]
 
-const epics: FilterWithCheckboxesProps['data'] = [
+const epics: DropdownFilterProps['data'] = [
   {
     id: 4,
     name: 'E:ActivityCenter',
@@ -101,7 +101,7 @@ const epics: FilterWithCheckboxesProps['data'] = [
   },
 ]
 
-const labels: FilterWithCheckboxesProps['data'] = [
+const labels: DropdownFilterProps['data'] = [
   {
     id: 4,
     name: 'Mobile',
@@ -124,7 +124,7 @@ const labels: FilterWithCheckboxesProps['data'] = [
   },
 ]
 
-const assignees: FilterWithCheckboxesProps['data'] = [
+const assignees: DropdownFilterProps['data'] = [
   {
     id: 1,
     name: 'Unassigned',
@@ -152,7 +152,7 @@ const assignees: FilterWithCheckboxesProps['data'] = [
   },
 ]
 
-const repositories: FilterWithCheckboxesProps['data'] = [
+const repositories: DropdownFilterProps['data'] = [
   {
     id: 1,
     name: 'status-mobile',
@@ -191,7 +191,7 @@ const repositories: FilterWithCheckboxesProps['data'] = [
   },
 ]
 
-const sortOptions: SortProps['data'] = [
+const sortOptions: DropdownSortProps['data'] = [
   {
     id: 1,
     name: 'Default',
@@ -217,7 +217,6 @@ const sortOptions: SortProps['data'] = [
 const TableIssues = () => {
   const [issuesSearchText, setIssuesSearchText] = useState('')
   const inputRef = useRef<TextInput>(null)
-  const [isMinimized, setIsMinimized] = useState(true)
 
   const currentBreakpoint = useCurrentBreakpoint()
 
@@ -228,29 +227,51 @@ const TableIssues = () => {
           <Tabs />
           <div className="flex-1">
             <div className="flex items-center 2xl:justify-end">
-              <div className="flex w-full justify-between pr-2 pt-4 2xl:justify-end 2xl:pt-0">
-                <div className="flex">
-                  <div className="pr-2 transition-all">
+              <div className="flex w-full justify-between pt-4 2xl:justify-end 2xl:pt-0">
+                <div className="flex gap-2">
+                  <div className="transition-all">
                     <Input
                       placeholder="Find Author"
                       icon={<SearchIcon size={20} />}
                       size={32}
                       value={issuesSearchText}
                       onChangeText={setIssuesSearchText}
-                      onHandleMinimized={() => setIsMinimized(!isMinimized)}
-                      minimized={isMinimized}
+                      variant="retractable"
                       direction={currentBreakpoint === '2xl' ? 'rtl' : 'ltr'}
                       ref={inputRef}
                     />
                   </div>
 
-                  <FilterWithCheckboxes data={authors} label="Author" />
-                  <FilterWithCheckboxes data={epics} label="Epics" />
-                  <FilterWithCheckboxes data={labels} label="Labels" />
-                  <FilterWithCheckboxes data={assignees} label="Assignee" />
-                  <FilterWithCheckboxes data={repositories} label="Repos" />
+                  <DropdownFilter
+                    data={authors}
+                    label="Author"
+                    placeholder="Find author"
+                  />
+                  <DropdownFilter
+                    data={epics}
+                    label="Epics"
+                    placeholder="Find epic"
+                  />
+                  <DropdownFilter
+                    data={labels}
+                    label="Labels"
+                    placeholder="Find label"
+                  />
+                  <DropdownFilter
+                    data={assignees}
+                    label="Assignee"
+                    placeholder="Find assignee"
+                  />
+                  <DropdownFilter
+                    data={repositories}
+                    label="Repos"
+                    placeholder="Find repo"
+                  />
+                </div>
+
+                <div className="pl-2">
+                  <DropdownSort data={sortOptions} />
                 </div>
-                <Sort data={sortOptions} noPadding />
               </div>
             </div>
           </div>

packages/components/src/input/input.tsx

@@ -1,4 +1,4 @@
-import { cloneElement, forwardRef } from 'react'
+import { cloneElement, forwardRef, useState } from 'react'
 
 import { ClearIcon } from '@status-im/icons'
 import { setupReactNative, Stack, styled } from '@tamagui/core'
@@ -24,10 +24,9 @@ type Props = GetProps<typeof InputFrame> & {
   icon?: React.ReactElement
   label?: string
   onClear?: () => void
-  onHandleMinimized?: (isMinimized: boolean) => void
+  variant?: 'default' | 'retractable'
   size?: 40 | 32
   error?: boolean
-  minimized?: boolean
   direction?: 'ltr' | 'rtl'
 }
 
@@ -41,14 +40,17 @@ const _Input = (props: Props, ref: Ref<TextInput>) => {
     label,
     onClear,
     size = 40,
-    minimized,
     placeholder,
     value,
     direction = 'ltr',
-    onHandleMinimized,
+    variant = 'default',
     ...rest
   } = props
 
+  const [isMinimized, setIsMinimized] = useState(variant === 'retractable')
+
+  const isRetractable = variant === 'retractable'
+
   return (
     <Stack flexDirection={direction === 'ltr' ? 'row' : 'row-reverse'}>
       {Boolean(label || endLabel) && (
@@ -68,13 +70,13 @@ const _Input = (props: Props, ref: Ref<TextInput>) => {
       <InputContainer
         size={size}
         error={error}
-        minimized={minimized}
+        minimized={isMinimized}
         onPress={event => {
           event.stopPropagation()
           event.preventDefault()
 
-          if (onHandleMinimized && minimized) {
-            onHandleMinimized(false)
+          if (isRetractable && isMinimized) {
+            setIsMinimized(false)
 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore ref is not inferred correctly here
@@ -87,12 +89,12 @@ const _Input = (props: Props, ref: Ref<TextInput>) => {
         ) : null}
         <InputBase
           value={value}
-          placeholder={minimized && !value ? '' : placeholder}
+          placeholder={isMinimized && !value ? '' : placeholder}
           flex={1}
           ref={ref}
           onBlur={() => {
-            if (!value && onHandleMinimized && !minimized) {
-              onHandleMinimized?.(true)
+            if (!value && isRetractable && !isMinimized) {
+              setIsMinimized(true)
             }
           }}
           {...rest}