@atlaskit/lozenge 12.1.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 +13 -0
  2. package/dist/cjs/Lozenge/index.js +1 -1
  3. package/dist/cjs/compiled/index.compiled.css +1 -1
  4. package/dist/cjs/compiled/index.js +2 -2
  5. package/dist/cjs/index.js +23 -6
  6. package/dist/es2019/Lozenge/index.js +1 -1
  7. package/dist/es2019/compiled/index.compiled.css +1 -1
  8. package/dist/es2019/compiled/index.js +2 -2
  9. package/dist/es2019/index.js +20 -1
  10. package/dist/esm/Lozenge/index.js +1 -1
  11. package/dist/esm/compiled/index.compiled.css +1 -1
  12. package/dist/esm/compiled/index.js +2 -2
  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 +7 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
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
+
3
16
  ## 12.1.0
4
17
 
5
18
  ### Minor 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',
package/dist/cjs/compiled/index.compiled.css CHANGED
@@ -32,7 +32,7 @@
32
32
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
33
33
  ._bfhkxmjf{background-color:#f9c84e}
34
34
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
35
- ._ect41sbm{font-family:var(--ds-font-family-body,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,7 @@ 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 _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
35
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
36
36
  customLetterspacing: "_1dyz9vsi"
37
37
  };
38
38
  var backgroundColorsOld = {
@@ -61,7 +61,7 @@ var backgroundColorsOld = {
61
61
  var stylesNew = {
62
62
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
63
63
  containerSubtle: "_1cwg1n1a",
64
- text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
64
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
65
65
  customLetterspacing: "_1dyz9vsi",
66
66
  'bg.bold.default': "_bfhk1fkg",
67
67
  'bg.bold.inprogress': "_bfhk1ymo",
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',
package/dist/es2019/compiled/index.compiled.css CHANGED
@@ -32,7 +32,7 @@
32
32
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
33
33
  ._bfhkxmjf{background-color:#f9c84e}
34
34
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
35
- ._ect41sbm{font-family:var(--ds-font-family-body,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,7 @@ 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 _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
26
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
27
27
  customLetterspacing: "_1dyz9vsi"
28
28
  };
29
29
  const backgroundColorsOld = {
@@ -52,7 +52,7 @@ const backgroundColorsOld = {
52
52
  const stylesNew = {
53
53
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
54
54
  containerSubtle: "_1cwg1n1a",
55
- text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
55
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
56
56
  customLetterspacing: "_1dyz9vsi",
57
57
  'bg.bold.default': "_bfhk1fkg",
58
58
  'bg.bold.inprogress': "_bfhk1ymo",
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',
package/dist/esm/compiled/index.compiled.css CHANGED
@@ -32,7 +32,7 @@
32
32
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
33
33
  ._bfhkxmjf{background-color:#f9c84e}
34
34
  ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
35
- ._ect41sbm{font-family:var(--ds-font-family-body,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,7 @@ 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 _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
26
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
27
27
  customLetterspacing: "_1dyz9vsi"
28
28
  };
29
29
  var backgroundColorsOld = {
@@ -52,7 +52,7 @@ var backgroundColorsOld = {
52
52
  var stylesNew = {
53
53
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
54
54
  containerSubtle: "_1cwg1n1a",
55
- text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
55
+ text: "_1reo15vq _18m915vq _ect41gqc _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
56
56
  customLetterspacing: "_1dyz9vsi",
57
57
  'bg.bold.default': "_bfhk1fkg",
58
58
  'bg.bold.inprogress': "_bfhk1ymo",
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.1.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/"
@@ -42,8 +42,8 @@
42
42
  "@atlaskit/css": "^0.10.0",
43
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
44
  "@atlaskit/primitives": "^14.1.0",
45
- "@atlaskit/theme": "^17.0.0",
46
- "@atlaskit/tokens": "^4.2.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"
@@ -61,6 +61,7 @@
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",
@@ -98,6 +99,9 @@
98
99
  },
99
100
  "platform-lozenge-custom-letterspacing": {
100
101
  "type": "boolean"
102
+ },
103
+ "platform_dst_lozenge_fg": {
104
+ "type": "boolean"
101
105
  }
102
106
  },
103
107
  "homepage": "https://atlassian.design/components/lozenge/"