@atlaskit/lozenge 11.3.3 → 11.3.5
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 +12 -0
- package/dist/cjs/Lozenge/index.js +5 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/Lozenge/index.js +5 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/Lozenge/index.js +5 -2
- package/dist/esm/version.json +1 -1
- package/package.json +2 -2
- package/report.api.md +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/lozenge
|
|
2
2
|
|
|
3
|
+
## 11.3.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`76428a4966a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76428a4966a) - Fix lozenge truncation at maxWidth=100%
|
|
8
|
+
|
|
9
|
+
## 11.3.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 11.3.3
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -23,6 +23,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
25
25
|
|
|
26
|
+
/* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
|
|
27
|
+
|
|
26
28
|
/**
|
|
27
29
|
* __Lozenge__
|
|
28
30
|
*
|
|
@@ -45,6 +47,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
45
47
|
var appearanceStyle = isBold ? 'bold' : 'subtle';
|
|
46
48
|
var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
|
|
47
49
|
var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
|
|
50
|
+
var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
|
|
48
51
|
return /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
49
52
|
as: "span",
|
|
50
53
|
display: "inlineFlex",
|
|
@@ -56,7 +59,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
56
59
|
overflow: "hidden",
|
|
57
60
|
UNSAFE_style: {
|
|
58
61
|
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
59
|
-
maxWidth: '100%'
|
|
62
|
+
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
60
63
|
}
|
|
61
64
|
}, /*#__PURE__*/_react.default.createElement(_text.default, {
|
|
62
65
|
fontSize: "11px",
|
|
@@ -68,7 +71,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
68
71
|
UNSAFE_style: {
|
|
69
72
|
color: style === null || style === void 0 ? void 0 : style.color,
|
|
70
73
|
// to negate paddingInline specified on Box above
|
|
71
|
-
maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
|
|
74
|
+
maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
|
|
72
75
|
},
|
|
73
76
|
testId: testId && "".concat(testId, "--text")
|
|
74
77
|
}, children));
|
package/dist/cjs/version.json
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/* eslint-disable @atlassian/tangerine/import/entry-points */
|
|
2
2
|
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
4
|
+
|
|
5
|
+
/* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
|
|
4
6
|
import React, { memo } from 'react';
|
|
5
7
|
import Box from '@atlaskit/ds-explorations/box';
|
|
6
8
|
import Text from '@atlaskit/ds-explorations/text';
|
|
@@ -25,6 +27,7 @@ const Lozenge = /*#__PURE__*/memo(({
|
|
|
25
27
|
const appearanceStyle = isBold ? 'bold' : 'subtle';
|
|
26
28
|
const appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
|
|
27
29
|
const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
|
|
30
|
+
const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
|
|
28
31
|
return /*#__PURE__*/React.createElement(Box, {
|
|
29
32
|
as: "span",
|
|
30
33
|
display: "inlineFlex",
|
|
@@ -36,7 +39,7 @@ const Lozenge = /*#__PURE__*/memo(({
|
|
|
36
39
|
overflow: "hidden",
|
|
37
40
|
UNSAFE_style: {
|
|
38
41
|
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
39
|
-
maxWidth: '100%'
|
|
42
|
+
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
40
43
|
}
|
|
41
44
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
42
45
|
fontSize: "11px",
|
|
@@ -48,7 +51,7 @@ const Lozenge = /*#__PURE__*/memo(({
|
|
|
48
51
|
UNSAFE_style: {
|
|
49
52
|
color: style === null || style === void 0 ? void 0 : style.color,
|
|
50
53
|
// to negate paddingInline specified on Box above
|
|
51
|
-
maxWidth: `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
|
|
54
|
+
maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
|
|
52
55
|
},
|
|
53
56
|
testId: testId && `${testId}--text`
|
|
54
57
|
}, children));
|
package/dist/es2019/version.json
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/* eslint-disable @atlassian/tangerine/import/entry-points */
|
|
2
2
|
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
4
|
+
|
|
5
|
+
/* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
|
|
4
6
|
import React, { memo } from 'react';
|
|
5
7
|
import Box from '@atlaskit/ds-explorations/box';
|
|
6
8
|
import Text from '@atlaskit/ds-explorations/text';
|
|
@@ -27,6 +29,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
|
|
|
27
29
|
var appearanceStyle = isBold ? 'bold' : 'subtle';
|
|
28
30
|
var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
|
|
29
31
|
var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
|
|
32
|
+
var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
|
|
30
33
|
return /*#__PURE__*/React.createElement(Box, {
|
|
31
34
|
as: "span",
|
|
32
35
|
display: "inlineFlex",
|
|
@@ -38,7 +41,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
|
|
|
38
41
|
overflow: "hidden",
|
|
39
42
|
UNSAFE_style: {
|
|
40
43
|
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
41
|
-
maxWidth: '100%'
|
|
44
|
+
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
42
45
|
}
|
|
43
46
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
44
47
|
fontSize: "11px",
|
|
@@ -50,7 +53,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
|
|
|
50
53
|
UNSAFE_style: {
|
|
51
54
|
color: style === null || style === void 0 ? void 0 : style.color,
|
|
52
55
|
// to negate paddingInline specified on Box above
|
|
53
|
-
maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
|
|
56
|
+
maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
|
|
54
57
|
},
|
|
55
58
|
testId: testId && "".concat(testId, "--text")
|
|
56
59
|
}, children));
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/lozenge",
|
|
3
|
-
"version": "11.3.
|
|
3
|
+
"version": "11.3.5",
|
|
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/"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@atlaskit/codemod-utils": "^4.1.0",
|
|
29
29
|
"@atlaskit/ds-explorations": "^1.6.0",
|
|
30
30
|
"@atlaskit/theme": "^12.2.0",
|
|
31
|
-
"@atlaskit/tokens": "^0.
|
|
31
|
+
"@atlaskit/tokens": "^0.13.0",
|
|
32
32
|
"@babel/runtime": "^7.0.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
package/report.api.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!-- API Report Version: 2.
|
|
1
|
+
<!-- API Report Version: 2.3 -->
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/lozenge"
|
|
4
4
|
|
|
@@ -19,7 +19,7 @@ import { default as React_2 } from 'react';
|
|
|
19
19
|
import { ReactNode } from 'react';
|
|
20
20
|
|
|
21
21
|
// @public
|
|
22
|
-
const Lozenge: MemoExoticComponent<
|
|
22
|
+
const Lozenge: React_2.MemoExoticComponent<
|
|
23
23
|
({
|
|
24
24
|
children,
|
|
25
25
|
testId,
|
|
@@ -27,7 +27,7 @@ const Lozenge: MemoExoticComponent<
|
|
|
27
27
|
appearance,
|
|
28
28
|
maxWidth,
|
|
29
29
|
style,
|
|
30
|
-
}: LozengeProps) =>
|
|
30
|
+
}: LozengeProps) => JSX.Element
|
|
31
31
|
>;
|
|
32
32
|
export default Lozenge;
|
|
33
33
|
|