Skip to content

Improve UX of modifying single line text inputs #40757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
May 3, 2024
Merged

Improve UX of modifying single line text inputs #40757

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f4d7bd2
Improve UX of modifying single line text inputs
nkdengineer Apr 23, 2024
25af916
resolve conflict
nkdengineer Apr 24, 2024
ef96598
add clear icon
nkdengineer Apr 24, 2024
d141a51
add cicler svg
nkdengineer Apr 24, 2024
12e7820
fix icon size
nkdengineer Apr 25, 2024
d9b34bf
Update src/components/TextInput/BaseTextInput/types.ts
nkdengineer Apr 26, 2024
82e1c2d
add translation
nkdengineer Apr 26, 2024
84fa2ce
fix conflict
nkdengineer Apr 26, 2024
3b098fe
fix remove onClearInput
nkdengineer Apr 26, 2024
5ceb448
fix: add TextInputClearButton component
nkdengineer Apr 29, 2024
30c3847
Merge branch 'main' into fix/40313
nkdengineer May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions assets/images/x-circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/Icon/Expensicons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ import Wallet from '@assets/images/wallet.svg';
import Workflows from '@assets/images/workflows.svg';
import Workspace from '@assets/images/workspace-default-avatar.svg';
import Wrench from '@assets/images/wrench.svg';
import Clear from '@assets/images/x-circle.svg';
import Zoom from '@assets/images/zoom.svg';

export {
Expand Down Expand Up @@ -326,4 +327,5 @@ export {
ChatBubbleReply,
Lightbulb,
DocumentPlus,
Clear,
};
3 changes: 3 additions & 0 deletions src/components/TextInput/BaseTextInput/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import type {AnimatedTextInputRef} from '@components/RNTextInput';
import RNTextInput from '@components/RNTextInput';
import Text from '@components/Text';
import * as styleConst from '@components/TextInput/styleConst';
import TextInputClearButton from '@components/TextInput/TextInputClearButton';
import TextInputLabel from '@components/TextInput/TextInputLabel';
import useLocalize from '@hooks/useLocalize';
import useMarkdownStyle from '@hooks/useMarkdownStyle';
Expand Down Expand Up @@ -60,6 +61,7 @@ function BaseTextInput(
prefixCharacter = '',
inputID,
isMarkdownEnabled = false,
shouldShowClearButton = false,
prefixContainerStyle = [],
prefixStyle = [],
...props
Expand Down Expand Up @@ -368,6 +370,7 @@ function BaseTextInput(
defaultValue={defaultValue}
markdownStyle={markdownStyle}
/>
{isFocused && !isReadOnly && shouldShowClearButton && value && <TextInputClearButton onPressButton={() => setValue('')} />}
{inputProps.isLoading && (
<ActivityIndicator
size="small"
Expand Down
3 changes: 3 additions & 0 deletions src/components/TextInput/BaseTextInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import RNTextInput from '@components/RNTextInput';
import SwipeInterceptPanResponder from '@components/SwipeInterceptPanResponder';
import Text from '@components/Text';
import * as styleConst from '@components/TextInput/styleConst';
import TextInputClearButton from '@components/TextInput/TextInputClearButton';
import TextInputLabel from '@components/TextInput/TextInputLabel';
import useLocalize from '@hooks/useLocalize';
import useMarkdownStyle from '@hooks/useMarkdownStyle';
Expand Down Expand Up @@ -62,6 +63,7 @@ function BaseTextInput(
prefixCharacter = '',
inputID,
isMarkdownEnabled = false,
shouldShowClearButton = false,
prefixContainerStyle = [],
prefixStyle = [],
...inputProps
Expand Down Expand Up @@ -394,6 +396,7 @@ function BaseTextInput(
defaultValue={defaultValue}
markdownStyle={markdownStyle}
/>
{isFocused && !isReadOnly && shouldShowClearButton && value && <TextInputClearButton onPressButton={() => setValue('')} />}
{inputProps.isLoading && (
<ActivityIndicator
size="small"
Expand Down
3 changes: 3 additions & 0 deletions src/components/TextInput/BaseTextInput/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,9 @@ type CustomBaseTextInputProps = {
/** Should live markdown be enabled. Changes RNTextInput component to RNMarkdownTextInput */
isMarkdownEnabled?: boolean;

/** Whether the clear button should be displayed */
shouldShowClearButton?: boolean;

/** Style for the prefix */
prefixStyle?: StyleProp<TextStyle>;

Expand Down
42 changes: 42 additions & 0 deletions src/components/TextInput/TextInputClearButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import {forwardRef} from 'react';
import Icon from '@components/Icon';
import {PressableWithoutFeedback} from '@components/Pressable';
import Tooltip from '@components/Tooltip';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';

type TextInputClearButtonProps = {
onPressButton: () => void;
};

function TextInputClearButton({onPressButton}: TextInputClearButtonProps) {
const theme = useTheme();
const styles = useThemeStyles();
const {translate} = useLocalize();
return (
<Tooltip text={translate('common.clear')}>
<PressableWithoutFeedback
style={[styles.mt4, styles.ml1]}
accessibilityRole={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.clear')}
onMouseDown={(e) => {
e.preventDefault();
}}
onPress={onPressButton}
>
<Icon
src={Expensicons.Clear}
width={20}
height={20}
fill={theme.icon}
/>
</PressableWithoutFeedback>
</Tooltip>
);
}

TextInputClearButton.displayName = 'TextInputClearButton';

export default forwardRef(TextInputClearButton);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome thanks! ❤️

1 change: 1 addition & 0 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,7 @@ export default {
subtitleText3: 'button below.',
},
businessName: 'Business name',
clear: 'Clear',
},
location: {
useCurrent: 'Use current location',
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@ export default {
subtitleText3: '.',
},
businessName: 'Nombre de la empresa',
clear: 'Clara',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we get this copy approved ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marcaaron not yet, how can i get it correctly.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ask for the copy in Slack in #expensify-open-source like this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marcaaron I updated according to approval here

},
location: {
useCurrent: 'Usar ubicación actual',
Expand Down
1 change: 1 addition & 0 deletions src/pages/GroupChatNameEditPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ function GroupChatNameEditPage({groupChatDraft, route}: GroupChatNameEditPagePro
inputID={INPUT_IDS.NEW_CHAT_NAME}
role={CONST.ROLE.PRESENTATION}
ref={inputCallbackRef}
shouldShowClearButton
/>
</FormProvider>
</ScreenWrapper>
Expand Down
Loading