@atlaskit/lozenge 13.0.14 → 13.1.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 (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/lozenge.compiled.css +10 -24
  3. package/dist/cjs/lozenge.js +11 -79
  4. package/dist/es2019/lozenge.compiled.css +10 -24
  5. package/dist/es2019/lozenge.js +11 -79
  6. package/dist/esm/lozenge.compiled.css +10 -24
  7. package/dist/esm/lozenge.js +11 -79
  8. package/package.json +7 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 13.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`1e31925550257`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1e31925550257) -
8
+ [ux] Updates lozenge styles to reflect our new visual design language. These changes were
9
+ previously behind a feature flag and are now fully rolled out.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 13.0.15
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 13.0.14
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/lozenge.compiled.css CHANGED
@@ -1,25 +1,19 @@
1
1
 
2
- ._19it13mh{border:var(--ds-border-width,1px) solid #b7b9be}
3
- ._19it1pib{border:var(--ds-border-width,1px) solid #c97cf4}
4
- ._19it1y5u{border:var(--ds-border-width,1px) solid #fca700}
5
- ._19itd8v8{border:var(--ds-border-width,1px) solid #669df1}
6
- ._19itmiw9{border:var(--ds-border-width,1px) solid #94c748}
7
- ._19itv8s6{border:var(--ds-border-width,1px) solid #f87168}
8
- ._1a3713mh{outline:var(--ds-border-width,1px) solid #b7b9be}
9
- ._1a371pib{outline:var(--ds-border-width,1px) solid #c97cf4}
10
- ._1a371y5u{outline:var(--ds-border-width,1px) solid #fca700}
11
- ._1a37d8v8{outline:var(--ds-border-width,1px) solid #669df1}
12
- ._1a37miw9{outline:var(--ds-border-width,1px) solid #94c748}
13
- ._1a37v8s6{outline:var(--ds-border-width,1px) solid #f87168}
14
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
15
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
16
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
2
+ ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._12ji14je{outline-color:#b7b9be}
3
+ ._12ji157s{outline-color:#c97cf4}
4
+ ._12jia2c0{outline-color:#f87168}
5
+ ._12jih727{outline-color:#fca700}
6
+ ._12jin0nx{outline-color:#94c748}
7
+ ._12jiuisw{outline-color:#669df1}
8
+ ._12y3t94y{outline-width:1px}
9
+ ._18m915vq{overflow-y:hidden}
17
10
  ._1bto1l2s{text-overflow:ellipsis}
18
11
  ._1cwg1n1a{outline-offset:-1px}
19
12
  ._1dyz9vsi{letter-spacing:.165px}
20
13
  ._1e0c116y{display:inline-flex}
21
14
  ._1kz6184x{block-size:min-content}
22
15
  ._1p1dangw{text-transform:uppercase}
16
+ ._1qu2nqa1{outline-style:solid}
23
17
  ._1reo15vq{overflow-x:hidden}
24
18
  ._1wyb1skh{font-size:11px}
25
19
  ._bfhk1366{background-color:#fd9891}
@@ -34,15 +28,7 @@
34
28
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
35
29
  ._kqswpfqs{position:static}
36
30
  ._o5721q9c{white-space:nowrap}
37
- ._syaz15cr{color:var(--ds-text-inverse,#fff)}
38
- ._syaz17fi{color:var(--ds-text-success,#064)}
39
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
40
- ._syaz1ick{color:var(--ds-text-danger,#de350b)}
41
- ._syaz1lpn{color:var(--ds-text-information,#0052cc)}
42
- ._syaz1mvf{color:var(--ds-text-discovery,#403294)}
43
- ._syaz1tm6{color:var(--ds-text-warning,#974f0c)}
44
- ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
45
- ._syazjjyb{color:var(--ds-text-subtle,#42526e)}
31
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
46
32
  ._syazwwip{color:#292a2e}
47
33
  ._vchhusvi{box-sizing:border-box}
48
34
  ._vwz47vkz{line-height:1pc}
package/dist/cjs/lozenge.js CHANGED
@@ -11,48 +11,7 @@ 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 _compiled = require("@atlaskit/primitives/compiled");
15
14
  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
- var stylesOld = {
17
- container: "_2rko12b0 _1reo15vq _18m915vq _18zr1b66 _1e0c116y _1kz6184x _kqswpfqs _vchhusvi",
18
- 'text.bold.default': "_syaz15cr",
19
- 'text.bold.inprogress': "_syaz15cr",
20
- 'text.bold.moved': "_syazal3n",
21
- 'text.bold.new': "_syaz15cr",
22
- 'text.bold.removed': "_syaz15cr",
23
- 'text.bold.success': "_syaz15cr",
24
- 'text.subtle.default': "_syazjjyb",
25
- 'text.subtle.inprogress': "_syaz1lpn",
26
- 'text.subtle.moved': "_syaz1tm6",
27
- 'text.subtle.new': "_syaz1mvf",
28
- 'text.subtle.removed': "_syaz1ick",
29
- 'text.subtle.success': "_syaz17fi"
30
- };
31
-
32
- // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
33
- var stylesOldUnbounded = {
34
- text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
35
- customLetterspacing: "_1dyz9vsi"
36
- };
37
- var backgroundColorsOld = {
38
- bold: {
39
- default: 'color.background.neutral.bold',
40
- inprogress: 'color.background.information.bold',
41
- moved: 'color.background.warning.bold',
42
- new: 'color.background.discovery.bold',
43
- removed: 'color.background.danger.bold',
44
- success: 'color.background.success.bold'
45
- },
46
- subtle: {
47
- default: 'color.background.neutral',
48
- inprogress: 'color.background.information',
49
- moved: 'color.background.warning',
50
- new: 'color.background.discovery',
51
- removed: 'color.background.danger',
52
- success: 'color.background.success'
53
- }
54
- };
55
-
56
15
  /**
57
16
  * TODO: We should be using our bounded `cssMap` here, but most of
58
17
  * these styles from the visual refresh are not in the Design System.
@@ -74,19 +33,13 @@ var stylesNew = {
74
33
  'bg.subtle.new': "_bfhksm61",
75
34
  'bg.subtle.removed': "_bfhksm61",
76
35
  'bg.subtle.success': "_bfhksm61",
77
- 'border.subtle.default': "_19it13mh",
78
- 'border.subtle.inprogress': "_19itd8v8",
79
- 'border.subtle.moved': "_19it1y5u",
80
- 'border.subtle.new': "_19it1pib",
81
- 'border.subtle.removed': "_19itv8s6",
82
- 'border.subtle.success': "_19itmiw9",
83
- 'outline.subtle.default': "_1a3713mh",
84
- 'outline.subtle.inprogress': "_1a37d8v8",
85
- 'outline.subtle.moved': "_1a371y5u",
86
- 'outline.subtle.new': "_1a371pib",
87
- 'outline.subtle.removed': "_1a37v8s6",
88
- 'outline.subtle.success': "_1a37miw9",
89
- 'text.subtle': "_syaz1fxt",
36
+ 'outline.subtle.default': "_12ji14je _1qu2nqa1 _12y3t94y",
37
+ 'outline.subtle.inprogress': "_12jiuisw _1qu2nqa1 _12y3t94y",
38
+ 'outline.subtle.moved': "_12jih727 _1qu2nqa1 _12y3t94y",
39
+ 'outline.subtle.new': "_12ji157s _1qu2nqa1 _12y3t94y",
40
+ 'outline.subtle.removed': "_12jia2c0 _1qu2nqa1 _12y3t94y",
41
+ 'outline.subtle.success': "_12jin0nx _1qu2nqa1 _12y3t94y",
42
+ 'text.subtle': "_syazi7uo",
90
43
  'text.bold': "_syazwwip"
91
44
  };
92
45
  var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
@@ -115,34 +68,13 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
115
68
  }, [appearance]);
116
69
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
117
70
  var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
118
- if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
119
- return /*#__PURE__*/React.createElement("span", {
120
- style: {
121
- backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
122
- maxWidth: maxWidthIsPc ? maxWidth : '100%'
123
- },
124
- "data-testid": testId,
125
- className: (0, _runtime.ax)([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && !(0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && stylesNew["border.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && stylesNew["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && stylesNew.containerSubtle])
126
- }, /*#__PURE__*/React.createElement("span", {
127
- style: {
128
- color: style === null || style === void 0 ? void 0 : style.color,
129
- // to negate paddingInline specified on Box above
130
- maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
131
- },
132
- "data-testid": testId && "".concat(testId, "--text"),
133
- className: (0, _runtime.ax)([stylesNew.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
134
- }, children));
135
- }
136
- return /*#__PURE__*/React.createElement(_compiled.Box, {
137
- as: "span",
138
- backgroundColor: backgroundColorsOld[appearanceStyle][appearanceType],
71
+ return /*#__PURE__*/React.createElement("span", {
139
72
  style: {
140
73
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
141
74
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
142
75
  },
143
- paddingInline: "space.050",
144
- xcss: stylesOld.container,
145
- testId: testId
76
+ "data-testid": testId,
77
+ className: (0, _runtime.ax)([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew.containerSubtle])
146
78
  }, /*#__PURE__*/React.createElement("span", {
147
79
  style: {
148
80
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -150,7 +82,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
150
82
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
151
83
  },
152
84
  "data-testid": testId && "".concat(testId, "--text"),
153
- className: (0, _runtime.ax)([stylesOldUnbounded.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
85
+ className: (0, _runtime.ax)([stylesNew.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
154
86
  }, children));
155
87
  });
156
88
  Lozenge.displayName = 'Lozenge';
package/dist/es2019/lozenge.compiled.css CHANGED
@@ -1,25 +1,19 @@
1
1
 
2
- ._19it13mh{border:var(--ds-border-width,1px) solid #b7b9be}
3
- ._19it1pib{border:var(--ds-border-width,1px) solid #c97cf4}
4
- ._19it1y5u{border:var(--ds-border-width,1px) solid #fca700}
5
- ._19itd8v8{border:var(--ds-border-width,1px) solid #669df1}
6
- ._19itmiw9{border:var(--ds-border-width,1px) solid #94c748}
7
- ._19itv8s6{border:var(--ds-border-width,1px) solid #f87168}
8
- ._1a3713mh{outline:var(--ds-border-width,1px) solid #b7b9be}
9
- ._1a371pib{outline:var(--ds-border-width,1px) solid #c97cf4}
10
- ._1a371y5u{outline:var(--ds-border-width,1px) solid #fca700}
11
- ._1a37d8v8{outline:var(--ds-border-width,1px) solid #669df1}
12
- ._1a37miw9{outline:var(--ds-border-width,1px) solid #94c748}
13
- ._1a37v8s6{outline:var(--ds-border-width,1px) solid #f87168}
14
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
15
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
16
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
2
+ ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._12ji14je{outline-color:#b7b9be}
3
+ ._12ji157s{outline-color:#c97cf4}
4
+ ._12jia2c0{outline-color:#f87168}
5
+ ._12jih727{outline-color:#fca700}
6
+ ._12jin0nx{outline-color:#94c748}
7
+ ._12jiuisw{outline-color:#669df1}
8
+ ._12y3t94y{outline-width:1px}
9
+ ._18m915vq{overflow-y:hidden}
17
10
  ._1bto1l2s{text-overflow:ellipsis}
18
11
  ._1cwg1n1a{outline-offset:-1px}
19
12
  ._1dyz9vsi{letter-spacing:.165px}
20
13
  ._1e0c116y{display:inline-flex}
21
14
  ._1kz6184x{block-size:min-content}
22
15
  ._1p1dangw{text-transform:uppercase}
16
+ ._1qu2nqa1{outline-style:solid}
23
17
  ._1reo15vq{overflow-x:hidden}
24
18
  ._1wyb1skh{font-size:11px}
25
19
  ._bfhk1366{background-color:#fd9891}
@@ -34,15 +28,7 @@
34
28
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
35
29
  ._kqswpfqs{position:static}
36
30
  ._o5721q9c{white-space:nowrap}
37
- ._syaz15cr{color:var(--ds-text-inverse,#fff)}
38
- ._syaz17fi{color:var(--ds-text-success,#064)}
39
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
40
- ._syaz1ick{color:var(--ds-text-danger,#de350b)}
41
- ._syaz1lpn{color:var(--ds-text-information,#0052cc)}
42
- ._syaz1mvf{color:var(--ds-text-discovery,#403294)}
43
- ._syaz1tm6{color:var(--ds-text-warning,#974f0c)}
44
- ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
45
- ._syazjjyb{color:var(--ds-text-subtle,#42526e)}
31
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
46
32
  ._syazwwip{color:#292a2e}
47
33
  ._vchhusvi{box-sizing:border-box}
48
34
  ._vwz47vkz{line-height:1pc}
package/dist/es2019/lozenge.js CHANGED
@@ -4,47 +4,6 @@ import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo, useMemo } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
- import { Box } from '@atlaskit/primitives/compiled';
8
- const stylesOld = {
9
- container: "_2rko12b0 _1reo15vq _18m915vq _18zr1b66 _1e0c116y _1kz6184x _kqswpfqs _vchhusvi",
10
- 'text.bold.default': "_syaz15cr",
11
- 'text.bold.inprogress': "_syaz15cr",
12
- 'text.bold.moved': "_syazal3n",
13
- 'text.bold.new': "_syaz15cr",
14
- 'text.bold.removed': "_syaz15cr",
15
- 'text.bold.success': "_syaz15cr",
16
- 'text.subtle.default': "_syazjjyb",
17
- 'text.subtle.inprogress': "_syaz1lpn",
18
- 'text.subtle.moved': "_syaz1tm6",
19
- 'text.subtle.new': "_syaz1mvf",
20
- 'text.subtle.removed': "_syaz1ick",
21
- 'text.subtle.success': "_syaz17fi"
22
- };
23
-
24
- // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
25
- const stylesOldUnbounded = {
26
- text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
27
- customLetterspacing: "_1dyz9vsi"
28
- };
29
- const backgroundColorsOld = {
30
- bold: {
31
- default: 'color.background.neutral.bold',
32
- inprogress: 'color.background.information.bold',
33
- moved: 'color.background.warning.bold',
34
- new: 'color.background.discovery.bold',
35
- removed: 'color.background.danger.bold',
36
- success: 'color.background.success.bold'
37
- },
38
- subtle: {
39
- default: 'color.background.neutral',
40
- inprogress: 'color.background.information',
41
- moved: 'color.background.warning',
42
- new: 'color.background.discovery',
43
- removed: 'color.background.danger',
44
- success: 'color.background.success'
45
- }
46
- };
47
-
48
7
  /**
49
8
  * TODO: We should be using our bounded `cssMap` here, but most of
50
9
  * these styles from the visual refresh are not in the Design System.
@@ -66,19 +25,13 @@ const stylesNew = {
66
25
  'bg.subtle.new': "_bfhksm61",
67
26
  'bg.subtle.removed': "_bfhksm61",
68
27
  'bg.subtle.success': "_bfhksm61",
69
- 'border.subtle.default': "_19it13mh",
70
- 'border.subtle.inprogress': "_19itd8v8",
71
- 'border.subtle.moved': "_19it1y5u",
72
- 'border.subtle.new': "_19it1pib",
73
- 'border.subtle.removed': "_19itv8s6",
74
- 'border.subtle.success': "_19itmiw9",
75
- 'outline.subtle.default': "_1a3713mh",
76
- 'outline.subtle.inprogress': "_1a37d8v8",
77
- 'outline.subtle.moved': "_1a371y5u",
78
- 'outline.subtle.new': "_1a371pib",
79
- 'outline.subtle.removed': "_1a37v8s6",
80
- 'outline.subtle.success': "_1a37miw9",
81
- 'text.subtle': "_syaz1fxt",
28
+ 'outline.subtle.default': "_12ji14je _1qu2nqa1 _12y3t94y",
29
+ 'outline.subtle.inprogress': "_12jiuisw _1qu2nqa1 _12y3t94y",
30
+ 'outline.subtle.moved': "_12jih727 _1qu2nqa1 _12y3t94y",
31
+ 'outline.subtle.new': "_12ji157s _1qu2nqa1 _12y3t94y",
32
+ 'outline.subtle.removed': "_12jia2c0 _1qu2nqa1 _12y3t94y",
33
+ 'outline.subtle.success': "_12jin0nx _1qu2nqa1 _12y3t94y",
34
+ 'text.subtle': "_syazi7uo",
82
35
  'text.bold': "_syazwwip"
83
36
  };
84
37
  const appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
@@ -103,34 +56,13 @@ const Lozenge = /*#__PURE__*/memo(({
103
56
  const appearanceType = useMemo(() => appearanceTypes.includes(appearance) ? appearance : 'default', [appearance]);
104
57
  const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
105
58
  const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
106
- if (fg('platform-component-visual-refresh')) {
107
- return /*#__PURE__*/React.createElement("span", {
108
- style: {
109
- backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
110
- maxWidth: maxWidthIsPc ? maxWidth : '100%'
111
- },
112
- "data-testid": testId,
113
- className: ax([stylesNew.container, stylesNew[`bg.${appearanceStyle}.${appearanceType}`], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && stylesNew[`border.subtle.${appearanceType}`], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew[`outline.subtle.${appearanceType}`], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew.containerSubtle])
114
- }, /*#__PURE__*/React.createElement("span", {
115
- style: {
116
- color: style === null || style === void 0 ? void 0 : style.color,
117
- // to negate paddingInline specified on Box above
118
- maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
119
- },
120
- "data-testid": testId && `${testId}--text`,
121
- className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew[`text.${appearanceStyle}`]])
122
- }, children));
123
- }
124
- return /*#__PURE__*/React.createElement(Box, {
125
- as: "span",
126
- backgroundColor: backgroundColorsOld[appearanceStyle][appearanceType],
59
+ return /*#__PURE__*/React.createElement("span", {
127
60
  style: {
128
61
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
129
62
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
130
63
  },
131
- paddingInline: "space.050",
132
- xcss: stylesOld.container,
133
- testId: testId
64
+ "data-testid": testId,
65
+ className: ax([stylesNew.container, stylesNew[`bg.${appearanceStyle}.${appearanceType}`], appearanceStyle === 'subtle' && stylesNew[`outline.subtle.${appearanceType}`], appearanceStyle === 'subtle' && stylesNew.containerSubtle])
134
66
  }, /*#__PURE__*/React.createElement("span", {
135
67
  style: {
136
68
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -138,7 +70,7 @@ const Lozenge = /*#__PURE__*/memo(({
138
70
  maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
139
71
  },
140
72
  "data-testid": testId && `${testId}--text`,
141
- className: ax([stylesOldUnbounded.text, fg('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
73
+ className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew[`text.${appearanceStyle}`]])
142
74
  }, children));
143
75
  });
144
76
  Lozenge.displayName = 'Lozenge';
package/dist/esm/lozenge.compiled.css CHANGED
@@ -1,25 +1,19 @@
1
1
 
2
- ._19it13mh{border:var(--ds-border-width,1px) solid #b7b9be}
3
- ._19it1pib{border:var(--ds-border-width,1px) solid #c97cf4}
4
- ._19it1y5u{border:var(--ds-border-width,1px) solid #fca700}
5
- ._19itd8v8{border:var(--ds-border-width,1px) solid #669df1}
6
- ._19itmiw9{border:var(--ds-border-width,1px) solid #94c748}
7
- ._19itv8s6{border:var(--ds-border-width,1px) solid #f87168}
8
- ._1a3713mh{outline:var(--ds-border-width,1px) solid #b7b9be}
9
- ._1a371pib{outline:var(--ds-border-width,1px) solid #c97cf4}
10
- ._1a371y5u{outline:var(--ds-border-width,1px) solid #fca700}
11
- ._1a37d8v8{outline:var(--ds-border-width,1px) solid #669df1}
12
- ._1a37miw9{outline:var(--ds-border-width,1px) solid #94c748}
13
- ._1a37v8s6{outline:var(--ds-border-width,1px) solid #f87168}
14
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
15
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
16
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
2
+ ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._12ji14je{outline-color:#b7b9be}
3
+ ._12ji157s{outline-color:#c97cf4}
4
+ ._12jia2c0{outline-color:#f87168}
5
+ ._12jih727{outline-color:#fca700}
6
+ ._12jin0nx{outline-color:#94c748}
7
+ ._12jiuisw{outline-color:#669df1}
8
+ ._12y3t94y{outline-width:1px}
9
+ ._18m915vq{overflow-y:hidden}
17
10
  ._1bto1l2s{text-overflow:ellipsis}
18
11
  ._1cwg1n1a{outline-offset:-1px}
19
12
  ._1dyz9vsi{letter-spacing:.165px}
20
13
  ._1e0c116y{display:inline-flex}
21
14
  ._1kz6184x{block-size:min-content}
22
15
  ._1p1dangw{text-transform:uppercase}
16
+ ._1qu2nqa1{outline-style:solid}
23
17
  ._1reo15vq{overflow-x:hidden}
24
18
  ._1wyb1skh{font-size:11px}
25
19
  ._bfhk1366{background-color:#fd9891}
@@ -34,15 +28,7 @@
34
28
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
35
29
  ._kqswpfqs{position:static}
36
30
  ._o5721q9c{white-space:nowrap}
37
- ._syaz15cr{color:var(--ds-text-inverse,#fff)}
38
- ._syaz17fi{color:var(--ds-text-success,#064)}
39
- ._syaz1fxt{color:var(--ds-text,#172b4d)}
40
- ._syaz1ick{color:var(--ds-text-danger,#de350b)}
41
- ._syaz1lpn{color:var(--ds-text-information,#0052cc)}
42
- ._syaz1mvf{color:var(--ds-text-discovery,#403294)}
43
- ._syaz1tm6{color:var(--ds-text-warning,#974f0c)}
44
- ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
45
- ._syazjjyb{color:var(--ds-text-subtle,#42526e)}
31
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
46
32
  ._syazwwip{color:#292a2e}
47
33
  ._vchhusvi{box-sizing:border-box}
48
34
  ._vwz47vkz{line-height:1pc}
package/dist/esm/lozenge.js CHANGED
@@ -4,47 +4,6 @@ import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { memo, useMemo } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
- import { Box } from '@atlaskit/primitives/compiled';
8
- var stylesOld = {
9
- container: "_2rko12b0 _1reo15vq _18m915vq _18zr1b66 _1e0c116y _1kz6184x _kqswpfqs _vchhusvi",
10
- 'text.bold.default': "_syaz15cr",
11
- 'text.bold.inprogress': "_syaz15cr",
12
- 'text.bold.moved': "_syazal3n",
13
- 'text.bold.new': "_syaz15cr",
14
- 'text.bold.removed': "_syaz15cr",
15
- 'text.bold.success': "_syaz15cr",
16
- 'text.subtle.default': "_syazjjyb",
17
- 'text.subtle.inprogress': "_syaz1lpn",
18
- 'text.subtle.moved': "_syaz1tm6",
19
- 'text.subtle.new': "_syaz1mvf",
20
- 'text.subtle.removed': "_syaz1ick",
21
- 'text.subtle.success': "_syaz17fi"
22
- };
23
-
24
- // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
25
- var stylesOldUnbounded = {
26
- text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
27
- customLetterspacing: "_1dyz9vsi"
28
- };
29
- var backgroundColorsOld = {
30
- bold: {
31
- default: 'color.background.neutral.bold',
32
- inprogress: 'color.background.information.bold',
33
- moved: 'color.background.warning.bold',
34
- new: 'color.background.discovery.bold',
35
- removed: 'color.background.danger.bold',
36
- success: 'color.background.success.bold'
37
- },
38
- subtle: {
39
- default: 'color.background.neutral',
40
- inprogress: 'color.background.information',
41
- moved: 'color.background.warning',
42
- new: 'color.background.discovery',
43
- removed: 'color.background.danger',
44
- success: 'color.background.success'
45
- }
46
- };
47
-
48
7
  /**
49
8
  * TODO: We should be using our bounded `cssMap` here, but most of
50
9
  * these styles from the visual refresh are not in the Design System.
@@ -66,19 +25,13 @@ var stylesNew = {
66
25
  'bg.subtle.new': "_bfhksm61",
67
26
  'bg.subtle.removed': "_bfhksm61",
68
27
  'bg.subtle.success': "_bfhksm61",
69
- 'border.subtle.default': "_19it13mh",
70
- 'border.subtle.inprogress': "_19itd8v8",
71
- 'border.subtle.moved': "_19it1y5u",
72
- 'border.subtle.new': "_19it1pib",
73
- 'border.subtle.removed': "_19itv8s6",
74
- 'border.subtle.success': "_19itmiw9",
75
- 'outline.subtle.default': "_1a3713mh",
76
- 'outline.subtle.inprogress': "_1a37d8v8",
77
- 'outline.subtle.moved': "_1a371y5u",
78
- 'outline.subtle.new': "_1a371pib",
79
- 'outline.subtle.removed': "_1a37v8s6",
80
- 'outline.subtle.success': "_1a37miw9",
81
- 'text.subtle': "_syaz1fxt",
28
+ 'outline.subtle.default': "_12ji14je _1qu2nqa1 _12y3t94y",
29
+ 'outline.subtle.inprogress': "_12jiuisw _1qu2nqa1 _12y3t94y",
30
+ 'outline.subtle.moved': "_12jih727 _1qu2nqa1 _12y3t94y",
31
+ 'outline.subtle.new': "_12ji157s _1qu2nqa1 _12y3t94y",
32
+ 'outline.subtle.removed': "_12jia2c0 _1qu2nqa1 _12y3t94y",
33
+ 'outline.subtle.success': "_12jin0nx _1qu2nqa1 _12y3t94y",
34
+ 'text.subtle': "_syazi7uo",
82
35
  'text.bold': "_syazwwip"
83
36
  };
84
37
  var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
@@ -107,34 +60,13 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
107
60
  }, [appearance]);
108
61
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
109
62
  var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
110
- if (fg('platform-component-visual-refresh')) {
111
- return /*#__PURE__*/React.createElement("span", {
112
- style: {
113
- backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
114
- maxWidth: maxWidthIsPc ? maxWidth : '100%'
115
- },
116
- "data-testid": testId,
117
- className: ax([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && stylesNew["border.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew.containerSubtle])
118
- }, /*#__PURE__*/React.createElement("span", {
119
- style: {
120
- color: style === null || style === void 0 ? void 0 : style.color,
121
- // to negate paddingInline specified on Box above
122
- maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
123
- },
124
- "data-testid": testId && "".concat(testId, "--text"),
125
- className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
126
- }, children));
127
- }
128
- return /*#__PURE__*/React.createElement(Box, {
129
- as: "span",
130
- backgroundColor: backgroundColorsOld[appearanceStyle][appearanceType],
63
+ return /*#__PURE__*/React.createElement("span", {
131
64
  style: {
132
65
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
133
66
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
134
67
  },
135
- paddingInline: "space.050",
136
- xcss: stylesOld.container,
137
- testId: testId
68
+ "data-testid": testId,
69
+ className: ax([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew.containerSubtle])
138
70
  }, /*#__PURE__*/React.createElement("span", {
139
71
  style: {
140
72
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -142,7 +74,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
142
74
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
143
75
  },
144
76
  "data-testid": testId && "".concat(testId, "--text"),
145
- className: ax([stylesOldUnbounded.text, fg('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
77
+ className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
146
78
  }, children));
147
79
  });
148
80
  Lozenge.displayName = 'Lozenge';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "13.0.14",
3
+ "version": "13.1.0",
4
4
  "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,9 +35,9 @@
35
35
  "@atlaskit/codemod-utils": "^4.2.0",
36
36
  "@atlaskit/css": "^0.15.0",
37
37
  "@atlaskit/platform-feature-flags": "^1.1.0",
38
- "@atlaskit/primitives": "^15.0.0",
38
+ "@atlaskit/primitives": "^16.1.0",
39
39
  "@atlaskit/theme": "^21.0.0",
40
- "@atlaskit/tokens": "^7.0.0",
40
+ "@atlaskit/tokens": "^8.0.0",
41
41
  "@babel/runtime": "^7.0.0",
42
42
  "@compiled/react": "^0.18.6"
43
43
  },
@@ -49,13 +49,13 @@
49
49
  "@af/integration-testing": "workspace:^",
50
50
  "@af/visual-regression": "workspace:^",
51
51
  "@atlaskit/docs": "^11.2.0",
52
- "@atlaskit/ds-lib": "^5.1.0",
52
+ "@atlaskit/ds-lib": "^5.2.0",
53
53
  "@atlaskit/heading": "^5.2.0",
54
54
  "@atlaskit/link": "^3.2.0",
55
- "@atlaskit/section-message": "^8.7.0",
55
+ "@atlaskit/section-message": "^8.9.0",
56
56
  "@atlaskit/ssr": "workspace:^",
57
- "@atlassian/feature-flags-test-utils": "^0.3.0",
58
- "@atlassian/ssr-tests": "^0.3.0",
57
+ "@atlassian/feature-flags-test-utils": "^1.0.0",
58
+ "@atlassian/ssr-tests": "workspace:^",
59
59
  "@testing-library/react": "^13.4.0",
60
60
  "jscodeshift": "^17.0.0",
61
61
  "react-dom": "^18.2.0"
@@ -83,12 +83,6 @@
83
83
  }
84
84
  },
85
85
  "platform-feature-flags": {
86
- "platform-component-visual-refresh": {
87
- "type": "boolean"
88
- },
89
- "visual-refresh_drop_5": {
90
- "type": "boolean"
91
- },
92
86
  "platform-lozenge-custom-letterspacing": {
93
87
  "type": "boolean"
94
88
  }