@widergy/energy-ui 3.148.0 → 3.149.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.149.0](https://github.com/widergy/energy-ui/compare/v3.148.0...v3.149.0) (2026-05-08)
+
+
+### Features
+
+* [BRILLA-374] utstatus truncate and xl size ([#791](https://github.com/widergy/energy-ui/issues/791)) ([d94861a](https://github.com/widergy/energy-ui/commit/d94861a54defacd18df28d96f3065c954dcf21ee))
+
 # [3.148.0](https://github.com/widergy/energy-ui/compare/v3.147.0...v3.148.0) (2026-05-05)
 
 

package/dist/components/UTStatus/constants.js

@@ -11,6 +11,7 @@ const SIZES = exports.SIZES = {
   large: 'large',
   medium: 'medium',
   small: 'small',
+  xlarge: 'xlarge',
   xsmall: 'xsmall'
 };
 const VARIANTS = exports.VARIANTS = {

package/dist/components/UTStatus/index.js

@@ -14,6 +14,7 @@ var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _theme = require("./theme");
 var _constants = require("./constants");
 var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -31,6 +32,7 @@ const UTStatus = _ref => {
     title,
     tooltip,
     tooltipProps = {},
+    truncate,
     type = _constants.DEFAULT_PROPS.type,
     variant = _constants.DEFAULT_PROPS.variant,
     weight = _constants.DEFAULT_PROPS.weight,
@@ -103,10 +105,10 @@ const UTStatus = _ref => {
     })) : null;
   }, [adornments, size, variant]);
   const StatusRender = /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.root, " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === _constants.AREA_TYPES.SQUARE ? '' : classes.roundedArea),
+    className: "".concat(classes.root, " ").concat(truncate ? _stylesModule.default.truncated : '', " ").concat(className || '', " ").concat(area ? '' : classes.withoutArea, " ").concat(areaType === _constants.AREA_TYPES.SQUARE ? '' : classes.roundedArea),
     title: title
   }, useValidAdornments && leftAdornments.map(renderAdornment), withoutIcon || useValidAdornments ? null : /*#__PURE__*/_react.default.createElement(IconComponent, iconProps), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: classes.label,
+    className: "".concat(classes.label, " ").concat(truncate ? _stylesModule.default.truncatedLabel : ''),
     colorTheme: colorTheme,
     shade: type !== _constants.TYPES.negative ? '05' : undefined,
     dataTestId: labelDataTestId,
@@ -139,6 +141,7 @@ UTStatus.propTypes = {
   title: _propTypes.string,
   tooltip: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.element]),
   tooltipProps: _propTypes.object,
+  truncate: _propTypes.bool,
   type: _propTypes.string,
   variant: _propTypes.string,
   weight: _propTypes.string,

package/dist/components/UTStatus/styles.module.scss

@@ -0,0 +1,13 @@
+.truncated {
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+}
+
+.truncatedLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/components/UTStatus/theme.js

@@ -34,6 +34,7 @@ const getGridGap = _ref3 => {
     [_constants.SIZES.large]: 'var(--UT-status-gap-large, 8px)',
     [_constants.SIZES.medium]: 'var(--UT-status-gap-medium, 8px)',
     [_constants.SIZES.small]: 'var(--UT-status-gap-small, 4px)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 8px)',
     [_constants.SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 4px)'
   }[size];
 };
@@ -45,6 +46,7 @@ const getPadding = _ref4 => {
     [_constants.SIZES.large]: 'var(--UT-status-padding-y-large, 4px) var(--UT-status-padding-x-large, 8px)',
     [_constants.SIZES.medium]: 'var(--UT-status-padding-y-medium, 4px) var(--UT-status-padding-x-medium, 8px)',
     [_constants.SIZES.small]: 'var(--UT-status-padding-y-small, 4px) var(--UT-status-padding-x-small, 8px)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 4px) var(--UT-status-padding-x-xlarge, 8px)',
     [_constants.SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 2px) var(--UT-status-padding-x-xsmall, 4px)'
   }[size];
 };
@@ -56,6 +58,7 @@ const getLabelVariant = _ref5 => {
     [_constants.SIZES.large]: 'body',
     [_constants.SIZES.medium]: 'small',
     [_constants.SIZES.small]: 'xsmall',
+    [_constants.SIZES.xlarge]: 'body',
     [_constants.SIZES.xsmall]: 'xsmall'
   }[size];
 };
@@ -68,6 +71,7 @@ const getIconSize = _ref6 => {
     [_constants.SIZES.large]: 'var(--UT-status-icon-size-xs, 20px)',
     [_constants.SIZES.medium]: 'var(--UT-status-icon-size-2xs, 16px)',
     [_constants.SIZES.small]: 'var(--UT-status-icon-size-3xs, 12px)',
+    [_constants.SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 20px)',
     [_constants.SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 12px)'
   }[size];
 };
@@ -180,6 +184,10 @@ const retrieveStyle = _ref8 => {
       height: '8px',
       width: '8px'
     },
+    iconXlarge: {
+      height: '20px',
+      width: '20px'
+    },
     badgeSmall: {
       height: '8px',
       width: '8px'
@@ -192,6 +200,10 @@ const retrieveStyle = _ref8 => {
       height: '10px',
       width: '10px'
     },
+    badgeXlarge: {
+      height: '10px',
+      width: '10px'
+    },
     withoutArea: {
       backgroundColor: 'transparent !important'
     },

package/dist/components/UTStatus/utils.js

@@ -47,23 +47,27 @@ const interpreterSize = (size, classes) => {
     iconSmall,
     iconMedium,
     iconLarge,
+    iconXlarge,
     badgeXsmall,
     badgeSmall,
     badgeMedium,
-    badgeLarge
+    badgeLarge,
+    badgeXlarge
   } = classes || {};
   return {
     [_constants.COMPONENT_KEYS.BADGE]: {
       [_constants.SIZES.xsmall]: badgeXsmall,
       [_constants.SIZES.small]: badgeSmall,
       [_constants.SIZES.medium]: badgeMedium,
-      [_constants.SIZES.large]: badgeLarge
+      [_constants.SIZES.large]: badgeLarge,
+      [_constants.SIZES.xlarge]: badgeXlarge
     }[size],
     [_constants.COMPONENT_KEYS.ICON]: {
       [_constants.SIZES.xsmall]: iconXsmall,
       [_constants.SIZES.small]: iconSmall,
       [_constants.SIZES.medium]: iconMedium,
-      [_constants.SIZES.large]: iconLarge
+      [_constants.SIZES.large]: iconLarge,
+      [_constants.SIZES.xlarge]: iconXlarge
     }[size]
   };
 };

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -243,6 +243,7 @@ const baseTokens = exports.baseTokens = {
     'UT-status-gap-large': 'gap-sm',
     'UT-status-gap-medium': 'gap-sm',
     'UT-status-gap-small': 'gap-xs',
+    'UT-status-gap-xlarge': 'gap-sm',
     'UT-status-gap-xsmall': 'gap-xs',
     'UT-status-padding-y-large': 'padding-2xs',
     'UT-status-padding-x-large': 'padding-xs',
@@ -250,6 +251,8 @@ const baseTokens = exports.baseTokens = {
     'UT-status-padding-x-medium': 'padding-xs',
     'UT-status-padding-y-small': 'padding-2xs',
     'UT-status-padding-x-small': 'padding-xs',
+    'UT-status-padding-y-xlarge': 'padding-2xs',
+    'UT-status-padding-x-xlarge': 'padding-xs',
     'UT-status-padding-y-xsmall': 'padding-3xs',
     'UT-status-padding-x-xsmall': 'padding-2xs',
     'UT-status-radius': 'radius-sm',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.148.0",
+  "version": "3.149.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",