Skip to content
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

fix: textinput long text causes wrapping (ios) #4261

Merged
merged 8 commits into from
Jan 10, 2024
Merged

fix: textinput long text causes wrapping (ios) #4261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b8fb9e
fix: textinput long text causes wrapping (ios)
jnbushride Jan 8, 2024
6d56ed4
fix: add to state
jnbushride Jan 8, 2024
876ac3f
fix: update test
jnbushride Jan 8, 2024
3d4545a
fix: pass unit test but how to specify for web platform
jnbushride Jan 8, 2024
b33df5f
fix: add todo update jest test
jnbushride Jan 8, 2024
fcdc4cc
fix: lint files
jnbushride Jan 8, 2024
a345194
fix: missing comma for lint
jnbushride Jan 8, 2024
1fc8c88
test: correct unit test
lukewalczak Jan 10, 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
36 changes: 36 additions & 0 deletions example/src/Examples/TextInputExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,13 @@ const initialState: State = {
outlinedText: '',
largeText: '',
flatTextPassword: 'Password',
flatLongText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae odio quis dolor tempor mattis at non sem. Suspendisse et sem tincidunt, accumsan massa eleifend, euismod dui. Praesent eget urna lectus.',
outlinedLargeText: '',
outlinedCustomLabel: '',
outlinedTextPassword: '',
outlinedLongText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae odio quis dolor tempor mattis at non sem. Suspendisse et sem tincidunt, accumsan massa eleifend, euismod dui. Praesent eget urna lectus.',
nameNoPadding: '',
customStyleText: '',
nameRequired: '',
Expand Down Expand Up @@ -89,9 +93,11 @@ const TextInputExample = () => {
outlinedText,
largeText,
flatTextPassword,
flatLongText,
outlinedLargeText,
outlinedCustomLabel,
outlinedTextPassword,
outlinedLongText,
nameNoPadding,
customStyleText,
nameRequired,
Expand Down Expand Up @@ -249,6 +255,19 @@ const TextInputExample = () => {
/>
}
/>
<TextInput
style={[
styles.inputContainerStyle,
styles.fixedHeight,
styles.autoText,
]}
label="Flat input long text"
placeholder="Type something"
value={flatLongText}
onChangeText={(flatLongText) =>
inputActionHandler('flatLongText', flatLongText)
}
/>
</List.Accordion>
<List.Accordion title="Outlined inputs" id="outlined">
<TextInput
Expand Down Expand Up @@ -324,6 +343,20 @@ const TextInputExample = () => {
/>
}
/>
<TextInput
mode="outlined"
style={[
styles.inputContainerStyle,
styles.fixedHeight,
styles.autoText,
]}
label="Outlined input long text"
placeholder="Type something"
value={outlinedLongText}
onChangeText={(outlinedLongText) =>
inputActionHandler('outlinedLongText', outlinedLongText)
}
/>
</List.Accordion>
<List.Accordion title="Disabled inputs" id="disabled">
<TextInput
Expand Down Expand Up @@ -873,6 +906,9 @@ const styles = StyleSheet.create({
right: {
width: '70%',
},
autoText: {
textAlign: 'auto',
},
});

export default TextInputExample;
2 changes: 2 additions & 0 deletions example/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ export type State = {
outlinedText: string;
largeText: string;
flatTextPassword: string;
flatLongText: string;
outlinedLargeText: string;
outlinedCustomLabel: string;
outlinedTextPassword: string;
outlinedLongText: string;
nameNoPadding: string;
customStyleText: string;
nameRequired: string;
Expand Down
3 changes: 2 additions & 1 deletion src/components/TextInput/TextInputFlat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@ const TextInputFlat = ({
...viewStyle
} = (StyleSheet.flatten(style) || {}) as TextStyle;
const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
const lineHeight = lineHeightStyle || fontSize * 1.2;
const lineHeight =
lineHeightStyle || (Platform.OS === 'web' ? fontSize * 1.2 : undefined);

const isPaddingHorizontalPassed =
paddingHorizontal !== undefined && typeof paddingHorizontal === 'number';
Expand Down
3 changes: 2 additions & 1 deletion src/components/TextInput/TextInputOutlined.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@ const TextInputOutlined = ({
...viewStyle
} = (StyleSheet.flatten(style) || {}) as TextStyle;
const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
const lineHeight = lineHeightStyle || fontSize * 1.2;
const lineHeight =
lineHeightStyle || (Platform.OS === 'web' ? fontSize * 1.2 : undefined);

const {
inputTextColor,
Expand Down
7 changes: 5 additions & 2 deletions src/components/__tests__/TextInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,8 @@ it("correctly applies theme background to label when input's background is trans
});
});

it('always applies line height, even if not specified', () => {
it('always applies line height for web, even if not specified', () => {
Platform.OS = 'web';
const { getByTestId } = render(
<View>
<TextInput
Expand Down Expand Up @@ -446,7 +447,9 @@ it('always applies line height, even if not specified', () => {
expect(getByTestId('large-font')).toHaveStyle({ lineHeight: 30 * 1.2 });
expect(getByTestId('large-font-flat')).toHaveStyle({ lineHeight: 30 * 1.2 });

expect(getByTestId('custom-line-height')).toHaveStyle({ lineHeight: 29 });
expect(getByTestId('custom-line-height')).toHaveStyle({
lineHeight: 29,
});
expect(getByTestId('custom-line-height-flat')).toHaveStyle({
lineHeight: 29,
});
Expand Down
54 changes: 27 additions & 27 deletions src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ exports[`correctly applies a component as the text label 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`correctly applies a component as the text label 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -192,7 +192,7 @@ exports[`correctly applies a component as the text label 1`] = `
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingLeft": 16,
"paddingRight": 16,
Expand Down Expand Up @@ -296,7 +296,7 @@ exports[`correctly applies cursorColor prop 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -334,7 +334,7 @@ exports[`correctly applies cursorColor prop 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -390,7 +390,7 @@ exports[`correctly applies cursorColor prop 1`] = `
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingLeft": 16,
"paddingRight": 16,
Expand Down Expand Up @@ -494,7 +494,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -532,7 +532,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -588,7 +588,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingLeft": 16,
"paddingRight": 16,
Expand Down Expand Up @@ -684,7 +684,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
"fontWeight": undefined,
"left": 8,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"opacity": 1,
"paddingHorizontal": 0,
"position": "absolute",
Expand Down Expand Up @@ -726,7 +726,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingHorizontal": 16,
Expand Down Expand Up @@ -763,7 +763,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingHorizontal": 16,
Expand Down Expand Up @@ -819,7 +819,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingHorizontal": 16,
"textAlign": "left",
Expand Down Expand Up @@ -922,7 +922,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -960,7 +960,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -1016,7 +1016,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingLeft": 16,
"paddingRight": 16,
Expand Down Expand Up @@ -1122,7 +1122,7 @@ exports[`correctly applies textAlign center 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -1160,7 +1160,7 @@ exports[`correctly applies textAlign center 1`] = `
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -1216,7 +1216,7 @@ exports[`correctly applies textAlign center 1`] = `
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingLeft": 16,
"paddingRight": 16,
Expand Down Expand Up @@ -1320,7 +1320,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -1358,7 +1358,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 16,
Expand Down Expand Up @@ -1414,7 +1414,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingLeft": 16,
"paddingRight": 56,
Expand Down Expand Up @@ -1463,7 +1463,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
},
{
"color": "#f44336",
Expand Down Expand Up @@ -1720,7 +1720,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 56,
Expand Down Expand Up @@ -1758,7 +1758,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
"fontWeight": undefined,
"left": 0,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"maxWidth": 73,
"opacity": 0,
"paddingLeft": 56,
Expand Down Expand Up @@ -1814,7 +1814,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
"minWidth": 65,
"paddingLeft": 56,
"paddingRight": 56,
Expand Down Expand Up @@ -2023,7 +2023,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
"fontSize": 16,
"fontWeight": undefined,
"letterSpacing": 0.15,
"lineHeight": 19.2,
"lineHeight": undefined,
},
{
"color": "#f44336",
Expand Down
Loading