@atlaskit/lozenge 13.4.1 → 13.4.3

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

@@ -22,12 +22,7 @@ export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
  * Props for the NewLozenge component
  */
 export type LozengeSpacing = 'default' | 'spacious';
-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;
+type NewLozengeBaseProps = {
     /**
      * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
      */
@@ -62,15 +57,69 @@ export interface NewLozengeProps {
      * @deprecated This prop is deprecated and will be removed. Use Tag component for non-bold styles.
      */
     isBold?: boolean;
-}
+};
+type NewLozengeSemanticProps = NewLozengeBaseProps & {
+    /**
+     * The appearance of the lozenge. Supports legacy semantic appearances and new semantic colors.
+     */
+    appearance?: ThemeAppearance | SemanticColor;
+    /**
+     * Numeric metric displayed at the end of the lozenge as a badge.
+     */
+    trailingMetric?: string;
+    /**
+     * Overrides the appearance of the trailing metric badge.
+     *
+     * If not specified, the trailing metric badge inherits the lozenge appearance.
+     *
+     * This prop is not supported for accent lozenges.
+     */
+    trailingMetricAppearance?: ThemeAppearance | SemanticColor | 'inverse';
+};
+type NewLozengeAccentProps = NewLozengeBaseProps & {
+    /**
+     * Accent appearance values.
+     */
+    appearance: AccentColor;
+    /**
+     * Trailing metric is not supported for accent lozenges.
+     */
+    trailingMetric?: never;
+    /**
+     * Trailing metric appearance is not supported for accent lozenges.
+     */
+    trailingMetricAppearance?: never;
+};
+export type NewLozengeProps = NewLozengeSemanticProps | NewLozengeAccentProps;
+/**
+ * Props for LozengeBase (internal). A single merged type so that Lozenge and
+ * LozengeDropdownTrigger can pass their props without union narrowing requiring
+ * appearance to match only one branch (AccentColor vs ThemeAppearance | SemanticColor).
+ * Must not intersect with LozengeDropdownTriggerProps (which extends NewLozengeProps union).
+ */
+export type LozengeBaseProps = NewLozengeBaseProps & {
+    appearance?: ThemeAppearance | SemanticColor | AccentColor;
+    trailingMetric?: string;
+    trailingMetricAppearance?: ThemeAppearance | SemanticColor | 'inverse';
+    isSelected?: boolean;
+    isLoading?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    analyticsContext?: Record<string, any>;
+    interactionName?: string;
+};
 /**
  * Props for the LozengeDropdownTrigger component
  */
-export interface LozengeDropdownTriggerProps extends NewLozengeProps {
+export type LozengeDropdownTriggerProps = NewLozengeProps & {
     /**
      * Whether the dropdown is currently selected/open.
      */
     isSelected?: boolean;
+    /**
+     * Whether the dropdown trigger is in a loading state.
+     * When true, a spinner is shown and the trigger becomes non-interactive.
+     */
+    isLoading?: 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.
      */
@@ -83,4 +132,5 @@ export interface LozengeDropdownTriggerProps extends 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;
-}
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.4.1",
+	"version": "13.4.3",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,15 +34,16 @@
 					"title": "Lozenge",
 					"id": "lozenge",
 					"status": {
-						"type": "alpha",
-						"description": "This is an experiment under a feature flag. We may make frequent breaking changes with limited notice. We don't recommend using this without support from our team."
+						"type": "beta",
+						"description": "New and ready to use. We'll provide comms and support for any major changes."
 					}
 				},
 				{
 					"title": "Lozenge Dropdown Trigger",
 					"id": "lozenge-dropdown-trigger",
 					"status": {
-						"type": "alpha"
+						"type": "beta",
+						"description": "New and ready to use. We'll provide comms and support for any major changes."
 					}
 				}
 			]
@@ -50,11 +51,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
@@ -68,7 +71,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/docs": "^11.3.0",
 		"@atlaskit/dropdown-menu": "^16.4.0",
-		"@atlaskit/heading": "^5.2.0",
+		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",