@atlaskit/lozenge 13.3.4 → 13.4.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 (25) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/new/icon-renderer.js +3 -2
  3. package/dist/cjs/new/lozenge-base.compiled.css +7 -0
  4. package/dist/cjs/new/lozenge-base.js +8 -3
  5. package/dist/cjs/new/lozenge-dropdown-trigger.js +3 -0
  6. package/dist/cjs/new/lozenge.js +3 -0
  7. package/dist/es2019/new/icon-renderer.js +3 -2
  8. package/dist/es2019/new/lozenge-base.compiled.css +7 -0
  9. package/dist/es2019/new/lozenge-base.js +7 -3
  10. package/dist/es2019/new/lozenge-dropdown-trigger.js +2 -0
  11. package/dist/es2019/new/lozenge.js +2 -0
  12. package/dist/esm/new/icon-renderer.js +3 -2
  13. package/dist/esm/new/lozenge-base.compiled.css +7 -0
  14. package/dist/esm/new/lozenge-base.js +8 -3
  15. package/dist/esm/new/lozenge-dropdown-trigger.js +3 -0
  16. package/dist/esm/new/lozenge.js +3 -0
  17. package/dist/types/index.d.ts +1 -1
  18. package/dist/types/new/icon-renderer.d.ts +5 -1
  19. package/dist/types/new/lozenge.d.ts +1 -1
  20. package/dist/types/new/types.d.ts +8 -0
  21. package/dist/types-ts4.5/index.d.ts +1 -1
  22. package/dist/types-ts4.5/new/icon-renderer.d.ts +5 -1
  23. package/dist/types-ts4.5/new/lozenge.d.ts +1 -1
  24. package/dist/types-ts4.5/new/types.d.ts +8 -0
  25. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 13.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2828d1ffb6a1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2828d1ffb6a1e) -
8
+ Added a `spacing` prop which takes `default` and `spacious`. `spacious` increases padding and sets
9
+ the lozenge height to 32px.
10
+
3
11
  ## 13.3.4
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/new/icon-renderer.js CHANGED
@@ -61,12 +61,13 @@ var IconRenderer = exports.IconRenderer = function IconRenderer(_ref) {
61
61
  var Icon = _ref.icon,
62
62
  color = _ref.color,
63
63
  isSelected = _ref.isSelected,
64
- testId = _ref.testId;
64
+ testId = _ref.testId,
65
+ size = _ref.size;
65
66
  var iconColor = getIconColor(color, isSelected);
66
67
  return /*#__PURE__*/_react.default.createElement(Icon, {
67
68
  color: iconColor,
68
69
  label: "",
69
- size: "small",
70
+ size: size,
70
71
  testId: testId
71
72
  });
72
73
  };
package/dist/cjs/new/lozenge-base.compiled.css CHANGED
@@ -1,12 +1,17 @@
1
1
 
2
+ ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
3
  ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
4
  ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
5
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
6
+ ._zulp12x7{gap:var(--ds-space-075,6px)}
4
7
  ._zulp1b66{gap:var(--ds-space-050,4px)}
5
8
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
9
  ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
10
+ ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
7
11
  ._1dqonqa1{border-style:solid}
8
12
  ._1h6d1j28{border-color:transparent}
9
13
  ._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
