Skip to content

Commit 088ea43

Browse files
yuwenmemonyuwenmemon
authored
Merge pull request #93212 from Expensify/chore/92736-ui-changes
UI updates to add/update rules
2 parents 3c9df95 + f6d71d1 commit 088ea43

21 files changed

Lines changed: 52 additions & 48 deletions

File tree

‎src/components/TextInput/BaseTextInput/implementation/index.native.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ function BaseTextInput({
6464
shouldRenderHintAsHTML = false,
6565
onInputChange = () => {},
6666
multiline = false,
67+
shouldLabelStayOnSingleLine = false,
6768
autoCorrect = true,
6869
prefixCharacter = '',
6970
suffixCharacter = '',
@@ -345,6 +346,7 @@ function BaseTextInput({
345346
labelScale={labelScale}
346347
for={inputProps.nativeID}
347348
isMultiline={isMultiline}
349+
shouldLabelStayOnSingleLine={shouldLabelStayOnSingleLine}
348350
/>
349351
) : null}
350352
{hiddenLabel}

‎src/components/TextInput/BaseTextInput/implementation/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function BaseTextInput({
6363
shouldRenderHintAsHTML = false,
6464
onInputChange = () => {},
6565
multiline = false,
66+
shouldLabelStayOnSingleLine = false,
6667
shouldInterceptSwipe = false,
6768
autoCorrect = true,
6869
prefixCharacter = '',
@@ -392,6 +393,7 @@ function BaseTextInput({
392393
labelScale={labelScale}
393394
for={inputProps.nativeID}
394395
isMultiline={isMultiline}
396+
shouldLabelStayOnSingleLine={shouldLabelStayOnSingleLine}
395397
/>
396398
</>
397399
) : null}

‎src/components/TextInput/BaseTextInput/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps &
117117
/** Indicate whether input is multiline */
118118
multiline?: boolean;
119119

120+
/** Force the floating label to render on a single line and ellipsize even when the input is multiline */
121+
shouldLabelStayOnSingleLine?: boolean;
122+
120123
/** Set the default value to the input if there is a valid saved value */
121124
shouldUseDefaultValue?: boolean;
122125

‎src/components/TextInput/TextInputLabel/index.native.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import Animated, {useAnimatedStyle} from 'react-native-reanimated';
33
import useThemeStyles from '@hooks/useThemeStyles';
44
import type TextInputLabelProps from './types';
55

6-
function TextInputLabel({label, labelScale, labelTranslateY, isMultiline}: TextInputLabelProps) {
6+
function TextInputLabel({label, labelScale, labelTranslateY, isMultiline, shouldLabelStayOnSingleLine}: TextInputLabelProps) {
77
const styles = useThemeStyles();
8+
const shouldClipToSingleLine = !isMultiline || shouldLabelStayOnSingleLine;
89

910
const animatedStyle = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale));
1011
const animatedStyleForText = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale, true));
@@ -15,8 +16,8 @@ function TextInputLabel({label, labelScale, labelTranslateY, isMultiline}: TextI
1516
accessible={false}
1617
accessibilityElementsHidden
1718
importantForAccessibility="no"
18-
numberOfLines={!isMultiline ? 1 : undefined}
19-
ellipsizeMode={!isMultiline ? 'tail' : undefined}
19+
numberOfLines={shouldClipToSingleLine ? 1 : undefined}
20+
ellipsizeMode={shouldClipToSingleLine ? 'tail' : undefined}
2021
allowFontScaling={false}
2122
style={[styles.textInputLabel, animatedStyleForText]}
2223
>

‎src/components/TextInput/TextInputLabel/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import CONST from '@src/CONST';
77
import textRef from '@src/types/utils/textRef';
88
import type TextInputLabelProps from './types';
99

10-
function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale, isMultiline}: TextInputLabelProps) {
10+
function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale, isMultiline, shouldLabelStayOnSingleLine}: TextInputLabelProps) {
11+
const shouldClipToSingleLine = !isMultiline || shouldLabelStayOnSingleLine;
1112
const styles = useThemeStyles();
1213
const labelRef = useRef<Text | HTMLFormElement>(null);
1314

@@ -23,8 +24,8 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale,
2324

2425
return (
2526
<Animated.Text
26-
numberOfLines={!isMultiline ? 1 : undefined}
27-
ellipsizeMode={!isMultiline ? 'tail' : undefined}
27+
numberOfLines={shouldClipToSingleLine ? 1 : undefined}
28+
ellipsizeMode={shouldClipToSingleLine ? 'tail' : undefined}
2829
ref={textRef(labelRef)}
2930
role={CONST.ROLE.PRESENTATION}
3031
accessible={false}

‎src/components/TextInput/TextInputLabel/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ type TextInputLabelProps = {
1313
/** Whether the input is multiline */
1414
isMultiline?: boolean;
1515

16+
/** Force the floating label to render on a single line and ellipsize even when the input is multiline */
17+
shouldLabelStayOnSingleLine?: boolean;
18+
1619
/** For attribute for label */
1720
for?: string;
1821
};

‎src/languages/de.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7396,15 +7396,14 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
73967396
},
73977397
agentRules: {
73987398
title: 'Agent-Regeln',
7399-
subtitle: 'Beschreiben Sie flexible Regeln, die ausgeführt werden, wenn Sie sie benötigen',
7399+
subtitle: 'Beschreiben Sie flexible Regeln, die ausgeführt werden, wenn Sie sie benötigen.',
74007400
addRule: 'Agent-Regel hinzufügen',
74017401
findRule: 'Agent-Regel finden',
74027402
addRuleTitle: 'Regel hinzufügen',
74037403
editRuleTitle: 'Regel bearbeiten',
74047404
deleteRule: 'Regel löschen',
74057405
deleteRuleConfirmation: 'Sind Sie sicher, dass Sie diese Regel löschen möchten?',
7406-
describeRuleTitle: 'Beschreiben Sie Ihre Regel',
7407-
describeRuleSubtitle: 'Beschreiben Sie Ihre Regel und Concierge erstellt sie',
7406+
describeRuleTitle: 'Beschreiben Sie Ihre Regel und Concierge erstellt sie',
74087407
disclaimer: 'KI-Agenten können Fehler machen.',
74097408
agentCreatedTitle: 'RuleBot wurde zu Ihrem Arbeitsbereich hinzugefügt!',
74107409
agentCreatedDescription: (agentsRoute: string) =>

‎src/languages/en.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7506,15 +7506,14 @@ const translations = {
75067506
},
75077507
agentRules: {
75087508
title: 'Agent Rules',
7509-
subtitle: 'Describe flexible rules that run when you need them',
7509+
subtitle: 'Describe flexible rules that run when you need them.',
75107510
addRule: 'Add Agent rule',
75117511
findRule: 'Find Agent rule',
75127512
addRuleTitle: 'Add rule',
75137513
editRuleTitle: 'Edit rule',
75147514
deleteRule: 'Delete rule',
75157515
deleteRuleConfirmation: 'Are you sure you want to delete this rule?',
7516-
describeRuleTitle: 'Describe your rule',
7517-
describeRuleSubtitle: 'Describe your rule and Concierge will build it',
7516+
describeRuleTitle: 'Describe your rule and Concierge will build it',
75187517
disclaimer: 'AI agents can make mistakes.',
75197518
agentCreatedTitle: 'RuleBot has been added to your workspace!',
75207519
agentCreatedDescription: (agentsRoute: string) =>

‎src/languages/es.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7289,12 +7289,11 @@ ${amount} para ${merchant} - ${date}`,
72897289
},
72907290
agentRules: {
72917291
title: 'Reglas de Agente',
7292-
subtitle: 'Describe reglas flexibles que se ejecutan cuando las necesitas',
7292+
subtitle: 'Describe reglas flexibles que se ejecutan cuando las necesitas.',
72937293
addRule: 'Añadir regla de Agente',
72947294
findRule: 'Buscar regla de Agente',
72957295
addRuleTitle: 'Añadir regla',
7296-
describeRuleTitle: 'Describe tu regla',
7297-
describeRuleSubtitle: 'Describe tu regla y Concierge la creará',
7296+
describeRuleTitle: 'Describe tu regla y Concierge la creará',
72987297
editRuleTitle: 'Editar regla',
72997298
deleteRule: 'Eliminar regla',
73007299
deleteRuleConfirmation: '¿Seguro que quieres eliminar esta regla?',

‎src/languages/fr.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7422,15 +7422,14 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
74227422
},
74237423
agentRules: {
74247424
title: 'Règles Agent',
7425-
subtitle: 'Décrivez des règles flexibles qui s’exécutent quand vous en avez besoin',
7425+
subtitle: 'Décrivez des règles flexibles qui s’exécutent quand vous en avez besoin.',
74267426
addRule: 'Ajouter une règle Agent',
74277427
findRule: 'Rechercher une règle Agent',
74287428
addRuleTitle: 'Ajouter une règle',
74297429
editRuleTitle: 'Modifier la règle',
74307430
deleteRule: 'Supprimer la règle',
74317431
deleteRuleConfirmation: 'Voulez-vous vraiment supprimer cette règle ?',
7432-
describeRuleTitle: 'Décrivez votre règle',
7433-
describeRuleSubtitle: 'Décrivez votre règle et Concierge la créera',
7432+
describeRuleTitle: 'Décrivez votre règle et Concierge la créera',
74347433
disclaimer: 'Les agents IA peuvent faire des erreurs.',
74357434
agentCreatedTitle: 'RuleBot a été ajouté à votre espace de travail !',
74367435
agentCreatedDescription: (agentsRoute: string) =>

0 commit comments

Comments
 (0)