@atlaskit/badge 18.2.3 → 18.3.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 +13 -0
- package/dist/cjs/badge-new.compiled.css +24 -0
- package/dist/cjs/badge-new.js +92 -0
- package/dist/cjs/badge.compiled.css +3 -3
- package/dist/cjs/badge.js +20 -6
- package/dist/es2019/badge-new.compiled.css +24 -0
- package/dist/es2019/badge-new.js +83 -0
- package/dist/es2019/badge.compiled.css +3 -3
- package/dist/es2019/badge.js +19 -5
- package/dist/esm/badge-new.compiled.css +24 -0
- package/dist/esm/badge-new.js +85 -0
- package/dist/esm/badge.compiled.css +3 -3
- package/dist/esm/badge.js +19 -5
- package/dist/types/badge-new.d.ts +67 -0
- package/dist/types-ts4.5/badge-new.d.ts +67 -0
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/badge
|
|
2
2
|
|
|
3
|
+
## 18.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`7fe3ef93439b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7fe3ef93439b5) -
|
|
8
|
+
[ux] Adds new badge UI uplifts behind a feature flag.
|
|
9
|
+
|
|
10
|
+
## 18.2.4
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 18.2.3
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._18zr1b66{padding-inline:var(--ds-space-050,4px)}
|
|
3
|
+
._1rjcidpf{padding-block:0}
|
|
4
|
+
._1bah1h6o{justify-content:center}
|
|
5
|
+
._1e0c116y{display:inline-flex}
|
|
6
|
+
._1kz6184x{block-size:min-content}
|
|
7
|
+
._1o9zidpf{flex-shrink:0}
|
|
8
|
+
._1ul91ejb{min-width:var(--ds-space-300,24px)}
|
|
9
|
+
._bfhk1dq8{background-color:color-mix(in oklch,var(--ds-background-information-bold,#1868db) 50%,var(--ds-background-information-subtler,#cfe1fd) 50%)}
|
|
10
|
+
._bfhk1kmu{background-color:var(--ds-background-warning-bold,#fbc828)}
|
|
11
|
+
._bfhk1s9h{background-color:color-mix(in oklch,var(--ds-background-success-bold,#5b7f24) 20%,var(--ds-background-success-subtler,#d3f1a7) 80%)}
|
|
12
|
+
._bfhk7i23{background-color:color-mix(in oklch,var(--ds-background-neutral-bold,#292a2e) 33%,var(--ds-background-neutral,#0515240f) 67%)}
|
|
13
|
+
._bfhkiizu{background-color:color-mix(in oklch,var(--ds-background-discovery-bold,#964ac0) 50%,var(--ds-background-discovery-subtler,#eed7fc) 50%)}
|
|
14
|
+
._bfhkrkii{background-color:color-mix(in oklch,var(--ds-background-danger-bold,#c9372c) 50%,var(--ds-background-danger-subtler,#ffd5d2) 50%)}
|
|
15
|
+
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
16
|
+
._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
|
|
17
|
+
._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}
|
|
18
|
+
._syaz1p1e{color:var(--ds-text-success-bolder,#37471f)}
|
|
19
|
+
._syaz1qd9{color:var(--ds-text-information-bolder,#123263)}
|
|
20
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
21
|
+
._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
|
|
22
|
+
._vchhusvi{box-sizing:border-box}
|
|
23
|
+
html[data-color-mode=dark] ._pers14ug{background-color:color-mix(in oklch,var(--ds-background-warning-bold,#fbc828) 20%,var(--ds-background-warning-subtler,#fce4a6) 80%)}
|
|
24
|
+
@supports (color:oklch(from white l c h)){._1ut51bbx{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * 1.4) c h)}._1ut5e5eq{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * 1.4) c h)}._1ut5iv2r{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * 1.55) c h)}._1ut5z5kg{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * 2.77) c h)}._1ut5zp7h{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * 1.4) c h)}html[data-color-mode=dark] ._y8hm17oz{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * .69) c h)}html[data-color-mode=dark] ._y8hm1g0e{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * .37) c h)}html[data-color-mode=dark] ._y8hm1hpu{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * .63) c h)}html[data-color-mode=dark] ._y8hm84f9{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * .69) c h)}html[data-color-mode=dark] ._y8hmdo2b{background-color:oklch(from var(--ds-background-warning-bold,#fbc828) calc(l * .6) c h)}html[data-color-mode=dark] ._y8hmxr8b{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * .69) c h)}}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/* badge-new.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.appearanceMapping = void 0;
|
|
9
|
+
require("./badge-new.compiled.css");
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var React = _react;
|
|
12
|
+
var _runtime = require("@compiled/react/runtime");
|
|
13
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
14
|
+
var _utils = require("./internal/utils");
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
16
|
+
/**
|
|
17
|
+
* New appearance types for visual refresh.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Props for BadgeNew component with new appearance names.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Mapping from old appearance names to new appearance names for visual refresh.
|
|
26
|
+
* Used when Badge component passes old prop names to BadgeNew.
|
|
27
|
+
*/
|
|
28
|
+
var appearanceMapping = exports.appearanceMapping = {
|
|
29
|
+
added: 'success',
|
|
30
|
+
removed: 'danger',
|
|
31
|
+
default: 'neutral',
|
|
32
|
+
primary: 'information',
|
|
33
|
+
primaryInverted: 'inverse',
|
|
34
|
+
important: 'danger'
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
38
|
+
// Nested selectors with data attributes are required for theme switching
|
|
39
|
+
var stylesNew = {
|
|
40
|
+
root: "_2rkolb4i _18zr1b66 _1rjcidpf _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
|
|
41
|
+
success: "_syaz1p1e _bfhk1s9h _1ut5iv2r _y8hm1hpu",
|
|
42
|
+
danger: "_syaz1blx _bfhkrkii _1ut5zp7h _y8hm84f9",
|
|
43
|
+
warning: "_bfhk1kmu _syazmgs1 _pers14ug _y8hmdo2b",
|
|
44
|
+
information: "_syaz1qd9 _bfhk1dq8 _1ut5e5eq _y8hmxr8b",
|
|
45
|
+
discovery: "_syaz1g72 _bfhkiizu _1ut51bbx _y8hm17oz",
|
|
46
|
+
neutral: "_syazi7uo _bfhk7i23 _1ut5z5kg _y8hm1g0e",
|
|
47
|
+
inverse: "_bfhkvuon _syazi7uo"
|
|
48
|
+
};
|
|
49
|
+
/* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
50
|
+
|
|
51
|
+
var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
|
|
52
|
+
return typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* __BadgeNew__
|
|
57
|
+
*
|
|
58
|
+
* New visual refresh implementation of Badge component for the labelling system.
|
|
59
|
+
* This component is used when the 'platform-dst-lozenge-tag-badge-visual-uplifts' feature flag is enabled.
|
|
60
|
+
*
|
|
61
|
+
* Uses new appearance naming convention:
|
|
62
|
+
* - success (green)
|
|
63
|
+
* - danger (red)
|
|
64
|
+
* - neutral (gray)
|
|
65
|
+
* - information (blue)
|
|
66
|
+
* - inverse (inverted colors)
|
|
67
|
+
* - warning (orange/yellow)
|
|
68
|
+
* - discovery (purple)
|
|
69
|
+
*/
|
|
70
|
+
var BadgeNew = /*#__PURE__*/(0, _react.memo)(function BadgeNew(_ref) {
|
|
71
|
+
var _ref$appearance = _ref.appearance,
|
|
72
|
+
appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
|
|
73
|
+
_ref$children = _ref.children,
|
|
74
|
+
children = _ref$children === void 0 ? 0 : _ref$children,
|
|
75
|
+
_ref$max = _ref.max,
|
|
76
|
+
max = _ref$max === void 0 ? 99 : _ref$max,
|
|
77
|
+
style = _ref.style,
|
|
78
|
+
testId = _ref.testId;
|
|
79
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
80
|
+
"data-testid": testId,
|
|
81
|
+
style: {
|
|
82
|
+
background: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
83
|
+
color: style === null || style === void 0 ? void 0 : style.color
|
|
84
|
+
},
|
|
85
|
+
className: (0, _runtime.ax)([stylesNew.root, stylesNew[appearance]])
|
|
86
|
+
}, /*#__PURE__*/React.createElement(_compiled.Text, {
|
|
87
|
+
size: "small",
|
|
88
|
+
align: "center",
|
|
89
|
+
color: "inherit"
|
|
90
|
+
}, badgeValueWithNegativeNumberSupported(children, max)));
|
|
91
|
+
});
|
|
92
|
+
var _default = exports.default = BadgeNew;
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
._bfhk1366{background-color:#fd9891}
|
|
9
9
|
._bfhk1fkg{background-color:#dddee1}
|
|
10
10
|
._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
|
|
11
|
+
._bfhk1y9u{background-color:var(--ds-background-success,#efffd6)}
|
|
11
12
|
._bfhk1ymo{background-color:#8fb8f6}
|
|
12
|
-
._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
|
|
13
13
|
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
14
|
-
.
|
|
15
|
-
.
|
|
14
|
+
._syaz1oa5{color:var(--ds-text-brand,#1868db)}
|
|
15
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
16
16
|
._syazwwip{color:#292a2e}
|
|
17
17
|
._vchhusvi{box-sizing:border-box}
|
package/dist/cjs/badge.js
CHANGED
|
@@ -11,10 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
var React = _react;
|
|
12
12
|
var _runtime = require("@compiled/react/runtime");
|
|
13
13
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
|
-
var
|
|
14
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
15
|
+
var _badgeNew = _interopRequireWildcard(require("./badge-new"));
|
|
15
16
|
var _utils = require("./internal/utils");
|
|
16
17
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
|
|
17
|
-
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
18
18
|
/**
|
|
19
19
|
* Visual refresh colors.
|
|
20
20
|
* Hardcoded hex colors are used as the they will be updated in the labelling system work and we want to avoid frequent UI changes.\
|
|
@@ -28,12 +28,12 @@ var blue300 = '#8FB8F6';
|
|
|
28
28
|
var neutral1000 = '#292A2E';
|
|
29
29
|
var styles = {
|
|
30
30
|
root: "_2rkolb4i _18zr1b66 _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
|
|
31
|
-
added: "
|
|
31
|
+
added: "_bfhk1y9u _syazi7uo",
|
|
32
32
|
default: "_bfhk1fkg _syazwwip",
|
|
33
33
|
important: "_bfhk1366 _syazwwip",
|
|
34
34
|
primary: "_bfhk1ymo _syazwwip",
|
|
35
|
-
primaryInverted: "_bfhkvuon
|
|
36
|
-
removed: "_bfhk1gly
|
|
35
|
+
primaryInverted: "_bfhkvuon _syaz1oa5",
|
|
36
|
+
removed: "_bfhk1gly _syazi7uo"
|
|
37
37
|
};
|
|
38
38
|
var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
|
|
39
39
|
// Use this flag for allowing negative values(numbers) in badge component when custom number field is used
|
|
@@ -61,6 +61,20 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
|
|
|
61
61
|
max = _ref$max === void 0 ? 99 : _ref$max,
|
|
62
62
|
style = _ref.style,
|
|
63
63
|
testId = _ref.testId;
|
|
64
|
+
if ((0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
|
|
65
|
+
// Map old appearance names to new ones
|
|
66
|
+
var newAppearance = _badgeNew.appearanceMapping[appearance];
|
|
67
|
+
return (
|
|
68
|
+
/*#__PURE__*/
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
70
|
+
React.createElement(_badgeNew.default, {
|
|
71
|
+
appearance: newAppearance,
|
|
72
|
+
max: max,
|
|
73
|
+
style: style,
|
|
74
|
+
testId: testId
|
|
75
|
+
}, children)
|
|
76
|
+
);
|
|
77
|
+
}
|
|
64
78
|
return /*#__PURE__*/React.createElement("span", {
|
|
65
79
|
"data-testid": testId,
|
|
66
80
|
style: {
|
|
@@ -68,7 +82,7 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
|
|
|
68
82
|
color: style === null || style === void 0 ? void 0 : style.color
|
|
69
83
|
},
|
|
70
84
|
className: (0, _runtime.ax)([styles.root, styles[appearance]])
|
|
71
|
-
}, /*#__PURE__*/React.createElement(
|
|
85
|
+
}, /*#__PURE__*/React.createElement(_compiled.Text, {
|
|
72
86
|
size: "small",
|
|
73
87
|
align: "center",
|
|
74
88
|
color: "inherit"
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._18zr1b66{padding-inline:var(--ds-space-050,4px)}
|
|
3
|
+
._1rjcidpf{padding-block:0}
|
|
4
|
+
._1bah1h6o{justify-content:center}
|
|
5
|
+
._1e0c116y{display:inline-flex}
|
|
6
|
+
._1kz6184x{block-size:min-content}
|
|
7
|
+
._1o9zidpf{flex-shrink:0}
|
|
8
|
+
._1ul91ejb{min-width:var(--ds-space-300,24px)}
|
|
9
|
+
._bfhk1dq8{background-color:color-mix(in oklch,var(--ds-background-information-bold,#1868db) 50%,var(--ds-background-information-subtler,#cfe1fd) 50%)}
|
|
10
|
+
._bfhk1kmu{background-color:var(--ds-background-warning-bold,#fbc828)}
|
|
11
|
+
._bfhk1s9h{background-color:color-mix(in oklch,var(--ds-background-success-bold,#5b7f24) 20%,var(--ds-background-success-subtler,#d3f1a7) 80%)}
|
|
12
|
+
._bfhk7i23{background-color:color-mix(in oklch,var(--ds-background-neutral-bold,#292a2e) 33%,var(--ds-background-neutral,#0515240f) 67%)}
|
|
13
|
+
._bfhkiizu{background-color:color-mix(in oklch,var(--ds-background-discovery-bold,#964ac0) 50%,var(--ds-background-discovery-subtler,#eed7fc) 50%)}
|
|
14
|
+
._bfhkrkii{background-color:color-mix(in oklch,var(--ds-background-danger-bold,#c9372c) 50%,var(--ds-background-danger-subtler,#ffd5d2) 50%)}
|
|
15
|
+
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
16
|
+
._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
|
|
17
|
+
._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}
|
|
18
|
+
._syaz1p1e{color:var(--ds-text-success-bolder,#37471f)}
|
|
19
|
+
._syaz1qd9{color:var(--ds-text-information-bolder,#123263)}
|
|
20
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
21
|
+
._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
|
|
22
|
+
._vchhusvi{box-sizing:border-box}
|
|
23
|
+
html[data-color-mode=dark] ._pers14ug{background-color:color-mix(in oklch,var(--ds-background-warning-bold,#fbc828) 20%,var(--ds-background-warning-subtler,#fce4a6) 80%)}
|
|
24
|
+
@supports (color:oklch(from white l c h)){._1ut51bbx{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * 1.4) c h)}._1ut5e5eq{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * 1.4) c h)}._1ut5iv2r{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * 1.55) c h)}._1ut5z5kg{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * 2.77) c h)}._1ut5zp7h{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * 1.4) c h)}html[data-color-mode=dark] ._y8hm17oz{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * .69) c h)}html[data-color-mode=dark] ._y8hm1g0e{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * .37) c h)}html[data-color-mode=dark] ._y8hm1hpu{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * .63) c h)}html[data-color-mode=dark] ._y8hm84f9{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * .69) c h)}html[data-color-mode=dark] ._y8hmdo2b{background-color:oklch(from var(--ds-background-warning-bold,#fbc828) calc(l * .6) c h)}html[data-color-mode=dark] ._y8hmxr8b{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * .69) c h)}}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/* badge-new.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
|
+
import "./badge-new.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { memo } from 'react';
|
|
6
|
+
import { Text } from '@atlaskit/primitives/compiled';
|
|
7
|
+
import { formatValue } from './internal/utils';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* New appearance types for visual refresh.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Props for BadgeNew component with new appearance names.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Mapping from old appearance names to new appearance names for visual refresh.
|
|
19
|
+
* Used when Badge component passes old prop names to BadgeNew.
|
|
20
|
+
*/
|
|
21
|
+
export const appearanceMapping = {
|
|
22
|
+
added: 'success',
|
|
23
|
+
removed: 'danger',
|
|
24
|
+
default: 'neutral',
|
|
25
|
+
primary: 'information',
|
|
26
|
+
primaryInverted: 'inverse',
|
|
27
|
+
important: 'danger'
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
31
|
+
// Nested selectors with data attributes are required for theme switching
|
|
32
|
+
const stylesNew = {
|
|
33
|
+
root: "_2rkolb4i _18zr1b66 _1rjcidpf _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
|
|
34
|
+
success: "_syaz1p1e _bfhk1s9h _1ut5iv2r _y8hm1hpu",
|
|
35
|
+
danger: "_syaz1blx _bfhkrkii _1ut5zp7h _y8hm84f9",
|
|
36
|
+
warning: "_bfhk1kmu _syazmgs1 _pers14ug _y8hmdo2b",
|
|
37
|
+
information: "_syaz1qd9 _bfhk1dq8 _1ut5e5eq _y8hmxr8b",
|
|
38
|
+
discovery: "_syaz1g72 _bfhkiizu _1ut51bbx _y8hm17oz",
|
|
39
|
+
neutral: "_syazi7uo _bfhk7i23 _1ut5z5kg _y8hm1g0e",
|
|
40
|
+
inverse: "_bfhkvuon _syazi7uo"
|
|
41
|
+
};
|
|
42
|
+
/* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
43
|
+
|
|
44
|
+
const badgeValueWithNegativeNumberSupported = (children, max) => {
|
|
45
|
+
return typeof children === 'number' && max ? formatValue(children, max) : children;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* __BadgeNew__
|
|
50
|
+
*
|
|
51
|
+
* New visual refresh implementation of Badge component for the labelling system.
|
|
52
|
+
* This component is used when the 'platform-dst-lozenge-tag-badge-visual-uplifts' feature flag is enabled.
|
|
53
|
+
*
|
|
54
|
+
* Uses new appearance naming convention:
|
|
55
|
+
* - success (green)
|
|
56
|
+
* - danger (red)
|
|
57
|
+
* - neutral (gray)
|
|
58
|
+
* - information (blue)
|
|
59
|
+
* - inverse (inverted colors)
|
|
60
|
+
* - warning (orange/yellow)
|
|
61
|
+
* - discovery (purple)
|
|
62
|
+
*/
|
|
63
|
+
const BadgeNew = /*#__PURE__*/memo(function BadgeNew({
|
|
64
|
+
appearance = 'neutral',
|
|
65
|
+
children = 0,
|
|
66
|
+
max = 99,
|
|
67
|
+
style,
|
|
68
|
+
testId
|
|
69
|
+
}) {
|
|
70
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
71
|
+
"data-testid": testId,
|
|
72
|
+
style: {
|
|
73
|
+
background: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
74
|
+
color: style === null || style === void 0 ? void 0 : style.color
|
|
75
|
+
},
|
|
76
|
+
className: ax([stylesNew.root, stylesNew[appearance]])
|
|
77
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
78
|
+
size: "small",
|
|
79
|
+
align: "center",
|
|
80
|
+
color: "inherit"
|
|
81
|
+
}, badgeValueWithNegativeNumberSupported(children, max)));
|
|
82
|
+
});
|
|
83
|
+
export default BadgeNew;
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
._bfhk1366{background-color:#fd9891}
|
|
9
9
|
._bfhk1fkg{background-color:#dddee1}
|
|
10
10
|
._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
|
|
11
|
+
._bfhk1y9u{background-color:var(--ds-background-success,#efffd6)}
|
|
11
12
|
._bfhk1ymo{background-color:#8fb8f6}
|
|
12
|
-
._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
|
|
13
13
|
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
14
|
-
.
|
|
15
|
-
.
|
|
14
|
+
._syaz1oa5{color:var(--ds-text-brand,#1868db)}
|
|
15
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
16
16
|
._syazwwip{color:#292a2e}
|
|
17
17
|
._vchhusvi{box-sizing:border-box}
|
package/dist/es2019/badge.js
CHANGED
|
@@ -4,8 +4,8 @@ import * as React from 'react';
|
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { memo } from 'react';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
-
|
|
8
|
-
import {
|
|
7
|
+
import { Text } from '@atlaskit/primitives/compiled';
|
|
8
|
+
import BadgeNew, { appearanceMapping } from './badge-new';
|
|
9
9
|
import { formatValue, formatValueWithNegativeSupport } from './internal/utils';
|
|
10
10
|
/**
|
|
11
11
|
* Visual refresh colors.
|
|
@@ -20,12 +20,12 @@ const blue300 = '#8FB8F6';
|
|
|
20
20
|
const neutral1000 = '#292A2E';
|
|
21
21
|
const styles = {
|
|
22
22
|
root: "_2rkolb4i _18zr1b66 _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
|
|
23
|
-
added: "
|
|
23
|
+
added: "_bfhk1y9u _syazi7uo",
|
|
24
24
|
default: "_bfhk1fkg _syazwwip",
|
|
25
25
|
important: "_bfhk1366 _syazwwip",
|
|
26
26
|
primary: "_bfhk1ymo _syazwwip",
|
|
27
|
-
primaryInverted: "_bfhkvuon
|
|
28
|
-
removed: "_bfhk1gly
|
|
27
|
+
primaryInverted: "_bfhkvuon _syaz1oa5",
|
|
28
|
+
removed: "_bfhk1gly _syazi7uo"
|
|
29
29
|
};
|
|
30
30
|
const badgeValueWithNegativeNumberSupported = (children, max) => {
|
|
31
31
|
// Use this flag for allowing negative values(numbers) in badge component when custom number field is used
|
|
@@ -51,6 +51,20 @@ const Badge = /*#__PURE__*/memo(function Badge({
|
|
|
51
51
|
style,
|
|
52
52
|
testId
|
|
53
53
|
}) {
|
|
54
|
+
if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
|
|
55
|
+
// Map old appearance names to new ones
|
|
56
|
+
const newAppearance = appearanceMapping[appearance];
|
|
57
|
+
return (
|
|
58
|
+
/*#__PURE__*/
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
60
|
+
React.createElement(BadgeNew, {
|
|
61
|
+
appearance: newAppearance,
|
|
62
|
+
max: max,
|
|
63
|
+
style: style,
|
|
64
|
+
testId: testId
|
|
65
|
+
}, children)
|
|
66
|
+
);
|
|
67
|
+
}
|
|
54
68
|
return /*#__PURE__*/React.createElement("span", {
|
|
55
69
|
"data-testid": testId,
|
|
56
70
|
style: {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
|
|
2
|
+
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._18zr1b66{padding-inline:var(--ds-space-050,4px)}
|
|
3
|
+
._1rjcidpf{padding-block:0}
|
|
4
|
+
._1bah1h6o{justify-content:center}
|
|
5
|
+
._1e0c116y{display:inline-flex}
|
|
6
|
+
._1kz6184x{block-size:min-content}
|
|
7
|
+
._1o9zidpf{flex-shrink:0}
|
|
8
|
+
._1ul91ejb{min-width:var(--ds-space-300,24px)}
|
|
9
|
+
._bfhk1dq8{background-color:color-mix(in oklch,var(--ds-background-information-bold,#1868db) 50%,var(--ds-background-information-subtler,#cfe1fd) 50%)}
|
|
10
|
+
._bfhk1kmu{background-color:var(--ds-background-warning-bold,#fbc828)}
|
|
11
|
+
._bfhk1s9h{background-color:color-mix(in oklch,var(--ds-background-success-bold,#5b7f24) 20%,var(--ds-background-success-subtler,#d3f1a7) 80%)}
|
|
12
|
+
._bfhk7i23{background-color:color-mix(in oklch,var(--ds-background-neutral-bold,#292a2e) 33%,var(--ds-background-neutral,#0515240f) 67%)}
|
|
13
|
+
._bfhkiizu{background-color:color-mix(in oklch,var(--ds-background-discovery-bold,#964ac0) 50%,var(--ds-background-discovery-subtler,#eed7fc) 50%)}
|
|
14
|
+
._bfhkrkii{background-color:color-mix(in oklch,var(--ds-background-danger-bold,#c9372c) 50%,var(--ds-background-danger-subtler,#ffd5d2) 50%)}
|
|
15
|
+
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
16
|
+
._syaz1blx{color:var(--ds-text-danger-bolder,#5d1f1a)}
|
|
17
|
+
._syaz1g72{color:var(--ds-text-discovery-bolder,#48245d)}
|
|
18
|
+
._syaz1p1e{color:var(--ds-text-success-bolder,#37471f)}
|
|
19
|
+
._syaz1qd9{color:var(--ds-text-information-bolder,#123263)}
|
|
20
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
21
|
+
._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
|
|
22
|
+
._vchhusvi{box-sizing:border-box}
|
|
23
|
+
html[data-color-mode=dark] ._pers14ug{background-color:color-mix(in oklch,var(--ds-background-warning-bold,#fbc828) 20%,var(--ds-background-warning-subtler,#fce4a6) 80%)}
|
|
24
|
+
@supports (color:oklch(from white l c h)){._1ut51bbx{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * 1.4) c h)}._1ut5e5eq{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * 1.4) c h)}._1ut5iv2r{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * 1.55) c h)}._1ut5z5kg{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * 2.77) c h)}._1ut5zp7h{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * 1.4) c h)}html[data-color-mode=dark] ._y8hm17oz{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * .69) c h)}html[data-color-mode=dark] ._y8hm1g0e{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * .37) c h)}html[data-color-mode=dark] ._y8hm1hpu{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * .63) c h)}html[data-color-mode=dark] ._y8hm84f9{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * .69) c h)}html[data-color-mode=dark] ._y8hmdo2b{background-color:oklch(from var(--ds-background-warning-bold,#fbc828) calc(l * .6) c h)}html[data-color-mode=dark] ._y8hmxr8b{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * .69) c h)}}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* badge-new.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
|
+
import "./badge-new.compiled.css";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
+
import { memo } from 'react';
|
|
6
|
+
import { Text } from '@atlaskit/primitives/compiled';
|
|
7
|
+
import { formatValue } from './internal/utils';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* New appearance types for visual refresh.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Props for BadgeNew component with new appearance names.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Mapping from old appearance names to new appearance names for visual refresh.
|
|
19
|
+
* Used when Badge component passes old prop names to BadgeNew.
|
|
20
|
+
*/
|
|
21
|
+
export var appearanceMapping = {
|
|
22
|
+
added: 'success',
|
|
23
|
+
removed: 'danger',
|
|
24
|
+
default: 'neutral',
|
|
25
|
+
primary: 'information',
|
|
26
|
+
primaryInverted: 'inverse',
|
|
27
|
+
important: 'danger'
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
31
|
+
// Nested selectors with data attributes are required for theme switching
|
|
32
|
+
var stylesNew = {
|
|
33
|
+
root: "_2rkolb4i _18zr1b66 _1rjcidpf _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
|
|
34
|
+
success: "_syaz1p1e _bfhk1s9h _1ut5iv2r _y8hm1hpu",
|
|
35
|
+
danger: "_syaz1blx _bfhkrkii _1ut5zp7h _y8hm84f9",
|
|
36
|
+
warning: "_bfhk1kmu _syazmgs1 _pers14ug _y8hmdo2b",
|
|
37
|
+
information: "_syaz1qd9 _bfhk1dq8 _1ut5e5eq _y8hmxr8b",
|
|
38
|
+
discovery: "_syaz1g72 _bfhkiizu _1ut51bbx _y8hm17oz",
|
|
39
|
+
neutral: "_syazi7uo _bfhk7i23 _1ut5z5kg _y8hm1g0e",
|
|
40
|
+
inverse: "_bfhkvuon _syazi7uo"
|
|
41
|
+
};
|
|
42
|
+
/* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
|
|
43
|
+
|
|
44
|
+
var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
|
|
45
|
+
return typeof children === 'number' && max ? formatValue(children, max) : children;
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* __BadgeNew__
|
|
50
|
+
*
|
|
51
|
+
* New visual refresh implementation of Badge component for the labelling system.
|
|
52
|
+
* This component is used when the 'platform-dst-lozenge-tag-badge-visual-uplifts' feature flag is enabled.
|
|
53
|
+
*
|
|
54
|
+
* Uses new appearance naming convention:
|
|
55
|
+
* - success (green)
|
|
56
|
+
* - danger (red)
|
|
57
|
+
* - neutral (gray)
|
|
58
|
+
* - information (blue)
|
|
59
|
+
* - inverse (inverted colors)
|
|
60
|
+
* - warning (orange/yellow)
|
|
61
|
+
* - discovery (purple)
|
|
62
|
+
*/
|
|
63
|
+
var BadgeNew = /*#__PURE__*/memo(function BadgeNew(_ref) {
|
|
64
|
+
var _ref$appearance = _ref.appearance,
|
|
65
|
+
appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
|
|
66
|
+
_ref$children = _ref.children,
|
|
67
|
+
children = _ref$children === void 0 ? 0 : _ref$children,
|
|
68
|
+
_ref$max = _ref.max,
|
|
69
|
+
max = _ref$max === void 0 ? 99 : _ref$max,
|
|
70
|
+
style = _ref.style,
|
|
71
|
+
testId = _ref.testId;
|
|
72
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
73
|
+
"data-testid": testId,
|
|
74
|
+
style: {
|
|
75
|
+
background: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
76
|
+
color: style === null || style === void 0 ? void 0 : style.color
|
|
77
|
+
},
|
|
78
|
+
className: ax([stylesNew.root, stylesNew[appearance]])
|
|
79
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
80
|
+
size: "small",
|
|
81
|
+
align: "center",
|
|
82
|
+
color: "inherit"
|
|
83
|
+
}, badgeValueWithNegativeNumberSupported(children, max)));
|
|
84
|
+
});
|
|
85
|
+
export default BadgeNew;
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
._bfhk1366{background-color:#fd9891}
|
|
9
9
|
._bfhk1fkg{background-color:#dddee1}
|
|
10
10
|
._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
|
|
11
|
+
._bfhk1y9u{background-color:var(--ds-background-success,#efffd6)}
|
|
11
12
|
._bfhk1ymo{background-color:#8fb8f6}
|
|
12
|
-
._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
|
|
13
13
|
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
14
|
-
.
|
|
15
|
-
.
|
|
14
|
+
._syaz1oa5{color:var(--ds-text-brand,#1868db)}
|
|
15
|
+
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
16
16
|
._syazwwip{color:#292a2e}
|
|
17
17
|
._vchhusvi{box-sizing:border-box}
|
package/dist/esm/badge.js
CHANGED
|
@@ -4,8 +4,8 @@ import * as React from 'react';
|
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { memo } from 'react';
|
|
6
6
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
-
|
|
8
|
-
import {
|
|
7
|
+
import { Text } from '@atlaskit/primitives/compiled';
|
|
8
|
+
import BadgeNew, { appearanceMapping } from './badge-new';
|
|
9
9
|
import { formatValue, formatValueWithNegativeSupport } from './internal/utils';
|
|
10
10
|
/**
|
|
11
11
|
* Visual refresh colors.
|
|
@@ -20,12 +20,12 @@ var blue300 = '#8FB8F6';
|
|
|
20
20
|
var neutral1000 = '#292A2E';
|
|
21
21
|
var styles = {
|
|
22
22
|
root: "_2rkolb4i _18zr1b66 _1e0c116y _vchhusvi _1ul91ejb _1bah1h6o _1o9zidpf _1kz6184x",
|
|
23
|
-
added: "
|
|
23
|
+
added: "_bfhk1y9u _syazi7uo",
|
|
24
24
|
default: "_bfhk1fkg _syazwwip",
|
|
25
25
|
important: "_bfhk1366 _syazwwip",
|
|
26
26
|
primary: "_bfhk1ymo _syazwwip",
|
|
27
|
-
primaryInverted: "_bfhkvuon
|
|
28
|
-
removed: "_bfhk1gly
|
|
27
|
+
primaryInverted: "_bfhkvuon _syaz1oa5",
|
|
28
|
+
removed: "_bfhk1gly _syazi7uo"
|
|
29
29
|
};
|
|
30
30
|
var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
|
|
31
31
|
// Use this flag for allowing negative values(numbers) in badge component when custom number field is used
|
|
@@ -53,6 +53,20 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
|
|
|
53
53
|
max = _ref$max === void 0 ? 99 : _ref$max,
|
|
54
54
|
style = _ref.style,
|
|
55
55
|
testId = _ref.testId;
|
|
56
|
+
if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
|
|
57
|
+
// Map old appearance names to new ones
|
|
58
|
+
var newAppearance = appearanceMapping[appearance];
|
|
59
|
+
return (
|
|
60
|
+
/*#__PURE__*/
|
|
61
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
62
|
+
React.createElement(BadgeNew, {
|
|
63
|
+
appearance: newAppearance,
|
|
64
|
+
max: max,
|
|
65
|
+
style: style,
|
|
66
|
+
testId: testId
|
|
67
|
+
}, children)
|
|
68
|
+
);
|
|
69
|
+
}
|
|
56
70
|
return /*#__PURE__*/React.createElement("span", {
|
|
57
71
|
"data-testid": testId,
|
|
58
72
|
style: {
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type CSSProperties, type ReactNode } from 'react';
|
|
6
|
+
/**
|
|
7
|
+
* New appearance types for visual refresh.
|
|
8
|
+
*/
|
|
9
|
+
export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery';
|
|
10
|
+
/**
|
|
11
|
+
* Props for BadgeNew component with new appearance names.
|
|
12
|
+
*/
|
|
13
|
+
export interface BadgeNewProps {
|
|
14
|
+
/**
|
|
15
|
+
* Affects the visual style of the badge.
|
|
16
|
+
* Uses the new naming convention:
|
|
17
|
+
* - success: Green (replaces "added")
|
|
18
|
+
* - danger: Red (replaces "removed" and "important")
|
|
19
|
+
* - neutral: Gray (replaces "default")
|
|
20
|
+
* - information: Blue (replaces "primary")
|
|
21
|
+
* - inverse: Inverted colors (replaces "primaryInverted")
|
|
22
|
+
*/
|
|
23
|
+
appearance?: NewAppearance;
|
|
24
|
+
/**
|
|
25
|
+
* The value displayed within the badge. A `ReactNode` can be provided for
|
|
26
|
+
* custom-formatted numbers, however, badge should only be used in cases where you want to represent
|
|
27
|
+
* a number.
|
|
28
|
+
* Use a [lozenge](/packages/design-system/lozenge) for non-numeric information.
|
|
29
|
+
*/
|
|
30
|
+
children?: number | ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
|
|
33
|
+
* This value should be greater than 0. If set to `false` the original value will be displayed regardless of
|
|
34
|
+
* whether it is larger than the default maximum value.
|
|
35
|
+
*/
|
|
36
|
+
max?: number | false;
|
|
37
|
+
/**
|
|
38
|
+
* Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
|
|
39
|
+
*/
|
|
40
|
+
style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
|
|
41
|
+
/**
|
|
42
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
43
|
+
*/
|
|
44
|
+
testId?: string;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Mapping from old appearance names to new appearance names for visual refresh.
|
|
48
|
+
* Used when Badge component passes old prop names to BadgeNew.
|
|
49
|
+
*/
|
|
50
|
+
export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important', NewAppearance>;
|
|
51
|
+
/**
|
|
52
|
+
* __BadgeNew__
|
|
53
|
+
*
|
|
54
|
+
* New visual refresh implementation of Badge component for the labelling system.
|
|
55
|
+
* This component is used when the 'platform-dst-lozenge-tag-badge-visual-uplifts' feature flag is enabled.
|
|
56
|
+
*
|
|
57
|
+
* Uses new appearance naming convention:
|
|
58
|
+
* - success (green)
|
|
59
|
+
* - danger (red)
|
|
60
|
+
* - neutral (gray)
|
|
61
|
+
* - information (blue)
|
|
62
|
+
* - inverse (inverted colors)
|
|
63
|
+
* - warning (orange/yellow)
|
|
64
|
+
* - discovery (purple)
|
|
65
|
+
*/
|
|
66
|
+
declare const BadgeNew: import("react").NamedExoticComponent<BadgeNewProps>;
|
|
67
|
+
export default BadgeNew;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type CSSProperties, type ReactNode } from 'react';
|
|
6
|
+
/**
|
|
7
|
+
* New appearance types for visual refresh.
|
|
8
|
+
*/
|
|
9
|
+
export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery';
|
|
10
|
+
/**
|
|
11
|
+
* Props for BadgeNew component with new appearance names.
|
|
12
|
+
*/
|
|
13
|
+
export interface BadgeNewProps {
|
|
14
|
+
/**
|
|
15
|
+
* Affects the visual style of the badge.
|
|
16
|
+
* Uses the new naming convention:
|
|
17
|
+
* - success: Green (replaces "added")
|
|
18
|
+
* - danger: Red (replaces "removed" and "important")
|
|
19
|
+
* - neutral: Gray (replaces "default")
|
|
20
|
+
* - information: Blue (replaces "primary")
|
|
21
|
+
* - inverse: Inverted colors (replaces "primaryInverted")
|
|
22
|
+
*/
|
|
23
|
+
appearance?: NewAppearance;
|
|
24
|
+
/**
|
|
25
|
+
* The value displayed within the badge. A `ReactNode` can be provided for
|
|
26
|
+
* custom-formatted numbers, however, badge should only be used in cases where you want to represent
|
|
27
|
+
* a number.
|
|
28
|
+
* Use a [lozenge](/packages/design-system/lozenge) for non-numeric information.
|
|
29
|
+
*/
|
|
30
|
+
children?: number | ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
|
|
33
|
+
* This value should be greater than 0. If set to `false` the original value will be displayed regardless of
|
|
34
|
+
* whether it is larger than the default maximum value.
|
|
35
|
+
*/
|
|
36
|
+
max?: number | false;
|
|
37
|
+
/**
|
|
38
|
+
* Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
|
|
39
|
+
*/
|
|
40
|
+
style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
|
|
41
|
+
/**
|
|
42
|
+
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
43
|
+
*/
|
|
44
|
+
testId?: string;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Mapping from old appearance names to new appearance names for visual refresh.
|
|
48
|
+
* Used when Badge component passes old prop names to BadgeNew.
|
|
49
|
+
*/
|
|
50
|
+
export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important', NewAppearance>;
|
|
51
|
+
/**
|
|
52
|
+
* __BadgeNew__
|
|
53
|
+
*
|
|
54
|
+
* New visual refresh implementation of Badge component for the labelling system.
|
|
55
|
+
* This component is used when the 'platform-dst-lozenge-tag-badge-visual-uplifts' feature flag is enabled.
|
|
56
|
+
*
|
|
57
|
+
* Uses new appearance naming convention:
|
|
58
|
+
* - success (green)
|
|
59
|
+
* - danger (red)
|
|
60
|
+
* - neutral (gray)
|
|
61
|
+
* - information (blue)
|
|
62
|
+
* - inverse (inverted colors)
|
|
63
|
+
* - warning (orange/yellow)
|
|
64
|
+
* - discovery (purple)
|
|
65
|
+
*/
|
|
66
|
+
declare const BadgeNew: import("react").NamedExoticComponent<BadgeNewProps>;
|
|
67
|
+
export default BadgeNew;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/badge",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.3.0",
|
|
4
4
|
"description": "A badge is a visual indicator for numeric values such as tallies and scores.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,10 +32,9 @@
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@atlaskit/codemod-utils": "^4.2.0",
|
|
36
35
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
37
|
-
"@atlaskit/primitives": "^16.
|
|
38
|
-
"@atlaskit/tokens": "^
|
|
36
|
+
"@atlaskit/primitives": "^16.4.0",
|
|
37
|
+
"@atlaskit/tokens": "^8.4.0",
|
|
39
38
|
"@babel/runtime": "^7.0.0",
|
|
40
39
|
"@compiled/react": "^0.18.6"
|
|
41
40
|
},
|
|
@@ -47,12 +46,11 @@
|
|
|
47
46
|
"@af/integration-testing": "workspace:^",
|
|
48
47
|
"@af/visual-regression": "workspace:^",
|
|
49
48
|
"@atlaskit/docs": "^11.2.0",
|
|
50
|
-
"@atlaskit/ds-lib": "^5.1.0",
|
|
51
49
|
"@atlaskit/link": "^3.2.0",
|
|
52
|
-
"@atlaskit/section-message": "^8.
|
|
50
|
+
"@atlaskit/section-message": "^8.10.0",
|
|
53
51
|
"@atlaskit/theme": "^21.0.0",
|
|
54
|
-
"@atlassian/feature-flags-test-utils": "^0.
|
|
55
|
-
"@atlassian/ssr-tests": "
|
|
52
|
+
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
53
|
+
"@atlassian/ssr-tests": "workspace:*",
|
|
56
54
|
"@testing-library/react": "^13.4.0",
|
|
57
55
|
"react-dom": "^18.2.0"
|
|
58
56
|
},
|
|
@@ -84,6 +82,9 @@
|
|
|
84
82
|
"platform-feature-flags": {
|
|
85
83
|
"platform_ken_2029_negative_numbers_badge": {
|
|
86
84
|
"type": "boolean"
|
|
85
|
+
},
|
|
86
|
+
"platform-dst-lozenge-tag-badge-visual-uplifts": {
|
|
87
|
+
"type": "boolean"
|
|
87
88
|
}
|
|
88
89
|
}
|
|
89
90
|
}
|