@widergy/mobile-ui 1.25.1 → 1.26.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.26.0](https://github.com/widergy/mobile-ui/compare/v1.25.1...v1.26.0) (2024-09-25)
+
+
+### Features
+
+* ut icon updates ([#358](https://github.com/widergy/mobile-ui/issues/358)) ([30af561](https://github.com/widergy/mobile-ui/commit/30af5617d47e62ccbba7bf175a3a5127e0f5db7e))
+
 ## [1.25.1](https://github.com/widergy/mobile-ui/compare/v1.25.0...v1.25.1) (2024-09-23)
 
 

package/lib/components/UTIcon/README.md

@@ -13,14 +13,17 @@ For a comprehensive list of available icons and their design specifications, ref
 
 ## Props
 
-| Name       | Type   | Default | Description                                             |
-| ---------- | ------ | ------- | ------------------------------------------------------- |
-| colorTheme | string | 'dark'  | The icon color, must be from the theme palette.         |
-| fillTheme  | string |         | The internal fill color must be from the theme palette. |
-| name       | string |         | The name of the icon from the Tabler Icons library.     |
-| shade      | string |         | The shade of the color theme to use.                    |
-| size       | number |         | The size of the icon.                                   |
-| style      | object |         | Custom styles to apply to the icon.                     |
+
+| Name       | Type    | Default   | Description                                                                                                                                         |
+| :----------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| area       | boolean | false     | Padding around the icon is added when it is true.                                                                                                   |
+| colorTheme | string  | 'dark'    | The icon color, must be from the theme palette.                                                                                                     |
+| fillTheme  | string  |           | The internal fill color must be from the theme palette.                                                                                             |
+| name       | string  |           | The name of the icon from the Tabler Icons library.                                                                                                 |
+| shade      | string  |           | The shade of the color theme to use.                                                                                                                |
+| size       | number  |           | The size of the icon.                                                                                                                               |
+| style      | object  |           | Custom styles to apply to the icon.                                                                                                                 |
+| variant    | string  | 'default' | It depends on the `area` property and defines whether it should be displayed filled (`default`) or just with a border (`outlined`) around the icon. |
 
 ## Icon Names
 
@@ -97,7 +100,7 @@ Clarifications:
 
 - Note that not all icons look good with an internal fill color.
 
-## Fill Shade  (opcional)
+## Fill Shade (optional)
 
 The `fillShade` prop must be one of these:
 

package/lib/components/UTIcon/index.js

@@ -1,13 +1,26 @@
 import React from 'react';
-import { number, object, oneOfType, string } from 'prop-types';
+import { bool, number, object, oneOfType, string } from 'prop-types';
+import { View } from 'react-native';
 import * as TablerIcons from '@tabler/icons-react-native';
 
 import { useTheme } from '../../theming';
 
 import { ENERGY_ICONS } from './constants';
-import { getIconProps } from './utils';
+import { getIconProps, getVariantStyle } from './utils';
+import ownStyles from './styles';
 
-const UTIcon = ({ color, colorTheme = 'dark', fillShade, fillTheme, name, shade, size, style }) => {
+const UTIcon = ({
+  area,
+  color,
+  colorTheme = 'dark',
+  fillShade,
+  fillTheme,
+  name,
+  shade,
+  size,
+  style,
+  variant = 'default'
+}) => {
   const theme = useTheme();
 
   const IconComponent = ENERGY_ICONS[name] || TablerIcons[name];
@@ -25,10 +38,23 @@ const UTIcon = ({ color, colorTheme = 'dark', fillShade, fillTheme, name, shade,
     theme
   });
 
-  return <IconComponent {...iconProps} />;
+  return (
+    <View
+      style={
+        area && [
+          ownStyles.withArea,
+          ownStyles[`size${size}`],
+          getVariantStyle({ color: colorTheme || color, shade, theme, variant })
+        ]
+      }
+    >
+      <IconComponent {...iconProps} />
+    </View>
+  );
 };
 
 UTIcon.propTypes = {
+  area: bool,
   /**
    * @deprecated The "color" prop is deprecated and will be removed in a future release. Please use "colorTheme" instead.
    */
@@ -39,7 +65,8 @@ UTIcon.propTypes = {
   name: string,
   shade: string,
   size: oneOfType([number, string]),
-  style: object
+  style: object,
+  variant: string
 };
 
 export default UTIcon;

package/lib/components/UTIcon/styles.js

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+const paddingSmall = 2;
+const paddingMedium = 4;
+const paddingLarge = 10;
+const paddingXlarge = 12;
+const paddingXxlarge = 21;
+
+const generateSizeStyles = () => {
+  const sizes = [
+    { range: [0, 23], padding: paddingSmall },
+    { range: [24, 27], padding: paddingMedium },
+    { range: [28, 31], padding: paddingLarge },
+    { range: [32, 55], padding: paddingXlarge },
+    { range: [56, 100], padding: paddingXxlarge }
+  ];
+
+  return sizes.reduce((styles, { range, padding }) => {
+    const [start, end] = range;
+    const sizeStyles = Array.from({ length: end - start + 1 }, (_, i) => i + start).reduce(
+      (acc, size) => ({ ...acc, [`size${size}`]: { padding } }),
+      {}
+    );
+    return { ...styles, ...sizeStyles };
+  }, {});
+};
+
+export default StyleSheet.create({
+  withArea: {
+    backgroundColor: 'transparent',
+    borderRadius: 100
+  },
+  ...generateSizeStyles()
+});

package/lib/components/UTIcon/utils.js

@@ -4,15 +4,15 @@ import { retrieveColor } from './theme';
 export const isUTIcon = icon => typeof icon === 'string';
 
 export const getIconProps = ({
-  name,
-  theme,
   color,
   colorTheme,
-  shade,
-  fillTheme,
   fillShade,
+  fillTheme,
+  name,
+  shade,
   size,
-  style
+  style,
+  theme
 }) => {
   const themeColor = retrieveColor({ colorTheme: color || colorTheme, theme, shade });
   const filled = name.endsWith('Filled');
@@ -34,3 +34,27 @@ export const getIconProps = ({
     ...(isEnergyIcon || isBrandIcon ? customIconProps : defaultIconProps)
   };
 };
+
+export const getVariantStyle = ({ color, shade, theme, variant }) => {
+  const borderColor = retrieveColor({ colorTheme: color, theme, shade });
+
+  const defaultBackgrounds = {
+    accent: theme.Palette.actions?.accent['01'] || theme.Palette.accent['01'],
+    dark: theme.Palette.light['03'],
+    error: theme.Palette.error['01'],
+    gray: theme.Palette.light['03'],
+    information: theme.Palette.information['01'],
+    light: theme.Palette.light['03'],
+    negative: theme.Palette.actions?.negative['01'] || theme.Palette.negative['01'],
+    neutral: theme.Palette.actions?.neutral['01'] || theme.Palette.neutral['01'],
+    success: theme.Palette.success['01'],
+    warning: theme.Palette.warning['01']
+  };
+
+  const variantStyles = {
+    default: { backgroundColor: defaultBackgrounds[color] },
+    outlined: { borderColor, borderWidth: 2 }
+  };
+
+  return variantStyles[variant];
+};

package/lib/components/UTTextInput/versions/V0/flavors/OutlinedInput/index.js

@@ -81,7 +81,7 @@ const OutlinedInput = ({
                 : focused
                   ? 2
                   : disabled
-                    ? (themeStyles?.inactive?.disabledBorderWidth ?? 1)
+                    ? themeStyles?.inactive?.disabledBorderWidth ?? 1
                     : 1,
               borderColor: active ? activeColor : inactiveColor
             },

package/package.json

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