@widergy/mobile-ui 1.36.2 → 1.36.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/UTCheckBox/index.js +35 -20
  3. package/lib/components/UTCheckBox/proptypes.js +1 -0
  4. package/lib/components/UTCheckBox/styles.js +6 -0
  5. package/lib/components/UTCheckBox/theme.js +20 -13
  6. package/lib/components/UTTextInput/versions/V0/flavors/FilledInput/index.js +3 -1
  7. package/lib/components/UTTextInput/versions/V0/flavors/OutlinedInput/index.js +3 -1
  8. package/lib/components/UTTextInput/versions/V0/flavors/StandardInput/index.js +2 -1
  9. package/lib/components/UTTextInput/versions/V0/index.js +2 -0
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [1.36.4](https://github.com/widergy/mobile-ui/compare/v1.36.3...v1.36.4) (2025-02-20)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * [UGENSA-1009, UGC-1183] add checkbox error message ([#413](https://github.com/widergy/mobile-ui/issues/413)) ([b80d377](https://github.com/widergy/mobile-ui/commit/b80d3772be44b072130c61ce2e80a91ad0889646))
7
+
8
+ ## [1.36.3](https://github.com/widergy/mobile-ui/compare/v1.36.2...v1.36.3) (2025-02-19)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * [OSFP-900] icon style ([#412](https://github.com/widergy/mobile-ui/issues/412)) ([d43d4c2](https://github.com/widergy/mobile-ui/commit/d43d4c2c5bcd7f0f160eb56c69fb39db775a8f42))
14
+
1
15
  ## [1.36.2](https://github.com/widergy/mobile-ui/compare/v1.36.1...v1.36.2) (2025-02-12)
2
16
 
3
17
 
package/lib/components/UTCheckBox/index.js CHANGED
@@ -4,6 +4,8 @@ import { View, Pressable } from 'react-native';
4
4
  import { useTheme } from '../../theming';
5
5
  import UTFieldLabel from '../UTFieldLabel';
6
6
  import UTIcon from '../UTIcon';
7
+ import { formatErrorToValidation } from '../UTValidation/utils';
8
+ import UTValidation from '../UTValidation';
7
9
 
8
10
  import { BUTTON_VARIANT, CHECKED_ICON, INDETERMINATE_ICON } from './constants';
9
11
  import { propTypes, defaultProps } from './proptypes';
@@ -11,16 +13,17 @@ import { retrieveStyle } from './theme';
11
13
  import styles from './styles';
12
14
 
13
15
  const UTCheckBox = ({
14
- value,
15
- onChange,
16
16
  disabled,
17
+ error,
17
18
  indeterminate,
18
19
  isSimple,
20
+ onChange,
19
21
  required,
20
22
  reversed,
21
23
  spacing,
22
24
  style,
23
25
  title,
26
+ value,
24
27
  variant,
25
28
  withMarkdown
26
29
  }) => {
@@ -32,6 +35,7 @@ const UTCheckBox = ({
32
35
  retrieveStyle({
33
36
  checked: value,
34
37
  disabled,
38
+ error,
35
39
  indeterminate,
36
40
  pressed,
37
41
  reversed,
@@ -40,7 +44,7 @@ const UTCheckBox = ({
40
44
  theme,
41
45
  variant
42
46
  }),
43
- [value, disabled, indeterminate, reversed, spacing, style, theme, variant, pressed]
47
+ [value, disabled, error, indeterminate, reversed, spacing, style, theme, variant, pressed]
44
48
  );
45
49
 
46
50
  const iconName = useMemo(
@@ -59,6 +63,8 @@ const UTCheckBox = ({
59
63
 
60
64
  const shouldHighlightLabel = value && variant === BUTTON_VARIANT;
61
65
 
66
+ const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
67
+
62
68
  return (
63
69
  <Pressable
64
70
  style={pressableStyles}
@@ -67,24 +73,33 @@ const UTCheckBox = ({
67
73
  onPressIn={handlePressIn}
68
74
  onPressOut={handlePressOut}
69
75
  >
70
- <View style={containerStyles}>
71
- {isSimple ? (
72
- <UTIcon name="IconCheck" shade="04" colorTheme="accent" style={value ? undefined : styles.hidden} />
73
- ) : (
74
- <View style={boxStyles}>
75
- <View style={iconContainerStyles}>
76
- <UTIcon colorTheme="light" name={iconName} size={16} />
76
+ <View style={styles.container}>
77
+ <View style={containerStyles}>
78
+ {isSimple ? (
79
+ <UTIcon
80
+ name="IconCheck"
81
+ shade="04"
82
+ colorTheme="accent"
83
+ style={value ? undefined : styles.hidden}
84
+ />
85
+ ) : (
86
+ <View style={boxStyles}>
87
+ <View style={iconContainerStyles}>
88
+ <UTIcon colorTheme="light" name={iconName} size={16} />
89
+ </View>
77
90
  </View>
78
- </View>
79
- )}
80
- <UTFieldLabel
81
- colorTheme={shouldHighlightLabel ? 'accent' : 'dark'}
82
- required={required}
83
- style={titleStyles}
84
- withMarkdown={withMarkdown}
85
- >
86
- {title}
87
- </UTFieldLabel>
91
+ )}
92
+
93
+ <UTFieldLabel
94
+ colorTheme={shouldHighlightLabel ? 'accent' : 'dark'}
95
+ required={required}
96
+ style={titleStyles}
97
+ withMarkdown={withMarkdown}
98
+ >
99
+ {title}
100
+ </UTFieldLabel>
101
+ </View>
102
+ {validationData && <UTValidation validationData={validationData} />}
88
103
  </View>
89
104
  </Pressable>
90
105
  );
package/lib/components/UTCheckBox/proptypes.js CHANGED
@@ -14,6 +14,7 @@ export const defaultProps = {
14
14
  export const propTypes = {
15
15
  checked: bool,
16
16
  disabled: bool,
17
+ error: string,
17
18
  indeterminate: bool,
18
19
  isSimple: bool,
19
20
  onPress: func,
package/lib/components/UTCheckBox/styles.js CHANGED
@@ -1,6 +1,12 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
3
  export default StyleSheet.create({
4
+ container: {
5
+ display: 'flex',
6
+ flexDirection: 'column',
7
+ gap: 8,
8
+ width: '100%'
9
+ },
4
10
  hidden: {
5
11
  opacity: 0
6
12
  }
package/lib/components/UTCheckBox/theme.js CHANGED
@@ -28,6 +28,7 @@ const baseCheckBoxTheme = theme => ({
28
28
  const conditionalStyles = ({
29
29
  checked,
30
30
  disabled,
31
+ error,
31
32
  indeterminate,
32
33
  reversed,
33
34
  spacing,
@@ -37,18 +38,6 @@ const conditionalStyles = ({
37
38
  }) => {
38
39
  const spacingValue = spacing === SPACING.SMALL ? SMALL_SPACING : MEDIUM_SPACING;
39
40
 
40
- const pressable =
41
- variant === BUTTON_VARIANT
42
- ? {
43
- borderRadius: 8,
44
- paddingHorizontal: 16,
45
- paddingVertical: 12,
46
- ...(pressed && {
47
- backgroundColor: theme.Palette.light['04']
48
- })
49
- }
50
- : {};
51
-
52
41
  return {
53
42
  container: {
54
43
  ...(reversed && {
@@ -63,6 +52,9 @@ const conditionalStyles = ({
63
52
  ...((checked || indeterminate) && {
64
53
  backgroundColor: theme.Palette.accent['04'],
65
54
  borderColor: theme.Palette.accent['04']
55
+ }),
56
+ ...(error && {
57
+ borderColor: theme.Palette.error['04']
66
58
  })
67
59
  },
68
60
  box: {
@@ -81,13 +73,27 @@ const conditionalStyles = ({
81
73
  padding: 5
82
74
  })
83
75
  },
84
- pressable
76
+ pressable: {
77
+ ...(variant === BUTTON_VARIANT && {
78
+ borderRadius: 8,
79
+ paddingHorizontal: 16,
80
+ paddingVertical: 12,
81
+ ...(pressed && {
82
+ backgroundColor: theme.Palette.light['04']
83
+ }),
84
+ ...(error && {
85
+ backgroundColor: theme.Palette.error['02']
86
+ })
87
+ }),
88
+ width: '100%'
89
+ }
85
90
  };
86
91
  };
87
92
 
88
93
  export const retrieveStyle = ({
89
94
  checked,
90
95
  disabled,
96
+ error,
91
97
  indeterminate,
92
98
  reversed,
93
99
  spacing,
@@ -101,6 +107,7 @@ export const retrieveStyle = ({
101
107
  const { container, iconContainer, box, pressable } = conditionalStyles({
102
108
  checked,
103
109
  disabled,
110
+ error,
104
111
  indeterminate,
105
112
  reversed,
106
113
  spacing,
package/lib/components/UTTextInput/versions/V0/flavors/FilledInput/index.js CHANGED
@@ -13,6 +13,7 @@ import Icon from '../../../../../Icon';
13
13
  import ownStyles, { CONTAINER_PADDINGS } from './styles';
14
14
 
15
15
  const FilledInput = ({
16
+ iconStyle,
16
17
  value,
17
18
  onChange,
18
19
  placeholder,
@@ -82,7 +83,8 @@ const FilledInput = ({
82
83
  fontFamily: theme.fonts.fontFamily
83
84
  },
84
85
  styles?.input
85
- ]
86
+ ],
87
+ icon: iconStyle || {}
86
88
  }}
87
89
  onChange={onChange}
88
90
  value={value}
package/lib/components/UTTextInput/versions/V0/flavors/OutlinedInput/index.js CHANGED
@@ -13,6 +13,7 @@ import Icon from '../../../../../Icon';
13
13
  import ownStyles, { CONTAINER_PADDINGS } from './styles';
14
14
 
15
15
  const OutlinedInput = ({
16
+ iconStyle,
16
17
  value,
17
18
  onChange,
18
19
  placeholder,
@@ -110,7 +111,8 @@ const OutlinedInput = ({
110
111
  margin: focused ? -1 : 0
111
112
  },
112
113
  styles?.input
113
- ]
114
+ ],
115
+ icon: iconStyle || {}
114
116
  }}
115
117
  onChange={onChange}
116
118
  value={value}
package/lib/components/UTTextInput/versions/V0/flavors/StandardInput/index.js CHANGED
@@ -13,6 +13,7 @@ import Icon from '../../../../../Icon';
13
13
  import ownStyles, { CONTAINER_PADDINGS } from './styles';
14
14
 
15
15
  const StandardInput = ({
16
+ iconStyle,
16
17
  value,
17
18
  onChange,
18
19
  placeholder,
@@ -69,7 +70,7 @@ const StandardInput = ({
69
70
  },
70
71
  styles?.input
71
72
  ],
72
- icon: { alignSelf: 'flex-end' }
73
+ icon: iconStyle || { alignSelf: 'flex-end' }
73
74
  }}
74
75
  onChange={onChange}
75
76
  value={value}
package/lib/components/UTTextInput/versions/V0/index.js CHANGED
@@ -15,6 +15,7 @@ const variants = {
15
15
  };
16
16
 
17
17
  const UTTextInput = ({
18
+ iconStyle,
18
19
  variant = 'standard',
19
20
  theme,
20
21
  onFocus,
@@ -46,6 +47,7 @@ const UTTextInput = ({
46
47
  return (
47
48
  <InputComponent
48
49
  {...props}
50
+ iconStyle={iconStyle}
49
51
  onLayout={handleLayout}
50
52
  onBlur={handleBlur}
51
53
  onFocus={handleFocus}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@widergy/mobile-ui",
3
3
  "description": "Widergy Mobile Components",
4
4
  "author": "widergy",
5
- "version": "1.36.2",
5
+ "version": "1.36.4",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [