@atlaskit/badge 16.2.2 → 16.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/badge.js +72 -6
  3. package/dist/es2019/badge.js +71 -3
  4. package/dist/esm/badge.js +71 -3
  5. package/dist/types/badge.d.ts +2 -2
  6. package/dist/types-ts4.5/badge.d.ts +2 -2
  7. package/package.json +13 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/badge
2
2
 
3
+ ## 16.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#116976](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116976)
8
+ [`055c56ce4412b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/055c56ce4412b) -
9
+ [ux] DSP-19189 We are testing a new visual appearance behind a feature flag. If successful it will
10
+ be released at a later date.
11
+
12
+ ## 16.2.3
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 16.2.2
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/badge.js CHANGED
@@ -1,15 +1,19 @@
1
1
  "use strict";
2
2
 
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
7
+ var _react = require("react");
8
+ var _react2 = require("@emotion/react");
9
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
10
  var _primitives = require("@atlaskit/primitives");
10
11
  var _utils = require("./internal/utils");
11
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
+ /** @jsx jsx */
13
+
14
+ // Compiled isn't ready to be used in components used by Ecosystem
15
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
16
+
13
17
  var boxStyles = (0, _primitives.xcss)({
14
18
  borderRadius: 'border.radius.200',
15
19
  display: 'inline-flex',
@@ -17,6 +21,54 @@ var boxStyles = (0, _primitives.xcss)({
17
21
  flexShrink: 0 // Text component can wrap text, this ensures it doesn't wrap in flex containers.
18
22
  });
19
23
 
24
+ /**
25
+ * Visual refresh colors.
26
+ * Hardcoded hex colors are used as the they should not change based on theme, and there are no appropriate color tokens.
27
+ *
28
+ * Using separate variables as opposed to an object, to comply with UI styling standard
29
+ * https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-unsafe-values/usage#object-access
30
+ */
31
+ var neutral300 = '#DDDEE1';
32
+ var red300 = '#FD9891';
33
+ var blue300 = '#8FB8F6';
34
+ var neutral1000 = '#292A2E';
35
+ var styles = {
36
+ root: (0, _react2.css)({
37
+ display: 'inline-flex',
38
+ boxSizing: 'border-box',
39
+ minWidth: "var(--ds-space-300, 24px)",
40
+ justifyContent: 'center',
41
+ flexShrink: 0,
42
+ blockSize: 'min-content',
43
+ borderRadius: "var(--ds-border-radius-050, 2px)",
44
+ paddingInline: "var(--ds-space-050, 4px)"
45
+ }),
46
+ added: (0, _react2.css)({
47
+ backgroundColor: "var(--ds-background-success, #DCFFF1)",
48
+ color: "var(--ds-text, #172B4D)"
49
+ }),
50
+ default: (0, _react2.css)({
51
+ backgroundColor: neutral300,
52
+ color: neutral1000
53
+ }),
54
+ important: (0, _react2.css)({
55
+ backgroundColor: red300,
56
+ color: neutral1000
57
+ }),
58
+ primary: (0, _react2.css)({
59
+ backgroundColor: blue300,
60
+ color: neutral1000
61
+ }),
62
+ primaryInverted: (0, _react2.css)({
63
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
64
+ color: "var(--ds-text-brand, #0C66E4)"
65
+ }),
66
+ removed: (0, _react2.css)({
67
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
68
+ color: "var(--ds-text, #172B4D)"
69
+ })
70
+ };
71
+
20
72
  /**
21
73
  * __Badge__
22
74
  *
@@ -35,7 +87,21 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
35
87
  max = _ref$max === void 0 ? 99 : _ref$max,
36
88
  style = _ref.style,
37
89
  testId = _ref.testId;
38
- return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
90
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo')) {
91
+ return (0, _react2.jsx)("span", {
92
+ "data-testid": testId,
93
+ css: [styles.root, styles[appearance]],
94
+ style: {
95
+ background: style === null || style === void 0 ? void 0 : style.backgroundColor,
96
+ color: style === null || style === void 0 ? void 0 : style.color
97
+ }
98
+ }, (0, _react2.jsx)(_primitives.Text, {
99
+ size: "small",
100
+ align: "center",
101
+ color: "inherit"
102
+ }, typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children));
103
+ }
104
+ return (0, _react2.jsx)(_primitives.Box, {
39
105
  testId: testId,
40
106
  as: "span",
41
107
  backgroundColor: backgroundColors[appearance],
@@ -45,7 +111,7 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
45
111
  color: style === null || style === void 0 ? void 0 : style.color
46
112
  },
47
113
  paddingInline: "space.075"
48
- }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
114
+ }, (0, _react2.jsx)(_primitives.Text, {
49
115
  size: "UNSAFE_small",
50
116
  align: "center",
51
117
  color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
package/dist/es2019/badge.js CHANGED
@@ -1,4 +1,10 @@
1
- import React, { memo } from 'react';
1
+ /** @jsx jsx */
2
+ import { memo } from 'react';
3
+
4
+ // Compiled isn't ready to be used in components used by Ecosystem
5
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
6
+ import { css, jsx } from '@emotion/react';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
8
  import { Box, Text, xcss } from '@atlaskit/primitives';
3
9
  import { formatValue } from './internal/utils';
4
10
  const boxStyles = xcss({
@@ -8,6 +14,54 @@ const boxStyles = xcss({
8
14
  flexShrink: 0 // Text component can wrap text, this ensures it doesn't wrap in flex containers.
9
15
  });
10
16
 
17
+ /**
18
+ * Visual refresh colors.
19
+ * Hardcoded hex colors are used as the they should not change based on theme, and there are no appropriate color tokens.
20
+ *
21
+ * Using separate variables as opposed to an object, to comply with UI styling standard
22
+ * https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-unsafe-values/usage#object-access
23
+ */
24
+ const neutral300 = '#DDDEE1';
25
+ const red300 = '#FD9891';
26
+ const blue300 = '#8FB8F6';
27
+ const neutral1000 = '#292A2E';
28
+ const styles = {
29
+ root: css({
30
+ display: 'inline-flex',
31
+ boxSizing: 'border-box',
32
+ minWidth: "var(--ds-space-300, 24px)",
33
+ justifyContent: 'center',
34
+ flexShrink: 0,
35
+ blockSize: 'min-content',
36
+ borderRadius: "var(--ds-border-radius-050, 2px)",
37
+ paddingInline: "var(--ds-space-050, 4px)"
38
+ }),
39
+ added: css({
40
+ backgroundColor: "var(--ds-background-success, #DCFFF1)",
41
+ color: "var(--ds-text, #172B4D)"
42
+ }),
43
+ default: css({
44
+ backgroundColor: neutral300,
45
+ color: neutral1000
46
+ }),
47
+ important: css({
48
+ backgroundColor: red300,
49
+ color: neutral1000
50
+ }),
51
+ primary: css({
52
+ backgroundColor: blue300,
53
+ color: neutral1000
54
+ }),
55
+ primaryInverted: css({
56
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
57
+ color: "var(--ds-text-brand, #0C66E4)"
58
+ }),
59
+ removed: css({
60
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
61
+ color: "var(--ds-text, #172B4D)"
62
+ })
63
+ };
64
+
11
65
  /**
12
66
  * __Badge__
13
67
  *
@@ -24,7 +78,21 @@ const Badge = /*#__PURE__*/memo(function Badge({
24
78
  style,
25
79
  testId
26
80
  }) {
27
- return /*#__PURE__*/React.createElement(Box, {
81
+ if (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo')) {
82
+ return jsx("span", {
83
+ "data-testid": testId,
84
+ css: [styles.root, styles[appearance]],
85
+ style: {
86
+ background: style === null || style === void 0 ? void 0 : style.backgroundColor,
87
+ color: style === null || style === void 0 ? void 0 : style.color
88
+ }
89
+ }, jsx(Text, {
90
+ size: "small",
91
+ align: "center",
92
+ color: "inherit"
93
+ }, typeof children === 'number' && max ? formatValue(children, max) : children));
94
+ }
95
+ return jsx(Box, {
28
96
  testId: testId,
29
97
  as: "span",
30
98
  backgroundColor: backgroundColors[appearance],
@@ -34,7 +102,7 @@ const Badge = /*#__PURE__*/memo(function Badge({
34
102
  color: style === null || style === void 0 ? void 0 : style.color
35
103
  },
36
104
  paddingInline: "space.075"
37
- }, /*#__PURE__*/React.createElement(Text, {
105
+ }, jsx(Text, {
38
106
  size: "UNSAFE_small",
39
107
  align: "center",
40
108
  color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
package/dist/esm/badge.js CHANGED
@@ -1,4 +1,10 @@
1
- import React, { memo } from 'react';
1
+ /** @jsx jsx */
2
+ import { memo } from 'react';
3
+
4
+ // Compiled isn't ready to be used in components used by Ecosystem
5
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
6
+ import { css, jsx } from '@emotion/react';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
8
  import { Box, Text, xcss } from '@atlaskit/primitives';
3
9
  import { formatValue } from './internal/utils';
4
10
  var boxStyles = xcss({
@@ -8,6 +14,54 @@ var boxStyles = xcss({
8
14
  flexShrink: 0 // Text component can wrap text, this ensures it doesn't wrap in flex containers.
9
15
  });
10
16
 
17
+ /**
18
+ * Visual refresh colors.
19
+ * Hardcoded hex colors are used as the they should not change based on theme, and there are no appropriate color tokens.
20
+ *
21
+ * Using separate variables as opposed to an object, to comply with UI styling standard
22
+ * https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-unsafe-values/usage#object-access
23
+ */
24
+ var neutral300 = '#DDDEE1';
25
+ var red300 = '#FD9891';
26
+ var blue300 = '#8FB8F6';
27
+ var neutral1000 = '#292A2E';
28
+ var styles = {
29
+ root: css({
30
+ display: 'inline-flex',
31
+ boxSizing: 'border-box',
32
+ minWidth: "var(--ds-space-300, 24px)",
33
+ justifyContent: 'center',
34
+ flexShrink: 0,
35
+ blockSize: 'min-content',
36
+ borderRadius: "var(--ds-border-radius-050, 2px)",
37
+ paddingInline: "var(--ds-space-050, 4px)"
38
+ }),
39
+ added: css({
40
+ backgroundColor: "var(--ds-background-success, #DCFFF1)",
41
+ color: "var(--ds-text, #172B4D)"
42
+ }),
43
+ default: css({
44
+ backgroundColor: neutral300,
45
+ color: neutral1000
46
+ }),
47
+ important: css({
48
+ backgroundColor: red300,
49
+ color: neutral1000
50
+ }),
51
+ primary: css({
52
+ backgroundColor: blue300,
53
+ color: neutral1000
54
+ }),
55
+ primaryInverted: css({
56
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
57
+ color: "var(--ds-text-brand, #0C66E4)"
58
+ }),
59
+ removed: css({
60
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
61
+ color: "var(--ds-text, #172B4D)"
62
+ })
63
+ };
64
+
11
65
  /**
12
66
  * __Badge__
13
67
  *
@@ -26,7 +80,21 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
26
80
  max = _ref$max === void 0 ? 99 : _ref$max,
27
81
  style = _ref.style,
28
82
  testId = _ref.testId;
29
- return /*#__PURE__*/React.createElement(Box, {
83
+ if (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo')) {
84
+ return jsx("span", {
85
+ "data-testid": testId,
86
+ css: [styles.root, styles[appearance]],
87
+ style: {
88
+ background: style === null || style === void 0 ? void 0 : style.backgroundColor,
89
+ color: style === null || style === void 0 ? void 0 : style.color
90
+ }
91
+ }, jsx(Text, {
92
+ size: "small",
93
+ align: "center",
94
+ color: "inherit"
95
+ }, typeof children === 'number' && max ? formatValue(children, max) : children));
96
+ }
97
+ return jsx(Box, {
30
98
  testId: testId,
31
99
  as: "span",
32
100
  backgroundColor: backgroundColors[appearance],
@@ -36,7 +104,7 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
36
104
  color: style === null || style === void 0 ? void 0 : style.color
37
105
  },
38
106
  paddingInline: "space.075"
39
- }, /*#__PURE__*/React.createElement(Text, {
107
+ }, jsx(Text, {
40
108
  size: "UNSAFE_small",
41
109
  align: "center",
42
110
  color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
package/dist/types/badge.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import type { BadgeProps } from './types';
3
3
  /**
4
4
  * __Badge__
@@ -9,5 +9,5 @@ import type { BadgeProps } from './types';
9
9
  * - [Code](https://atlassian.design/components/badge/code)
10
10
  * - [Usage](https://atlassian.design/components/badge/usage)
11
11
  */
12
- declare const Badge: React.NamedExoticComponent<BadgeProps>;
12
+ declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
13
13
  export default Badge;
package/dist/types-ts4.5/badge.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import type { BadgeProps } from './types';
3
3
  /**
4
4
  * __Badge__
@@ -9,5 +9,5 @@ import type { BadgeProps } from './types';
9
9
  * - [Code](https://atlassian.design/components/badge/code)
10
10
  * - [Usage](https://atlassian.design/components/badge/usage)
11
11
  */
12
- declare const Badge: React.NamedExoticComponent<BadgeProps>;
12
+ declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
13
13
  export default Badge;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/badge",
3
- "version": "16.2.2",
3
+ "version": "16.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/"
@@ -40,8 +40,11 @@
40
40
  },
41
41
  "dependencies": {
42
42
  "@atlaskit/codemod-utils": "^4.2.0",
43
- "@atlaskit/primitives": "^9.0.0",
44
- "@babel/runtime": "^7.0.0"
43
+ "@atlaskit/platform-feature-flags": "^0.3.0",
44
+ "@atlaskit/primitives": "^10.0.0",
45
+ "@atlaskit/tokens": "^1.53.0",
46
+ "@babel/runtime": "^7.0.0",
47
+ "@emotion/react": "^11.7.1"
45
48
  },
46
49
  "peerDependencies": {
47
50
  "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
@@ -52,7 +55,7 @@
52
55
  "@af/visual-regression": "*",
53
56
  "@atlaskit/ds-lib": "^2.3.0",
54
57
  "@atlaskit/ssr": "*",
55
- "@emotion/react": "^11.7.1",
58
+ "@atlassian/feature-flags-test-utils": "*",
56
59
  "@testing-library/react": "^12.1.5",
57
60
  "jscodeshift": "^0.13.0",
58
61
  "react-dom": "^16.8.0",
@@ -84,5 +87,10 @@
84
87
  "deprecation": "no-deprecated-imports"
85
88
  }
86
89
  },
87
- "homepage": "https://atlassian.design/components/badge/"
90
+ "homepage": "https://atlassian.design/components/badge/",
91
+ "platform-feature-flags": {
92
+ "platform.design-system-team.component-visual-refresh_t8zbo": {
93
+ "type": "boolean"
94
+ }
95
+ }
88
96
  }