@atlaskit/lozenge 12.0.0 → 12.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/Lozenge/index.js +7 -3
  3. package/dist/cjs/compiled/index.compiled.css +2 -2
  4. package/dist/cjs/compiled/index.js +6 -4
  5. package/dist/cjs/index.js +23 -6
  6. package/dist/es2019/Lozenge/index.js +7 -3
  7. package/dist/es2019/compiled/index.compiled.css +2 -2
  8. package/dist/es2019/compiled/index.js +6 -4
  9. package/dist/es2019/index.js +20 -1
  10. package/dist/esm/Lozenge/index.js +7 -3
  11. package/dist/esm/compiled/index.compiled.css +2 -2
  12. package/dist/esm/compiled/index.js +6 -4
  13. package/dist/esm/index.js +23 -1
  14. package/dist/types/index.d.ts +12 -1
  15. package/dist/types-ts4.5/index.d.ts +12 -1
  16. package/package.json +12 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 12.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#122758](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122758)
8
+ [`d5c8218ff84d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5c8218ff84d4) -
9
+ Internally test the @atlaskit/lozenge/compiled variant replacing the current Emotion variant,
10
+ behind a feature gate.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 12.1.0
17
+
18
+ ### Minor Changes
19
+
20
+ - [#117377](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117377)
21
+ [`f6fa74e4221cd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6fa74e4221cd) -
22
+ [ux] We are increasing the letter spacing behind a feature flag. If testing successful, this
23
+ change will be made available in a later release.
24
+
3
25
  ## 12.0.0
4
26
 
5
27
  ### Major Changes
package/dist/cjs/Lozenge/index.js CHANGED
@@ -132,7 +132,7 @@ var styles = {
132
132
  }
133
133
  };
134
134
  var textStyles = (0, _react2.css)({
135
- fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
135
+ fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
136
136
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
137
137
  fontSize: '11px',
138
138
  fontStyle: 'normal',
@@ -145,6 +145,10 @@ var textStyles = (0, _react2.css)({
145
145
  textTransform: 'uppercase',
146
146
  whiteSpace: 'nowrap'
147
147
  });
148
+ var customLetterspacingStyles = (0, _react2.css)({
149
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
150
+ letterSpacing: 0.165
151
+ });
148
152
  /**
149
153
  * __Lozenge__
150
154
  *
@@ -177,7 +181,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
177
181
  css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !(0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.containerSubtle],
178
182
  "data-testid": testId
179
183
  }, (0, _react2.jsx)("span", {
180
- css: [textStyles, styles.text[appearanceStyle]],
184
+ css: [textStyles, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
181
185
  style: {
182
186
  color: style === null || style === void 0 ? void 0 : style.color,
183
187
  // to negate paddingInline specified on Box above
@@ -198,7 +202,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
198
202
  xcss: baseStylesOld,
199
203
  testId: testId
200
204
  }, (0, _react2.jsx)("span", {
201
- css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
205
+ css: [textStyles, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
202
206
  style: {
203
207
  color: style === null || style === void 0 ? void 0 : style.color,
204
208
  // to negate paddingInline specified on Box above
package/dist/cjs/compiled/index.compiled.css CHANGED
@@ -17,6 +17,7 @@
17
17
  ._18m915vq{overflow-y:hidden}
18
18
  ._1bto1l2s{text-overflow:ellipsis}
19
19
  ._1cwg1n1a{outline-offset:-1px}
20
+ ._1dyz9vsi{letter-spacing:.165px}
20
21
  ._1e0c116y{display:inline-flex}
21
22
  ._1kz6184x{block-size:min-content}
22
23
  ._1p1dangw{text-transform:uppercase}
@@ -31,8 +32,7 @@
31
32
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
32
33
  ._bfhkxmjf{background-color:#f9c84e}
33
34
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
34
- ._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
35
- ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
35
+ ._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
36
36
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
37
37
  ._kqswpfqs{position:static}
38
38
  ._o5721q9c{white-space:nowrap}
package/dist/cjs/compiled/index.js CHANGED
@@ -32,7 +32,8 @@ var stylesOld = {
32
32
 
33
33
  // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
34
34
  var stylesOldUnbounded = {
35
- text: "_1reo15vq _18m915vq _ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c"
35
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
36
+ customLetterspacing: "_1dyz9vsi"
36
37
  };
37
38
  var backgroundColorsOld = {
38
39
  bold: {
@@ -60,7 +61,8 @@ var backgroundColorsOld = {
60
61
  var stylesNew = {
61
62
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
62
63
  containerSubtle: "_1cwg1n1a",
63
- text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
64
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
65
+ customLetterspacing: "_1dyz9vsi",
64
66
  'bg.bold.default': "_bfhk1fkg",
65
67
  'bg.bold.inprogress': "_bfhk1ymo",
66
68
  'bg.bold.moved': "_bfhkxmjf",
@@ -129,7 +131,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
129
131
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
130
132
  },
131
133
  "data-testid": testId && "".concat(testId, "--text"),
132
- className: (0, _runtime.ax)([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
134
+ className: (0, _runtime.ax)([stylesNew.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
133
135
  }, children));
134
136
  }
135
137
  return /*#__PURE__*/React.createElement(_compiled.Box, {
@@ -149,7 +151,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
149
151
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
150
152
  },
151
153
  "data-testid": testId && "".concat(testId, "--text"),
152
- className: (0, _runtime.ax)([stylesOldUnbounded.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
154
+ className: (0, _runtime.ax)([stylesOldUnbounded.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
153
155
  }, children));
154
156
  });
155
157
  Lozenge.displayName = 'Lozenge';
package/dist/cjs/index.js CHANGED
@@ -4,10 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function get() {
10
- return _Lozenge.default;
11
- }
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
+ var _compiled = _interopRequireDefault(require("./compiled"));
11
+ var _Lozenge = _interopRequireDefault(require("./Lozenge"));
12
+ /**
13
+ * __Lozenge__
14
+ *
15
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
16
+ *
17
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
18
+ * - [Code](https://atlassian.design/components/lozenge/code)
19
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
20
+ */
21
+ var Lozenge = /*#__PURE__*/_react.default.memo(function (props) {
22
+ return (
23
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
24
+ (0, _platformFeatureFlags.fg)('platform_dst_lozenge_fg') ? /*#__PURE__*/_react.default.createElement(_compiled.default, props) : /*#__PURE__*/_react.default.createElement(_Lozenge.default, props)
25
+ );
12
26
  });
13
- var _Lozenge = _interopRequireDefault(require("./Lozenge"));
27
+
28
+ // NOTE: Remove this and just directly `export { default } from '…';` when tidying `platform_dst_lozenge_fg`
29
+ Lozenge.displayName = 'Lozenge';
30
+ var _default = exports.default = Lozenge;
package/dist/es2019/Lozenge/index.js CHANGED
@@ -125,7 +125,7 @@ const styles = {
125
125
  }
126
126
  };
127
127
  const textStyles = css({
128
- fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
128
+ fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
129
129
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
130
130
  fontSize: '11px',
131
131
  fontStyle: 'normal',
@@ -138,6 +138,10 @@ const textStyles = css({
138
138
  textTransform: 'uppercase',
139
139
  whiteSpace: 'nowrap'
140
140
  });
141
+ const customLetterspacingStyles = css({
142
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
143
+ letterSpacing: 0.165
144
+ });
141
145
  /**
142
146
  * __Lozenge__
143
147
  *
@@ -168,7 +172,7 @@ const Lozenge = /*#__PURE__*/memo(({
168
172
  css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
169
173
  "data-testid": testId
170
174
  }, jsx("span", {
171
- css: [textStyles, styles.text[appearanceStyle]],
175
+ css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
172
176
  style: {
173
177
  color: style === null || style === void 0 ? void 0 : style.color,
174
178
  // to negate paddingInline specified on Box above
@@ -189,7 +193,7 @@ const Lozenge = /*#__PURE__*/memo(({
189
193
  xcss: baseStylesOld,
190
194
  testId: testId
191
195
  }, jsx("span", {
192
- css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
196
+ css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
193
197
  style: {
194
198
  color: style === null || style === void 0 ? void 0 : style.color,
195
199
  // to negate paddingInline specified on Box above
package/dist/es2019/compiled/index.compiled.css CHANGED
@@ -17,6 +17,7 @@
17
17
  ._18m915vq{overflow-y:hidden}
18
18
  ._1bto1l2s{text-overflow:ellipsis}
19
19
  ._1cwg1n1a{outline-offset:-1px}
20
+ ._1dyz9vsi{letter-spacing:.165px}
20
21
  ._1e0c116y{display:inline-flex}
21
22
  ._1kz6184x{block-size:min-content}
22
23
  ._1p1dangw{text-transform:uppercase}
@@ -31,8 +32,7 @@
31
32
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
32
33
  ._bfhkxmjf{background-color:#f9c84e}
33
34
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
34
- ._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
35
- ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
35
+ ._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
36
36
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
37
37
  ._kqswpfqs{position:static}
38
38
  ._o5721q9c{white-space:nowrap}
package/dist/es2019/compiled/index.js CHANGED
@@ -23,7 +23,8 @@ const stylesOld = {
23
23
 
24
24
  // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
25
25
  const stylesOldUnbounded = {
26
- text: "_1reo15vq _18m915vq _ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c"
26
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
27
+ customLetterspacing: "_1dyz9vsi"
27
28
  };
28
29
  const backgroundColorsOld = {
29
30
  bold: {
@@ -51,7 +52,8 @@ const backgroundColorsOld = {
51
52
  const stylesNew = {
52
53
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
53
54
  containerSubtle: "_1cwg1n1a",
54
- text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
55
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
56
+ customLetterspacing: "_1dyz9vsi",
55
57
  'bg.bold.default': "_bfhk1fkg",
56
58
  'bg.bold.inprogress': "_bfhk1ymo",
57
59
  'bg.bold.moved': "_bfhkxmjf",
@@ -116,7 +118,7 @@ const Lozenge = /*#__PURE__*/memo(({
116
118
  maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
117
119
  },
118
120
  "data-testid": testId && `${testId}--text`,
119
- className: ax([stylesNew.text, stylesNew[`text.${appearanceStyle}`]])
121
+ className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew[`text.${appearanceStyle}`]])
120
122
  }, children));
121
123
  }
122
124
  return /*#__PURE__*/React.createElement(Box, {
@@ -136,7 +138,7 @@ const Lozenge = /*#__PURE__*/memo(({
136
138
  maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
137
139
  },
138
140
  "data-testid": testId && `${testId}--text`,
139
- className: ax([stylesOldUnbounded.text, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
141
+ className: ax([stylesOldUnbounded.text, fg('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
140
142
  }, children));
141
143
  });
142
144
  Lozenge.displayName = 'Lozenge';
package/dist/es2019/index.js CHANGED
@@ -1 +1,20 @@
1
- export { default } from './Lozenge';
1
+ import React from 'react';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
3
+ import CompiledLozenge from './compiled';
4
+ import EmotionLozenge from './Lozenge';
5
+ /**
6
+ * __Lozenge__
7
+ *
8
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
9
+ *
10
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
11
+ * - [Code](https://atlassian.design/components/lozenge/code)
12
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
13
+ */
14
+ const Lozenge = /*#__PURE__*/React.memo(props =>
15
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
16
+ fg('platform_dst_lozenge_fg') ? /*#__PURE__*/React.createElement(CompiledLozenge, props) : /*#__PURE__*/React.createElement(EmotionLozenge, props));
17
+
18
+ // NOTE: Remove this and just directly `export { default } from '…';` when tidying `platform_dst_lozenge_fg`
19
+ Lozenge.displayName = 'Lozenge';
20
+ export default Lozenge;
package/dist/esm/Lozenge/index.js CHANGED
@@ -125,7 +125,7 @@ var styles = {
125
125
  }
126
126
  };
127
127
  var textStyles = css({
128
- fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
128
+ fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
129
129
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
130
130
  fontSize: '11px',
131
131
  fontStyle: 'normal',
@@ -138,6 +138,10 @@ var textStyles = css({
138
138
  textTransform: 'uppercase',
139
139
  whiteSpace: 'nowrap'
140
140
  });
141
+ var customLetterspacingStyles = css({
142
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
143
+ letterSpacing: 0.165
144
+ });
141
145
  /**
142
146
  * __Lozenge__
143
147
  *
@@ -170,7 +174,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
170
174
  css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
171
175
  "data-testid": testId
172
176
  }, jsx("span", {
173
- css: [textStyles, styles.text[appearanceStyle]],
177
+ css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
174
178
  style: {
175
179
  color: style === null || style === void 0 ? void 0 : style.color,
176
180
  // to negate paddingInline specified on Box above
@@ -191,7 +195,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
191
195
  xcss: baseStylesOld,
192
196
  testId: testId
193
197
  }, jsx("span", {
194
- css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
198
+ css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
195
199
  style: {
196
200
  color: style === null || style === void 0 ? void 0 : style.color,
197
201
  // to negate paddingInline specified on Box above
package/dist/esm/compiled/index.compiled.css CHANGED
@@ -17,6 +17,7 @@
17
17
  ._18m915vq{overflow-y:hidden}
18
18
  ._1bto1l2s{text-overflow:ellipsis}
19
19
  ._1cwg1n1a{outline-offset:-1px}
20
+ ._1dyz9vsi{letter-spacing:.165px}
20
21
  ._1e0c116y{display:inline-flex}
21
22
  ._1kz6184x{block-size:min-content}
22
23
  ._1p1dangw{text-transform:uppercase}
@@ -31,8 +32,7 @@
31
32
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
32
33
  ._bfhkxmjf{background-color:#f9c84e}
33
34
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
34
- ._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
35
- ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
35
+ ._ect41gqc{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
36
36
  ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
37
37
  ._kqswpfqs{position:static}
38
38
  ._o5721q9c{white-space:nowrap}
package/dist/esm/compiled/index.js CHANGED
@@ -23,7 +23,8 @@ var stylesOld = {
23
23
 
24
24
  // NOTE: This is isolated to avoid breaking the bounded `stylesOld` interface as they do not fall within the Design System.
25
25
  var stylesOldUnbounded = {
26
- text: "_1reo15vq _18m915vq _ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c"
26
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
27
+ customLetterspacing: "_1dyz9vsi"
27
28
  };
28
29
  var backgroundColorsOld = {
29
30
  bold: {
@@ -51,7 +52,8 @@ var backgroundColorsOld = {
51
52
  var stylesNew = {
52
53
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
53
54
  containerSubtle: "_1cwg1n1a",
54
- text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
55
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
56
+ customLetterspacing: "_1dyz9vsi",
55
57
  'bg.bold.default': "_bfhk1fkg",
56
58
  'bg.bold.inprogress': "_bfhk1ymo",
57
59
  'bg.bold.moved': "_bfhkxmjf",
@@ -120,7 +122,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
120
122
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
121
123
  },
122
124
  "data-testid": testId && "".concat(testId, "--text"),
123
- className: ax([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
125
+ className: ax([stylesNew.text, fg('platform-lozenge-custom-letterspacing') && stylesNew.customLetterspacing, stylesNew["text.".concat(appearanceStyle)]])
124
126
  }, children));
125
127
  }
126
128
  return /*#__PURE__*/React.createElement(Box, {
@@ -140,7 +142,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
140
142
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
141
143
  },
142
144
  "data-testid": testId && "".concat(testId, "--text"),
143
- className: ax([stylesOldUnbounded.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
145
+ className: ax([stylesOldUnbounded.text, fg('platform-lozenge-custom-letterspacing') && stylesOldUnbounded.customLetterspacing, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
144
146
  }, children));
145
147
  });
146
148
  Lozenge.displayName = 'Lozenge';
package/dist/esm/index.js CHANGED
@@ -1 +1,23 @@
1
- export { default } from './Lozenge';
1
+ import React from 'react';
2
+ import { fg } from '@atlaskit/platform-feature-flags';
3
+ import CompiledLozenge from './compiled';
4
+ import EmotionLozenge from './Lozenge';
5
+ /**
6
+ * __Lozenge__
7
+ *
8
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
9
+ *
10
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
11
+ * - [Code](https://atlassian.design/components/lozenge/code)
12
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
13
+ */
14
+ var Lozenge = /*#__PURE__*/React.memo(function (props) {
15
+ return (
16
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
17
+ fg('platform_dst_lozenge_fg') ? /*#__PURE__*/React.createElement(CompiledLozenge, props) : /*#__PURE__*/React.createElement(EmotionLozenge, props)
18
+ );
19
+ });
20
+
21
+ // NOTE: Remove this and just directly `export { default } from '…';` when tidying `platform_dst_lozenge_fg`
22
+ Lozenge.displayName = 'Lozenge';
23
+ export default Lozenge;
package/dist/types/index.d.ts CHANGED
@@ -1,3 +1,14 @@
1
- export { default } from './Lozenge';
1
+ import EmotionLozenge from './Lozenge';
2
2
  export type { ThemeAppearance } from './Lozenge';
3
3
  export type { LozengeProps } from './Lozenge';
4
+ /**
5
+ * __Lozenge__
6
+ *
7
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
8
+ *
9
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
10
+ * - [Code](https://atlassian.design/components/lozenge/code)
11
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
12
+ */
13
+ declare const Lozenge: typeof EmotionLozenge;
14
+ export default Lozenge;
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -1,3 +1,14 @@
1
- export { default } from './Lozenge';
1
+ import EmotionLozenge from './Lozenge';
2
2
  export type { ThemeAppearance } from './Lozenge';
3
3
  export type { LozengeProps } from './Lozenge';
4
+ /**
5
+ * __Lozenge__
6
+ *
7
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
8
+ *
9
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
10
+ * - [Code](https://atlassian.design/components/lozenge/code)
11
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
12
+ */
13
+ declare const Lozenge: typeof EmotionLozenge;
14
+ export default Lozenge;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "12.0.0",
3
+ "version": "12.2.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/"
@@ -41,9 +41,9 @@
41
41
  "@atlaskit/codemod-utils": "^4.2.0",
42
42
  "@atlaskit/css": "^0.10.0",
43
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
- "@atlaskit/primitives": "^14.0.0",
45
- "@atlaskit/theme": "^17.0.0",
46
- "@atlaskit/tokens": "^4.0.0",
44
+ "@atlaskit/primitives": "^14.1.0",
45
+ "@atlaskit/theme": "^18.0.0",
46
+ "@atlaskit/tokens": "^4.3.0",
47
47
  "@babel/runtime": "^7.0.0",
48
48
  "@compiled/react": "^0.18.2",
49
49
  "@emotion/react": "^11.7.1"
@@ -57,10 +57,11 @@
57
57
  "@af/visual-regression": "*",
58
58
  "@atlaskit/docs": "*",
59
59
  "@atlaskit/ds-lib": "^4.0.0",
60
- "@atlaskit/heading": "^5.0.0",
60
+ "@atlaskit/heading": "^5.1.0",
61
61
  "@atlaskit/link": "*",
62
62
  "@atlaskit/section-message": "*",
63
63
  "@atlaskit/ssr": "*",
64
+ "@atlassian/feature-flags-test-utils": "*",
64
65
  "@testing-library/react": "^13.4.0",
65
66
  "jscodeshift": "^0.13.0",
66
67
  "react-dom": "^18.2.0",
@@ -95,6 +96,12 @@
95
96
  },
96
97
  "visual-refresh_drop_5": {
97
98
  "type": "boolean"
99
+ },
100
+ "platform-lozenge-custom-letterspacing": {
101
+ "type": "boolean"
102
+ },
103
+ "platform_dst_lozenge_fg": {
104
+ "type": "boolean"
98
105
  }
99
106
  },
100
107
  "homepage": "https://atlassian.design/components/lozenge/"