@atlaskit/badge 18.3.1 → 18.3.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.
Files changed (19) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/badge-new.compiled.css +2 -2
  3. package/dist/cjs/badge-new.js +35 -16
  4. package/dist/cjs/badge.js +3 -6
  5. package/dist/es2019/badge-new.compiled.css +2 -2
  6. package/dist/es2019/badge-new.js +34 -16
  7. package/dist/es2019/badge.js +5 -8
  8. package/dist/esm/badge-new.compiled.css +2 -2
  9. package/dist/esm/badge-new.js +34 -16
  10. package/dist/esm/badge.js +5 -8
  11. package/dist/types/badge-new.d.ts +7 -46
  12. package/dist/types/entry-points/types.d.ts +1 -1
  13. package/dist/types/index.d.ts +1 -1
  14. package/dist/types/types.d.ts +41 -1
  15. package/dist/types-ts4.5/badge-new.d.ts +7 -46
  16. package/dist/types-ts4.5/entry-points/types.d.ts +1 -1
  17. package/dist/types-ts4.5/index.d.ts +1 -1
  18. package/dist/types-ts4.5/types.d.ts +41 -1
  19. package/package.json +16 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/badge
2
2
 
3
+ ## 18.3.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`703d32b94540e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/703d32b94540e) -
8
+ Tidy up rolled out flag to handle negative numbers.
9
+ - Updated dependencies
10
+
3
11
  ## 18.3.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/badge-new.compiled.css CHANGED
@@ -20,5 +20,5 @@
20
20
  ._syazi7uo{color:var(--ds-text,#292a2e)}
21
21
  ._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
22
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)}}
23
+ [data-color-mode=dark] ._15ua14ug{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)}[data-color-mode=dark] ._1cn417oz{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * .69) c h)}[data-color-mode=dark] ._1cn41g0e{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * .37) c h)}[data-color-mode=dark] ._1cn41hpu{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * .63) c h)}[data-color-mode=dark] ._1cn484f9{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * .69) c h)}[data-color-mode=dark] ._1cn4do2b{background-color:oklch(from var(--ds-background-warning-bold,#fbc828) calc(l * .6) c h)}[data-color-mode=dark] ._1cn4xr8b{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * .69) c h)}}
package/dist/cjs/badge-new.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.appearanceMapping = void 0;
8
+ exports.default = exports.appearanceMappingToOld = exports.appearanceMapping = void 0;
9
9
  require("./badge-new.compiled.css");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var React = _react;
@@ -13,14 +13,6 @@ var _runtime = require("@compiled/react/runtime");
13
13
  var _compiled = require("@atlaskit/primitives/compiled");
14
14
  var _utils = require("./internal/utils");
15
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
16
  /**
25
17
  * Mapping from old appearance names to new appearance names for visual refresh.
26
18
  * Used when Badge component passes old prop names to BadgeNew.
@@ -31,19 +23,46 @@ var appearanceMapping = exports.appearanceMapping = {
31
23
  default: 'neutral',
32
24
  primary: 'information',
33
25
  primaryInverted: 'inverse',
34
- important: 'danger'
26
+ important: 'danger',
27
+ warning: 'warning',
28
+ discovery: 'discovery',
29
+ danger: 'danger',
30
+ success: 'success',
31
+ information: 'information',
32
+ inverse: 'inverse',
33
+ neutral: 'neutral'
34
+ };
35
+
36
+ /**
37
+ * Mapping from new appearance names to old appearance names for visual refresh.
38
+ * Used when BadgeNew migration is done.
39
+ */
40
+ var appearanceMappingToOld = exports.appearanceMappingToOld = {
41
+ added: 'added',
42
+ removed: 'removed',
43
+ default: 'default',
44
+ primary: 'primary',
45
+ primaryInverted: 'primaryInverted',
46
+ important: 'important',
47
+ danger: 'removed',
48
+ success: 'added',
49
+ information: 'primary',
50
+ inverse: 'primaryInverted',
51
+ neutral: 'default',
52
+ warning: 'default',
53
+ discovery: 'default'
35
54
  };
36
55
 
37
56
  /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
38
57
  // Nested selectors with data attributes are required for theme switching
39
58
  var stylesNew = {
40
59
  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",
60
+ success: "_syaz1p1e _bfhk1s9h _1ut5iv2r _1cn41hpu",
61
+ danger: "_syaz1blx _bfhkrkii _1ut5zp7h _1cn484f9",
62
+ warning: "_bfhk1kmu _syazmgs1 _15ua14ug _1cn4do2b",
63
+ information: "_syaz1qd9 _bfhk1dq8 _1ut5e5eq _1cn4xr8b",
64
+ discovery: "_syaz1g72 _bfhkiizu _1ut51bbx _1cn417oz",
65
+ neutral: "_syazi7uo _bfhk7i23 _1ut5z5kg _1cn41g0e",
47
66
  inverse: "_bfhkvuon _syazi7uo"
48
67
  };
49
68
  /* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
package/dist/cjs/badge.js CHANGED
@@ -36,11 +36,7 @@ var styles = {
36
36
  removed: "_bfhk1gly _syazi7uo"
37
37
  };
38
38
  var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
39
- // Use this flag for allowing negative values(numbers) in badge component when custom number field is used
40
- if ((0, _platformFeatureFlags.fg)('platform_ken_2029_negative_numbers_badge')) {
41
- return typeof children === 'number' && typeof max === 'number' ? (0, _utils.formatValueWithNegativeSupport)(children, max) : children;
42
- }
43
- return typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children;
39
+ return typeof children === 'number' && typeof max === 'number' ? (0, _utils.formatValueWithNegativeSupport)(children, max) : children;
44
40
  };
45
41
 
46
42
  /**
@@ -75,13 +71,14 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
75
71
  }, children)
76
72
  );
77
73
  }
74
+ var oldAppearance = _badgeNew.appearanceMappingToOld[appearance];
78
75
  return /*#__PURE__*/React.createElement("span", {
79
76
  "data-testid": testId,
80
77
  style: {
81
78
  background: style === null || style === void 0 ? void 0 : style.backgroundColor,
82
79
  color: style === null || style === void 0 ? void 0 : style.color
83
80
  },
84
- className: (0, _runtime.ax)([styles.root, styles[appearance]])
81
+ className: (0, _runtime.ax)([styles.root, styles[oldAppearance]])
85
82
  }, /*#__PURE__*/React.createElement(_compiled.Text, {
86
83
  size: "small",
87
84
  align: "center",
package/dist/es2019/badge-new.compiled.css CHANGED
@@ -20,5 +20,5 @@
20
20
  ._syazi7uo{color:var(--ds-text,#292a2e)}
21
21
  ._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
22
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)}}
23
+ [data-color-mode=dark] ._15ua14ug{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)}[data-color-mode=dark] ._1cn417oz{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * .69) c h)}[data-color-mode=dark] ._1cn41g0e{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * .37) c h)}[data-color-mode=dark] ._1cn41hpu{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * .63) c h)}[data-color-mode=dark] ._1cn484f9{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * .69) c h)}[data-color-mode=dark] ._1cn4do2b{background-color:oklch(from var(--ds-background-warning-bold,#fbc828) calc(l * .6) c h)}[data-color-mode=dark] ._1cn4xr8b{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * .69) c h)}}
package/dist/es2019/badge-new.js CHANGED
@@ -5,15 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo } from 'react';
6
6
  import { Text } from '@atlaskit/primitives/compiled';
7
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
8
  /**
18
9
  * Mapping from old appearance names to new appearance names for visual refresh.
19
10
  * Used when Badge component passes old prop names to BadgeNew.
@@ -24,19 +15,46 @@ export const appearanceMapping = {
24
15
  default: 'neutral',
25
16
  primary: 'information',
26
17
  primaryInverted: 'inverse',
27
- important: 'danger'
18
+ important: 'danger',
19
+ warning: 'warning',
20
+ discovery: 'discovery',
21
+ danger: 'danger',
22
+ success: 'success',
23
+ information: 'information',
24
+ inverse: 'inverse',
25
+ neutral: 'neutral'
26
+ };
27
+
28
+ /**
29
+ * Mapping from new appearance names to old appearance names for visual refresh.
30
+ * Used when BadgeNew migration is done.
31
+ */
32
+ export const appearanceMappingToOld = {
33
+ added: 'added',
34
+ removed: 'removed',
35
+ default: 'default',
36
+ primary: 'primary',
37
+ primaryInverted: 'primaryInverted',
38
+ important: 'important',
39
+ danger: 'removed',
40
+ success: 'added',
41
+ information: 'primary',
42
+ inverse: 'primaryInverted',
43
+ neutral: 'default',
44
+ warning: 'default',
45
+ discovery: 'default'
28
46
  };
29
47
 
30
48
  /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
31
49
  // Nested selectors with data attributes are required for theme switching
32
50
  const stylesNew = {
33
51
  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",
52
+ success: "_syaz1p1e _bfhk1s9h _1ut5iv2r _1cn41hpu",
53
+ danger: "_syaz1blx _bfhkrkii _1ut5zp7h _1cn484f9",
54
+ warning: "_bfhk1kmu _syazmgs1 _15ua14ug _1cn4do2b",
55
+ information: "_syaz1qd9 _bfhk1dq8 _1ut5e5eq _1cn4xr8b",
56
+ discovery: "_syaz1g72 _bfhkiizu _1ut51bbx _1cn417oz",
57
+ neutral: "_syazi7uo _bfhk7i23 _1ut5z5kg _1cn41g0e",
40
58
  inverse: "_bfhkvuon _syazi7uo"
41
59
  };
42
60
  /* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
package/dist/es2019/badge.js CHANGED
@@ -5,8 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { Text } from '@atlaskit/primitives/compiled';
8
- import BadgeNew, { appearanceMapping } from './badge-new';
9
- import { formatValue, formatValueWithNegativeSupport } from './internal/utils';
8
+ import BadgeNew, { appearanceMapping, appearanceMappingToOld } from './badge-new';
9
+ import { formatValueWithNegativeSupport } from './internal/utils';
10
10
  /**
11
11
  * Visual refresh colors.
12
12
  * 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,11 +28,7 @@ const styles = {
28
28
  removed: "_bfhk1gly _syazi7uo"
29
29
  };
30
30
  const badgeValueWithNegativeNumberSupported = (children, max) => {
31
- // Use this flag for allowing negative values(numbers) in badge component when custom number field is used
32
- if (fg('platform_ken_2029_negative_numbers_badge')) {
33
- return typeof children === 'number' && typeof max === 'number' ? formatValueWithNegativeSupport(children, max) : children;
34
- }
35
- return typeof children === 'number' && max ? formatValue(children, max) : children;
31
+ return typeof children === 'number' && typeof max === 'number' ? formatValueWithNegativeSupport(children, max) : children;
36
32
  };
37
33
 
38
34
  /**
@@ -65,13 +61,14 @@ const Badge = /*#__PURE__*/memo(function Badge({
65
61
  }, children)
66
62
  );
67
63
  }
64
+ const oldAppearance = appearanceMappingToOld[appearance];
68
65
  return /*#__PURE__*/React.createElement("span", {
69
66
  "data-testid": testId,
70
67
  style: {
71
68
  background: style === null || style === void 0 ? void 0 : style.backgroundColor,
72
69
  color: style === null || style === void 0 ? void 0 : style.color
73
70
  },
74
- className: ax([styles.root, styles[appearance]])
71
+ className: ax([styles.root, styles[oldAppearance]])
75
72
  }, /*#__PURE__*/React.createElement(Text, {
76
73
  size: "small",
77
74
  align: "center",
package/dist/esm/badge-new.compiled.css CHANGED
@@ -20,5 +20,5 @@
20
20
  ._syazi7uo{color:var(--ds-text,#292a2e)}
21
21
  ._syazmgs1{color:var(--ds-text-warning-bolder,#693200)}
22
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)}}
23
+ [data-color-mode=dark] ._15ua14ug{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)}[data-color-mode=dark] ._1cn417oz{background-color:oklch(from var(--ds-background-discovery-bold,#964ac0) calc(l * .69) c h)}[data-color-mode=dark] ._1cn41g0e{background-color:oklch(from var(--ds-background-neutral-bold,#292a2e) calc(l * .37) c h)}[data-color-mode=dark] ._1cn41hpu{background-color:oklch(from var(--ds-background-success-bold,#5b7f24) calc(l * .63) c h)}[data-color-mode=dark] ._1cn484f9{background-color:oklch(from var(--ds-background-danger-bold,#c9372c) calc(l * .69) c h)}[data-color-mode=dark] ._1cn4do2b{background-color:oklch(from var(--ds-background-warning-bold,#fbc828) calc(l * .6) c h)}[data-color-mode=dark] ._1cn4xr8b{background-color:oklch(from var(--ds-background-information-bold,#1868db) calc(l * .69) c h)}}
package/dist/esm/badge-new.js CHANGED
@@ -5,15 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo } from 'react';
6
6
  import { Text } from '@atlaskit/primitives/compiled';
7
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
8
  /**
18
9
  * Mapping from old appearance names to new appearance names for visual refresh.
19
10
  * Used when Badge component passes old prop names to BadgeNew.
@@ -24,19 +15,46 @@ export var appearanceMapping = {
24
15
  default: 'neutral',
25
16
  primary: 'information',
26
17
  primaryInverted: 'inverse',
27
- important: 'danger'
18
+ important: 'danger',
19
+ warning: 'warning',
20
+ discovery: 'discovery',
21
+ danger: 'danger',
22
+ success: 'success',
23
+ information: 'information',
24
+ inverse: 'inverse',
25
+ neutral: 'neutral'
26
+ };
27
+
28
+ /**
29
+ * Mapping from new appearance names to old appearance names for visual refresh.
30
+ * Used when BadgeNew migration is done.
31
+ */
32
+ export var appearanceMappingToOld = {
33
+ added: 'added',
34
+ removed: 'removed',
35
+ default: 'default',
36
+ primary: 'primary',
37
+ primaryInverted: 'primaryInverted',
38
+ important: 'important',
39
+ danger: 'removed',
40
+ success: 'added',
41
+ information: 'primary',
42
+ inverse: 'primaryInverted',
43
+ neutral: 'default',
44
+ warning: 'default',
45
+ discovery: 'default'
28
46
  };
29
47
 
30
48
  /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
31
49
  // Nested selectors with data attributes are required for theme switching
32
50
  var stylesNew = {
33
51
  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",
52
+ success: "_syaz1p1e _bfhk1s9h _1ut5iv2r _1cn41hpu",
53
+ danger: "_syaz1blx _bfhkrkii _1ut5zp7h _1cn484f9",
54
+ warning: "_bfhk1kmu _syazmgs1 _15ua14ug _1cn4do2b",
55
+ information: "_syaz1qd9 _bfhk1dq8 _1ut5e5eq _1cn4xr8b",
56
+ discovery: "_syaz1g72 _bfhkiizu _1ut51bbx _1cn417oz",
57
+ neutral: "_syazi7uo _bfhk7i23 _1ut5z5kg _1cn41g0e",
40
58
  inverse: "_bfhkvuon _syazi7uo"
41
59
  };
42
60
  /* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors */
package/dist/esm/badge.js CHANGED
@@ -5,8 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { Text } from '@atlaskit/primitives/compiled';
8
- import BadgeNew, { appearanceMapping } from './badge-new';
9
- import { formatValue, formatValueWithNegativeSupport } from './internal/utils';
8
+ import BadgeNew, { appearanceMapping, appearanceMappingToOld } from './badge-new';
9
+ import { formatValueWithNegativeSupport } from './internal/utils';
10
10
  /**
11
11
  * Visual refresh colors.
12
12
  * 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,11 +28,7 @@ var styles = {
28
28
  removed: "_bfhk1gly _syazi7uo"
29
29
  };
30
30
  var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
31
- // Use this flag for allowing negative values(numbers) in badge component when custom number field is used
32
- if (fg('platform_ken_2029_negative_numbers_badge')) {
33
- return typeof children === 'number' && typeof max === 'number' ? formatValueWithNegativeSupport(children, max) : children;
34
- }
35
- return typeof children === 'number' && max ? formatValue(children, max) : children;
31
+ return typeof children === 'number' && typeof max === 'number' ? formatValueWithNegativeSupport(children, max) : children;
36
32
  };
37
33
 
38
34
  /**
@@ -67,13 +63,14 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
67
63
  }, children)
68
64
  );
69
65
  }
66
+ var oldAppearance = appearanceMappingToOld[appearance];
70
67
  return /*#__PURE__*/React.createElement("span", {
71
68
  "data-testid": testId,
72
69
  style: {
73
70
  background: style === null || style === void 0 ? void 0 : style.backgroundColor,
74
71
  color: style === null || style === void 0 ? void 0 : style.color
75
72
  },
76
- className: ax([styles.root, styles[appearance]])
73
+ className: ax([styles.root, styles[oldAppearance]])
77
74
  }, /*#__PURE__*/React.createElement(Text, {
78
75
  size: "small",
79
76
  align: "center",
package/dist/types/badge-new.d.ts CHANGED
@@ -1,53 +1,14 @@
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
- }
1
+ import type { BadgeNewProps, NewAppearance } from './types';
46
2
  /**
47
3
  * Mapping from old appearance names to new appearance names for visual refresh.
48
4
  * Used when Badge component passes old prop names to BadgeNew.
49
5
  */
50
- export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important', NewAppearance>;
6
+ export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', NewAppearance>;
7
+ /**
8
+ * Mapping from new appearance names to old appearance names for visual refresh.
9
+ * Used when BadgeNew migration is done.
10
+ */
11
+ export declare const appearanceMappingToOld: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', 'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important'>;
51
12
  /**
52
13
  * __BadgeNew__
53
14
  *
package/dist/types/entry-points/types.d.ts CHANGED
@@ -1 +1 @@
1
- export type { BadgeProps } from '../types';
1
+ export type { BadgeProps, BadgeNewProps } from '../types';
package/dist/types/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default } from './badge';
2
- export type { BadgeProps } from './types';
2
+ export type { BadgeProps, BadgeNewProps } from './types';
package/dist/types/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
- export type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
2
+ export type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
3
3
  export interface BadgeProps {
4
4
  /**
5
5
  * Affects the visual style of the badge.
@@ -27,3 +27,43 @@ export interface BadgeProps {
27
27
  */
28
28
  testId?: string;
29
29
  }
30
+ /**
31
+ * New appearance types for visual refresh.
32
+ */
33
+ export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery';
34
+ /**
35
+ * Props for BadgeNew component with new appearance names.
36
+ */
37
+ export interface BadgeNewProps {
38
+ /**
39
+ * Affects the visual style of the badge.
40
+ * Uses the new naming convention:
41
+ * - success: Green (replaces "added")
42
+ * - danger: Red (replaces "removed" and "important")
43
+ * - neutral: Gray (replaces "default")
44
+ * - information: Blue (replaces "primary")
45
+ * - inverse: Inverted colors (replaces "primaryInverted")
46
+ */
47
+ appearance?: NewAppearance;
48
+ /**
49
+ * The value displayed within the badge. A `ReactNode` can be provided for
50
+ * custom-formatted numbers, however, badge should only be used in cases where you want to represent
51
+ * a number.
52
+ * Use a [lozenge](/packages/design-system/lozenge/lozenge) for non-numeric information.
53
+ */
54
+ children?: number | ReactNode;
55
+ /**
56
+ * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
57
+ * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
58
+ * whether it is larger than the default maximum value.
59
+ */
60
+ max?: number | false;
61
+ /**
62
+ * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
63
+ */
64
+ style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
65
+ /**
66
+ * 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
67
+ */
68
+ testId?: string;
69
+ }
package/dist/types-ts4.5/badge-new.d.ts CHANGED
@@ -1,53 +1,14 @@
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
- }
1
+ import type { BadgeNewProps, NewAppearance } from './types';
46
2
  /**
47
3
  * Mapping from old appearance names to new appearance names for visual refresh.
48
4
  * Used when Badge component passes old prop names to BadgeNew.
49
5
  */
50
- export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important', NewAppearance>;
6
+ export declare const appearanceMapping: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', NewAppearance>;
7
+ /**
8
+ * Mapping from new appearance names to old appearance names for visual refresh.
9
+ * Used when BadgeNew migration is done.
10
+ */
11
+ export declare const appearanceMappingToOld: Record<'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important' | 'warning' | 'discovery' | 'danger' | 'success' | 'information' | 'inverse' | 'neutral', 'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important'>;
51
12
  /**
52
13
  * __BadgeNew__
53
14
  *
package/dist/types-ts4.5/entry-points/types.d.ts CHANGED
@@ -1 +1 @@
1
- export type { BadgeProps } from '../types';
1
+ export type { BadgeProps, BadgeNewProps } from '../types';
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default } from './badge';
2
- export type { BadgeProps } from './types';
2
+ export type { BadgeProps, BadgeNewProps } from './types';
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
- export type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
2
+ export type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
3
3
  export interface BadgeProps {
4
4
  /**
5
5
  * Affects the visual style of the badge.
@@ -27,3 +27,43 @@ export interface BadgeProps {
27
27
  */
28
28
  testId?: string;
29
29
  }
30
+ /**
31
+ * New appearance types for visual refresh.
32
+ */
33
+ export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery';
34
+ /**
35
+ * Props for BadgeNew component with new appearance names.
36
+ */
37
+ export interface BadgeNewProps {
38
+ /**
39
+ * Affects the visual style of the badge.
40
+ * Uses the new naming convention:
41
+ * - success: Green (replaces "added")
42
+ * - danger: Red (replaces "removed" and "important")
43
+ * - neutral: Gray (replaces "default")
44
+ * - information: Blue (replaces "primary")
45
+ * - inverse: Inverted colors (replaces "primaryInverted")
46
+ */
47
+ appearance?: NewAppearance;
48
+ /**
49
+ * The value displayed within the badge. A `ReactNode` can be provided for
50
+ * custom-formatted numbers, however, badge should only be used in cases where you want to represent
51
+ * a number.
52
+ * Use a [lozenge](/packages/design-system/lozenge/lozenge) for non-numeric information.
53
+ */
54
+ children?: number | ReactNode;
55
+ /**
56
+ * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
57
+ * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
58
+ * whether it is larger than the default maximum value.
59
+ */
60
+ max?: number | false;
61
+ /**
62
+ * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
63
+ */
64
+ style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
65
+ /**
66
+ * 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
67
+ */
68
+ testId?: string;
69
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/badge",
3
- "version": "18.3.1",
3
+ "version": "18.3.2",
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/"
@@ -28,13 +28,23 @@
28
28
  "team": "Design System Team",
29
29
  "website": {
30
30
  "name": "Badge",
31
- "category": "Status indicators"
31
+ "category": "Status indicators",
32
+ "subPages": [
33
+ {
34
+ "title": "Badge",
35
+ "id": "badge",
36
+ "status": {
37
+ "type": "alpha",
38
+ "description": "This is an experiment under a feature flag. We may make frequent breaking changes with limited notice. We don't recommend using this without support from our team."
39
+ }
40
+ }
41
+ ]
32
42
  }
33
43
  },
34
44
  "dependencies": {
35
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
36
46
  "@atlaskit/primitives": "^17.0.0",
37
- "@atlaskit/tokens": "^9.0.0",
47
+ "@atlaskit/tokens": "^9.1.0",
38
48
  "@babel/runtime": "^7.0.0",
39
49
  "@compiled/react": "^0.18.6"
40
50
  },
@@ -46,12 +56,12 @@
46
56
  "@af/integration-testing": "workspace:^",
47
57
  "@af/visual-regression": "workspace:^",
48
58
  "@atlaskit/docs": "^11.2.0",
49
- "@atlaskit/link": "^3.2.0",
50
- "@atlaskit/section-message": "^8.11.0",
59
+ "@atlaskit/link": "^3.3.0",
60
+ "@atlaskit/section-message": "^8.12.0",
51
61
  "@atlaskit/theme": "^21.0.0",
52
62
  "@atlassian/feature-flags-test-utils": "^1.0.0",
53
63
  "@atlassian/ssr-tests": "workspace:*",
54
- "@testing-library/react": "^13.4.0",
64
+ "@atlassian/testing-library": "0.4.0",
55
65
  "react-dom": "^18.2.0"
56
66
  },
57
67
  "techstack": {
@@ -80,9 +90,6 @@
80
90
  },
81
91
  "homepage": "https://atlassian.design/components/badge/",
82
92
  "platform-feature-flags": {
83
- "platform_ken_2029_negative_numbers_badge": {
84
- "type": "boolean"
85
- },
86
93
  "platform-dst-lozenge-tag-badge-visual-uplifts": {
87
94
  "type": "boolean"
88
95
  }