@widergy/mobile-ui 1.11.1 → 1.11.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.11.3](https://github.com/widergy/mobile-ui/compare/v1.11.2...v1.11.3) (2024-06-12)
+
+
+### Bug Fixes
+
+* integrate utlabel in utbutton ([#293](https://github.com/widergy/mobile-ui/issues/293)) ([519119b](https://github.com/widergy/mobile-ui/commit/519119be6c9dc7f1daf1b0e8beb6019df66a9a71))
+
+## [1.11.2](https://github.com/widergy/mobile-ui/compare/v1.11.1...v1.11.2) (2024-06-03)
+
+
+### Bug Fixes
+
+* selectable card border and workflow shadow ([#291](https://github.com/widergy/mobile-ui/issues/291)) ([da9996d](https://github.com/widergy/mobile-ui/commit/da9996d01b0cb67dd855ba019f600339c2bfce02))
+
 ## [1.11.1](https://github.com/widergy/mobile-ui/compare/v1.11.0...v1.11.1) (2024-06-03)
 
 

package/lib/components/UTButton/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { bool, func, elementType, string } from 'prop-types';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { themeType, withTheme } from '../../theming';
 import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
 
 import { DEFAULT_PROPS, ICON_PLACEMENTS } from './constants';
@@ -29,7 +30,7 @@ const UTButton = ({
     childrenContainerStyles: themeChildrenContainerStyles,
     disabledStyles,
     iconStyles: themeIconStyles,
-    textStyles: themeTextStyles
+    textStyles
   } = retrieveStyle({
     style,
     colorTheme,
@@ -39,7 +40,7 @@ const UTButton = ({
     variant
   });
 
-  const iconStyle = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
+  const iconStyles = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
 
   const buttonStyles = ({ pressed }) => [
     themeButtonStyles,
@@ -47,27 +48,29 @@ const UTButton = ({
     pressed ? themeButtonStyles.pressed : themeButtonStyles.notPressed
   ];
 
-  const textStyles = themeTextStyles;
-
   const IconToShow =
     Icon &&
     (isUTIcon(Icon) ? (
-      <UTIcon color={themeTextStyles.color} style={iconStyle} size={iconStyle.fontSize} name={Icon} />
+      <UTIcon color={iconStyles.color} style={iconStyles} size={iconStyles.fontSize} name={Icon} />
     ) : (
-      <Icon style={iconStyle} fill={themeTextStyles.color} />
+      <Icon style={iconStyles} fill={iconStyles.color} />
     ));
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
       {iconPlacement === ICON_PLACEMENTS.left && IconToShow}
-      {children && <Text style={textStyles}>{children}</Text>}
+      {children && (
+        <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
+          {children}
+        </UTLabel>
+      )}
       {iconPlacement !== ICON_PLACEMENTS.left && IconToShow}
     </View>
   );
 
   return (
     <Pressable disabled={disabled || loading} onPress={onPress} style={buttonStyles}>
-      <UTLoading color={themeTextStyles.color} loading={loading} size={24} thickness={2}>
+      <UTLoading color={iconStyles.color} loading={loading} size={24} thickness={2}>
         {RenderedChildren}
       </UTLoading>
     </Pressable>

package/lib/components/UTButton/theme.js

@@ -1,14 +1,12 @@
 import { getShadow } from '../../utils/styleUtils';
+import { COLOR_THEMES } from '../UTLabel/constants';
 
 import { COLORS_MAPPER, DEFAULT_PROPS, ELEVATION, PRESSED_ELEVATION } from './constants';
 
-const baseButtonTheme = theme => ({
+const baseButtonTheme = () => ({
   text: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: 16,
-    fontWeight: '500',
-    lineHeight: 22,
-    textTransform: 'none'
+    variant: 'body',
+    weight: 'medium'
   },
   button: {
     borderRadius: 4,
@@ -37,8 +35,8 @@ const baseButtonTheme = theme => ({
 });
 
 const variantsColorTheme = (theme, colorTheme, variant) => {
-  const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
-  const actionTheme = theme.Palette[actionColorName];
+  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const actionTheme = theme.Palette[colorName];
   const negativeTheme = theme.Palette[COLORS_MAPPER.negative];
   const neutralTheme = theme.Palette[COLORS_MAPPER.secondary];
   const shadow = getShadow(ELEVATION);
@@ -56,12 +54,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
+        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.neutral : COLOR_THEMES.negative
       },
-      disabled: {
-        backgroundColor: actionTheme['04'],
-        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
       }
     },
     semitransparent: {
@@ -75,12 +71,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        backgroundColor: actionTheme['01'],
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     },
     outlined: {
@@ -93,13 +87,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        borderWidth: 1,
-        borderColor: actionTheme['05'],
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     },
     text: {
@@ -112,11 +103,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     },
     shadow: {
@@ -132,11 +122,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         notPressed: shadow
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     }
   };
@@ -152,8 +141,8 @@ const sizeButtonTheme = size => {
         paddingVertical: 12
       },
       text: {
-        fontSize: 16,
-        fontWeight: '500'
+        variant: 'body',
+        weight: 'medium'
       },
       icon: {
         fontSize: 20
@@ -168,8 +157,8 @@ const sizeButtonTheme = size => {
         paddingVertical: 4
       },
       text: {
-        fontSize: 14,
-        fontWeight: '500'
+        weight: 'medium',
+        variant: 'small'
       },
       icon: {
         fontSize: 20
@@ -196,7 +185,7 @@ const iconButtonPlacementTheme = iconPlacement => {
 };
 
 export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, iconPlacement }) => {
-  const baseTheme = baseButtonTheme(theme);
+  const baseTheme = baseButtonTheme();
   const variantTheme = variantsColorTheme(theme, colorTheme, variant);
   const sizeTheme = sizeButtonTheme(size);
   const iconPlacementTheme = iconButtonPlacementTheme(iconPlacement);
@@ -209,19 +198,32 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
   };
 
   const textStyles = {
-    ...baseTheme.text,
-    ...variantTheme.text,
-    ...sizeTheme.text
+    colorTheme: variantTheme.text.colorTheme,
+    variant: sizeTheme.text?.variant || baseTheme.text?.variant,
+    weight: sizeTheme.text?.weight || baseTheme.text?.weight
   };
 
   const iconStyles = {
-    icon: { ...baseTheme.icon, ...sizeTheme.icon, ...iconPlacementTheme, ...style.icon },
-    iconOnly: { ...baseTheme.iconOnly, ...sizeTheme.iconOnly, ...style.icon }
+    icon: {
+      ...baseTheme.icon,
+      ...sizeTheme.icon,
+      ...variantTheme.icon,
+      ...iconPlacementTheme,
+      ...style.icon
+    },
+    iconOnly: {
+      ...baseTheme.iconOnly,
+      ...sizeTheme.iconOnly,
+      ...variantTheme.icon,
+      ...style.icon
+    }
   };
 
   const childrenContainerStyles = { ...baseTheme.childrenContainer, ...style.childrenContainer };
 
-  const { disabled } = variantTheme;
+  const disabledStyles = {
+    opacity: 0.5
+  };
 
-  return { buttonStyles, textStyles, disabledStyles: disabled, iconStyles, childrenContainerStyles };
+  return { buttonStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
 };

package/lib/components/UTLabel/constants.js

@@ -32,13 +32,16 @@ export const WEIGHTS = {
 };
 
 export const COLOR_THEMES = {
+  accent: 'accent',
   dark: 'dark',
+  error: 'error',
   gray: 'gray',
+  information: 'information',
   light: 'light',
+  negative: 'negative',
+  neutral: 'neutral',
   success: 'success',
-  error: 'error',
-  warning: 'warning',
-  information: 'information'
+  warning: 'warning'
 };
 
 export const DEFAULT_PROPS = {

package/lib/components/UTSelectableCard/styles.js

@@ -53,10 +53,14 @@ export const getUTSelectableCardStyles = (theme = {}) =>
     // White
     whiteAppearance: {
       backgroundColor: theme.whiteBackground || 'white',
+      borderWidth: 2,
+      borderColor: 'transparent',
       elevation: 4
     },
     whiteDisabledContainer: {
       backgroundColor: theme.whiteDisabledBackground || 'lightgray',
+      borderWidth: 2,
+      borderColor: 'transparent',
       elevation: 0
     },
     whiteSelectedContainer: {

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/styles.js

@@ -16,7 +16,11 @@ export default StyleSheet.create({
   },
   bottomNav: {
     backgroundColor: 'white',
-    elevation: 10
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2
   },
   message: {
     alignItems: 'center',
@@ -44,7 +48,6 @@ export default StyleSheet.create({
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     display: 'flex',
-    elevation: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     padding: 16

package/package.json

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