From 3e6b99a8eea4a665a6c8b2ce65e72d58b54cecae Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 4 Dec 2023 18:34:10 +0100 Subject: [PATCH 01/13] Translations for Search Input --- src/languages/en.ts | 3 ++- src/languages/es.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index 8f772f1260bb..0e2488a3d656 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -491,7 +491,8 @@ export default { }, }, sidebarScreen: { - buttonSearch: 'Search', + buttonSearch: 'Search for something...', + buttonSearchLabel: 'Search', buttonMySettings: 'My settings', fabNewChat: 'Start chat', fabNewChatExplained: 'Start chat (Floating action)', diff --git a/src/languages/es.ts b/src/languages/es.ts index 3887891299df..15ae39248477 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -483,7 +483,8 @@ export default { }, }, sidebarScreen: { - buttonSearch: 'Buscar', + buttonSearch: 'Busca algo...', + buttonSearchLabel: 'Buscar', buttonMySettings: 'Mi configuración', fabNewChat: 'Iniciar chat', fabNewChatExplained: 'Iniciar chat (Acción flotante)', From ddd31521252ae6d5ef5edf48037ba9a7a7c81a83 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 4 Dec 2023 18:34:29 +0100 Subject: [PATCH 02/13] Create Search component --- src/components/Search.tsx | 60 +++++++++++++++++++++++++++++++++++++++ src/styles/styles.ts | 19 +++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 src/components/Search.tsx diff --git a/src/components/Search.tsx b/src/components/Search.tsx new file mode 100644 index 000000000000..36e36fb69865 --- /dev/null +++ b/src/components/Search.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@styles/useThemeStyles'; +import variables from '@styles/variables'; +import CONST from '@src/CONST'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import {PressableWithFeedback} from './Pressable'; +import Text from './Text'; +import Tooltip from './Tooltip'; + +type SearchProps = { + // Callback fired when component is pressed + onPress: (event?: GestureResponderEvent | KeyboardEvent) => void; + + // Text explaining what the user can search for + prompt: string; + + // Text showing up in a tooltip when component is hovered + tooltip?: string; + + // Styles to apply on the outer element + style?: StyleProp; +}; + +function Search({onPress, prompt, tooltip, style}: SearchProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + + {({hovered}) => ( + + + + {prompt} + + + )} + + + ); +} + +Search.displayName = 'Search'; + +export default Search; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 983f1ba82caa..d95bb6ce1bd8 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3017,6 +3017,25 @@ const styles = (theme: ThemeColors) => flex: 1, }, + searchContainer: { + backgroundColor: theme.highlightBG, + borderRadius: 999, + height: 40, + minHeight: 40, + maxHeight: 40, + }, + + searchContainerHovered: { + backgroundColor: theme.border, + }, + + searchInputStyle: { + color: colors.darkSupportingText, + fontSize: 13, + lineHeight: 16, + width: '100%', + }, + threeDotsPopoverOffset: (windowWidth: number) => ({ ...getPopOverVerticalOffset(60), From f569b7b43084220fc9000b6e3ad564a417f8bfb6 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 4 Dec 2023 18:34:50 +0100 Subject: [PATCH 03/13] Storybook for Search component --- src/stories/Search.stories.js | 42 +++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/stories/Search.stories.js diff --git a/src/stories/Search.stories.js b/src/stories/Search.stories.js new file mode 100644 index 000000000000..bbd485ebc558 --- /dev/null +++ b/src/stories/Search.stories.js @@ -0,0 +1,42 @@ +import React from 'react'; +import Search from '@components/Search'; + +/** + * We use the Component Story Format for writing stories. Follow the docs here: + * + * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format + */ +const story = { + title: 'Components/Search', + component: Search, +}; + +function Template(args) { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; +} + +// Arguments can be passed to the component by binding +// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Default = Template.bind({}); +Default.args = { + prompt: 'Search...', + onPress: () => alert('Pressed'), +}; + +const CustomPromptAndTooltip = Template.bind({}); +CustomPromptAndTooltip.args = { + prompt: 'Search for something...', + tooltip: 'Custom tooltip text', + onPress: () => alert('This component has custom prompt text. Also custom tooltip text when hovered.'), +}; + +const CustomBackground = Template.bind({}); +CustomBackground.args = { + prompt: 'Search...', + onPress: () => alert('This component has custom styles applied'), + style: {backgroundColor: 'darkgreen'}, +}; + +export default story; +export {Default, CustomPromptAndTooltip, CustomBackground}; From 46084935effc033c00501f26eea207824fec1d0a Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Tue, 5 Dec 2023 13:20:50 +0100 Subject: [PATCH 04/13] Drop spaces around brackets --- src/components/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 36e36fb69865..4dffec9f4257 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -39,7 +39,7 @@ function Search({onPress, prompt, tooltip, style}: SearchProps) { Date: Wed, 13 Dec 2023 13:28:47 +0100 Subject: [PATCH 05/13] Rename prompt to placeholder --- src/components/Search.tsx | 6 +++--- src/stories/Search.stories.js | 14 +++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 4dffec9f4257..b6ed39cb8fbe 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -15,7 +15,7 @@ type SearchProps = { onPress: (event?: GestureResponderEvent | KeyboardEvent) => void; // Text explaining what the user can search for - prompt: string; + placeholder: string; // Text showing up in a tooltip when component is hovered tooltip?: string; @@ -24,7 +24,7 @@ type SearchProps = { style?: StyleProp; }; -function Search({onPress, prompt, tooltip, style}: SearchProps) { +function Search({onPress, placeholder, tooltip, style}: SearchProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -46,7 +46,7 @@ function Search({onPress, prompt, tooltip, style}: SearchProps) { style={styles.searchInputStyle} numberOfLines={1} > - {prompt} + {placeholder} )} diff --git a/src/stories/Search.stories.js b/src/stories/Search.stories.js index bbd485ebc558..9d36e53187f1 100644 --- a/src/stories/Search.stories.js +++ b/src/stories/Search.stories.js @@ -20,23 +20,23 @@ function Template(args) { // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args const Default = Template.bind({}); Default.args = { - prompt: 'Search...', + placeholder: 'Search...', onPress: () => alert('Pressed'), }; -const CustomPromptAndTooltip = Template.bind({}); -CustomPromptAndTooltip.args = { - prompt: 'Search for something...', +const CustomPlaceholderAndTooltip = Template.bind({}); +CustomPlaceholderAndTooltip.args = { + placeholder: 'Search for something...', tooltip: 'Custom tooltip text', - onPress: () => alert('This component has custom prompt text. Also custom tooltip text when hovered.'), + onPress: () => alert('This component has custom placeholder text. Also custom tooltip text when hovered.'), }; const CustomBackground = Template.bind({}); CustomBackground.args = { - prompt: 'Search...', + placeholder: 'Search...', onPress: () => alert('This component has custom styles applied'), style: {backgroundColor: 'darkgreen'}, }; export default story; -export {Default, CustomPromptAndTooltip, CustomBackground}; +export {Default, CustomPlaceholderAndTooltip, CustomBackground}; From 68aeaf29bdc725aff908c124f95170e385aca41f Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 13 Dec 2023 13:43:56 +0100 Subject: [PATCH 06/13] Default placeholder and tooltip texts --- src/components/Search.tsx | 6 +++--- src/languages/en.ts | 2 +- src/languages/es.ts | 2 +- src/stories/Search.stories.js | 4 +--- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index b6ed39cb8fbe..aba42d932fca 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -15,7 +15,7 @@ type SearchProps = { onPress: (event?: GestureResponderEvent | KeyboardEvent) => void; // Text explaining what the user can search for - placeholder: string; + placeholder?: string; // Text showing up in a tooltip when component is hovered tooltip?: string; @@ -31,7 +31,7 @@ function Search({onPress, placeholder, tooltip, style}: SearchProps) { return ( @@ -46,7 +46,7 @@ function Search({onPress, placeholder, tooltip, style}: SearchProps) { style={styles.searchInputStyle} numberOfLines={1} > - {placeholder} + {placeholder ?? translate('common.searchWithThreeDots')} )} diff --git a/src/languages/en.ts b/src/languages/en.ts index 8f86bea3634b..e05a4a93c9d5 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -103,6 +103,7 @@ export default { optional: 'Optional', new: 'New', search: 'Search', + searchWithThreeDots: 'Search...', next: 'Next', previous: 'Previous', goBack: 'Go back', @@ -492,7 +493,6 @@ export default { }, sidebarScreen: { buttonSearch: 'Search for something...', - buttonSearchLabel: 'Search', buttonMySettings: 'My settings', fabNewChat: 'Start chat', fabNewChatExplained: 'Start chat (Floating action)', diff --git a/src/languages/es.ts b/src/languages/es.ts index 7a57fffb232b..7d19604cb958 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -93,6 +93,7 @@ export default { optional: 'Opcional', new: 'Nuevo', search: 'Buscar', + searchWithThreeDots: 'Buscar...', next: 'Siguiente', previous: 'Anterior', goBack: 'Volver', @@ -484,7 +485,6 @@ export default { }, sidebarScreen: { buttonSearch: 'Busca algo...', - buttonSearchLabel: 'Buscar', buttonMySettings: 'Mi configuración', fabNewChat: 'Iniciar chat', fabNewChatExplained: 'Iniciar chat (Acción flotante)', diff --git a/src/stories/Search.stories.js b/src/stories/Search.stories.js index 9d36e53187f1..f5ea47ba8ad1 100644 --- a/src/stories/Search.stories.js +++ b/src/stories/Search.stories.js @@ -20,20 +20,18 @@ function Template(args) { // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args const Default = Template.bind({}); Default.args = { - placeholder: 'Search...', onPress: () => alert('Pressed'), }; const CustomPlaceholderAndTooltip = Template.bind({}); CustomPlaceholderAndTooltip.args = { - placeholder: 'Search for something...', + placeholder: 'Search for a specific thing', tooltip: 'Custom tooltip text', onPress: () => alert('This component has custom placeholder text. Also custom tooltip text when hovered.'), }; const CustomBackground = Template.bind({}); CustomBackground.args = { - placeholder: 'Search...', onPress: () => alert('This component has custom styles applied'), style: {backgroundColor: 'darkgreen'}, }; From 145f1b46ae4325e2dd63b3bc294e53890c48d6ef Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 13 Dec 2023 13:49:01 +0100 Subject: [PATCH 07/13] Use predefined value for borderRadius --- src/styles/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index d95bb6ce1bd8..6568c4514cd1 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3019,7 +3019,7 @@ const styles = (theme: ThemeColors) => searchContainer: { backgroundColor: theme.highlightBG, - borderRadius: 999, + borderRadius: variables.componentBorderRadiusRounded, height: 40, minHeight: 40, maxHeight: 40, From aad68bc2ae0343aa1fcbd4f536bbd5b6aa75d77b Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 13 Dec 2023 14:07:17 +0100 Subject: [PATCH 08/13] Fix height of search bar --- src/components/Search.tsx | 1 + src/styles/styles.ts | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index aba42d932fca..de01188a802a 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -34,6 +34,7 @@ function Search({onPress, placeholder, tooltip, style}: SearchProps) { accessibilityLabel={tooltip ?? translate('common.search')} role={CONST.ACCESSIBILITY_ROLE.BUTTON} onPress={onPress} + style={styles.searchPressable} > {({hovered}) => ( diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 6568c4514cd1..1d5f875f94a6 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3017,12 +3017,13 @@ const styles = (theme: ThemeColors) => flex: 1, }, + searchPressable: { + height: 40, + }, + searchContainer: { backgroundColor: theme.highlightBG, borderRadius: variables.componentBorderRadiusRounded, - height: 40, - minHeight: 40, - maxHeight: 40, }, searchContainerHovered: { From cdea74ee79d595fc26d9ded484c07dbfb5734783 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 13 Dec 2023 14:14:04 +0100 Subject: [PATCH 09/13] Create style for search input instead of reusing existing styles --- src/components/Search.tsx | 2 +- src/styles/styles.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index de01188a802a..e464fcefec6f 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -37,7 +37,7 @@ function Search({onPress, placeholder, tooltip, style}: SearchProps) { style={styles.searchPressable} > {({hovered}) => ( - + }, searchContainer: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + gap: 8, + paddingHorizontal: 24, backgroundColor: theme.highlightBG, borderRadius: variables.componentBorderRadiusRounded, }, From 371ce8fa6c0aaded0d91b7fca9d033545620eec0 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 13 Dec 2023 14:20:58 +0100 Subject: [PATCH 10/13] Migrate Search.stories to TypeScript --- src/components/Search.tsx | 1 + .../{Search.stories.js => Search.stories.tsx} | 14 ++++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) rename src/stories/{Search.stories.js => Search.stories.tsx} (72%) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index e464fcefec6f..0a9de534ebf2 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -58,4 +58,5 @@ function Search({onPress, placeholder, tooltip, style}: SearchProps) { Search.displayName = 'Search'; +export type {SearchProps}; export default Search; diff --git a/src/stories/Search.stories.js b/src/stories/Search.stories.tsx similarity index 72% rename from src/stories/Search.stories.js rename to src/stories/Search.stories.tsx index f5ea47ba8ad1..a501fc2610b0 100644 --- a/src/stories/Search.stories.js +++ b/src/stories/Search.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Search from '@components/Search'; +import Search, {SearchProps} from '@components/Search'; /** * We use the Component Story Format for writing stories. Follow the docs here: @@ -11,26 +11,28 @@ const story = { component: Search, }; -function Template(args) { +type StoryType = typeof Template & {args?: Partial}; + +function Template(args: SearchProps) { // eslint-disable-next-line react/jsx-props-no-spreading return ; } // Arguments can be passed to the component by binding // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Default = Template.bind({}); +const Default: StoryType = Template.bind({}); Default.args = { onPress: () => alert('Pressed'), }; -const CustomPlaceholderAndTooltip = Template.bind({}); +const CustomPlaceholderAndTooltip: StoryType = Template.bind({}); CustomPlaceholderAndTooltip.args = { - placeholder: 'Search for a specific thing', + placeholder: 'Search for a specific thing...', tooltip: 'Custom tooltip text', onPress: () => alert('This component has custom placeholder text. Also custom tooltip text when hovered.'), }; -const CustomBackground = Template.bind({}); +const CustomBackground: StoryType = Template.bind({}); CustomBackground.args = { onPress: () => alert('This component has custom styles applied'), style: {backgroundColor: 'darkgreen'}, From 9a8b385b7318b9b9568db15f9183a111d46a7b76 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 13 Dec 2023 15:56:00 +0100 Subject: [PATCH 11/13] Adjust color after merge --- src/styles/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 00db87632906..3fc2a03322cc 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3040,7 +3040,7 @@ const styles = (theme: ThemeColors) => }, searchInputStyle: { - color: colors.darkSupportingText, + color: colors.productDark800, fontSize: 13, lineHeight: 16, width: '100%', From a6206892e09e0c9978e89160531c8c9f36e1d073 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Thu, 14 Dec 2023 19:24:17 +0100 Subject: [PATCH 12/13] Change import path --- src/components/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 0a9de534ebf2..f5b2dcd5b219 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@styles/useThemeStyles'; +import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import Icon from './Icon'; From d1dac19c77a951a08520dde8d12d398df7c9272b Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Fri, 15 Dec 2023 16:37:12 +0100 Subject: [PATCH 13/13] Adjust NAB --- src/components/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index f5b2dcd5b219..10820f44738d 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -32,7 +32,7 @@ function Search({onPress, placeholder, tooltip, style}: SearchProps) {