@atlaskit/lozenge 13.1.1 → 13.2.0

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type CSSProperties, type ReactNode } from 'react';
+import { type NewLozengeProps } from './new/types';
 export type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
 export interface LozengeProps {
     /**
@@ -15,6 +16,7 @@ export interface LozengeProps {
     children?: ReactNode;
     /**
      * Determines whether to apply the bold style or not.
+     * @deprecated This prop is deprecated and will be removed in an upcoming major release. Use Tag component for non-bold styles.
      */
     isBold?: boolean;
     /**
@@ -23,6 +25,7 @@ export interface LozengeProps {
     maxWidth?: number | string;
     /**
      * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
+     * @deprecated This prop is deprecated and will be removed in an upcoming major release. Accent colors will be supported through the `appearance` prop in a future release.
      */
     style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
     /**
@@ -33,13 +36,7 @@ export interface LozengeProps {
     testId?: string;
 }
 /**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
+ * Wrapper component that switches between old and new Lozenge based on feature flag
  */
-declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => JSX.Element>;
-export default Lozenge;
+declare const LozengeWrapper: import("react").MemoExoticComponent<(props: LozengeProps | NewLozengeProps) => JSX.Element>;
+export default LozengeWrapper;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type IconProp, type LozengeColor } from './types';
+export interface IconRendererProps {
+    /**
+     * The icon component to render
+     */
+    icon: IconProp;
+    /**
+     * The lozenge color to determine icon color
+     */
+    color: LozengeColor;
+    /**
+     * Whether the lozenge is in a selected state
+     */
+    isSelected?: boolean;
+    /**
+     * Test ID for the icon
+     */
+    testId?: string;
+}
+/**
+ * Icon renderer for lozenge components
+ * Handles proper sizing and color theming for icons
+ */
+export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId }: IconRendererProps) => React.JSX.Element;
+export default IconRenderer;

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

@@ -0,0 +1,9 @@
+import { type LozengeDropdownTriggerProps, type NewLozengeProps } from './types';
+/**
+ * __New Lozenge__
+ *
+ * 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<(NewLozengeProps | LozengeDropdownTriggerProps) & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
+export default LozengeBase;

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

@@ -0,0 +1,15 @@
+import { type LozengeDropdownTriggerProps } from './types';
+/**
+ * __Lozenge Dropdown Trigger__
+ *
+ * An interactive lozenge component that acts as a dropdown trigger.
+ * Built on LozengeBase with dropdown interaction patterns.
+ *
+ * - Supports all color variants from the lozenge
+ * - Shows selected state with dedicated color tokens
+ * - Includes a chevron icon on the right of the text
+ * - 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>>>;
+export default LozengeDropdownTrigger;

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

@@ -0,0 +1,15 @@
+import { type NewLozengeProps } from './types';
+/**
+ * __Lozenge__
+ *
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
+ *
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
+ * - [Code](https://atlassian.design/components/lozenge/code)
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
+ */
+declare const Lozenge: {
+    ({ appearance, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
+    displayName: string;
+};
+export default Lozenge;

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

@@ -0,0 +1,104 @@
+import type { ComponentType, CSSProperties, ReactNode } from 'react';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type NewIconProps } from '@atlaskit/icon/types';
+import { type ThemeAppearance } from '../lozenge';
+/**
+ * Semantic color types for the new lozenge API
+ */
+export type SemanticColor = 'success' | 'warning' | 'danger' | 'information' | 'neutral' | 'discovery';
+/**
+ * Accent color types for the new lozenge API
+ */
+export type AccentColor = 'accent-red' | 'accent-orange' | 'accent-yellow' | 'accent-lime' | 'accent-green' | 'accent-teal' | 'accent-blue' | 'accent-purple' | 'accent-magenta' | 'accent-gray';
+/**
+ * Union type of all supported color variants
+ */
+export type LozengeColor = SemanticColor | AccentColor;
+/**
+ * Icon component prop type
+ */
+export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
+/**
+ * Props for the NewLozenge component
+ */
+export interface NewLozengeProps {
+    /**
+     * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
+     * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
+     */
+    appearance?: ThemeAppearance | LozengeColor;
+    /**
+     * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+     */
+    children?: ReactNode;
+    /**
+     * Icon to display before the text content. Should be an ADS icon component.
+     */
+    iconBefore?: IconProp;
+    /**
+     * Whether the lozenge is interactive (dropdown trigger). Only used internally.
+     * @internal
+     */
+    isInteractive?: boolean;
+    /**
+     * Whether the lozenge is selected (for dropdown triggers). Only used internally.
+     * @internal
+     */
+    isSelected?: boolean;
+    /**
+     * max-width of lozenge container. Default to 200px.
+     */
+    maxWidth?: number | string;
+    /**
+     * Style customization to apply to the lozenge. Only `backgroundColor` and `color` are supported.
+     * @deprecated This prop is deprecated and will be removed in a future version.
+     */
+    style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
+    /**
+     * Callback fired when the lozenge is clicked (only for interactive lozenges).
+     * The second argument provides an Atlaskit UI analytics event.
+     * @internal
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Additional information to be included in the `context` of Atlaskit analytics events.
+     * @internal
+     */
+    analyticsContext?: Record<string, any>;
+    /**
+     * An optional name used to identify events for React UFO press interactions.
+     * @internal
+     */
+    interactionName?: string;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * @deprecated This prop is deprecated and will be removed. Use Tag component for non-bold styles.
+     */
+    isBold?: boolean;
+}
+/**
+ * Props for the LozengeDropdownTrigger component
+ */
+export interface LozengeDropdownTriggerProps extends Omit<NewLozengeProps, 'onClick' | 'isInteractive'> {
+    /**
+     * Whether the dropdown is currently selected/open.
+     */
+    isSelected?: boolean;
+    /**
+     * Callback fired when the trigger is clicked. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the [analytics-next documentation](https://atlaskit.atlassian.com/packages/analytics/analytics-next) for more information.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Additional information to be included in the `context` of Atlaskit analytics events that come from the lozenge dropdown trigger.
+     */
+    analyticsContext?: Record<string, any>;
+    /**
+     * 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;
+}

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

@@ -0,0 +1,6 @@
+import { type LozengeColor } from './types';
+export declare const resolveLozengeColor: (appearance?: string) => LozengeColor;
+export declare const getThemeStyles: (resolvedColor: LozengeColor) => {
+    category: string;
+    key: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.1.1",
+	"version": "13.2.0",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,12 +32,13 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/css": "^0.16.0",
+		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/css": "^0.17.0",
+		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/icon": "^29.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.2.0",
-		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^8.1.0",
+		"@atlaskit/primitives": "^16.4.0",
+		"@atlaskit/tokens": "^8.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
 	},
@@ -49,11 +50,10 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/docs": "^11.2.0",
-		"@atlaskit/ds-lib": "^5.2.0",
+		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/section-message": "^8.9.0",
-		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/section-message": "^8.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@testing-library/react": "^13.4.0",
@@ -85,6 +85,9 @@
 	"platform-feature-flags": {
 		"platform-lozenge-custom-letterspacing": {
 			"type": "boolean"
+		},
+		"platform-dst-lozenge-tag-badge-visual-uplifts": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/lozenge/"