@widergy/mobile-ui 1.32.5 → 1.32.7

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.32.7](https://github.com/widergy/mobile-ui/compare/v1.32.6...v1.32.7) (2024-12-02)
+
+
+### Bug Fixes
+
+* [UGC-1012] utselect no options text ([#391](https://github.com/widergy/mobile-ui/issues/391)) ([be869ed](https://github.com/widergy/mobile-ui/commit/be869ed0f96d0866b49c0ee2f91cbdfd161702fe))
+
+## [1.32.6](https://github.com/widergy/mobile-ui/compare/v1.32.5...v1.32.6) (2024-12-02)
+
+
+### Bug Fixes
+
+* [UGC-1029] proportional utlabel ([#394](https://github.com/widergy/mobile-ui/issues/394)) ([278ab68](https://github.com/widergy/mobile-ui/commit/278ab6822364221be91622aa81bedb5a01fb1db5))
+
 ## [1.32.5](https://github.com/widergy/mobile-ui/compare/v1.32.4...v1.32.5) (2024-12-02)
 
 

package/lib/components/UTCheckBox/README.md

@@ -2,23 +2,24 @@
 
 ## Description
 
-`UTCheckBox` is a customizable checkbox component used within the `UTCheckList` component. It supports various states such as checked, indeterminate, and disabled.
+`UTCheckBox` is a flexible checkbox component that supports multiple states (checked, indeterminate, disabled).
 
 ## Props
 
-| Name          | Type   | Default | Description                                                                 |
-| ------------- | ------ | ------- | --------------------------------------------------------------------------- |
-| checked       | bool   | false   | Indicates if the checkbox is checked.                                       |
-| disabled      | bool   | false   | Disables the checkbox, making it unclickable.                               |
-| indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state.                     |
-| isSimple      | bool   | false   | **Deprecated**: Use standard checkboxes instead.                            |
-| onPress       | func   |         | Function to call when the checkbox is pressed.                              |
-| required      | bool   | false   | Indicates if the checkbox is required.                                      |
-| reversed      | bool   | false   | If true, reverses the order of title and checkbox.                          |
-| spacing       | string | medium  | If "small", reduces the column gap from 16 to 8.                            |
-| style         | shape  | {}      | Custom styles to apply to the checkbox container. Can contain root or title |
-| title         | string |         | Title to display next to the checkbox.                                      |
-| variant       | string |         | The variant to use for styling the checkbox.                                |
+| Name          | Type   | Default | Description                                                                    |
+| ------------- | ------ | ------- | ------------------------------------------------------------------------------ |
+| value         | bool   | false   | Indicates whether the checkbox is selected.                                    |
+| onChange      | func   |         | Function to call when the checkbox value changes.                              |
+| disabled      | bool   | false   | Disables the checkbox, making it unclickable.                                  |
+| indeterminate | bool   | false   | Indicates if the checkbox is in an indeterminate state.                        |
+| isSimple      | bool   | false   | **Deprecated**: Avoid using simple checkboxes in favor of standard checkboxes. |
+| required      | bool   | false   | Indicates if the checkbox is required.                                         |
+| reversed      | bool   | false   | If true, reverses the order of the title and checkbox.                         |
+| spacing       | string | medium  | If "small", reduces the column gap from 16 to 8.                               |
+| style         | shape  | {}      | Custom styles to apply to the checkbox container or title.                     |
+| title         | string |         | Text displayed next to the checkbox.                                           |
+| withMarkdown  | bool   | false   | Enables Markdown rendering for the `title`.                                    |
+| variant       | string |         | The variant to use for styling the checkbox.                                   |
 
 ## Usage
 
@@ -31,7 +32,7 @@ import UTCheckBox from './UTCheckBox';
 const Example = () => {
   const [checked, setChecked] = React.useState(false);
 
-  return <UTCheckBox checked={checked} title="Check me" onPress={() => setChecked(!checked)} />;
+  return <UTCheckBox value={checked} title="Check me" onChange={setChecked} />;
 };
 
 export default Example;

package/lib/components/UTLabel/README.md

@@ -57,14 +57,14 @@ For all others: `shade05`
 
 | Variant   | Component | Default font size |
 | --------- | --------- | ----------------- |
-| title1    | h1        | 30px              |
-| title2    | h2        | 24px              |
-| title3    | h3        | 22px              |
-| subtitle1 | h4        | 18px              |
-| subtitle2 | h5        | 16px              |
+| title1    | h1        | 24px              |
+| title2    | h2        | 22px              |
+| title3    | h3        | 18px              |
+| subtitle1 | h4        | 16px              |
+| subtitle2 | h5        | 14px              |
 | body      | span      | 16px              |
 | small     | span      | 14px              |
-| xsmall    | span      | 13px              |
+| xsmall    | span      | 11px              |
 | th        | th        | 16px              |
 | td        | td        | 16px              |
 

package/lib/components/UTLabel/theme.js

@@ -1,6 +1,7 @@
 import { COLOR_SHADES } from '../../constants/Palette';
 import { getDefaultColorShade } from '../../utils/styleUtils';
 import { IS_IOS } from '../../utils/platformUtils/constants';
+import { scale } from '../../utils/scaleUtils';
 
 import { LINE_HEIGHTS, VARIANTS_SIZES, WEIGHTS } from './constants';
 import { DEFAULT_PROPS } from './proptypes';
@@ -16,7 +17,7 @@ export const getFontFamily = (theme, weight) =>
     ? theme.fonts.fontFamily
     : theme.fonts?.customVariants?.[weight]?.fontFamily;
 
-export const getFontSize = variant => VARIANTS_SIZES[variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant];
+export const getFontSize = variant => scale(VARIANTS_SIZES[variant] || VARIANTS_SIZES[DEFAULT_PROPS.variant]);
 
 export const getFontWeight = weight => (IS_IOS ? WEIGHTS[weight] || WEIGHTS[DEFAULT_PROPS.weight] : null);
 
@@ -43,5 +44,5 @@ export const retrieveStyle = ({ colorTheme, field, shade, theme, variant, weight
   margin: 0,
   paddingVertical: 0,
   textAlignVertical: 'center',
-  ...(LINE_HEIGHTS?.[variant] ? { lineHeight: LINE_HEIGHTS[variant] } : {})
+  ...(LINE_HEIGHTS?.[variant] ? { lineHeight: scale(LINE_HEIGHTS[variant]) } : {})
 });

package/lib/components/UTSelect/versions/V1/README.md

@@ -13,6 +13,7 @@
 | title                 | string                     |         | Title for the select field.                                                                                             |
 | multiple              | bool                       | false   | Allows multiple selection if true.                                                                                      |
 | noMatchesText         | string                     |         | Text to display when no matches are found in the search.                                                                |
+| noOptionsText         | string                     |         | Text to display when no options are initially available (before a search term is provided).                             |
 | onChange              | func                       |         | Function to call when the input field value changes.                                                                    |
 | options               | array                      |         | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`.                    |
 | placeholder           | string                     |         | Placeholder text for the select field.                                                                                  |

package/lib/components/UTSelect/versions/V1/index.js

@@ -26,6 +26,7 @@ const UTSelect = ({
   helpText,
   multiple,
   noMatchesText,
+  noOptionsText,
   onChange,
   options,
   placeholder,
@@ -186,7 +187,7 @@ const UTSelect = ({
           />
           {isEmpty(filteredOptions) ? (
             <UTLabel colorTheme="gray" style={styles.noMatchesText}>
-              {noMatchesText}
+              {!searchTerm ? noOptionsText : noMatchesText}
             </UTLabel>
           ) : (
             <ScrollView keyboardShouldPersistTaps="handled">

package/lib/components/UTSelect/versions/V1/proptypes.js

@@ -25,6 +25,7 @@ export const propTypes = {
   helpText: string,
   multiple: bool,
   noMatchesText: string,
+  noOptionsText: string,
   onChange: func,
   options: arrayOf(
     shape({

package/lib/components/UTSelect/versions/V1/styles.js

@@ -14,7 +14,8 @@ const styles = StyleSheet.create({
   noMatchesText: {
     alignSelf: 'center',
     paddingHorizontal: 16,
-    paddingVertical: 24
+    paddingVertical: 24,
+    textAlign: 'center'
   }
 });
 

package/lib/utils/scaleUtils/index.js

@@ -32,11 +32,14 @@ export const verticalScale = size => (WINDOW_HEIGHT / GUIDELINES_BASE_HEIGHT) *
  */
 export const moderateVerticalScale = (size, factor = 0.5) => size + (verticalScale(size) - size) * factor;
 
+export const scale = size => Math.round((verticalScale(size) + horizontalScale(size)) / 2);
+
 export default {
   horizontalScale,
   moderateHorizontalScale,
   moderateVerticalScale,
   verticalScale,
   WINDOW_HEIGHT,
-  WINDOW_WIDTH
+  WINDOW_WIDTH,
+  scale
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.32.5",
+  "version": "1.32.7",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [