@widergy/energy-ui 3.144.2 → 3.145.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [3.145.0](https://github.com/widergy/energy-ui/compare/v3.144.2...v3.145.0) (2026-04-27)
+
+
+### Bug Fixes
+
+* button group stories fixes ([#784](https://github.com/widergy/energy-ui/issues/784)) ([2db8673](https://github.com/widergy/energy-ui/commit/2db86737b00a8ab5854411cb1c74c4d9f17a155a))
+
+
+### Features
+
+* buttongroup and button styles update ([#783](https://github.com/widergy/energy-ui/issues/783)) ([f778838](https://github.com/widergy/energy-ui/commit/f7788385508b7c9b591420f26232fe345dbf2654))
+
 ## [3.144.2](https://github.com/widergy/energy-ui/compare/v3.144.1...v3.144.2) (2026-04-24)
 
 

package/dist/components/UTButton/theme.js

@@ -50,7 +50,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
       }
     },
     [_constants.VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05']),
+      border: "1px solid ".concat(actionColorName === _constants.COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
       fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
         backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
@@ -63,7 +63,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
     },
     [_constants.VARIANTS_NAMES.text]: {
       border: '1px solid transparent',
-      fill: actionTheme['05'],
+      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
         backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
         boxShadow: 'none'

package/dist/components/UTButtonGroup/README.md

@@ -1,13 +1,30 @@
 # UTButtonGroup
 
-A component that renders a group of buttons with consistent styling and behavior. The selected button is highlighted with a filled variant while others remain as text variants.
+A component that renders a group of buttons with consistent styling and behavior. The selected button is highlighted with a `shadow` variant (for `primary` and `neutral` color themes) or `filled` variant (for `negative`), while inactive buttons use the `text` variant.
+
+The container applies padding and border-radius via design tokens (`--UT-buttonGroup-padding`, `--UT-buttonGroup-radius`), making both values overridable per utility.
 
 ## Props
 
 | Name       | Type            | Default   | Required | Description                                                                                    |
 | ---------- | :-------------- | --------- | -------- | ---------------------------------------------------------------------------------------------- |
 | actions    | array           | -         | Yes      | Array of action objects to render. Each action must include `Icon`, `id`, and `onClick` props. |
-| colorTheme | string          | 'primary' | No       | The color theme to use. One of: `primary`, `secondary`, `negative`, `neutral`.                 |
+| colorTheme | string          | 'primary' | No       | The color theme to use. One of: `primary`, `neutral`, `negative`.                              |
 | selected   | string / number | -         | Yes      | ID of the currently active/selected button.                                                    |
 | shape      | string          | 'square'  | No       | Shape of the button group. One of: `square`, `circle`.                                         |
-| size       | string          | 'large'   | No       | Size of the buttons. One of: `small`, `medium`, `large`.                                       |
+| size       | string          | 'small'   | No       | Size of the buttons. One of: `small`, `medium`, `large`.                                       |
+
+## Active variant by colorTheme
+
+| colorTheme | Active variant |
+| ---------- | -------------- |
+| primary    | shadow         |
+| neutral    | shadow         |
+| negative   | filled         |
+
+## Design tokens
+
+| Token                    | Default  | Semantic token  | Description                                    |
+| ------------------------ | -------- | --------------- | ---------------------------------------------- |
+| `--UT-buttonGroup-padding` | `0.25rem` | `padding-2xs`  | Padding del contenedor principal               |
+| `--UT-buttonGroup-radius`  | `8px`    | `radius-md`    | Border-radius del contenedor (variante square) |

package/dist/components/UTButtonGroup/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SQUARE_TYPE = exports.DEFAULT_TYPE = exports.DEFAULT_SIZE = exports.DEFAULT_COLOR_THEME = exports.CIRCLE_TYPE = exports.BACKGROUND_COLOR_MAPPER = void 0;
+exports.SQUARE_TYPE = exports.SHADOW_ACTIVE_COLOR_THEMES = exports.DEFAULT_TYPE = exports.DEFAULT_SIZE = exports.DEFAULT_COLOR_THEME = exports.CIRCLE_TYPE = exports.BACKGROUND_COLOR_MAPPER = void 0;
 const BACKGROUND_COLOR_MAPPER = theme => ({
   primary: theme.lightBackground,
   negative: theme.negativeBackground,
@@ -14,4 +14,5 @@ const CIRCLE_TYPE = exports.CIRCLE_TYPE = 'circle';
 const SQUARE_TYPE = exports.SQUARE_TYPE = 'square';
 const DEFAULT_TYPE = exports.DEFAULT_TYPE = SQUARE_TYPE;
 const DEFAULT_COLOR_THEME = exports.DEFAULT_COLOR_THEME = 'primary';
-const DEFAULT_SIZE = exports.DEFAULT_SIZE = 'large';
+const DEFAULT_SIZE = exports.DEFAULT_SIZE = 'small';
+const SHADOW_ACTIVE_COLOR_THEMES = exports.SHADOW_ACTIVE_COLOR_THEMES = ['primary', 'neutral'];

package/dist/components/UTButtonGroup/index.js

@@ -22,6 +22,8 @@ const UTButtonGroup = _ref => {
     size = _constants.DEFAULT_SIZE
   } = _ref;
   const backgroundColor = (0, _constants.BACKGROUND_COLOR_MAPPER)(theme)[colorTheme] || (0, _constants.BACKGROUND_COLOR_MAPPER)(theme).primary;
+  const activeVariant = _constants.SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'shadow' : 'filled';
+  const inactiveColorTheme = _constants.SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'gray' : colorTheme;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default["".concat(type, "Container")], " ").concat(backgroundColor)
   }, actions.map(_ref2 => {
@@ -33,13 +35,13 @@ const UTButtonGroup = _ref => {
       label
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-      colorTheme: colorTheme,
+      colorTheme: selected === id ? colorTheme : inactiveColorTheme,
       dataTestId: dataTestId,
       Icon: Icon,
       key: id,
       onClick: onClick,
       size: size,
-      variant: selected === id ? 'filled' : 'text'
+      variant: selected === id ? activeVariant : 'text'
     }, label);
   }));
 };

package/dist/components/UTButtonGroup/stories/UTButtonGroup.stories.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Primary = exports.Playground = exports.Neutral = exports.Negative = exports.Circle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+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); }
+const InteractiveButtonGroup = args => {
+  const [selected, setSelected] = (0, _react.useState)(args.selected);
+  const actions = args.actions.map(action => ({
+    ...action,
+    onClick: () => setSelected(action.id)
+  }));
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    actions: actions,
+    selected: selected
+  }));
+};
+var _default = exports.default = {
+  title: 'Energy-UI/UTButtonGroup',
+  component: _.default,
+  args: {
+    actions: _storiesConstants.COMMON_ACTIONS,
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Grupo de botones con selección activa. El botón activo usa variante `shadow` (primary/neutral) o `filled` (negative). El contenedor aplica padding y border-radius via design tokens.'
+      }
+    }
+  }
+};
+const Playground = exports.Playground = {
+  name: 'Playground',
+  render: InteractiveButtonGroup
+};
+const Primary = exports.Primary = {
+  args: {
+    colorTheme: 'primary',
+    selected: _storiesConstants.COMMON_ACTIONS[0].id
+  },
+  render: InteractiveButtonGroup
+};
+const Neutral = exports.Neutral = {
+  args: {
+    colorTheme: 'neutral',
+    selected: _storiesConstants.COMMON_ACTIONS[0].id
+  },
+  render: InteractiveButtonGroup
+};
+const Negative = exports.Negative = {
+  args: {
+    colorTheme: 'negative',
+    selected: _storiesConstants.COMMON_ACTIONS[0].id
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Oscuro'
+    }
+  },
+  render: InteractiveButtonGroup
+};
+const Circle = exports.Circle = {
+  args: {
+    shape: 'circle',
+    selected: _storiesConstants.COMMON_ACTIONS[0].id
+  },
+  render: InteractiveButtonGroup
+};

