@atlaskit/lozenge 11.3.4 → 11.3.6

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 (9) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/Lozenge/index.js +9 -6
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/Lozenge/index.js +9 -6
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/Lozenge/index.js +9 -6
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +2 -2
  9. package/report.api.md +16 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 11.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
8
+ - Updated dependencies
9
+
10
+ ## 11.3.5
11
+
12
+ ### Patch Changes
13
+
14
+ - [`76428a4966a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76428a4966a) - Fix lozenge truncation at maxWidth=100%
15
+
3
16
  ## 11.3.4
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/Lozenge/index.js CHANGED
@@ -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,30 +47,31 @@ 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",
51
54
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
52
55
  borderRadius: "normal",
53
- paddingInline: "scale.050",
56
+ paddingInline: "space.050",
54
57
  position: "static",
55
58
  testId: testId,
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
- fontSize: "11px",
63
- fontWeight: "700",
64
- lineHeight: "16px",
65
+ fontSize: "size.050",
66
+ fontWeight: "bold",
67
+ lineHeight: "lineHeight.100",
65
68
  textTransform: "uppercase",
66
69
  color: textColors[appearanceStyle][appearanceType],
67
70
  shouldTruncate: true,
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,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.3.4",
3
+ "version": "11.3.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/Lozenge/index.js 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,30 +27,31 @@ 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",
31
34
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
32
35
  borderRadius: "normal",
33
- paddingInline: "scale.050",
36
+ paddingInline: "space.050",
34
37
  position: "static",
35
38
  testId: testId,
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
- fontSize: "11px",
43
- fontWeight: "700",
44
- lineHeight: "16px",
45
+ fontSize: "size.050",
46
+ fontWeight: "bold",
47
+ lineHeight: "lineHeight.100",
45
48
  textTransform: "uppercase",
46
49
  color: textColors[appearanceStyle][appearanceType],
47
50
  shouldTruncate: true,
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,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.3.4",
3
+ "version": "11.3.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/Lozenge/index.js 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,30 +29,31 @@ 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",
33
36
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
34
37
  borderRadius: "normal",
35
- paddingInline: "scale.050",
38
+ paddingInline: "space.050",
36
39
  position: "static",
37
40
  testId: testId,
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
- fontSize: "11px",
45
- fontWeight: "700",
46
- lineHeight: "16px",
47
+ fontSize: "size.050",
48
+ fontWeight: "bold",
49
+ lineHeight: "lineHeight.100",
47
50
  textTransform: "uppercase",
48
51
  color: textColors[appearanceStyle][appearanceType],
49
52
  shouldTruncate: true,
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
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.3.4",
3
+ "version": "11.3.6",
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.4",
3
+ "version": "11.3.6",
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,7 +26,7 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@atlaskit/codemod-utils": "^4.1.0",
29
- "@atlaskit/ds-explorations": "^1.6.0",
29
+ "@atlaskit/ds-explorations": "^2.0.0",
30
30
  "@atlaskit/theme": "^12.2.0",
31
31
  "@atlaskit/tokens": "^0.13.0",
32
32
  "@babel/runtime": "^7.0.0"
package/report.api.md CHANGED
@@ -1,4 +1,4 @@
1
- <!-- API Report Version: 2.2 -->
1
+ <!-- API Report Version: 2.3 -->
2
2
 
3
3
  ## API Report File for "@atlaskit/lozenge"
4
4
 
@@ -8,6 +8,7 @@
8
8
  ### Table of contents
9
9
 
10
10
  - [Main Entry Types](#main-entry-types)
11
+ - [Peer Dependencies](#peer-dependencies)
11
12
 
12
13
  ### Main Entry Types
13
14
 
@@ -19,7 +20,7 @@ import { default as React_2 } from 'react';
19
20
  import { ReactNode } from 'react';
20
21
 
21
22
  // @public
22
- const Lozenge: MemoExoticComponent<
23
+ const Lozenge: React_2.MemoExoticComponent<
23
24
  ({
24
25
  children,
25
26
  testId,
@@ -27,7 +28,7 @@ const Lozenge: MemoExoticComponent<
27
28
  appearance,
28
29
  maxWidth,
29
30
  style,
30
- }: LozengeProps) => jsx.JSX.Element
31
+ }: LozengeProps) => JSX.Element
31
32
  >;
32
33
  export default Lozenge;
33
34
 
@@ -54,3 +55,15 @@ export type ThemeAppearance =
54
55
  ```
55
56
 
56
57
  <!--SECTION END: Main Entry Types-->
58
+
59
+ ### Peer Dependencies
60
+
61
+ <!--SECTION START: Peer Dependencies-->
62
+
63
+ ```json
64
+ {
65
+ "react": "^16.8.0"
66
+ }
67
+ ```
68
+
69
+ <!--SECTION END: Peer Dependencies-->