@atlaskit/lozenge 11.3.1 → 11.3.3

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 11.3.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 11.3.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [`25e09731caa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25e09731caa) - Fixes:
14
+
15
+ - Removes `vertical-align: baseline` from Lozenge which was being applied incorrectly.
16
+ - Removes a default prop which was causing unintended re-renders.
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 11.3.1
4
21
 
5
22
  ### Patch Changes
@@ -41,8 +41,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
41
41
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
42
42
  _ref$maxWidth = _ref.maxWidth,
43
43
  maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
44
- _ref$style = _ref.style,
45
- style = _ref$style === void 0 ? {} : _ref$style;
44
+ style = _ref.style;
46
45
  var appearanceStyle = isBold ? 'bold' : 'subtle';
47
46
  var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
48
47
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
@@ -54,13 +53,12 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
54
53
  paddingInline: "scale.050",
55
54
  position: "static",
56
55
  testId: testId,
56
+ overflow: "hidden",
57
57
  UNSAFE_style: {
58
- backgroundColor: style.backgroundColor,
59
- verticalAlign: 'baseline',
58
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
60
59
  maxWidth: '100%'
61
60
  }
62
61
  }, /*#__PURE__*/_react.default.createElement(_text.default, {
63
- as: "span",
64
62
  fontSize: "11px",
65
63
  fontWeight: "700",
66
64
  lineHeight: "16px",
@@ -68,11 +66,9 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
68
66
  color: textColors[appearanceStyle][appearanceType],
69
67
  shouldTruncate: true,
70
68
  UNSAFE_style: {
71
- color: style.color,
72
- width: '100%',
73
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
74
- maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-scale-100, 8px)", ")") // to negate paddingInline specified on Box above
75
-
69
+ color: style === null || style === void 0 ? void 0 : style.color,
70
+ // to negate paddingInline specified on Box above
71
+ maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
76
72
  },
77
73
  testId: testId && "".concat(testId, "--text")
78
74
  }, children));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.3.1",
3
+ "version": "11.3.3",
4
4
  "sideEffects": false
5
5
  }
@@ -20,7 +20,7 @@ const Lozenge = /*#__PURE__*/memo(({
20
20
  isBold = false,
21
21
  appearance = 'default',
22
22
  maxWidth = 200,
23
- style = {}
23
+ style
24
24
  }) => {
25
25
  const appearanceStyle = isBold ? 'bold' : 'subtle';
26
26
  const appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
@@ -33,13 +33,12 @@ const Lozenge = /*#__PURE__*/memo(({
33
33
  paddingInline: "scale.050",
34
34
  position: "static",
35
35
  testId: testId,
36
+ overflow: "hidden",
36
37
  UNSAFE_style: {
37
- backgroundColor: style.backgroundColor,
38
- verticalAlign: 'baseline',
38
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
39
39
  maxWidth: '100%'
40
40
  }
41
41
  }, /*#__PURE__*/React.createElement(Text, {
42
- as: "span",
43
42
  fontSize: "11px",
44
43
  fontWeight: "700",
45
44
  lineHeight: "16px",
@@ -47,11 +46,9 @@ const Lozenge = /*#__PURE__*/memo(({
47
46
  color: textColors[appearanceStyle][appearanceType],
48
47
  shouldTruncate: true,
49
48
  UNSAFE_style: {
50
- color: style.color,
51
- width: '100%',
52
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
53
- maxWidth: `calc(${maxWidthValue} - ${"var(--ds-scale-100, 8px)"})` // to negate paddingInline specified on Box above
54
-
49
+ color: style === null || style === void 0 ? void 0 : style.color,
50
+ // to negate paddingInline specified on Box above
51
+ maxWidth: `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
55
52
  },
56
53
  testId: testId && `${testId}--text`
57
54
  }, children));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.3.1",
3
+ "version": "11.3.3",
4
4
  "sideEffects": false
5
5
  }
@@ -23,8 +23,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
23
23
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
24
24
  _ref$maxWidth = _ref.maxWidth,
25
25
  maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
26
- _ref$style = _ref.style,
27
- style = _ref$style === void 0 ? {} : _ref$style;
26
+ style = _ref.style;
28
27
  var appearanceStyle = isBold ? 'bold' : 'subtle';
29
28
  var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
30
29
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
@@ -36,13 +35,12 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
36
35
  paddingInline: "scale.050",
37
36
  position: "static",
38
37
  testId: testId,
38
+ overflow: "hidden",
39
39
  UNSAFE_style: {
40
- backgroundColor: style.backgroundColor,
41
- verticalAlign: 'baseline',
40
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
42
41
  maxWidth: '100%'
43
42
  }
44
43
  }, /*#__PURE__*/React.createElement(Text, {
45
- as: "span",
46
44
  fontSize: "11px",
47
45
  fontWeight: "700",
48
46
  lineHeight: "16px",
@@ -50,11 +48,9 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
50
48
  color: textColors[appearanceStyle][appearanceType],
51
49
  shouldTruncate: true,
52
50
  UNSAFE_style: {
53
- color: style.color,
54
- width: '100%',
55
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
56
- maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-scale-100, 8px)", ")") // to negate paddingInline specified on Box above
57
-
51
+ color: style === null || style === void 0 ? void 0 : style.color,
52
+ // to negate paddingInline specified on Box above
53
+ maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
58
54
  },
59
55
  testId: testId && "".concat(testId, "--text")
60
56
  }, children));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.3.1",
3
+ "version": "11.3.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.3.1",
3
+ "version": "11.3.3",
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/"
@@ -26,9 +26,9 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@atlaskit/codemod-utils": "^4.1.0",
29
- "@atlaskit/ds-explorations": "^1.2.0",
29
+ "@atlaskit/ds-explorations": "^1.6.0",
30
30
  "@atlaskit/theme": "^12.2.0",
31
- "@atlaskit/tokens": "^0.11.0",
31
+ "@atlaskit/tokens": "^0.12.0",
32
32
  "@babel/runtime": "^7.0.0"
33
33
  },
34
34
  "peerDependencies": {
package/report.api.md CHANGED
@@ -1,17 +1,21 @@
1
+ <!-- API Report Version: 2.2 -->
2
+
1
3
  ## API Report File for "@atlaskit/lozenge"
2
4
 
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
6
+ > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
+
8
+ ### Table of contents
4
9
 
5
- <!--
6
- Generated API Report version: 2.0
7
- -->
10
+ - [Main Entry Types](#main-entry-types)
8
11
 
9
- [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
12
+ ### Main Entry Types
13
+
14
+ <!--SECTION START: Main Entry Types-->
10
15
 
11
16
  ```ts
12
17
  import { CSSProperties } from 'react';
13
- import { jsx } from '@emotion/react';
14
- import { MemoExoticComponent } from 'react';
18
+ import { default as React_2 } from 'react';
15
19
  import { ReactNode } from 'react';
16
20
 
17
21
  // @public
@@ -48,3 +52,5 @@ export type ThemeAppearance =
48
52
 
49
53
  // (No @packageDocumentation comment for this package)
50
54
  ```
55
+
56
+ <!--SECTION END: Main Entry Types-->