@widergy/mobile-ui 1.28.3 → 1.29.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.29.0](https://github.com/widergy/mobile-ui/compare/v1.28.3...v1.29.0) (2024-10-21)
+
+
+### Features
+
+* [UG-2131] spacing and bottom actions updates ([#371](https://github.com/widergy/mobile-ui/issues/371)) ([93e5862](https://github.com/widergy/mobile-ui/commit/93e58629b1268cb6ccad4646e2ddb1be91de58a5))
+
 ## [1.28.3](https://github.com/widergy/mobile-ui/compare/v1.28.2...v1.28.3) (2024-10-18)
 
 

package/lib/components/UTActionCard/components/BottomActions/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_REDIRECTION_ICON = 'IconChevronRight';

package/lib/components/UTActionCard/components/BottomActions/index.js

@@ -7,6 +7,7 @@ import { ACTION_TYPES } from '../../constants';
 import { useTheme } from '../../../../theming';
 import { mergeMultipleStyles } from '../../../../utils/styleUtils';
 
+import { DEFAULT_REDIRECTION_ICON } from './constants';
 import styles, { getThemeStyles } from './styles';
 
 const BottomActions = ({ actions = [], bottomActionsVariant }) => {
@@ -27,7 +28,7 @@ const BottomActions = ({ actions = [], bottomActionsVariant }) => {
             }}
             colorTheme={colorTheme}
             disabled={disabled}
-            Icon={isRedirection ? 'IconChevronRight' : Icon}
+            Icon={isRedirection ? Icon || DEFAULT_REDIRECTION_ICON : Icon}
             iconPlacement={isRedirection ? 'right' : 'left'}
             loading={loading}
             onClick={onClick}

package/lib/components/UTActionCard/components/Header/index.js

@@ -43,17 +43,19 @@ const Header = ({
 
   return (
     <View style={[styles.header, styles[size], classNames.header]}>
-      {renderAdornment(adornment, 'left', size)}
+      {renderAdornment(adornment, 'left')}
       <View style={styles.headerTitles}>
-        {renderAdornment(adornment, 'top', size)}
-        <UTLabel variant="title3" weight="medium" {...titleProps}>
-          {title}
-        </UTLabel>
-        {description && (
-          <UTLabel colorTheme="gray" {...descriptionProps}>
-            {description}
+        {renderAdornment(adornment, 'top')}
+        <View style={styles.titleAndDescription}>
+          <UTLabel variant="title3" weight="medium" {...titleProps}>
+            {title}
           </UTLabel>
-        )}
+          {description && (
+            <UTLabel colorTheme="gray" {...descriptionProps}>
+              {description}
+            </UTLabel>
+          )}
+        </View>
       </View>
       {status ? (
         <Status

package/lib/components/UTActionCard/components/Header/styles.js

@@ -9,9 +9,14 @@ export default StyleSheet.create({
   headerTitles: {
     flex: 1,
     flexDirection: 'column',
-    gap: 8,
+    gap: 16,
     marginRight: 'auto'
   },
+  titleAndDescription: {
+    flex: 1,
+    flexDirection: 'column',
+    gap: 8
+  },
   medium: {
     padding: 24
   },
@@ -26,5 +31,8 @@ export default StyleSheet.create({
   },
   alignSelf_end: {
     alignSelf: 'flex-end'
+  },
+  adornment: {
+    maxWidth: '100%'
   }
 });

package/lib/components/UTActionCard/components/Header/utils.js

@@ -62,19 +62,23 @@ export const statusPropsMapper = (status, theme) => {
   return { backgroundColor: theme.Palette[variant]['01'] };
 };
 
-export const renderAdornment = (adornment, position, size) => {
+export const renderAdornment = (adornment, position) => {
   if (isEmpty(adornment) || adornment.position !== position) return null;
   const AdornmentComponent = ADORNMENT_COMPONENT_MAPPER[adornment.type];
   const defaultPlaceSelf = adornment.position === 'left' ? PLACE_SELF_TYPES.CENTER : PLACE_SELF_TYPES.START;
 
   return (
     <AdornmentComponent
+      {...(adornment.props || {})}
       style={[
+        styles.adornment,
         styles[`alignSelf_${adornment.alignment || defaultPlaceSelf}`],
-        position === 'top' && styles[`gap_${size}`],
-        adornment.type === 'image' && { width: adornment.props?.width, height: adornment.props?.height }
+        adornment.type === 'image' && {
+          ...(adornment.props?.width && { width: adornment.props.width }),
+          ...(adornment.props?.height && { height: adornment.props.height })
+        },
+        adornment.props?.style
       ]}
-      {...(adornment.props || {})}
     />
   );
 };

package/package.json

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