@atlaskit/lozenge 13.4.3 → 13.4.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/lozenge
 
+## 13.4.5
+
+### Patch Changes
+
+- [`a18e28278b0ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a18e28278b0ac) -
+  Fixed percentage maxWidth truncation in new lozenge component. Text now correctly truncates with
+  ellipsis when maxWidth is set to a percentage value (e.g., '50%', '100%').
+
+  Add aria-controls, aria-expanded, and aria-haspopup props support to LozengeDropdownTrigger for
+  improved accessibility when used with DropdownMenu or Popup components. These props are now
+  properly passed through to the underlying button element.
+
+- Updated dependencies
+
+## 13.4.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.4.3
 
 ### Patch Changes

package/dist/cjs/new/lozenge-base.js

@@ -123,7 +123,10 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     onClick = _ref.onClick,
     style = _ref.style,
     analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHaspopup = _ref['aria-haspopup'];
   var isInteractive = typeof onClick === 'function';
 
   // Determine the effective color, with fallback logic for legacy appearances
@@ -144,6 +147,11 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   };
   var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
   var innerContent = /*#__PURE__*/React.createElement("span", {
+    style: {
+      // When maxWidth is a percentage, constrain the content wrapper
+      // so text truncation works correctly within the flex layout
+      maxWidth: maxWidthIsPc ? '100%' : undefined
+    },
     className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
   }, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
     size: spacing === 'spacious' ? 'medium' : 'small',
@@ -152,7 +160,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     testId: testId && "".concat(testId, "--icon")
   }), /*#__PURE__*/React.createElement("span", {
     style: {
-      maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
+      maxWidth: maxWidthIsPc ? undefined : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
@@ -179,6 +187,9 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
       isDisabled: true
     }, {
       "aria-label": isLoading ? 'Loading' : undefined,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHaspopup,
       onClick: isLoading ? undefined : onClick,
       style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
         // Specified because Pressable has a default border:none which overrides the border specified on the container

package/dist/cjs/new/lozenge-dropdown-trigger.js

@@ -46,7 +46,10 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
     onClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
     style = _ref.style,
     analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHaspopup = _ref['aria-haspopup'];
   var baseProps = {
     appearance: appearance,
     spacing: spacing,
@@ -61,7 +64,10 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
     onClick: onClick,
     analyticsContext: analyticsContext,
     interactionName: interactionName,
-    children: children
+    children: children,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHaspopup
   };
   return /*#__PURE__*/React.createElement(_lozengeBase.default, (0, _extends2.default)({
     ref: ref

package/dist/es2019/new/lozenge-base.js

@@ -111,7 +111,10 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   // for dropdown trigger
   style,
   analyticsContext,
-  interactionName
+  interactionName,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHaspopup
 }, ref) => {
   const isInteractive = typeof onClick === 'function';
 
@@ -134,6 +137,11 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
   const innerContent = /*#__PURE__*/React.createElement("span", {
+    style: {
+      // When maxWidth is a percentage, constrain the content wrapper
+      // so text truncation works correctly within the flex layout
+      maxWidth: maxWidthIsPc ? '100%' : undefined
+    },
     className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
   }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
     size: spacing === 'spacious' ? 'medium' : 'small',
@@ -142,7 +150,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     testId: testId && `${testId}--icon`
   }), /*#__PURE__*/React.createElement("span", {
     style: {
-      maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`,
+      maxWidth: maxWidthIsPc ? undefined : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`,
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && `${testId}--text`,
@@ -169,6 +177,9 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       isDisabled: true
     }, {
       "aria-label": isLoading ? 'Loading' : undefined,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHaspopup,
       onClick: isLoading ? undefined : onClick,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/new/lozenge-dropdown-trigger.js

@@ -31,7 +31,10 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onClick = __noop,
   style,
   analyticsContext,
-  interactionName
+  interactionName,
+  'aria-controls': ariaControls,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHaspopup
 }, ref) => {
   const baseProps = {
     appearance,
@@ -47,7 +50,10 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick,
     analyticsContext,
     interactionName,
-    children
+    children,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHaspopup
   };
   return /*#__PURE__*/React.createElement(LozengeBase, _extends({
     ref: ref

package/dist/esm/new/lozenge-base.js

@@ -114,7 +114,10 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     onClick = _ref.onClick,
     style = _ref.style,
     analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHaspopup = _ref['aria-haspopup'];
   var isInteractive = typeof onClick === 'function';
 
   // Determine the effective color, with fallback logic for legacy appearances
@@ -135,6 +138,11 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
   };
   var hasTrailingMetric = trailingMetric != null && trailingMetric !== '';
   var innerContent = /*#__PURE__*/React.createElement("span", {
+    style: {
+      // When maxWidth is a percentage, constrain the content wrapper
+      // so text truncation works correctly within the flex layout
+      maxWidth: maxWidthIsPc ? '100%' : undefined
+    },
     className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
   }, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
     size: spacing === 'spacious' ? 'medium' : 'small',
@@ -143,7 +151,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     testId: testId && "".concat(testId, "--icon")
   }), /*#__PURE__*/React.createElement("span", {
     style: {
-      maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
+      maxWidth: maxWidthIsPc ? undefined : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
@@ -170,6 +178,9 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
       isDisabled: true
     }, {
       "aria-label": isLoading ? 'Loading' : undefined,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHaspopup,
       onClick: isLoading ? undefined : onClick,
       style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
         // Specified because Pressable has a default border:none which overrides the border specified on the container

package/dist/esm/new/lozenge-dropdown-trigger.js

@@ -37,7 +37,10 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
     onClick = _ref$onClick === void 0 ? __noop : _ref$onClick,
     style = _ref.style,
     analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName;
+    interactionName = _ref.interactionName,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHaspopup = _ref['aria-haspopup'];
   var baseProps = {
     appearance: appearance,
     spacing: spacing,
@@ -52,7 +55,10 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
     onClick: onClick,
     analyticsContext: analyticsContext,
     interactionName: interactionName,
-    children: children
+    children: children,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHaspopup
   };
   return /*#__PURE__*/React.createElement(LozengeBase, _extends({
     ref: ref

package/dist/types/lozenge.d.ts

@@ -38,5 +38,5 @@ export interface LozengeProps {
 /**
  * Wrapper component that switches between old and new Lozenge based on feature flag
  */
-declare const LozengeWrapper: import("react").MemoExoticComponent<(props: LozengeProps | NewLozengeProps) => JSX.Element>;
+declare const LozengeWrapper: import('react').MemoExoticComponent<(props: LozengeProps | NewLozengeProps) => JSX.Element>;
 export default LozengeWrapper;

package/dist/types/new/lozenge-base.d.ts

@@ -5,5 +5,5 @@ import { type LozengeBaseProps } from './types';
  * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
  * This is the updated version with the new North Star visual language.
  */
-declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBaseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
+declare const LozengeBase: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<LozengeBaseProps, 'ref'> & import('react').RefAttributes<HTMLButtonElement | HTMLElement>>>;
 export default LozengeBase;

package/dist/types/new/lozenge-dropdown-trigger.d.ts

@@ -11,5 +11,5 @@ import { type LozengeDropdownTriggerProps } from './types';
  * - Built for dropdown menu interactions
  * - Supports analytics events and UFO press interactions
  */
-declare const LozengeDropdownTrigger: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LozengeDropdownTriggerProps & import("react").RefAttributes<HTMLElement>>>;
+declare const LozengeDropdownTrigger: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<LozengeDropdownTriggerProps & import('react').RefAttributes<HTMLElement>>>;
 export default LozengeDropdownTrigger;

package/dist/types/new/types.d.ts

@@ -106,6 +106,9 @@ export type LozengeBaseProps = NewLozengeBaseProps & {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
     analyticsContext?: Record<string, any>;
     interactionName?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * Props for the LozengeDropdownTrigger component
@@ -132,5 +135,18 @@ export type LozengeDropdownTriggerProps = NewLozengeProps & {
      * 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).
      */
     interactionName?: string;
+    /**
+     * Identifies the popup element that the trigger controls.
+     * Should match the `id` of the popup content for screen readers to understand the relationship.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the popup is currently open or closed.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 };
 export {};

package/dist/types-ts4.5/lozenge.d.ts

@@ -38,5 +38,5 @@ export interface LozengeProps {
 /**
  * Wrapper component that switches between old and new Lozenge based on feature flag
  */
-declare const LozengeWrapper: import("react").MemoExoticComponent<(props: LozengeProps | NewLozengeProps) => JSX.Element>;
+declare const LozengeWrapper: import('react').MemoExoticComponent<(props: LozengeProps | NewLozengeProps) => JSX.Element>;
 export default LozengeWrapper;

package/dist/types-ts4.5/new/lozenge-base.d.ts

@@ -5,5 +5,5 @@ import { type LozengeBaseProps } from './types';
  * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
  * This is the updated version with the new North Star visual language.
  */
-declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBaseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
+declare const LozengeBase: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<LozengeBaseProps, 'ref'> & import('react').RefAttributes<HTMLButtonElement | HTMLElement>>>;
 export default LozengeBase;

package/dist/types-ts4.5/new/lozenge-dropdown-trigger.d.ts

@@ -11,5 +11,5 @@ import { type LozengeDropdownTriggerProps } from './types';
  * - Built for dropdown menu interactions
  * - Supports analytics events and UFO press interactions
  */
-declare const LozengeDropdownTrigger: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LozengeDropdownTriggerProps & import("react").RefAttributes<HTMLElement>>>;
+declare const LozengeDropdownTrigger: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<LozengeDropdownTriggerProps & import('react').RefAttributes<HTMLElement>>>;
 export default LozengeDropdownTrigger;

package/dist/types-ts4.5/new/types.d.ts

@@ -106,6 +106,9 @@ export type LozengeBaseProps = NewLozengeBaseProps & {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
     analyticsContext?: Record<string, any>;
     interactionName?: string;
+    'aria-controls'?: string;
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: boolean | 'dialog';
 };
 /**
  * Props for the LozengeDropdownTrigger component
@@ -132,5 +135,18 @@ export type LozengeDropdownTriggerProps = NewLozengeProps & {
      * 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).
      */
     interactionName?: string;
+    /**
+     * Identifies the popup element that the trigger controls.
+     * Should match the `id` of the popup content for screen readers to understand the relationship.
+     */
+    'aria-controls'?: string;
+    /**
+     * Announces to assistive technology whether the popup is currently open or closed.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Informs assistive technology that this element triggers a popup.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.4.3",
+	"version": "13.4.5",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 					"id": "lozenge",
 					"status": {
 						"type": "beta",
-						"description": "New and ready to use. We'll provide comms and support for any major changes."
+						"description": "New and ready to use. These visual updates are currently behind the feature flag: `platform-dst-lozenge-tag-badge-visual-uplifts`. We'll provide comms and support for any major changes."
 					}
 				},
 				{
@@ -54,7 +54,7 @@
 		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/icon": "^31.0.0",
+		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/spinner": "^19.0.0",
@@ -69,8 +69,8 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.3.0",
-		"@atlaskit/dropdown-menu": "^16.4.0",
+		"@atlaskit/docs": "^11.5.0",
+		"@atlaskit/dropdown-menu": "^16.5.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/section-message": "^8.12.0",