14
+ ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
10
15
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
11
16
  ._13muu67f{--cm-border-color:#fff}
12
17
  ._168qx19p{--cm-icon-value:20%}
@@ -35,6 +40,7 @@
35
40
  ._1iel6xdd{--icon-hovered-l-factor:0.8}
36
41
  ._1k671038{--border-l-factor:1.33}
37
42
  ._1reo15vq{overflow-x:hidden}
43
+ ._1tkeviql{min-height:2rem}
38
44
  ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
39
45
  ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
40
46
  ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -77,6 +83,7 @@
77
83
  ._bg3q9by0{--cm-border-pressed-value:10%}
78
84
  ._fdt01r5k{--cm-icon-hovered-value:30%}
79
85
  ._hyog26zw{--border-pressed-l-factor:1.08}
86
+ ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
80
87
  ._m71tr3uz{--cm-icon-color:#000}
81
88
  ._o5721q9c{white-space:nowrap}
82
89
  ._oe6mmko7{--cm-border-value:45%}
package/dist/cjs/new/lozenge-base.js CHANGED
@@ -22,9 +22,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
22
22
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
23
  var styles = {
24
24
  container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
25
+ containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
25
26
  containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
26
27
  containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
27
28
  text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
29
+ textSpacious: "_11c8fhey _k48p1wq8",
28
30
  textSelected: "_syaz6x5g",
29
31
  'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
30
32
  'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
@@ -76,6 +78,8 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
76
78
  iconBefore = _ref.iconBefore,
77
79
  _ref$maxWidth = _ref.maxWidth,
78
80
  maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
81
+ _ref$spacing = _ref.spacing,
82
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
79
83
  isSelected = _ref.isSelected,
80
84
  onClick = _ref.onClick,
81
85
  style = _ref.style,
@@ -97,6 +101,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
97
101
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
98
102
  };
99
103
  var innerContent = /*#__PURE__*/React.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
104
+ size: spacing === 'spacious' ? 'medium' : 'small',
100
105
  icon: iconBefore,
101
106
  color: resolvedColor,
102
107
  isSelected: isInteractive ? isSelected : undefined,
@@ -107,7 +112,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
107
112
  color: style === null || style === void 0 ? void 0 : style.color
108
113
  },
109
114
  "data-testid": testId && "".concat(testId, "--text"),
110
- className: (0, _runtime.ax)([styles.text])
115
+ className: (0, _runtime.ax)([styles.text, spacing === 'spacious' && styles.textSpacious])
111
116
  }, children), isInteractive && /*#__PURE__*/React.createElement(_chevronDown.default, {
112
117
  label: "",
113
118
  size: "small",
@@ -117,7 +122,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
117
122
  if (isInteractive) {
118
123
  return /*#__PURE__*/React.createElement(_pressable.default, {
119
124
  ref: ref,
120
- xcss: (0, _css.cx)(styles.container, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
125
+ xcss: (0, _css.cx)(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
121
126
  onClick: onClick,
122
127
  style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
123
128
  // Specified because Pressable has a default border:none which overrides the border specified on the container
@@ -134,7 +139,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
134
139
  ref: ref,
135
140
  style: commonStyleOverrides,
136
141
  "data-testid": testId,
137
- className: (0, _runtime.ax)([styles.container, styles[colorStyleKey], styles.iconBorderFilter])
142
+ className: (0, _runtime.ax)([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
138
143
  }, innerContent);
139
144
  }));
140
145
  var _default = exports.default = LozengeBase;
package/dist/cjs/new/lozenge-dropdown-trigger.js CHANGED
@@ -30,6 +30,8 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
30
30
  testId = _ref.testId,
31
31
  _ref$appearance = _ref.appearance,
32
32
  appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
33
+ _ref$spacing = _ref.spacing,
34
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
33
35
  iconBefore = _ref.iconBefore,
34
36
  _ref$isSelected = _ref.isSelected,
35
37
  isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -43,6 +45,7 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
43
45
  return /*#__PURE__*/React.createElement(_lozengeBase.default, {
44
46
  ref: ref,
45
47
  appearance: appearance,
48
+ spacing: spacing,
46
49
  iconBefore: iconBefore,
47
50
  isSelected: isSelected,
48
51
  maxWidth: maxWidth
package/dist/cjs/new/lozenge.js CHANGED
@@ -23,6 +23,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
23
23
  var Lozenge = function Lozenge(_ref) {
24
24
  var _ref$appearance = _ref.appearance,
25
25
  appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
26
+ _ref$spacing = _ref.spacing,
27
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
26
28
  _ref$maxWidth = _ref.maxWidth,
27
29
  maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
28
30
  style = _ref.style,
@@ -31,6 +33,7 @@ var Lozenge = function Lozenge(_ref) {
31
33
  iconBefore = _ref.iconBefore;
32
34
  return /*#__PURE__*/React.createElement(_lozengeBase.default, {
33
35
  appearance: appearance,
36
+ spacing: spacing,
34
37
  iconBefore: iconBefore,
35
38
  maxWidth: maxWidth
36
39
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
package/dist/es2019/new/icon-renderer.js CHANGED
@@ -54,13 +54,14 @@ export const IconRenderer = ({
54
54
  icon: Icon,
55
55
  color,
56
56
  isSelected,
57
- testId
57
+ testId,
58
+ size
58
59
  }) => {
59
60
  const iconColor = getIconColor(color, isSelected);
60
61
  return /*#__PURE__*/React.createElement(Icon, {
61
62
  color: iconColor,
62
63
  label: "",
63
- size: "small",
64
+ size: size,
64
65
  testId: testId
65
66
  });
66
67
  };
package/dist/es2019/new/lozenge-base.compiled.css CHANGED
@@ -1,12 +1,17 @@
1
1
 
2
+ ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
3
  ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
4
  ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
5
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
6
+ ._zulp12x7{gap:var(--ds-space-075,6px)}
4
7
  ._zulp1b66{gap:var(--ds-space-050,4px)}
5
8
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
9
  ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
10
+ ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
7
11
  ._1dqonqa1{border-style:solid}
8
12
  ._1h6d1j28{border-color:transparent}
9
13
  ._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
14
+ ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
10
15
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
11
16
  ._13muu67f{--cm-border-color:#fff}
12
17
  ._168qx19p{--cm-icon-value:20%}
@@ -35,6 +40,7 @@
35
40
  ._1iel6xdd{--icon-hovered-l-factor:0.8}
36
41
  ._1k671038{--border-l-factor:1.33}
37
42
  ._1reo15vq{overflow-x:hidden}
43
+ ._1tkeviql{min-height:2rem}
38
44
  ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
39
45
  ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
40
46
  ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -77,6 +83,7 @@
77
83
  ._bg3q9by0{--cm-border-pressed-value:10%}
78
84
  ._fdt01r5k{--cm-icon-hovered-value:30%}
79
85
  ._hyog26zw{--border-pressed-l-factor:1.08}
86
+ ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
80
87
  ._m71tr3uz{--cm-icon-color:#000}
81
88
  ._o5721q9c{white-space:nowrap}
82
89
  ._oe6mmko7{--cm-border-value:45%}
package/dist/es2019/new/lozenge-base.js CHANGED
@@ -10,9 +10,11 @@ import IconRenderer from './icon-renderer';
10
10
  import { getThemeStyles, resolveLozengeColor } from './utils';
11
11
  const styles = {
12
12
  container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
13
+ containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
13
14
  containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
14
15
  containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
15
16
  text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
17
+ textSpacious: "_11c8fhey _k48p1wq8",
16
18
  textSelected: "_syaz6x5g",
17
19
  'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
18
20
  'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
@@ -63,6 +65,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
63
65
  appearance,
64
66
  iconBefore,
65
67
  maxWidth = 200,
68
+ spacing = 'default',
66
69
  isSelected,
67
70
  // for dropdown trigger
68
71
  onClick,
@@ -88,6 +91,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
88
91
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
89
92
  };
90
93
  const innerContent = /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
94
+ size: spacing === 'spacious' ? 'medium' : 'small',
91
95
  icon: iconBefore,
92
96
  color: resolvedColor,
93
97
  isSelected: isInteractive ? isSelected : undefined,
@@ -98,7 +102,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
98
102
  color: style === null || style === void 0 ? void 0 : style.color
99
103
  },
100
104
  "data-testid": testId && `${testId}--text`,
101
- className: ax([styles.text])
105
+ className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
102
106
  }, children), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
103
107
  label: "",
104
108
  size: "small",
@@ -108,7 +112,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
108
112
  if (isInteractive) {
109
113
  return /*#__PURE__*/React.createElement(Pressable, {
110
114
  ref: ref,
111
- xcss: cx(styles.container, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
115
+ xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
112
116
  onClick: onClick,
113
117
  style: {
114
118
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -127,7 +131,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
127
131
  ref: ref,
128
132
  style: commonStyleOverrides,
129
133
  "data-testid": testId,
130
- className: ax([styles.container, styles[colorStyleKey], styles.iconBorderFilter])
134
+ className: ax([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
131
135
  }, innerContent);
132
136
  }));
133
137
  export default LozengeBase;
package/dist/es2019/new/lozenge-dropdown-trigger.js CHANGED
@@ -20,6 +20,7 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
20
20
  children,
21
21
  testId,
22
22
  appearance = 'neutral',
23
+ spacing = 'default',
23
24
  iconBefore,
24
25
  isSelected = false,
25
26
  maxWidth = 200,
@@ -31,6 +32,7 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
31
32
  return /*#__PURE__*/React.createElement(LozengeBase, {
32
33
  ref: ref,
33
34
  appearance: appearance,
35
+ spacing: spacing,
34
36
  iconBefore: iconBefore,
35
37
  isSelected: isSelected,
36
38
  maxWidth: maxWidth
package/dist/es2019/new/lozenge.js CHANGED
@@ -13,6 +13,7 @@ import LozengeBase from './lozenge-base';
13
13
  */
14
14
  const Lozenge = ({
15
15
  appearance = 'neutral',
16
+ spacing = 'default',
16
17
  maxWidth = 200,
17
18
  style,
18
19
  testId,
@@ -21,6 +22,7 @@ const Lozenge = ({
21
22
  }) => {
22
23
  return /*#__PURE__*/React.createElement(LozengeBase, {
23
24
  appearance: appearance,
25
+ spacing: spacing,
24
26
  iconBefore: iconBefore,
25
27
  maxWidth: maxWidth
26
28
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
package/dist/esm/new/icon-renderer.js CHANGED
@@ -54,12 +54,13 @@ export var IconRenderer = function IconRenderer(_ref) {
54
54
  var Icon = _ref.icon,
55
55
  color = _ref.color,
56
56
  isSelected = _ref.isSelected,
57
- testId = _ref.testId;
57
+ testId = _ref.testId,
58
+ size = _ref.size;
58
59
  var iconColor = getIconColor(color, isSelected);
59
60
  return /*#__PURE__*/React.createElement(Icon, {
60
61
  color: iconColor,
61
62
  label: "",
62
- size: "small",
63
+ size: size,
63
64
  testId: testId
64
65
  });
65
66
  };
package/dist/esm/new/lozenge-base.compiled.css CHANGED
@@ -1,12 +1,17 @@
1
1
 
2
+ ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
3
  ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
4
  ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
5
+ ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
6
+ ._zulp12x7{gap:var(--ds-space-075,6px)}
4
7
  ._zulp1b66{gap:var(--ds-space-050,4px)}
5
8
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
9
  ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
10
+ ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
7
11
  ._1dqonqa1{border-style:solid}
8
12
  ._1h6d1j28{border-color:transparent}
9
13
  ._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
14
+ ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
10
15
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
11
16
  ._13muu67f{--cm-border-color:#fff}
12
17
  ._168qx19p{--cm-icon-value:20%}
@@ -35,6 +40,7 @@
35
40
  ._1iel6xdd{--icon-hovered-l-factor:0.8}
36
41
  ._1k671038{--border-l-factor:1.33}
37
42
  ._1reo15vq{overflow-x:hidden}
43
+ ._1tkeviql{min-height:2rem}
38
44
  ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
39
45
  ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
40
46
  ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -77,6 +83,7 @@
77
83
  ._bg3q9by0{--cm-border-pressed-value:10%}
78
84
  ._fdt01r5k{--cm-icon-hovered-value:30%}
79
85
  ._hyog26zw{--border-pressed-l-factor:1.08}
86
+ ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
80
87
  ._m71tr3uz{--cm-icon-color:#000}
81
88
  ._o5721q9c{white-space:nowrap}
82
89
  ._oe6mmko7{--cm-border-value:45%}
package/dist/esm/new/lozenge-base.js CHANGED
@@ -13,9 +13,11 @@ import IconRenderer from './icon-renderer';
13
13
  import { getThemeStyles, resolveLozengeColor } from './utils';
14
14
  var styles = {
15
15
  container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
16
+ containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
16
17
  containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
17
18
  containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
18
19
  text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
20
+ textSpacious: "_11c8fhey _k48p1wq8",
19
21
  textSelected: "_syaz6x5g",
20
22
  'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
21
23
  'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
@@ -67,6 +69,8 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
67
69
  iconBefore = _ref.iconBefore,
68
70
  _ref$maxWidth = _ref.maxWidth,
69
71
  maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
72
+ _ref$spacing = _ref.spacing,
73
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
70
74
  isSelected = _ref.isSelected,
71
75
  onClick = _ref.onClick,
72
76
  style = _ref.style,
@@ -88,6 +92,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
88
92
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
89
93
  };
90
94
  var innerContent = /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
95
+ size: spacing === 'spacious' ? 'medium' : 'small',
91
96
  icon: iconBefore,
92
97
  color: resolvedColor,
93
98
  isSelected: isInteractive ? isSelected : undefined,
@@ -98,7 +103,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
98
103
  color: style === null || style === void 0 ? void 0 : style.color
99
104
  },
100
105
  "data-testid": testId && "".concat(testId, "--text"),
101
- className: ax([styles.text])
106
+ className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
102
107
  }, children), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
103
108
  label: "",
104
109
  size: "small",
@@ -108,7 +113,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
108
113
  if (isInteractive) {
109
114
  return /*#__PURE__*/React.createElement(Pressable, {
110
115
  ref: ref,
111
- xcss: cx(styles.container, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
116
+ xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
112
117
  onClick: onClick,
113
118
  style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
114
119
  // Specified because Pressable has a default border:none which overrides the border specified on the container
@@ -125,7 +130,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
125
130
  ref: ref,
126
131
  style: commonStyleOverrides,
127
132
  "data-testid": testId,
128
- className: ax([styles.container, styles[colorStyleKey], styles.iconBorderFilter])
133
+ className: ax([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
129
134
  }, innerContent);
130
135
  }));
131
136
  export default LozengeBase;
package/dist/esm/new/lozenge-dropdown-trigger.js CHANGED
@@ -21,6 +21,8 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
21
21
  testId = _ref.testId,
22
22
  _ref$appearance = _ref.appearance,
23
23
  appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
24
+ _ref$spacing = _ref.spacing,
25
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
24
26
  iconBefore = _ref.iconBefore,
25
27
  _ref$isSelected = _ref.isSelected,
26
28
  isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -34,6 +36,7 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
34
36
  return /*#__PURE__*/React.createElement(LozengeBase, {
35
37
  ref: ref,
36
38
  appearance: appearance,
39
+ spacing: spacing,
37
40
  iconBefore: iconBefore,
38
41
  isSelected: isSelected,
39
42
  maxWidth: maxWidth
package/dist/esm/new/lozenge.js CHANGED
@@ -14,6 +14,8 @@ import LozengeBase from './lozenge-base';
14
14
  var Lozenge = function Lozenge(_ref) {
15
15
  var _ref$appearance = _ref.appearance,
16
16
  appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
17
+ _ref$spacing = _ref.spacing,
18
+ spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
17
19
  _ref$maxWidth = _ref.maxWidth,
18
20
  maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
19
21
  style = _ref.style,
@@ -22,6 +24,7 @@ var Lozenge = function Lozenge(_ref) {
22
24
  iconBefore = _ref.iconBefore;
23
25
  return /*#__PURE__*/React.createElement(LozengeBase, {
24
26
  appearance: appearance,
27
+ spacing: spacing,
25
28
  iconBefore: iconBefore,
26
29
  maxWidth: maxWidth
27
30
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
package/dist/types/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { default } from './lozenge';
2
2
  export type { ThemeAppearance, LozengeProps } from './lozenge';
3
3
  export { default as LozengeDropdownTrigger } from './new/lozenge-dropdown-trigger';
4
- export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, } from './new/types';
4
+ export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, } from './new/types';
package/dist/types/new/icon-renderer.d.ts CHANGED
@@ -17,10 +17,14 @@ export interface IconRendererProps {
17
17
  * Test ID for the icon
18
18
  */
19
19
  testId?: string;
20
+ /**
21
+ * Size of the icon
22
+ */
23
+ size?: 'small' | 'medium';
20
24
  }
21
25
  /**
22
26
  * Icon renderer for lozenge components
23
27
  * Handles proper sizing and color theming for icons
24
28
  */
25
- export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId }: IconRendererProps) => React.JSX.Element;
29
+ export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
26
30
  export default IconRenderer;
package/dist/types/new/lozenge.d.ts CHANGED
@@ -9,7 +9,7 @@ import { type NewLozengeProps } from './types';
9
9
  * - [Usage](https://atlassian.design/components/lozenge/usage)
10
10
  */
11
11
  declare const Lozenge: {
12
- ({ appearance, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
12
+ ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
13
13
  displayName: string;
14
14
  };
15
15
  export default Lozenge;
package/dist/types/new/types.d.ts CHANGED
@@ -21,6 +21,7 @@ export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
21
21
  /**
22
22
  * Props for the NewLozenge component
23
23
  */
24
+ export type LozengeSpacing = 'default' | 'spacious';
24
25
  export interface NewLozengeProps {
25
26
  /**
26
27
  * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
@@ -35,6 +36,13 @@ export interface NewLozengeProps {
35
36
  * Icon to display before the text content. Should be an ADS icon component.
36
37
  */
37
38
  iconBefore?: IconProp;
39
+ /**
40
+ * Controls the overall spacing (padding + height) of the lozenge.
41
+ *
42
+ * - `default` matches the current visual appearance.
43
+ * - `spacious` increases padding and sets the lozenge height to 32px.
44
+ */
45
+ spacing?: LozengeSpacing;
38
46
  /**
39
47
  * max-width of lozenge container. Default to 200px.
40
48
  */
package/dist/types-ts4.5/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { default } from './lozenge';
2
2
  export type { ThemeAppearance, LozengeProps } from './lozenge';
3
3
  export { default as LozengeDropdownTrigger } from './new/lozenge-dropdown-trigger';
4
- export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, } from './new/types';
4
+ export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, } from './new/types';
package/dist/types-ts4.5/new/icon-renderer.d.ts CHANGED
@@ -17,10 +17,14 @@ export interface IconRendererProps {
17
17
  * Test ID for the icon
18
18
  */
19
19
  testId?: string;
20
+ /**
21
+ * Size of the icon
22
+ */
23
+ size?: 'small' | 'medium';
20
24
  }
21
25
  /**
22
26
  * Icon renderer for lozenge components
23
27
  * Handles proper sizing and color theming for icons
24
28
  */
25
- export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId }: IconRendererProps) => React.JSX.Element;
29
+ export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
26
30
  export default IconRenderer;
package/dist/types-ts4.5/new/lozenge.d.ts CHANGED
@@ -9,7 +9,7 @@ import { type NewLozengeProps } from './types';
9
9
  * - [Usage](https://atlassian.design/components/lozenge/usage)
10
10
  */
11
11
  declare const Lozenge: {
12
- ({ appearance, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
12
+ ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
13
13
  displayName: string;
14
14
  };
15
15
  export default Lozenge;
package/dist/types-ts4.5/new/types.d.ts CHANGED
@@ -21,6 +21,7 @@ export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
21
21
  /**
22
22
  * Props for the NewLozenge component
23
23
  */
24
+ export type LozengeSpacing = 'default' | 'spacious';
24
25
  export interface NewLozengeProps {
25
26
  /**
26
27
  * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
@@ -35,6 +36,13 @@ export interface NewLozengeProps {
35
36
  * Icon to display before the text content. Should be an ADS icon component.
36
37
  */
37
38
  iconBefore?: IconProp;
39
+ /**
40
+ * Controls the overall spacing (padding + height) of the lozenge.
41
+ *
42
+ * - `default` matches the current visual appearance.
43
+ * - `spacious` increases padding and sets the lozenge height to 32px.
44
+ */
45
+ spacing?: LozengeSpacing;
38
46
  /**
39
47
  * max-width of lozenge container. Default to 200px.
40
48
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "13.3.4",
3
+ "version": "13.4.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/"