@widergy/mobile-ui 1.48.1 → 1.48.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.48.2](https://github.com/widergy/mobile-ui/compare/v1.48.1...v1.48.2) (2025-06-10)
+
+
+### Bug Fixes
+
+* [UGC-1544] utstatus fixes ([#440](https://github.com/widergy/mobile-ui/issues/440)) ([3eae576](https://github.com/widergy/mobile-ui/commit/3eae5762502ac9c57935ac290510fa0d2cd3534b))
+
 ## [1.48.1](https://github.com/widergy/mobile-ui/compare/v1.48.0...v1.48.1) (2025-06-09)
 
 

package/lib/components/UTProductItem/components/Status/index.js

@@ -5,16 +5,12 @@ import { bool, object, shape, string } from 'prop-types';
 import UTStatus from '../../../UTStatus';
 
 const Status = ({ shouldUseGap, statusProps, themedStyles }) => {
-  const { Icon, label, labelProps, type, variant, withoutIcon } = statusProps;
+  const { label } = statusProps;
 
   return (
     <UTStatus
-      Icon={Icon}
-      labelProps={labelProps}
       style={{ container: [shouldUseGap ? themedStyles.gap : '', themedStyles.status] }}
-      type={type}
-      variant={variant}
-      withoutIcon={withoutIcon}
+      {...statusProps}
     >
       {label}
     </UTStatus>

package/lib/components/UTStatus/README.md

@@ -11,14 +11,14 @@
 | Icon        | string | -         | Allows display for a custom icon. If omitted, a default Icon for the variant will be used.                                          |
 | labelProps  | object | {}        | Props to pass down to the internal UTLabel component.                                                                               |
 | style       | object | -         | Custom styles to apply to the component.                                                                                            |
-| type        | string | 'dark'    | Color theme to apply for both the icon and label text.                                                                              |
+| shade       | string | '01'      | Shade to apply to the palette variant specified                                                                                     |
 | variant     | string | 'success' | The variant will defined the default icon that the component will render, as well as the background color for the status container. |
 | withoutIcon | bool   | false     | if `true`, no icon will be rendered.                                                                                                |
 
 ## Example
 
 ```jsx
-<UTStatus variant="error" type="negative" labelProps={{ withMarkdown: true }}>
+<UTStatus variant="error" shade="03" labelProps={{ withMarkdown: true }}>
   Error con Markdown
 </UTStatus>
 ```

package/lib/components/UTStatus/constants.js

@@ -6,9 +6,3 @@ export const VARIANTS = {
   success: 'success',
   warning: 'warning'
 };
-
-export const TYPES = {
-  accent: 'accent',
-  dark: 'dark',
-  negative: 'negative'
-};

package/lib/components/UTStatus/index.js

@@ -8,29 +8,29 @@ import { mergeMultipleStyles } from '../../utils/styleUtils';
 import { useTheme } from '../../theming';
 
 import { defaultIconMapper, ownStyles, getVariantStyles } from './theme';
-import { TYPES, VARIANTS } from './constants';
+import { VARIANTS } from './constants';
 
 const UTStatus = ({
   children,
   Icon,
   labelProps = {},
+  shade = '01',
   style,
-  type = TYPES.dark,
   variant = VARIANTS.success,
   withoutIcon
 }) => {
   const theme = useTheme();
   const themedStyles = mergeMultipleStyles(
     ownStyles,
-    getVariantStyles(theme)({ variant, type }),
+    getVariantStyles(theme)({ variant, shade }),
     theme?.UTStatus,
     style
   );
   const StatusIcon = Icon ?? defaultIconMapper(variant);
   return (
     <View style={themedStyles.container}>
-      {withoutIcon ? null : <UTIcon colorTheme={type} name={StatusIcon} />}
-      <UTLabel colorTheme={type} {...labelProps}>
+      {withoutIcon ? null : <UTIcon colorTheme={variant} name={StatusIcon} />}
+      <UTLabel colorTheme={variant} {...labelProps}>
         {children}
       </UTLabel>
     </View>
@@ -40,7 +40,7 @@ const UTStatus = ({
 UTStatus.propTypes = {
   Icon: string,
   labelProps: object,
-  type: string,
+  shade: string,
   variant: string,
   withoutIcon: bool
 };

package/lib/components/UTStatus/theme.js

@@ -1,4 +1,4 @@
-import { TYPES, VARIANTS } from './constants';
+import { VARIANTS } from './constants';
 
 export const defaultIconMapper = variant =>
   ({
@@ -23,8 +23,8 @@ export const ownStyles = {
 
 export const getVariantStyles =
   theme =>
-  ({ variant, type }) => ({
+  ({ variant, shade }) => ({
     container: {
-      backgroundColor: theme.Palette[variant]?.[type === TYPES.negative ? '04' : '01']
+      backgroundColor: theme.Palette[variant]?.[shade]
     }
   });

package/package.json

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