@widergy/energy-ui 3.121.0 → 3.121.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/UTBaseInputField/constants.js +6 -1
- package/dist/components/UTBaseInputField/theme.js +7 -6
- package/dist/components/UTBaseInputField/utils.js +10 -2
- package/dist/components/UTStepper/components/Step/index.js +8 -5
- package/dist/components/UTStepper/index.js +4 -1
- package/dist/components/UTWorkflowContainer/versions/V1/index.js +4 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [3.121.2](https://github.com/widergy/energy-ui/compare/v3.121.1...v3.121.2) (2025-11-19)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* [BRILLA-97] color theme ut base input ([#722](https://github.com/widergy/energy-ui/issues/722)) ([e5f120f](https://github.com/widergy/energy-ui/commit/e5f120f3aac517800d20bc7a478132b8cc9cd83b))
|
|
7
|
+
|
|
8
|
+
## [3.121.1](https://github.com/widergy/energy-ui/compare/v3.121.0...v3.121.1) (2025-11-18)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* step label prop ([#725](https://github.com/widergy/energy-ui/issues/725)) ([c70a9ab](https://github.com/widergy/energy-ui/commit/c70a9ab29df8da303df640c60e762c67ebfa0c48))
|
|
14
|
+
|
|
1
15
|
# [3.121.0](https://github.com/widergy/energy-ui/compare/v3.120.0...v3.121.0) (2025-11-18)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = void 0;
|
|
6
|
+
exports.UT_BASE_INPUT_COLOR_BORDER_FOCUS = exports.DEFAULT_PROPS = exports.COMPONENT_KEYS = exports.COMPONENTS_MAPPER = void 0;
|
|
7
|
+
var _Palette = require("../../constants/Palette");
|
|
7
8
|
var _ActionAdornment = _interopRequireDefault(require("./components/ActionAdornment"));
|
|
8
9
|
var _BadgeAdornment = _interopRequireDefault(require("./components/BadgeAdornment"));
|
|
9
10
|
var _IconAdornment = _interopRequireDefault(require("./components/IconAdornment"));
|
|
@@ -26,4 +27,8 @@ const COMPONENTS_MAPPER = exports.COMPONENTS_MAPPER = {
|
|
|
26
27
|
[COMPONENT_KEYS.PREFIX]: _PrefixAdornment.default,
|
|
27
28
|
[COMPONENT_KEYS.SUFFIX]: _SuffixAdornment.default,
|
|
28
29
|
[COMPONENT_KEYS.TOOLTIP]: _TooltipAdornment.default
|
|
30
|
+
};
|
|
31
|
+
const UT_BASE_INPUT_COLOR_BORDER_FOCUS = exports.UT_BASE_INPUT_COLOR_BORDER_FOCUS = 'UT-baseInput-color-border-focus';
|
|
32
|
+
const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
|
|
33
|
+
colorTheme: _Palette.COLOR_THEMES.accent
|
|
29
34
|
};
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.retrieveStyle = void 0;
|
|
7
7
|
var _theme = require("../UTLabel/theme");
|
|
8
|
+
var _utils = require("./utils");
|
|
8
9
|
const charactersCountRowHeight = 20;
|
|
9
10
|
const PADDING = {
|
|
10
11
|
HORIZONTAL: 16,
|
|
@@ -64,7 +65,6 @@ const getBackgroundColorOnHover = _ref3 => {
|
|
|
64
65
|
return undefined;
|
|
65
66
|
};
|
|
66
67
|
const retrieveStyle = _ref4 => {
|
|
67
|
-
var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4, _theme$Palette$action5;
|
|
68
68
|
let {
|
|
69
69
|
alwaysShowPlaceholder,
|
|
70
70
|
disabled: receivedDisabled,
|
|
@@ -78,6 +78,7 @@ const retrieveStyle = _ref4 => {
|
|
|
78
78
|
} = _ref4;
|
|
79
79
|
const disabled = receivedDisabled && !readOnly;
|
|
80
80
|
const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
|
|
81
|
+
const actionPalette = (0, _utils.getActionPalette)(theme);
|
|
81
82
|
const {
|
|
82
83
|
verticalPadding,
|
|
83
84
|
horizontalPadding,
|
|
@@ -116,7 +117,7 @@ const retrieveStyle = _ref4 => {
|
|
|
116
117
|
...(!disabled && !readOnly && {
|
|
117
118
|
backgroundColor: theme.Palette.light['01'],
|
|
118
119
|
'& $inputContainer': {
|
|
119
|
-
borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(
|
|
120
|
+
borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(actionPalette['04'], " !important"),
|
|
120
121
|
borderWidth: '2px'
|
|
121
122
|
},
|
|
122
123
|
'& $input': {
|
|
@@ -147,12 +148,12 @@ const retrieveStyle = _ref4 => {
|
|
|
147
148
|
},
|
|
148
149
|
withValueRoot: {
|
|
149
150
|
...(variant === 'transparent' && !error && {
|
|
150
|
-
backgroundColor:
|
|
151
|
+
backgroundColor: actionPalette['01']
|
|
151
152
|
})
|
|
152
153
|
},
|
|
153
154
|
focusedInputContainer: {
|
|
154
155
|
...(!error && {
|
|
155
|
-
borderColor: "".concat(
|
|
156
|
+
borderColor: "".concat(actionPalette['04'], " !important"),
|
|
156
157
|
borderWidth: '2px'
|
|
157
158
|
}),
|
|
158
159
|
...(error && {
|
|
@@ -165,7 +166,7 @@ const retrieveStyle = _ref4 => {
|
|
|
165
166
|
variant: 'body',
|
|
166
167
|
weight: 'regular'
|
|
167
168
|
}),
|
|
168
|
-
caretColor:
|
|
169
|
+
caretColor: actionPalette['04'],
|
|
169
170
|
color: theme.Palette.dark['05'],
|
|
170
171
|
minHeight: '22px',
|
|
171
172
|
overflow: 'auto',
|
|
@@ -178,7 +179,7 @@ const retrieveStyle = _ref4 => {
|
|
|
178
179
|
userSelect: 'none'
|
|
179
180
|
},
|
|
180
181
|
'&::selection': {
|
|
181
|
-
backgroundColor:
|
|
182
|
+
backgroundColor: actionPalette['02']
|
|
182
183
|
},
|
|
183
184
|
'&:focus': {
|
|
184
185
|
'&::placeholder': {
|
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.validateAdornments = void 0;
|
|
6
|
+
exports.validateColorTheme = exports.validateAdornments = exports.getActionPalette = void 0;
|
|
7
7
|
var _constants = require("./constants");
|
|
8
8
|
const validateAdornments = adornments => adornments.every(adornment => _constants.COMPONENTS_MAPPER[adornment.name]);
|
|
9
|
-
exports.validateAdornments = validateAdornments;
|
|
9
|
+
exports.validateAdornments = validateAdornments;
|
|
10
|
+
const validateColorTheme = colorTheme => colorTheme || _constants.DEFAULT_PROPS.colorTheme;
|
|
11
|
+
exports.validateColorTheme = validateColorTheme;
|
|
12
|
+
const getActionPalette = theme => {
|
|
13
|
+
var _theme$Palette$action, _theme$Palette$action2;
|
|
14
|
+
const colorThemeToUse = (theme === null || theme === void 0 ? void 0 : theme[_constants.UT_BASE_INPUT_COLOR_BORDER_FOCUS]) || _constants.DEFAULT_PROPS.colorTheme;
|
|
15
|
+
return ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorThemeToUse]) || theme.Palette[colorThemeToUse] || ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2[_constants.DEFAULT_PROPS.colorTheme]) || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
|
|
16
|
+
};
|
|
17
|
+
exports.getActionPalette = getActionPalette;
|
|
@@ -12,6 +12,7 @@ var _constants = require("../../constants");
|
|
|
12
12
|
var _useScreenSize = require("../../../../utils/useScreenSize");
|
|
13
13
|
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
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); }
|
|
15
16
|
var CompletedIcon = function CompletedIcon(props) {
|
|
16
17
|
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
17
18
|
clipRule: "evenodd",
|
|
@@ -27,11 +28,12 @@ CompletedIcon.defaultProps = {
|
|
|
27
28
|
};
|
|
28
29
|
const Step = _ref => {
|
|
29
30
|
let {
|
|
30
|
-
|
|
31
|
+
classes,
|
|
31
32
|
isActive,
|
|
32
33
|
isCompleted,
|
|
33
34
|
size,
|
|
34
|
-
|
|
35
|
+
stage,
|
|
36
|
+
stepperLabelProps = {}
|
|
35
37
|
} = _ref;
|
|
36
38
|
const stageCompleted = isCompleted(stage === null || stage === void 0 ? void 0 : stage.id);
|
|
37
39
|
const stageActive = isActive(stage === null || stage === void 0 ? void 0 : stage.id);
|
|
@@ -45,11 +47,11 @@ const Step = _ref => {
|
|
|
45
47
|
className: _stylesModule.default["checkIcon".concat(size)]
|
|
46
48
|
}), !stageCompleted && size === _constants.SIZES.LARGE && /*#__PURE__*/_react.default.createElement(CustomIcon, {
|
|
47
49
|
className: "\n ".concat(stageActive ? classes.activeIcon : classes.nextIcxon, " \n ").concat(_stylesModule.default["customIcon".concat(size)], "\n ")
|
|
48
|
-
}), (stageActive || !isMobileOrTablet) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
50
|
+
}), (stageActive || !isMobileOrTablet) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
|
|
49
51
|
variant: "xsmall",
|
|
50
52
|
className: "\n ".concat(_stylesModule.default.label, "\n ").concat(stageActive || stageCompleted ? classes.coloredLabel : '', "\n "),
|
|
51
53
|
colorTheme: !stageActive && !stageCompleted ? 'gray' : null
|
|
52
|
-
}, stage.label));
|
|
54
|
+
}, stepperLabelProps), stage.label));
|
|
53
55
|
};
|
|
54
56
|
Step.propTypes = {
|
|
55
57
|
classes: _commonTypes.classesType,
|
|
@@ -60,6 +62,7 @@ Step.propTypes = {
|
|
|
60
62
|
id: _propTypes.number,
|
|
61
63
|
label: _propTypes.string,
|
|
62
64
|
Icon: _propTypes.elementType
|
|
63
|
-
})
|
|
65
|
+
}),
|
|
66
|
+
stepperLabelProps: _propTypes.object
|
|
64
67
|
};
|
|
65
68
|
var _default = exports.default = Step;
|
|
@@ -21,6 +21,7 @@ const UTStepper = _ref => {
|
|
|
21
21
|
classNames,
|
|
22
22
|
currentStage,
|
|
23
23
|
stages,
|
|
24
|
+
stepperLabelProps = {},
|
|
24
25
|
stepperSize,
|
|
25
26
|
withPadding
|
|
26
27
|
} = _ref;
|
|
@@ -41,7 +42,8 @@ const UTStepper = _ref => {
|
|
|
41
42
|
size,
|
|
42
43
|
isCompleted,
|
|
43
44
|
isActive,
|
|
44
|
-
stage
|
|
45
|
+
stage,
|
|
46
|
+
stepperLabelProps
|
|
45
47
|
})), /*#__PURE__*/_react.default.createElement(_Connectors.default, {
|
|
46
48
|
classes,
|
|
47
49
|
withPadding,
|
|
@@ -54,6 +56,7 @@ UTStepper.propTypes = {
|
|
|
54
56
|
classNames: (0, _propTypes.objectOf)(_propTypes.string),
|
|
55
57
|
currentStage: _propTypes.number,
|
|
56
58
|
stages: _propTypes.object,
|
|
59
|
+
stepperLabelProps: _propTypes.object,
|
|
57
60
|
stepperSize: (0, _propTypes.oneOf)([_constants.SIZES.LARGE, _constants.SIZES.SMALL]),
|
|
58
61
|
withPadding: _propTypes.bool
|
|
59
62
|
};
|
|
@@ -32,8 +32,8 @@ const UTWorkflowContainer = _ref => {
|
|
|
32
32
|
banner,
|
|
33
33
|
checkbox,
|
|
34
34
|
children,
|
|
35
|
-
classNames,
|
|
36
35
|
classes: themeClasses = {},
|
|
36
|
+
classNames,
|
|
37
37
|
currentStage,
|
|
38
38
|
currentStep = 1,
|
|
39
39
|
forceResponsive = false,
|
|
@@ -47,6 +47,7 @@ const UTWorkflowContainer = _ref => {
|
|
|
47
47
|
requiredFieldInfoDataTestId = workflowContainer.header.requiredFieldInfo,
|
|
48
48
|
secondaryAction,
|
|
49
49
|
stages,
|
|
50
|
+
stepperLabelProps = {},
|
|
50
51
|
stepperSize = 'S',
|
|
51
52
|
stepsCount,
|
|
52
53
|
subtitle,
|
|
@@ -114,6 +115,7 @@ const UTWorkflowContainer = _ref => {
|
|
|
114
115
|
stepperSize,
|
|
115
116
|
currentStage,
|
|
116
117
|
stages,
|
|
118
|
+
stepperLabelProps,
|
|
117
119
|
withPadding: withStepperPadding
|
|
118
120
|
}), (title || isMobileOrTablet && (primaryAction || secondaryAction)) && /*#__PURE__*/_react.default.createElement(_UTHeader.default, {
|
|
119
121
|
actions: [...(headerActions || []), ...(isMobileOrTablet ? [primaryAction, secondaryAction].filter(action => action) : [])],
|
|
@@ -191,6 +193,7 @@ UTWorkflowContainer.propTypes = {
|
|
|
191
193
|
requiredFieldInfoDataTestId: _propTypes.string,
|
|
192
194
|
secondaryAction: _types.buttonTypes,
|
|
193
195
|
stages: _propTypes.object,
|
|
196
|
+
stepperLabelProps: _propTypes.object,
|
|
194
197
|
stepperSize: _propTypes.string,
|
|
195
198
|
stepsCount: _propTypes.number,
|
|
196
199
|
subtitle: _propTypes.string,
|