@widergy/mobile-ui 1.18.5 → 1.18.6

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.18.6](https://github.com/widergy/mobile-ui/compare/v1.18.5...v1.18.6) (2024-08-23)
+
+
+### Bug Fixes
+
+* utselectablecard border radius ([#331](https://github.com/widergy/mobile-ui/issues/331)) ([00f17a6](https://github.com/widergy/mobile-ui/commit/00f17a6ac99f764df6f82b61fd733a7fddae8e27))
+
 ## [1.18.5](https://github.com/widergy/mobile-ui/compare/v1.18.4...v1.18.5) (2024-08-23)
 
 

package/lib/components/UTSelectableCard/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { bool, func, number, shape, string } from 'prop-types';
 import { Image, View } from 'react-native';
-import merge from 'lodash/merge';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 
 import Touchable from '../Touchable';
 import Surface from '../Surface';
@@ -10,8 +9,9 @@ import UTTooltip from '../UTTooltip';
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
 
-import { getColorTheme, getUTSelectableCardStyles, ICON_SIZE } from './styles';
+import { getColorTheme, ownStyles, ICON_SIZE, getAppearanceStyles, ownSizeStyles } from './styles';
 
 const UTSelectableCard = ({
   additionalInfo = {},
@@ -28,9 +28,10 @@ const UTSelectableCard = ({
   tooltip
 }) => {
   const theme = useTheme();
-  const themedStyles = merge(
-    {},
-    getUTSelectableCardStyles(theme?.UTSelectableCard),
+  const themedStyles = mergeMultipleStyles(
+    ownStyles,
+    getAppearanceStyles(theme)[appearance],
+    ownSizeStyles[size],
     theme?.UTSelectableCard,
     style
   );
@@ -43,10 +44,10 @@ const UTSelectableCard = ({
         disabled={disabled}
         onPress={() => onPress?.()}
         style={[
-          themedStyles[`${appearance}Appearance`],
-          selected && themedStyles[`${appearance}SelectedContainer`],
-          disabled && themedStyles[`${appearance}DisabledContainer`],
-          themedStyles[`${size}Size`]
+          themedStyles.appearance,
+          selected && themedStyles.selectedContainer,
+          disabled && themedStyles.disabledContainer,
+          themedStyles.size
         ]}
       >
         <View style={themedStyles.container}>

package/lib/components/UTSelectableCard/styles.js

@@ -2,88 +2,102 @@ import { StyleSheet } from 'react-native';
 
 export const ICON_SIZE = 40;
 
-export const getUTSelectableCardStyles = (theme = {}) =>
-  StyleSheet.create({
-    additionalInfo: {
-      textAlign: 'right'
-    },
-    checkIcon: {
-      marginLeft: 16
-    },
-    column: {
-      alignSelf: 'center'
-    },
-    container: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    description: {
-      marginTop: 4
-    },
-    icon: {
-      marginRight: 16
-    },
-    outerContainer: {
-      borderRadius: 4
-    },
-    selectedTitleAndTooltip: {
-      maxWidth: 300
-    },
-    textContainer: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexGrow: 1,
-      justifyContent: 'space-between'
-    },
-    titleAndTooltip: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    titleMargin: {
-      marginRight: 8
-    },
-
-    // Sizes
-    mediumSize: {
-      padding: 24
-    },
-    smallSize: {
-      padding: 16
-    },
+const WHITE = 'white';
+const GRAY = 'gray';
 
-    // White
-    whiteAppearance: {
-      backgroundColor: theme.whiteBackground || 'white',
+export const getAppearanceStyles = (theme = {}) => ({
+  [WHITE]: {
+    appearance: {
+      backgroundColor: theme.Palette.light['01'],
       borderColor: 'transparent',
+      borderRadius: 4,
       borderWidth: 2
     },
-    whiteDisabledContainer: {
-      backgroundColor: theme.whiteDisabledBackground || 'lightgray',
+    disabledContainer: {
+      backgroundColor: theme.Palette.light['03'],
       borderColor: 'transparent',
       borderWidth: 2
     },
-    whiteSelectedContainer: {
-      borderColor: theme.whiteSelectedBorder || 'royalblue',
+    selectedContainer: {
+      borderColor: theme.Palette.accent['05'],
       borderWidth: 2
-    },
-
-    // Gray
-    grayAppearance: {
-      backgroundColor: theme.grayBackground || 'gainsboro',
-      borderColor: theme.grayBorder || 'gray',
+    }
+  },
+  [GRAY]: {
+    appearance: {
+      backgroundColor: theme.Palette.light['03'],
+      borderColor: theme.Palette.light['05'],
+      borderRadius: 4,
       borderWidth: 1
     },
-    grayDisabledContainer: {
-      borderColor: theme.grayDisabledBorder || 'gray',
-      borderWidth: 2
+    disabledContainer: {
+      borderWidth: 1
     },
-    graySelectedContainer: {
-      backgroundColor: theme.graySelectedBackground || 'aliceblue',
-      borderColor: theme.graySelectedBorder || 'royalblue',
-      borderWidth: 2
+    selectedContainer: {
+      backgroundColor: theme.Palette.accent['01'],
+      borderColor: theme.Palette.accent['03'],
+      borderWidth: 1
     }
-  });
+  }
+});
+
+const MEDIUM = 'medium';
+const SMALL = 'small';
+
+export const ownSizeStyles = {
+  [MEDIUM]: {
+    size: {
+      padding: 24
+    }
+  },
+  [SMALL]: {
+    size: {
+      padding: 16
+    }
+  }
+};
+
+export const ownStyles = StyleSheet.create({
+  additionalInfo: {
+    textAlign: 'right'
+  },
+  checkIcon: {
+    marginLeft: 16
+  },
+  column: {
+    alignSelf: 'center'
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  description: {
+    marginTop: 4
+  },
+  icon: {
+    marginRight: 16
+  },
+  outerContainer: {
+    borderRadius: 4
+  },
+  selectedTitleAndTooltip: {
+    maxWidth: 300
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexGrow: 1,
+    justifyContent: 'space-between'
+  },
+  titleAndTooltip: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  titleMargin: {
+    marginRight: 8
+  }
+});
 
 export const getColorTheme = (selected, disabled) => (selected ? 'accent' : disabled ? 'gray' : 'dark');

package/lib/utils/styleUtils/index.js

@@ -1,3 +1,6 @@
+import isArray from 'lodash/isArray';
+import mergeWith from 'lodash/mergeWith';
+
 export const SHADOW_OPACITY = 0.1;
 
 const shadowLevels = {
@@ -65,6 +68,18 @@ export const getCustomStyles = (variants, props, styles, stylePrefix = '') =>
     .map(variant => (props[variant] ? styles[`${variant}${stylePrefix}`] : null))
     .filter(style => style !== null);
 
+const asArray = value => (isArray(value) ? value : [value]);
+
+export const mergeMultipleStyles = (...params) => {
+  return mergeWith({}, ...params, (valueA, valueB) => {
+    if (valueA && valueB && (isArray(valueA) || isArray(valueB))) {
+      return [...asArray(valueA), ...asArray(valueB)];
+    }
+    // By returning `undefined`, lodash will use its default merging behavior for objects
+    return undefined;
+  });
+};
+
 export default {
   generateLayoutMeasuresObject,
   getCustomStyles

package/package.json

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