package/dist/components/UTButtonGroup/stories/storiesConstants.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE_OPTIONS = exports.SHAPE_OPTIONS = exports.COMMON_ARG_TYPES = exports.COMMON_ARGS = exports.COMMON_ACTIONS = exports.COLOR_THEME_OPTIONS = void 0;
+var _constants = require("../constants");
+const COMMON_ACTIONS = exports.COMMON_ACTIONS = [{
+  Icon: 'IconPencil',
+  id: 'edit',
+  label: 'Editar'
+}, {
+  Icon: 'IconTrash',
+  id: 'delete',
+  label: 'Eliminar'
+}, {
+  Icon: 'IconEye',
+  id: 'view',
+  label: 'Ver'
+}];
+const COLOR_THEME_OPTIONS = exports.COLOR_THEME_OPTIONS = ['primary', 'neutral', 'negative'];
+const SHAPE_OPTIONS = exports.SHAPE_OPTIONS = [_constants.SQUARE_TYPE, _constants.CIRCLE_TYPE];
+const SIZE_OPTIONS = exports.SIZE_OPTIONS = ['small', 'medium', 'large'];
+const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
+  actions: {
+    control: 'object',
+    description: 'Array de acciones. Cada item acepta: id (string), label (string), Icon (nombre de icono Tabler).'
+  },
+  colorTheme: {
+    control: 'select',
+    options: COLOR_THEME_OPTIONS
+  },
+  selected: {
+    control: 'text',
+    description: 'ID del botón activo. Debe coincidir con el id de uno de los actions.'
+  },
+  shape: {
+    control: 'inline-radio',
+    options: SHAPE_OPTIONS
+  },
+  size: {
+    control: 'inline-radio',
+    options: SIZE_OPTIONS
+  }
+};
+const COMMON_ARGS = exports.COMMON_ARGS = {
+  colorTheme: _constants.DEFAULT_COLOR_THEME,
+  selected: COMMON_ACTIONS[0].id,
+  shape: _constants.DEFAULT_TYPE,
+  size: _constants.DEFAULT_SIZE
+};

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

