@widergy/mobile-ui 1.36.3 → 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 (6) hide show
  1. package/CHANGELOG.md +7 -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/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
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
+
1
8
  ## [1.36.3](https://github.com/widergy/mobile-ui/compare/v1.36.2...v1.36.3) (2025-02-19)
2
9
 
3
10
 
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/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.3",
5
+ "version": "1.36.4",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [