@atlaskit/lozenge 13.4.4 → 13.5.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 13.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`1090b6ca92c60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1090b6ca92c60) -
8
+ Added `aria-label` prop support to LozengeDropdownTrigger for providing custom accessible labels
9
+ to the trigger button element.
10
+
11
+ ## 13.4.5
12
+
13
+ ### Patch Changes
14
+
15
+ - [`a18e28278b0ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a18e28278b0ac) -
16
+ Fixed percentage maxWidth truncation in new lozenge component. Text now correctly truncates with
17
+ ellipsis when maxWidth is set to a percentage value (e.g., '50%', '100%').
18
+
19
+ Add aria-controls, aria-expanded, and aria-haspopup props support to LozengeDropdownTrigger for
20
+ improved accessibility when used with DropdownMenu or Popup components. These props are now
21
+ properly passed through to the underlying button element.
22
+
23
+ - Updated dependencies
24
+
3
25
  ## 13.4.4
4
26
 
5
27
  ### Patch Changes
@@ -1,4 +1,4 @@
1
- /* lozenge.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* lozenge-base.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -123,7 +123,11 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
123
123
  onClick = _ref.onClick,
124
124
  style = _ref.style,
125
125
  analyticsContext = _ref.analyticsContext,
126
- interactionName = _ref.interactionName;
126
+ interactionName = _ref.interactionName,
127
+ ariaControls = _ref['aria-controls'],
128
+ ariaExpanded = _ref['aria-expanded'],
129
+ ariaHaspopup = _ref['aria-haspopup'],
130
+ ariaLabel = _ref['aria-label'];
127
131
  var isInteractive = typeof onClick === 'function';
128
132
 
129
133
  // Determine the effective color, with fallback logic for legacy appearances
@@ -144,6 +148,11 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
144
148
  };
145
149
  var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
146
150
  var innerContent = /*#__PURE__*/React.createElement("span", {
151
+ style: {
152
+ // When maxWidth is a percentage, constrain the content wrapper
153
+ // so text truncation works correctly within the flex layout
154
+ maxWidth: maxWidthIsPc ? '100%' : undefined
155
+ },
147
156
  className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
148
157
  }, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
149
158
  size: spacing === 'spacious' ? 'medium' : 'small',
@@ -152,7 +161,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
152
161
  testId: testId && "".concat(testId, "--icon")
153
162
  }), /*#__PURE__*/React.createElement("span", {
154
163
  style: {
155
- maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
164
+ maxWidth: maxWidthIsPc ? undefined : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
156
165
  color: style === null || style === void 0 ? void 0 : style.color
157
166
  },
158
167
  "data-testid": testId && "".concat(testId, "--text"),
@@ -178,7 +187,10 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
178
187
  'aria-disabled': true,
179
188
  isDisabled: true
180
189
  }, {
181
- "aria-label": isLoading ? 'Loading' : undefined,
190
+ "aria-label": isLoading ? 'Loading' : ariaLabel,
191
+ "aria-controls": ariaControls,
192
+ "aria-expanded": ariaExpanded,
193
+ "aria-haspopup": ariaHaspopup,
182
194
  onClick: isLoading ? undefined : onClick,
183
195
  style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
184
196
  // Specified because Pressable has a default border:none which overrides the border specified on the container
@@ -1,4 +1,4 @@
1
- /* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -46,7 +46,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
46
46
  onClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
47
47
  style = _ref.style,
48
48
  analyticsContext = _ref.analyticsContext,
49
- interactionName = _ref.interactionName;
49
+ interactionName = _ref.interactionName,
50
+ ariaControls = _ref['aria-controls'],
51
+ ariaExpanded = _ref['aria-expanded'],
52
+ ariaHaspopup = _ref['aria-haspopup'],
53
+ ariaLabel = _ref['aria-label'];
50
54
  var baseProps = {
51
55
  appearance: appearance,
52
56
  spacing: spacing,
@@ -61,7 +65,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
61
65
  onClick: onClick,
62
66
  analyticsContext: analyticsContext,
63
67
  interactionName: interactionName,
64
- children: children
68
+ children: children,
69
+ 'aria-controls': ariaControls,
70
+ 'aria-expanded': ariaExpanded,
71
+ 'aria-haspopup': ariaHaspopup,
72
+ 'aria-label': ariaLabel
65
73
  };
66
74
  return /*#__PURE__*/React.createElement(_lozengeBase.default, (0, _extends2.default)({
67
75
  ref: ref
@@ -1,4 +1,4 @@
1
- /* lozenge.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* lozenge.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./lozenge.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* lozenge-base.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./lozenge-base.compiled.css";
4
4
  import * as React from 'react';
@@ -111,7 +111,11 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
111
111
  // for dropdown trigger
112
112
  style,
113
113
  analyticsContext,
114
- interactionName
114
+ interactionName,
115
+ 'aria-controls': ariaControls,
116
+ 'aria-expanded': ariaExpanded,
117
+ 'aria-haspopup': ariaHaspopup,
118
+ 'aria-label': ariaLabel
115
119
  }, ref) => {
116
120
  const isInteractive = typeof onClick === 'function';
117
121
 
@@ -134,6 +138,11 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
134
138
  };
135
139
  const hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
136
140
  const innerContent = /*#__PURE__*/React.createElement("span", {
141
+ style: {
142
+ // When maxWidth is a percentage, constrain the content wrapper
143
+ // so text truncation works correctly within the flex layout
144
+ maxWidth: maxWidthIsPc ? '100%' : undefined
145
+ },
137
146
  className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
138
147
  }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
139
148
  size: spacing === 'spacious' ? 'medium' : 'small',
@@ -142,7 +151,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
142
151
  testId: testId && `${testId}--icon`
143
152
  }), /*#__PURE__*/React.createElement("span", {
144
153
  style: {
145
- maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`,
154
+ maxWidth: maxWidthIsPc ? undefined : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`,
146
155
  color: style === null || style === void 0 ? void 0 : style.color
147
156
  },
148
157
  "data-testid": testId && `${testId}--text`,
@@ -168,7 +177,10 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
168
177
  'aria-disabled': true,
169
178
  isDisabled: true
170
179
  }, {
171
- "aria-label": isLoading ? 'Loading' : undefined,
180
+ "aria-label": isLoading ? 'Loading' : ariaLabel,
181
+ "aria-controls": ariaControls,
182
+ "aria-expanded": ariaExpanded,
183
+ "aria-haspopup": ariaHaspopup,
172
184
  onClick: isLoading ? undefined : onClick,
173
185
  style: {
174
186
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -1,4 +1,4 @@
1
- /* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -31,7 +31,11 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
31
31
  onClick = __noop,
32
32
  style,
33
33
  analyticsContext,
34
- interactionName
34
+ interactionName,
35
+ 'aria-controls': ariaControls,
36
+ 'aria-expanded': ariaExpanded,
37
+ 'aria-haspopup': ariaHaspopup,
38
+ 'aria-label': ariaLabel
35
39
  }, ref) => {
36
40
  const baseProps = {
37
41
  appearance,
@@ -47,7 +51,11 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
47
51
  onClick,
48
52
  analyticsContext,
49
53
  interactionName,
50
- children
54
+ children,
55
+ 'aria-controls': ariaControls,
56
+ 'aria-expanded': ariaExpanded,
57
+ 'aria-haspopup': ariaHaspopup,
58
+ 'aria-label': ariaLabel
51
59
  };
52
60
  return /*#__PURE__*/React.createElement(LozengeBase, _extends({
53
61
  ref: ref
@@ -1,4 +1,4 @@
1
- /* lozenge.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import LozengeBase from './lozenge-base';
@@ -1,4 +1,4 @@
1
- /* lozenge.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./lozenge.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -1,4 +1,4 @@
1
- /* lozenge-base.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge-base.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import "./lozenge-base.compiled.css";
@@ -114,7 +114,11 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
114
114
  onClick = _ref.onClick,
115
115
  style = _ref.style,
116
116
  analyticsContext = _ref.analyticsContext,
117
- interactionName = _ref.interactionName;
117
+ interactionName = _ref.interactionName,
118
+ ariaControls = _ref['aria-controls'],
119
+ ariaExpanded = _ref['aria-expanded'],
120
+ ariaHaspopup = _ref['aria-haspopup'],
121
+ ariaLabel = _ref['aria-label'];
118
122
  var isInteractive = typeof onClick === 'function';
119
123
 
120
124
  // Determine the effective color, with fallback logic for legacy appearances
@@ -135,6 +139,11 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
135
139
  };
136
140
  var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
137
141
  var innerContent = /*#__PURE__*/React.createElement("span", {
142
+ style: {
143
+ // When maxWidth is a percentage, constrain the content wrapper
144
+ // so text truncation works correctly within the flex layout
145
+ maxWidth: maxWidthIsPc ? '100%' : undefined
146
+ },
138
147
  className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
139
148
  }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
140
149
  size: spacing === 'spacious' ? 'medium' : 'small',
@@ -143,7 +152,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
143
152
  testId: testId && "".concat(testId, "--icon")
144
153
  }), /*#__PURE__*/React.createElement("span", {
145
154
  style: {
146
- maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
155
+ maxWidth: maxWidthIsPc ? undefined : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
147
156
  color: style === null || style === void 0 ? void 0 : style.color
148
157
  },
149
158
  "data-testid": testId && "".concat(testId, "--text"),
@@ -169,7 +178,10 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
169
178
  'aria-disabled': true,
170
179
  isDisabled: true
171
180
  }, {
172
- "aria-label": isLoading ? 'Loading' : undefined,
181
+ "aria-label": isLoading ? 'Loading' : ariaLabel,
182
+ "aria-controls": ariaControls,
183
+ "aria-expanded": ariaExpanded,
184
+ "aria-haspopup": ariaHaspopup,
173
185
  onClick: isLoading ? undefined : onClick,
174
186
  style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
175
187
  // Specified because Pressable has a default border:none which overrides the border specified on the container
@@ -1,4 +1,4 @@
1
- /* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
@@ -37,7 +37,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
37
37
  onClick = _ref$onClick === void 0 ? __noop : _ref$onClick,
38
38
  style = _ref.style,
39
39
  analyticsContext = _ref.analyticsContext,
40
- interactionName = _ref.interactionName;
40
+ interactionName = _ref.interactionName,
41
+ ariaControls = _ref['aria-controls'],
42
+ ariaExpanded = _ref['aria-expanded'],
43
+ ariaHaspopup = _ref['aria-haspopup'],
44
+ ariaLabel = _ref['aria-label'];
41
45
  var baseProps = {
42
46
  appearance: appearance,
43
47
  spacing: spacing,
@@ -52,7 +56,11 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
52
56
  onClick: onClick,
53
57
  analyticsContext: analyticsContext,
54
58
  interactionName: interactionName,
55
- children: children
59
+ children: children,
60
+ 'aria-controls': ariaControls,
61
+ 'aria-expanded': ariaExpanded,
62
+ 'aria-haspopup': ariaHaspopup,
63
+ 'aria-label': ariaLabel
56
64
  };
57
65
  return /*#__PURE__*/React.createElement(LozengeBase, _extends({
58
66
  ref: ref
@@ -1,4 +1,4 @@
1
- /* lozenge.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import LozengeBase from './lozenge-base';
@@ -106,6 +106,10 @@ export type LozengeBaseProps = NewLozengeBaseProps & {
106
106
  onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
107
107
  analyticsContext?: Record<string, any>;
108
108
  interactionName?: string;
109
+ 'aria-controls'?: string;
110
+ 'aria-expanded'?: boolean;
111
+ 'aria-haspopup'?: boolean | 'dialog';
112
+ 'aria-label'?: string;
109
113
  };
110
114
  /**
111
115
  * Props for the LozengeDropdownTrigger component
@@ -132,5 +136,22 @@ export type LozengeDropdownTriggerProps = NewLozengeProps & {
132
136
  * An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see [React UFO integration](https://go.atlassian.com/react-ufo-dst-integration).
133
137
  */
134
138
  interactionName?: string;
139
+ /**
140
+ * Identifies the popup element that the trigger controls.
141
+ * Should match the `id` of the popup content for screen readers to understand the relationship.
142
+ */
143
+ 'aria-controls'?: string;
144
+ /**
145
+ * Announces to assistive technology whether the popup is currently open or closed.
146
+ */
147
+ 'aria-expanded'?: boolean;
148
+ /**
149
+ * Informs assistive technology that this element triggers a popup.
150
+ */
151
+ 'aria-haspopup'?: boolean | 'dialog';
152
+ /**
153
+ * Defines a string value that labels the trigger element for assistive technology.
154
+ */
155
+ 'aria-label'?: string;
135
156
  };
136
157
  export {};
@@ -106,6 +106,10 @@ export type LozengeBaseProps = NewLozengeBaseProps & {
106
106
  onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
107
107
  analyticsContext?: Record<string, any>;
108
108
  interactionName?: string;
109
+ 'aria-controls'?: string;
110
+ 'aria-expanded'?: boolean;
111
+ 'aria-haspopup'?: boolean | 'dialog';
112
+ 'aria-label'?: string;
109
113
  };
110
114
  /**
111
115
  * Props for the LozengeDropdownTrigger component
@@ -132,5 +136,22 @@ export type LozengeDropdownTriggerProps = NewLozengeProps & {
132
136
  * An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see [React UFO integration](https://go.atlassian.com/react-ufo-dst-integration).
133
137
  */
134
138
  interactionName?: string;
139
+ /**
140
+ * Identifies the popup element that the trigger controls.
141
+ * Should match the `id` of the popup content for screen readers to understand the relationship.
142
+ */
143
+ 'aria-controls'?: string;
144
+ /**
145
+ * Announces to assistive technology whether the popup is currently open or closed.
146
+ */
147
+ 'aria-expanded'?: boolean;
148
+ /**
149
+ * Informs assistive technology that this element triggers a popup.
150
+ */
151
+ 'aria-haspopup'?: boolean | 'dialog';
152
+ /**
153
+ * Defines a string value that labels the trigger element for assistive technology.
154
+ */
155
+ 'aria-label'?: string;
135
156
  };
136
157
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "13.4.4",
3
+ "version": "13.5.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/"
@@ -58,9 +58,9 @@
58
58
  "@atlaskit/platform-feature-flags": "^1.1.0",
59
59
  "@atlaskit/primitives": "^18.0.0",
60
60
  "@atlaskit/spinner": "^19.0.0",
61
- "@atlaskit/tokens": "^11.0.0",
61
+ "@atlaskit/tokens": "^11.1.0",
62
62
  "@babel/runtime": "^7.0.0",
63
- "@compiled/react": "^0.18.6"
63
+ "@compiled/react": "^0.20.0"
64
64
  },
65
65
  "peerDependencies": {
66
66
  "react": "^18.2.0"
@@ -69,8 +69,8 @@
69
69
  "@af/accessibility-testing": "workspace:^",
70
70
  "@af/integration-testing": "workspace:^",
71
71
  "@af/visual-regression": "workspace:^",
72
- "@atlaskit/docs": "^11.4.0",
73
- "@atlaskit/dropdown-menu": "^16.4.0",
72
+ "@atlaskit/docs": "^11.6.0",
73
+ "@atlaskit/dropdown-menu": "^16.5.0",
74
74
  "@atlaskit/heading": "^5.3.0",
75
75
  "@atlaskit/link": "^3.3.0",
76
76
  "@atlaskit/section-message": "^8.12.0",