@widergy/mobile-ui 1.19.1 → 1.19.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.19.2](https://github.com/widergy/mobile-ui/compare/v1.19.1...v1.19.2) (2024-08-26)
+
+
+### Bug Fixes
+
+* update utbadge and counter on utbutton ([#343](https://github.com/widergy/mobile-ui/issues/343)) ([6dcc9dd](https://github.com/widergy/mobile-ui/commit/6dcc9dd1b9bd00b126cf50b0dcf66d87a2a94559))
+
 ## [1.19.1](https://github.com/widergy/mobile-ui/compare/v1.19.0...v1.19.1) (2024-08-26)
 
 

package/lib/components/UTBadge/constants.js

@@ -1,13 +1,5 @@
-export const COLORS_MAPPER = {
-  alert: 'error',
-  identity: 'accent',
-  identitySecondary: 'neutral',
-  information: 'information',
-  negative: 'negative',
-  success: 'success',
-  warning: 'warning'
-};
+import { COLOR_THEMES } from '../../constants/Palette';
 
 export const DEFAULT_PROPS = {
-  colorTheme: 'alert'
+  colorTheme: COLOR_THEMES.error
 };

package/lib/components/UTBadge/theme.js

@@ -1,23 +1,16 @@
 import { StyleSheet } from 'react-native';
 
-import { COLORS_MAPPER, DEFAULT_PROPS } from './constants';
+import { COLOR_THEMES } from '../../constants/Palette';
+import { getDefaultColorShade } from '../../utils/styleUtils';
 
-export const variantsColorTheme = (theme, colorTheme) => {
-  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
-  const paletteTheme = theme.Palette[colorName];
+import { DEFAULT_PROPS } from './constants';
 
-  const backgroundColorMapper = {
-    alert: paletteTheme['04'],
-    information: paletteTheme['05'],
-    warning: paletteTheme['05'],
-    success: paletteTheme['05'],
-    identity: paletteTheme['05'],
-    identitySecondary: paletteTheme['05'],
-    negative: paletteTheme['04']
-  };
+export const variantsColorTheme = (theme, colorTheme) => {
+  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];
+  const colorShade = getDefaultColorShade(colorTheme);
 
   return {
-    backgroundColor: backgroundColorMapper[colorTheme]
+    backgroundColor: colorThemeDefinition[colorShade]
   };
 };
 
@@ -51,6 +44,6 @@ export const retrieveStyle = ({ theme, colorTheme, children }) => {
       ...textTheme,
       ...variantTheme
     },
-    textColorTheme: colorTheme === 'negative' ? 'dark' : 'negative'
+    textColorTheme: [COLOR_THEMES.negative, COLOR_THEMES.light].includes(colorTheme) ? 'dark' : 'negative'
   };
 };

package/lib/components/UTButton/constants.js

@@ -1,6 +1,13 @@
 export const ELEVATION = 2;
 export const PRESSED_ELEVATION = 2;
-export const PRIMARY = 'primary';
+
+export const VARIANTS_NAMES = {
+  filled: 'filled',
+  outlined: 'outlined',
+  semitransparent: 'semitransparent',
+  shadow: 'shadow',
+  text: 'text'
+};
 
 export const SIZES = {
   SMALL: 'small',
@@ -20,9 +27,3 @@ export const COLORS_MAPPER = {
   secondary: 'neutral',
   success: 'success'
 };
-
-export const COUNTER_THEMES = {
-  IDENTITY: 'identity',
-  IDENTITY_SECONDARY: 'identitySecondary',
-  NEGATIVE: 'negative'
-};

package/lib/components/UTButton/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Pressable, View } from 'react-native';
 
+import { COLOR_THEMES } from '../../constants/Palette';
 import { isUTIcon } from '../UTIcon/utils';
 import { useTheme } from '../../theming';
 import UTBadge from '../UTBadge';
@@ -8,8 +9,8 @@ import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
 
+import { COLORS_MAPPER, ICON_PLACEMENTS, VARIANTS_NAMES } from './constants';
 import { defaultProps, propTypes } from './proptypes';
-import { ICON_PLACEMENTS } from './constants';
 import { retrieveStyle } from './theme';
 
 const UTButton = ({
@@ -29,7 +30,6 @@ const UTButton = ({
 
   const {
     buttonStyles: themeButtonStyles,
-    counterStyles,
     childrenContainerStyles: themeChildrenContainerStyles,
     disabledStyles,
     iconStyles: themeIconStyles,
@@ -37,7 +37,6 @@ const UTButton = ({
   } = retrieveStyle({
     style,
     colorTheme,
-    iconPlacement,
     size,
     theme,
     variant
@@ -45,10 +44,16 @@ const UTButton = ({
 
   const iconStyles = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
 
-  const { colorTheme: counterTheme, iconLeftAndCounter, ...remainingCounterStyles } = counterStyles;
+  const counterColorTheme =
+    variant === VARIANTS_NAMES.filled
+      ? colorTheme === COLOR_THEMES.negative
+        ? COLOR_THEMES.dark
+        : COLOR_THEMES.negative
+      : COLORS_MAPPER[colorTheme];
 
   const buttonStyles = ({ pressed }) => [
     themeButtonStyles,
+    !children && themeButtonStyles.iconOnly,
     (disabled || loading) && disabledStyles,
     pressed ? themeButtonStyles.pressed : themeButtonStyles.notPressed
   ];
@@ -57,13 +62,13 @@ const UTButton = ({
     Icon &&
     (isUTIcon(Icon) ? (
       (() => {
-        const { fontSize, color, ...remainingIconStyles } = iconStyles;
+        const { size: iconSize, color, ...remainingIconStyles } = iconStyles;
 
         return (
           <UTIcon
             colorTheme={textStyles.colorTheme}
             name={Icon}
-            size={fontSize}
+            size={iconSize}
             style={remainingIconStyles}
           />
         );
@@ -74,17 +79,8 @@ const UTButton = ({
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
+      {count && <UTBadge colorTheme={counterColorTheme}>{count}</UTBadge>}
       {iconPlacement === ICON_PLACEMENTS.LEFT && IconToShow}
-      {count && count > 0 ? (
-        <UTBadge
-          colorTheme={counterTheme}
-          style={
-            iconPlacement === ICON_PLACEMENTS.LEFT && !children ? iconLeftAndCounter : remainingCounterStyles
-          }
-        >
-          {count}
-        </UTBadge>
-      ) : null}
       {children && (
         <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
           {children}

package/lib/components/UTButton/theme.js

@@ -1,7 +1,7 @@
+import { COLOR_THEMES } from '../../constants/Palette';
 import { getShadow } from '../../utils/styleUtils';
-import { COLOR_THEMES } from '../UTLabel/constants';
 
-import { COLORS_MAPPER, COUNTER_THEMES, ELEVATION, PRESSED_ELEVATION, PRIMARY } from './constants';
+import { COLORS_MAPPER, ELEVATION, PRESSED_ELEVATION } from './constants';
 import { defaultProps } from './proptypes';
 
 const baseButtonTheme = () => ({
@@ -14,29 +14,22 @@ const baseButtonTheme = () => ({
     borderWidth: 0,
     minWidth: 'auto',
     paddingHorizontal: 12,
-    paddingVertical: 8
-  },
-  counter: {
-    marginRight: 8
-  },
-  iconLeftAndCounter: {
-    marginLeft: 8,
-    marginRight: 0
+    paddingVertical: 8,
+    iconOnly: {
+      paddingHorizontal: 8,
+      paddingVertical: 8
+    }
   },
   icon: {
-    fontSize: 20
+    size: 20
   },
   iconOnly: {
-    fontSize: 24,
-    height: 24,
-    marginHorizontal: -4,
-    marginLeft: 0,
-    marginRight: 0,
-    width: 24
+    size: 24
   },
   childrenContainer: {
     alignItems: 'center',
     display: 'flex',
+    columnGap: 8,
     flexDirection: 'row',
     justifyContent: 'flex-start'
   }
@@ -61,12 +54,8 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['05']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative ? COUNTER_THEMES.IDENTITY_SECONDARY : COUNTER_THEMES.NEGATIVE
-      },
       text: {
-        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.NEUTRAL : COLOR_THEMES.NEGATIVE
+        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.neutral : COLOR_THEMES.negative
       },
       icon: {
         color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
@@ -82,14 +71,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['03']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -106,14 +87,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['02']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -130,14 +103,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
           backgroundColor: actionTheme['02']
         }
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -157,14 +122,6 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         },
         notPressed: shadow
       },
-      counter: {
-        colorTheme:
-          colorTheme === COLORS_MAPPER.negative
-            ? colorTheme
-            : colorTheme === PRIMARY
-              ? COUNTER_THEMES.IDENTITY
-              : COUNTER_THEMES.IDENTITY_SECONDARY
-      },
       text: {
         colorTheme: colorName
       },
@@ -182,33 +139,41 @@ const sizeButtonTheme = size => {
     large: {
       button: {
         paddingHorizontal: 16,
-        paddingVertical: 12
+        paddingVertical: 12,
+        iconOnly: {
+          paddingHorizontal: 12,
+          paddingVertical: 12
+        }
       },
       text: {
         variant: 'body',
         weight: 'medium'
       },
       icon: {
-        fontSize: 20
+        size: 20
       },
       iconOnly: {
-        fontSize: 24
+        size: 24
       }
     },
     small: {
       button: {
         paddingHorizontal: 8,
-        paddingVertical: 4
+        paddingVertical: 4,
+        iconOnly: {
+          paddingHorizontal: 4,
+          paddingVertical: 4
+        }
       },
       text: {
         weight: 'medium',
         variant: 'small'
       },
       icon: {
-        fontSize: 20
+        size: 20
       },
       iconOnly: {
-        fontSize: 20
+        size: 20
       }
     }
   };
@@ -216,23 +181,10 @@ const sizeButtonTheme = size => {
   return definition[size] || {};
 };
 
-const iconButtonPlacementTheme = iconPlacement => {
-  const definition = {
-    left: {
-      marginRight: 8
-    },
-    right: {
-      marginLeft: 8
-    }
-  };
-  return definition[iconPlacement] || {};
-};
-
-export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, iconPlacement }) => {
+export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size }) => {
   const baseTheme = baseButtonTheme();
   const variantTheme = variantsColorTheme(theme, colorTheme, variant);
   const sizeTheme = sizeButtonTheme(size);
-  const iconPlacementTheme = iconButtonPlacementTheme(iconPlacement);
 
   const buttonStyles = {
     ...baseTheme.button,
@@ -241,14 +193,6 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
     ...style.root
   };
 
-  const counterStyles = {
-    ...baseTheme.counter,
-    ...variantTheme.counter,
-    iconLeftAndCounter: {
-      ...baseTheme.iconLeftAndCounter
-    }
-  };
-
   const textStyles = {
     colorTheme: variantTheme.text.colorTheme,
     variant: sizeTheme.text?.variant || baseTheme.text?.variant,
@@ -260,7 +204,6 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
       ...baseTheme.icon,
       ...sizeTheme.icon,
       ...variantTheme.icon,
-      ...iconPlacementTheme,
       ...style.icon
     },
     iconOnly: {
@@ -271,11 +214,14 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
     }
   };
 
-  const childrenContainerStyles = { ...baseTheme.childrenContainer, ...style.childrenContainer };
+  const childrenContainerStyles = {
+    ...baseTheme.childrenContainer,
+    ...style.childrenContainer
+  };
 
   const disabledStyles = {
     opacity: 0.5
   };
 
-  return { buttonStyles, counterStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
+  return { buttonStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
 };

package/lib/components/UTIcon/constants.js

@@ -1,3 +1,5 @@
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+
 import EnergyIconCar from './components/EnergyIcons/EnergyIconCar.svg';
 import EnergyIconCart from './components/EnergyIcons/EnergyIconCart.svg';
 import EnergyIconChartPie from './components/EnergyIcons/EnergyIconChartPie.svg';
@@ -7,32 +9,11 @@ import EnergyIconHome2 from './components/EnergyIcons/EnergyIconHome2.svg';
 import EnergyIconHome3 from './components/EnergyIcons/EnergyIconHome3.svg';
 import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
 
-export const SHADES = {
-  shade01: '01',
-  shade02: '02',
-  shade03: '03',
-  shade04: '04',
-  shade05: '05'
-};
-
-export const COLOR_THEMES = {
-  accent: 'accent',
-  dark: 'dark',
-  error: 'error',
-  gray: 'gray',
-  information: 'information',
-  light: 'light',
-  negative: 'negative',
-  neutral: 'neutral',
-  success: 'success',
-  warning: 'warning'
-};
-
 export const DEFAULT_PROPS = {
-  color: 'dark'
+  color: COLOR_THEMES.dark
 };
 
-export const DEFAULT_INTERNAL_SHADE = SHADES.shade02;
+export const DEFAULT_INTERNAL_SHADE = COLOR_SHADES.shade02;
 
 export const ENERGY_ICONS = {
   EnergyIconCar,

package/lib/components/UTIcon/theme.js

@@ -1,11 +1,6 @@
-import { COLOR_THEMES, DEFAULT_PROPS, SHADES } from './constants';
+import { getDefaultColorShade } from '../../utils/styleUtils';
 
-const getDefaultColorShade = colorTheme =>
-  colorTheme === COLOR_THEMES.gray
-    ? SHADES.shade04
-    : colorTheme === COLOR_THEMES.light
-      ? SHADES.shade01
-      : SHADES.shade05;
+import { DEFAULT_PROPS } from './constants';
 
 export const retrieveColor = ({ colorTheme, shade, theme }) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.color];

package/lib/components/UTLabel/constants.js

@@ -1,10 +1,4 @@
-export const SHADES = {
-  shade01: '01',
-  shade02: '02',
-  shade03: '03',
-  shade04: '04',
-  shade05: '05'
-};
+import { COLOR_THEMES } from '../../constants/Palette';
 
 export const VARIANTS_SIZES = {
   title1: 30,
@@ -37,21 +31,8 @@ export const WEIGHTS = {
   black: 900
 };
 
-export const COLOR_THEMES = {
-  ACCENT: 'accent',
-  DARK: 'dark',
-  ERROR: 'error',
-  GRAY: 'gray',
-  INFORMATION: 'information',
-  LIGHT: 'light',
-  NEGATIVE: 'negative',
-  NEUTRAL: 'neutral',
-  SUCCESS: 'success',
-  WARNING: 'warning'
-};
-
 export const DEFAULT_PROPS = {
-  colorTheme: COLOR_THEMES.DARK,
+  colorTheme: COLOR_THEMES.dark,
   field: {},
   style: {},
   variant: 'body',

package/lib/components/UTLabel/theme.js

@@ -1,17 +1,12 @@
+import { COLOR_SHADES } from '../../constants/Palette';
+import { getDefaultColorShade } from '../../utils/styleUtils';
 import { IS_IOS } from '../../utils/platformUtils/constants';
 
-import { COLOR_THEMES, DEFAULT_PROPS, LINE_HEIGHTS, SHADES, VARIANTS_SIZES, WEIGHTS } from './constants';
-
-const getDefaultColorShade = colorTheme =>
-  colorTheme === COLOR_THEMES.GRAY
-    ? SHADES.shade04
-    : colorTheme === COLOR_THEMES.LIGHT
-      ? SHADES.shade01
-      : SHADES.shade05;
+import { DEFAULT_PROPS, LINE_HEIGHTS, VARIANTS_SIZES, WEIGHTS } from './constants';
 
 const variantsColorTheme = (colorTheme, shade, theme) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette[DEFAULT_PROPS.colorTheme];
-  const colorShade = Object.values(SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  const colorShade = Object.values(COLOR_SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
   return colorThemeDefinition[colorShade] || '#000';
 };
 

package/lib/constants/Palette.js

@@ -0,0 +1,20 @@
+export const COLOR_SHADES = {
+  shade01: '01',
+  shade02: '02',
+  shade03: '03',
+  shade04: '04',
+  shade05: '05'
+};
+
+export const COLOR_THEMES = {
+  accent: 'accent',
+  dark: 'dark',
+  error: 'error',
+  gray: 'gray',
+  information: 'information',
+  light: 'light',
+  negative: 'negative',
+  neutral: 'neutral',
+  success: 'success',
+  warning: 'warning'
+};

package/lib/utils/styleUtils/index.js

@@ -1,8 +1,17 @@
 import isArray from 'lodash/isArray';
 import mergeWith from 'lodash/mergeWith';
 
+import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
+
 export const SHADOW_OPACITY = 0.1;
 
+export const getDefaultColorShade = colorTheme =>
+  colorTheme === COLOR_THEMES.gray
+    ? COLOR_SHADES.shade04
+    : colorTheme === COLOR_THEMES.light
+      ? COLOR_SHADES.shade01
+      : COLOR_SHADES.shade05;
+
 const shadowLevels = {
   1: {
     elevation: 6,

package/package.json

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