@atlaskit/lozenge 13.5.7 → 13.6.1

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 (14) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/new/icon-renderer.compiled.css +3 -0
  3. package/dist/cjs/new/icon-renderer.js +18 -1
  4. package/dist/cjs/new/lozenge-base.compiled.css +4 -0
  5. package/dist/cjs/new/lozenge-base.js +37 -7
  6. package/dist/es2019/new/icon-renderer.compiled.css +3 -0
  7. package/dist/es2019/new/icon-renderer.js +18 -1
  8. package/dist/es2019/new/lozenge-base.compiled.css +4 -0
  9. package/dist/es2019/new/lozenge-base.js +31 -7
  10. package/dist/esm/new/icon-renderer.compiled.css +3 -0
  11. package/dist/esm/new/icon-renderer.js +18 -1
  12. package/dist/esm/new/lozenge-base.compiled.css +4 -0
  13. package/dist/esm/new/lozenge-base.js +38 -8
  14. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 13.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`82429debcd5e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82429debcd5e8) -
8
+ Fixed issue where with motion enabled the lozenge was displaying ellipsis on resize
9
+ - Updated dependencies
10
+
11
+ ## 13.6.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [`7b44d021342cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b44d021342cf) -
16
+ Added motion to lozenge dropdown to animate the width of the lozenge upon change. Includes
17
+ transitioning the background, border and text color using experimental motion design tokens. These
18
+ changes are behind the `platform-dst-motion-uplift` feature flag.
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 13.5.7
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/new/icon-renderer.compiled.css ADDED
@@ -0,0 +1,3 @@
1
+ ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
2
+ ._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
3
+ ._k8m01ylx{transition-property:color}
package/dist/cjs/new/icon-renderer.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* icon-renderer.tsx generated by @compiled/babel-plugin v0.39.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.IconRenderer = void 0;
9
+ require("./icon-renderer.compiled.css");
10
+ var _runtime = require("@compiled/react/runtime");
8
11
  var _react = _interopRequireDefault(require("react"));
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
+ var _compiled = require("@atlaskit/primitives/compiled");
9
14
  // Map lozenge colors to appropriate icon colors
10
15
  var getIconColor = function getIconColor(color) {
11
16
  // For semantic colors, use corresponding semantic icon colors
@@ -47,6 +52,9 @@ var getIconColor = function getIconColor(color) {
47
52
  return "var(--ds-icon-subtlest, #6B6E76)";
48
53
  }
49
54
  };
55
+ var styles = {
56
+ motion: "_k8m01ylx _1oeci9qs _6fl41d08"
57
+ };
50
58
 
51
59
  /**
52
60
  * Icon renderer for lozenge components
@@ -58,7 +66,16 @@ var IconRenderer = exports.IconRenderer = function IconRenderer(_ref) {
58
66
  testId = _ref.testId,
59
67
  size = _ref.size;
60
68
  var iconColor = getIconColor(color);
61
- return /*#__PURE__*/_react.default.createElement(Icon, {
69
+ return (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
70
+ xcss: styles.motion,
71
+ style: {
72
+ color: iconColor
73
+ }
74
+ }, /*#__PURE__*/_react.default.createElement(Icon, {
75
+ label: "",
76
+ size: size,
77
+ testId: testId
78
+ })) : /*#__PURE__*/_react.default.createElement(Icon, {
62
79
  color: iconColor,
63
80
  label: "",
64
81
  size: size,
package/dist/cjs/new/lozenge-base.compiled.css CHANGED
@@ -40,6 +40,7 @@
40
40
  ._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
41
41
  ._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
42
42
  ._1bto1l2s{text-overflow:ellipsis}
43
+ ._1btozryt{text-overflow:clip}
43
44
  ._1cp21w66:hover>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-hovered-value))}
44
45
  ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
45
46
  ._1e0c116y{display:inline-flex}
@@ -48,6 +49,7 @@
48
49
  ._1gqs1mvc:active>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-pressed-value))}
49
50
  ._1iel6xdd{--icon-hovered-l-factor:0.8}
50
51
  ._1k671038{--border-l-factor:1.33}
52
+ ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
51
53
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
52
54
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
53
55
  ._1reo15vq{overflow-x:hidden}
@@ -81,6 +83,7 @@
81
83
  ._4cvr1h6o{align-items:center}
82
84
  ._4t3i1k92{height:1.25rem}
83
85
  ._4uq11yqs{--icon-l-factor:0.88}
86
+ ._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
84
87
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
85
88
  ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
86
89
  ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
@@ -105,6 +108,7 @@
105
108
  ._fdt01r5k{--cm-icon-hovered-value:30%}
106
109
  ._hyog26zw{--border-pressed-l-factor:1.08}
107
110
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
111
+ ._k8m01rje{transition-property:background-color,border-color}
108
112
  ._kqswh2mm{position:relative}
109
113
  ._kqswstnw{position:absolute}
110
114
  ._lcxvglyw{pointer-events:none}
package/dist/cjs/new/lozenge-base.js CHANGED
@@ -11,11 +11,14 @@ require("./lozenge-base.compiled.css");
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
17
  var _badge = _interopRequireDefault(require("@atlaskit/badge"));
17
18
  var _css = require("@atlaskit/css");
18
19
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
20
+ var _resizingWidth = require("@atlaskit/motion/resizing-width");
21
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
22
  var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
20
23
  var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
21
24
  var _iconRenderer = _interopRequireDefault(require("./icon-renderer"));
@@ -44,9 +47,12 @@ var pressedBackgroundMapping = {
44
47
  };
45
48
  var styles = {
46
49
  container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
50
+ motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
47
51
  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
48
52
  containerBadgePadding: "_y4ti303w",
49
- text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
53
+ text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
54
+ textEllipsis: "_1bto1l2s",
55
+ textClip: "_1btozryt",
50
56
  textSpacious: "_11c8fhey _k48p1wq8",
51
57
  textSelected: "_syaz6x5g",
52
58
  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -128,6 +134,19 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
128
134
  ariaExpanded = _ref['aria-expanded'],
129
135
  ariaHaspopup = _ref['aria-haspopup'],
130
136
  ariaLabel = _ref['aria-label'];
137
+ var _useState = (0, _react.useState)(false),
138
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
139
+ resizing = _useState2[0],
140
+ setResizing = _useState2[1];
141
+ var onFinishMotion = function onFinishMotion() {
142
+ return setResizing(false);
143
+ };
144
+ var resizingWidth = (0, _resizingWidth.useResizingWidth)({
145
+ duration: "var(--ds-duration-medium, 200ms)",
146
+ easing: "var(--ds-easing-inout-bold, cubic-bezier(0.4, 0, 0, 1))",
147
+ onFinishMotion: onFinishMotion
148
+ });
149
+ var isInitialRender = (0, _react.useRef)(true);
131
150
  var isInteractive = typeof onClick === 'function';
132
151
 
133
152
  // Determine the effective color, with fallback logic for legacy appearances
@@ -147,14 +166,25 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
147
166
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
148
167
  };
149
168
  var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
150
- var innerContent = /*#__PURE__*/React.createElement("span", {
169
+ var childrenKey = typeof children === 'string' ? children : undefined;
170
+ (0, _react.useLayoutEffect)(function () {
171
+ // Ignore initial render
172
+ if (isInitialRender.current) {
173
+ isInitialRender.current = false;
174
+ return;
175
+ }
176
+ setResizing(true);
177
+ }, [childrenKey]);
178
+ var enableMotionFG = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift');
179
+ var innerContent = /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
151
180
  style: {
152
181
  // When maxWidth is a percentage, constrain the content wrapper
153
182
  // so text truncation works correctly within the flex layout
154
183
  maxWidth: maxWidthIsPc ? '100%' : undefined
155
- },
184
+ }
185
+ }, enableMotionFG ? resizingWidth : undefined, {
156
186
  className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
157
- }, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
187
+ }), iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
158
188
  size: spacing === 'spacious' ? 'medium' : 'small',
159
189
  icon: iconBefore,
160
190
  color: resolvedColor,
@@ -165,7 +195,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
165
195
  color: style === null || style === void 0 ? void 0 : style.color
166
196
  },
167
197
  "data-testid": testId && "".concat(testId, "--text"),
168
- className: (0, _runtime.ax)([styles.text, spacing === 'spacious' && styles.textSpacious])
198
+ className: (0, _runtime.ax)([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
169
199
  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
170
200
  "data-lozenge-metric-wrapper": true,
171
201
  "data-testid": testId && "".concat(testId, "--metric"),
@@ -181,7 +211,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
181
211
  if (isInteractive) {
182
212
  return /*#__PURE__*/React.createElement(_pressable.default, (0, _extends2.default)({
183
213
  ref: ref,
184
- xcss: (0, _css.cx)(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
214
+ xcss: (0, _css.cx)(styles.container, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && styles.motionContainer, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
185
215
  }, isLoading && {
186
216
  'aria-busy': true,
187
217
  'aria-disabled': true,
package/dist/es2019/new/icon-renderer.compiled.css ADDED
@@ -0,0 +1,3 @@
1
+ ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
2
+ ._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
3
+ ._k8m01ylx{transition-property:color}
package/dist/es2019/new/icon-renderer.js CHANGED
@@ -1,4 +1,9 @@
1
+ /* icon-renderer.tsx generated by @compiled/babel-plugin v0.39.1 */
2
+ import "./icon-renderer.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
6
+ import { Box } from '@atlaskit/primitives/compiled';
2
7
  // Map lozenge colors to appropriate icon colors
3
8
  const getIconColor = color => {
4
9
  // For semantic colors, use corresponding semantic icon colors
@@ -40,6 +45,9 @@ const getIconColor = color => {
40
45
  return "var(--ds-icon-subtlest, #6B6E76)";
41
46
  }
42
47
  };
48
+ const styles = {
49
+ motion: "_k8m01ylx _1oeci9qs _6fl41d08"
50
+ };
43
51
 
44
52
  /**
45
53
  * Icon renderer for lozenge components
@@ -52,7 +60,16 @@ export const IconRenderer = ({
52
60
  size
53
61
  }) => {
54
62
  const iconColor = getIconColor(color);
55
- return /*#__PURE__*/React.createElement(Icon, {
63
+ return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
64
+ xcss: styles.motion,
65
+ style: {
66
+ color: iconColor
67
+ }
68
+ }, /*#__PURE__*/React.createElement(Icon, {
69
+ label: "",
70
+ size: size,
71
+ testId: testId
72
+ })) : /*#__PURE__*/React.createElement(Icon, {
56
73
  color: iconColor,
57
74
  label: "",
58
75
  size: size,
package/dist/es2019/new/lozenge-base.compiled.css CHANGED
@@ -40,6 +40,7 @@
40
40
  ._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
41
41
  ._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
42
42
  ._1bto1l2s{text-overflow:ellipsis}
43
+ ._1btozryt{text-overflow:clip}
43
44
  ._1cp21w66:hover>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-hovered-value))}
44
45
  ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
45
46
  ._1e0c116y{display:inline-flex}
@@ -48,6 +49,7 @@
48
49
  ._1gqs1mvc:active>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-pressed-value))}
49
50
  ._1iel6xdd{--icon-hovered-l-factor:0.8}
50
51
  ._1k671038{--border-l-factor:1.33}
52
+ ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
51
53
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
52
54
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
53
55
  ._1reo15vq{overflow-x:hidden}
@@ -81,6 +83,7 @@
81
83
  ._4cvr1h6o{align-items:center}
82
84
  ._4t3i1k92{height:1.25rem}
83
85
  ._4uq11yqs{--icon-l-factor:0.88}
86
+ ._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
84
87
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
85
88
  ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
86
89
  ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
@@ -105,6 +108,7 @@
105
108
  ._fdt01r5k{--cm-icon-hovered-value:30%}
106
109
  ._hyog26zw{--border-pressed-l-factor:1.08}
107
110
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
111
+ ._k8m01rje{transition-property:background-color,border-color}
108
112
  ._kqswh2mm{position:relative}
109
113
  ._kqswstnw{position:absolute}
110
114
  ._lcxvglyw{pointer-events:none}
package/dist/es2019/new/lozenge-base.js CHANGED
@@ -3,10 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./lozenge-base.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
- import { forwardRef, memo } from 'react';
6
+ import { forwardRef, memo, useLayoutEffect, useRef, useState } from 'react';
7
7
  import Badge from '@atlaskit/badge';
8
8
  import { cx } from '@atlaskit/css';
9
9
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
10
+ import { useResizingWidth } from '@atlaskit/motion/resizing-width';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
10
12
  import Pressable from '@atlaskit/primitives/pressable';
11
13
  import Spinner from '@atlaskit/spinner';
12
14
  import IconRenderer from './icon-renderer';
@@ -32,9 +34,12 @@ const pressedBackgroundMapping = {
32
34
  };
33
35
  const styles = {
34
36
  container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
37
+ motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
35
38
  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
36
39
  containerBadgePadding: "_y4ti303w",
37
- text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
40
+ text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
41
+ textEllipsis: "_1bto1l2s",
42
+ textClip: "_1btozryt",
38
43
  textSpacious: "_11c8fhey _k48p1wq8",
39
44
  textSelected: "_syaz6x5g",
40
45
  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -117,6 +122,14 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
117
122
  'aria-haspopup': ariaHaspopup,
118
123
  'aria-label': ariaLabel
119
124
  }, ref) => {
125
+ const [resizing, setResizing] = useState(false);
126
+ const onFinishMotion = () => setResizing(false);
127
+ const resizingWidth = useResizingWidth({
128
+ duration: "var(--ds-duration-medium, 200ms)",
129
+ easing: "var(--ds-easing-inout-bold, cubic-bezier(0.4, 0, 0, 1))",
130
+ onFinishMotion
131
+ });
132
+ const isInitialRender = useRef(true);
120
133
  const isInteractive = typeof onClick === 'function';
121
134
 
122
135
  // Determine the effective color, with fallback logic for legacy appearances
@@ -137,14 +150,25 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
137
150
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
138
151
  };
139
152
  const hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
140
- const innerContent = /*#__PURE__*/React.createElement("span", {
153
+ const childrenKey = typeof children === 'string' ? children : undefined;
154
+ useLayoutEffect(() => {
155
+ // Ignore initial render
156
+ if (isInitialRender.current) {
157
+ isInitialRender.current = false;
158
+ return;
159
+ }
160
+ setResizing(true);
161
+ }, [childrenKey]);
162
+ const enableMotionFG = fg('platform-dst-motion-uplift');
163
+ const innerContent = /*#__PURE__*/React.createElement("span", _extends({
141
164
  style: {
142
165
  // When maxWidth is a percentage, constrain the content wrapper
143
166
  // so text truncation works correctly within the flex layout
144
167
  maxWidth: maxWidthIsPc ? '100%' : undefined
145
- },
168
+ }
169
+ }, enableMotionFG ? resizingWidth : undefined, {
146
170
  className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
147
- }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
171
+ }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
148
172
  size: spacing === 'spacious' ? 'medium' : 'small',
149
173
  icon: iconBefore,
150
174
  color: resolvedColor,
@@ -155,7 +179,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
155
179
  color: style === null || style === void 0 ? void 0 : style.color
156
180
  },
157
181
  "data-testid": testId && `${testId}--text`,
158
- className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
182
+ className: ax([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
159
183
  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
160
184
  "data-lozenge-metric-wrapper": true,
161
185
  "data-testid": testId && `${testId}--metric`,
@@ -171,7 +195,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
171
195
  if (isInteractive) {
172
196
  return /*#__PURE__*/React.createElement(Pressable, _extends({
173
197
  ref: ref,
174
- xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
198
+ xcss: cx(styles.container, fg('platform-dst-motion-uplift') && styles.motionContainer, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
175
199
  }, isLoading && {
176
200
  'aria-busy': true,
177
201
  'aria-disabled': true,
package/dist/esm/new/icon-renderer.compiled.css ADDED
@@ -0,0 +1,3 @@
1
+ ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
2
+ ._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
3
+ ._k8m01ylx{transition-property:color}
package/dist/esm/new/icon-renderer.js CHANGED
@@ -1,4 +1,9 @@
1
+ /* icon-renderer.tsx generated by @compiled/babel-plugin v0.39.1 */
2
+ import "./icon-renderer.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
6
+ import { Box } from '@atlaskit/primitives/compiled';
2
7
  // Map lozenge colors to appropriate icon colors
3
8
  var getIconColor = function getIconColor(color) {
4
9
  // For semantic colors, use corresponding semantic icon colors
@@ -40,6 +45,9 @@ var getIconColor = function getIconColor(color) {
40
45
  return "var(--ds-icon-subtlest, #6B6E76)";
41
46
  }
42
47
  };
48
+ var styles = {
49
+ motion: "_k8m01ylx _1oeci9qs _6fl41d08"
50
+ };
43
51
 
44
52
  /**
45
53
  * Icon renderer for lozenge components
@@ -51,7 +59,16 @@ export var IconRenderer = function IconRenderer(_ref) {
51
59
  testId = _ref.testId,
52
60
  size = _ref.size;
53
61
  var iconColor = getIconColor(color);
54
- return /*#__PURE__*/React.createElement(Icon, {
62
+ return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
63
+ xcss: styles.motion,
64
+ style: {
65
+ color: iconColor
66
+ }
67
+ }, /*#__PURE__*/React.createElement(Icon, {
68
+ label: "",
69
+ size: size,
70
+ testId: testId
71
+ })) : /*#__PURE__*/React.createElement(Icon, {
55
72
  color: iconColor,
56
73
  label: "",
57
74
  size: size,
package/dist/esm/new/lozenge-base.compiled.css CHANGED
@@ -40,6 +40,7 @@
40
40
  ._1bn8jkmi{--badge-background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
41
41
  ._1bn8vuon{--badge-background-color:var(--ds-surface,#fff)}
42
42
  ._1bto1l2s{text-overflow:ellipsis}
43
+ ._1btozryt{text-overflow:clip}
43
44
  ._1cp21w66:hover>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-hovered-value))}
44
45
  ._1e02ze3t{inset-inline-start:var(--ds-space-0,0)}
45
46
  ._1e0c116y{display:inline-flex}
@@ -48,6 +49,7 @@
48
49
  ._1gqs1mvc:active>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-pressed-value))}
49
50
  ._1iel6xdd{--icon-hovered-l-factor:0.8}
50
51
  ._1k671038{--border-l-factor:1.33}
52
+ ._1oeci9qs{transition-duration:var(--ds-duration-medium,.2s)}
51
53
  ._1q511b66{padding-block-start:var(--ds-space-050,4px)}
52
54
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
53
55
  ._1reo15vq{overflow-x:hidden}
@@ -81,6 +83,7 @@
81
83
  ._4cvr1h6o{align-items:center}
82
84
  ._4t3i1k92{height:1.25rem}
83
85
  ._4uq11yqs{--icon-l-factor:0.88}
86
+ ._6fl41d08{transition-timing-function:var(--ds-easing-inout-bold,cubic-bezier(.4,0,0,1))}
84
87
  ._85i51b66{padding-block-end:var(--ds-space-050,4px)}
85
88
  ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
86
89
  ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
@@ -105,6 +108,7 @@
105
108
  ._fdt01r5k{--cm-icon-hovered-value:30%}
106
109
  ._hyog26zw{--border-pressed-l-factor:1.08}
107
110
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
111
+ ._k8m01rje{transition-property:background-color,border-color}
108
112
  ._kqswh2mm{position:relative}
109
113
  ._kqswstnw{position:absolute}
110
114
  ._lcxvglyw{pointer-events:none}
package/dist/esm/new/lozenge-base.js CHANGED
@@ -1,15 +1,18 @@
1
1
  /* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+ import _extends from "@babel/runtime/helpers/extends";
4
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
5
  import "./lozenge-base.compiled.css";
5
6
  import * as React from 'react';
6
7
  import { ax, ix } from "@compiled/react/runtime";
7
8
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
8
9
  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) { _defineProperty(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; }
9
- import { forwardRef, memo } from 'react';
10
+ import { forwardRef, memo, useLayoutEffect, useRef, useState } from 'react';
10
11
  import Badge from '@atlaskit/badge';
11
12
  import { cx } from '@atlaskit/css';
12
13
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
14
+ import { useResizingWidth } from '@atlaskit/motion/resizing-width';
15
+ import { fg } from '@atlaskit/platform-feature-flags';
13
16
  import Pressable from '@atlaskit/primitives/pressable';
14
17
  import Spinner from '@atlaskit/spinner';
15
18
  import IconRenderer from './icon-renderer';
@@ -35,9 +38,12 @@ var pressedBackgroundMapping = {
35
38
  };
36
39
  var styles = {
37
40
  container: "_2rko12b0 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6d1j28 _kqswh2mm _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92 _1q51v77o _85i5v77o _bozg1b66 _y4ti1b66",
41
+ motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
38
42
  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
39
43
  containerBadgePadding: "_y4ti303w",
40
- text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
44
+ text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
45
+ textEllipsis: "_1bto1l2s",
46
+ textClip: "_1btozryt",
41
47
  textSpacious: "_11c8fhey _k48p1wq8",
42
48
  textSelected: "_syaz6x5g",
43
49
  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -119,6 +125,19 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
119
125
  ariaExpanded = _ref['aria-expanded'],
120
126
  ariaHaspopup = _ref['aria-haspopup'],
121
127
  ariaLabel = _ref['aria-label'];
128
+ var _useState = useState(false),
129
+ _useState2 = _slicedToArray(_useState, 2),
130
+ resizing = _useState2[0],
131
+ setResizing = _useState2[1];
132
+ var onFinishMotion = function onFinishMotion() {
133
+ return setResizing(false);
134
+ };
135
+ var resizingWidth = useResizingWidth({
136
+ duration: "var(--ds-duration-medium, 200ms)",
137
+ easing: "var(--ds-easing-inout-bold, cubic-bezier(0.4, 0, 0, 1))",
138
+ onFinishMotion: onFinishMotion
139
+ });
140
+ var isInitialRender = useRef(true);
122
141
  var isInteractive = typeof onClick === 'function';
123
142
 
124
143
  // Determine the effective color, with fallback logic for legacy appearances
@@ -138,14 +157,25 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
138
157
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
139
158
  };
140
159
  var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
141
- var innerContent = /*#__PURE__*/React.createElement("span", {
160
+ var childrenKey = typeof children === 'string' ? children : undefined;
161
+ useLayoutEffect(function () {
162
+ // Ignore initial render
163
+ if (isInitialRender.current) {
164
+ isInitialRender.current = false;
165
+ return;
166
+ }
167
+ setResizing(true);
168
+ }, [childrenKey]);
169
+ var enableMotionFG = fg('platform-dst-motion-uplift');
170
+ var innerContent = /*#__PURE__*/React.createElement("span", _extends({
142
171
  style: {
143
172
  // When maxWidth is a percentage, constrain the content wrapper
144
173
  // so text truncation works correctly within the flex layout
145
174
  maxWidth: maxWidthIsPc ? '100%' : undefined
146
- },
175
+ }
176
+ }, enableMotionFG ? resizingWidth : undefined, {
147
177
  className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
148
- }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
178
+ }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
149
179
  size: spacing === 'spacious' ? 'medium' : 'small',
150
180
  icon: iconBefore,
151
181
  color: resolvedColor,
@@ -156,7 +186,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
156
186
  color: style === null || style === void 0 ? void 0 : style.color
157
187
  },
158
188
  "data-testid": testId && "".concat(testId, "--text"),
159
- className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
189
+ className: ax([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
160
190
  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
161
191
  "data-lozenge-metric-wrapper": true,
162
192
  "data-testid": testId && "".concat(testId, "--metric"),
@@ -172,7 +202,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
172
202
  if (isInteractive) {
173
203
  return /*#__PURE__*/React.createElement(Pressable, _extends({
174
204
  ref: ref,
175
- xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
205
+ xcss: cx(styles.container, fg('platform-dst-motion-uplift') && styles.motionContainer, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isLoading && styles.iconBorderInteractiveFilter, styles[colorStyleKey], !isLoading && styles[interactiveStyleKey], isSelected && styles.containerSelected, hasTrailingMetric && styles.containerBadge, hasTrailingMetric && styles.containerBadgeInteractive, hasTrailingMetric && styles[metricStyleKey])
176
206
  }, isLoading && {
177
207
  'aria-busy': true,
178
208
  'aria-disabled': true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "13.5.7",
3
+ "version": "13.6.1",
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/"
@@ -62,10 +62,11 @@
62
62
  "@atlaskit/css": "^0.19.0",
63
63
  "@atlaskit/ds-lib": "^7.0.0",
64
64
  "@atlaskit/icon": "^34.0.0",
65
+ "@atlaskit/motion": "^5.6.0",
65
66
  "@atlaskit/platform-feature-flags": "^1.1.0",
66
- "@atlaskit/primitives": "^18.1.0",
67
+ "@atlaskit/primitives": "^19.0.0",
67
68
  "@atlaskit/spinner": "^19.1.0",
68
- "@atlaskit/tokens": "^12.0.0",
69
+ "@atlaskit/tokens": "^13.0.0",
69
70
  "@babel/runtime": "^7.0.0",
70
71
  "@compiled/react": "^0.20.0"
71
72
  },