@synerise/ds-progress-bar 1.1.40 → 1.2.0
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 +6 -0
- package/README.md +15 -12
- package/dist/Multivalue/Multivalue.js +5 -2
- package/dist/Multivalue/Multivalue.types.d.ts +4 -0
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.40...@synerise/ds-progress-bar@1.2.0) (2026-03-20)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **progress-bar:** tooltips in multivalue progress bar ([e37f829](https://github.com/Synerise/synerise-design/commit/e37f829fee9c194abf2312349b563e4a55f78cad))
|
|
11
|
+
|
|
6
12
|
## [1.1.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.39...@synerise/ds-progress-bar@1.1.40) (2026-03-09)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @synerise/ds-progress-bar
|
package/README.md
CHANGED
|
@@ -15,14 +15,15 @@ Progress-Bar UI Component
|
|
|
15
15
|
|
|
16
16
|
| Property | Description | Type | Default |
|
|
17
17
|
| ----------- | -------------------------------------------- | ------- | ------- |
|
|
18
|
-
| steps
|
|
19
|
-
| description
|
|
20
|
-
| percent
|
|
21
|
-
| thin
|
|
22
|
-
| label
|
|
23
|
-
| customColor
|
|
24
|
-
| width
|
|
25
|
-
| inline
|
|
18
|
+
| steps | Number of steps in progress bar | number | `1` |
|
|
19
|
+
| description | Text of description under progress bar | ReactNode | - |
|
|
20
|
+
| percent | Value of progress bar, also visible in label | number | `50` |
|
|
21
|
+
| thin | Displays a thinner line | boolean | `false` |
|
|
22
|
+
| label | Optional label above progress bar | ReactNode | - |
|
|
23
|
+
| customColor | Bar color | string | `''` |
|
|
24
|
+
| width | CSS width of each segment tile | string | `'100%'` |
|
|
25
|
+
| inline | set percent value next to progress bar | boolean | `false` |
|
|
26
|
+
| containerStyles | Container inline styles (**@deprecated** — use `style` prop) | CSSProperties | - |
|
|
26
27
|
|
|
27
28
|
### ProgressTiles
|
|
28
29
|
|
|
@@ -42,7 +43,9 @@ Progress-Bar UI Component
|
|
|
42
43
|
|
|
43
44
|
### ProgressValue
|
|
44
45
|
|
|
45
|
-
| Property
|
|
46
|
-
|
|
|
47
|
-
| percent
|
|
48
|
-
| color
|
|
46
|
+
| Property | Description | Type | Default |
|
|
47
|
+
| ------------ | ---------------------------------------- | ------------ | ----------- |
|
|
48
|
+
| percent | Value to display (length of bar) | number | - |
|
|
49
|
+
| color | Bar color | string | - |
|
|
50
|
+
| tooltip | Tooltip content shown on hover | ReactNode | `undefined` |
|
|
51
|
+
| tooltipProps | Additional props passed to the Tooltip | TooltipProps | `undefined` |
|
|
@@ -2,6 +2,7 @@ var _excluded = ["values", "stackedBars"];
|
|
|
2
2
|
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); }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
import React, { useMemo } from 'react';
|
|
5
|
+
import Tooltip from '@synerise/ds-tooltip';
|
|
5
6
|
import * as S from './MultiValue.styles';
|
|
6
7
|
var normalizePercent = function normalizePercent(value) {
|
|
7
8
|
if (value < 0) {
|
|
@@ -25,11 +26,13 @@ var Multivalue = function Multivalue(_ref) {
|
|
|
25
26
|
return /*#__PURE__*/React.createElement(S.Container, _extends({
|
|
26
27
|
stackedBars: stackedBars
|
|
27
28
|
}, htmlAttributes), finalValues.map(function (val, index) {
|
|
28
|
-
return /*#__PURE__*/React.createElement(
|
|
29
|
+
return /*#__PURE__*/React.createElement(Tooltip, _extends({
|
|
30
|
+
title: val.tooltip
|
|
31
|
+
}, val == null ? void 0 : val.tooltipProps), /*#__PURE__*/React.createElement(S.Multivalue, {
|
|
29
32
|
key: val.color + "-" + val.percent + "-" + index,
|
|
30
33
|
color: val.color,
|
|
31
34
|
percent: normalizePercent(val.percent)
|
|
32
|
-
});
|
|
35
|
+
}));
|
|
33
36
|
}));
|
|
34
37
|
};
|
|
35
38
|
export default Multivalue;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type TooltipProps } from '@synerise/ds-tooltip';
|
|
1
3
|
import { type WithHTMLAttributes } from '@synerise/ds-utils';
|
|
2
4
|
export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
|
|
3
5
|
values: ProgressValue[];
|
|
@@ -6,4 +8,6 @@ export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
|
|
|
6
8
|
export type ProgressValue = {
|
|
7
9
|
percent: number;
|
|
8
10
|
color: string;
|
|
11
|
+
tooltip?: ReactNode;
|
|
12
|
+
tooltipProps?: TooltipProps;
|
|
9
13
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-progress-bar",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Progress-Bar UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -35,13 +35,14 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-form-field": "^1.3.
|
|
39
|
-
"@synerise/ds-
|
|
38
|
+
"@synerise/ds-form-field": "^1.3.9",
|
|
39
|
+
"@synerise/ds-tooltip": "^1.4.9",
|
|
40
|
+
"@synerise/ds-utils": "^1.7.0"
|
|
40
41
|
},
|
|
41
42
|
"peerDependencies": {
|
|
42
43
|
"@synerise/ds-core": "*",
|
|
43
44
|
"react": ">=16.9.0 <= 18.3.1",
|
|
44
45
|
"styled-components": "^5.3.3"
|
|
45
46
|
},
|
|
46
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
|
|
47
48
|
}
|