@@ -1,28 +1,17 @@
-$default-border-radius: 8px;
-$square-border-radius: calc(#{$default-border-radius} - 1px);
 $rounded-border-radius: 100px;
 
 %container {
   display: flex;
+  padding: var(--UT-buttonGroup-padding, 0.25rem);
   width: fit-content;
 }
 
 .squareContainer {
   @extend %container;
-  border-radius: $default-border-radius;
+  border-radius: var(--UT-buttonGroup-radius, 8px);
 
   & > button {
-    border-radius: 0 !important;
-  }
-
-  & > button:first-child {
-    border-bottom-left-radius: $square-border-radius !important;
-    border-top-left-radius: $square-border-radius !important;
-  }
-
-  & > button:last-child {
-    border-bottom-right-radius: $square-border-radius !important;
-    border-top-right-radius: $square-border-radius !important;
+    border: none !important;
   }
 }
 
@@ -31,6 +20,7 @@ $rounded-border-radius: 100px;
   border-radius: $rounded-border-radius;
 
   & > button {
+    border: none !important;
     border-radius: $rounded-border-radius !important;
   }
 }

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

@@ -176,6 +176,8 @@ const baseTokens = exports.baseTokens = {
     'UT-button-radius': 'radius-sm',
     'UT-button-icon-size-sm': 'size-icon-xs',
     'UT-button-icon-size-md': 'size-icon-md',
+    'UT-buttonGroup-padding': 'padding-2xs',
+    'UT-buttonGroup-radius': 'radius-md',
     'UT-label-size-title-1': 'font-heading-size-1',
     'UT-label-size-title-2': 'font-heading-size-2',
     'UT-label-size-title-3': 'font-heading-size-3',

package/package.json

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