verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[FIX] Apply thicker border width and remove fixed height on TextInput (#4503) 

* [FIX] Apply thicker border width and remove fixed height on TextInput

* changed the last input border from hairline to 2

* update formtextinput storyshot test
This commit is contained in:
Reinaldo Neto 2022-09-22 18:16:25 -03:00 committed by GitHub
parent dec5c4470c
commit 214e1cc009
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 59 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\",\\"top\\":14},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":2,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\"},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;

10
__tests__/containers/TextInput/__snapshots__/TextInput.stories.storyshot
View File

File diff suppressed because one or more lines are too long

11
app/containers/TextInput/FormTextInput.tsx
View File

@ -24,10 +24,9 @@ const styles = StyleSheet.create({
},
input: {
...sharedStyles.textRegular,
height: 48,
fontSize: 16,
padding: 14,
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 2,
borderRadius: 2
},
inputIconLeft: {
@ -37,11 +36,11 @@ const styles = StyleSheet.create({
paddingRight: 45
},
wrap: {
position: 'relative'
position: 'relative',
justifyContent: 'center'
},
iconContainer: {
position: 'absolute',
top: 14
position: 'absolute'
},
iconLeft: {
left: 15
@ -98,7 +97,7 @@ export const FormTextInput = ({
style={[
styles.input,
iconLeft && styles.inputIconLeft,
(secureTextEntry || iconRight) && styles.inputIconRight,
(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
{
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor,

41
app/containers/TextInput/TextInput.stories.tsx
View File

@ -27,3 +27,44 @@ export const ShortAndLong = () => (
</View>
</>
);
export const Icons = () => (
<>
<View style={styles.paddingHorizontal}>
<FormTextInput label='Right icon' placeholder='placeholder' value={item.name} iconRight={'close'} />
<FormTextInput label='Left icon' placeholder='placeholder' value={item.longText} iconLeft={'mail'} />
<FormTextInput label='Both icons' placeholder='placeholder' value={item.longText} iconLeft={'mail'} iconRight={'add'} />
<FormTextInput
label='Icon and touchable clear input'
placeholder='placeholder'
value={item.longText}
onClearInput={() => {}}
/>
</View>
</>
);
export const Multiline = () => (
<>
<View style={styles.paddingHorizontal}>
<FormTextInput label='Multiline text' placeholder='placeholder' multiline value={`${item.name}\n\n${item.longText}\n`} />
</View>
</>
);
export const SecureTextEntry = () => (
<>
<View style={styles.paddingHorizontal}>
<FormTextInput label='Secure text disabled' placeholder='placeholder' value={item.name} />
<FormTextInput label='Secure text enabled' placeholder='placeholder' value={item.name} secureTextEntry />
</View>
</>
);
export const Loading = () => (
<>
<View style={styles.paddingHorizontal}>
<FormTextInput label='Loading false' placeholder='placeholder' value={item.name} loading={false} />
<FormTextInput label='Loading true' placeholder='placeholder' value={item.name} loading />
</View>
</>
);

2
app/containers/UIKit/DatePicker.tsx
View File

@ -19,7 +19,7 @@ const styles = StyleSheet.create({
input: {
height: 48,
paddingLeft: 16,
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 2,
borderRadius: 2,
alignItems: 'center',
flexDirection: 'row'

2
app/containers/UIKit/MultiSelect/styles.ts
View File

@ -35,7 +35,7 @@ export default StyleSheet.create({
minHeight: 48,
paddingHorizontal: 8,
paddingBottom: 0,
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 2,
borderRadius: 2,
alignItems: 'center',
flexDirection: 'row'

2
app/containers/UIKit/Select.tsx
View File

@ -19,7 +19,7 @@ const styles = StyleSheet.create({
viewContainer: {
marginBottom: 16,
paddingHorizontal: 16,
borderWidth: StyleSheet.hairlineWidth,
borderWidth: 2,
borderRadius: 2,
justifyContent: 'center'
},

1
app/views/StatusView/index.tsx
View File

@ -49,7 +49,6 @@ const styles = StyleSheet.create({
},
inputLeft: {
position: 'absolute',
top: 12,
left: 12
},
inputStyle: {