chore(message): deprecate spacious variant props in MessageProps (#3144)

* refactor(message): deprecate spacious variant props in MessageProps

* chore(message): changeset

* refactor(message): move MessageSubcomponentProperty to Message.types and remove constants file

Author: stephl3

.changeset/wide-signs-joke.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/message': patch
+---
+
+Deprecate spacious variant props in `MessageProps`

chat/message/src/Message/CompactMessage.tsx

@@ -7,7 +7,6 @@ import { filterChildren, findChild } from '@leafygreen-ui/lib';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { Body } from '@leafygreen-ui/typography';
 
-import { MessageSubcomponentProperty } from '../constants';
 import {
   MessageContainer,
   Variant as MessageContainerVariant,
@@ -18,7 +17,10 @@ import {
   avatarContainerStyles,
   getContainerStyles,
 } from './CompactMessage.styles';
-import { type MessageProps } from './Message.types';
+import {
+  type MessageProps,
+  MessageSubcomponentProperty,
+} from './Message.types';
 
 export const CompactMessage = forwardRef<HTMLDivElement, MessageProps>(
   (

chat/message/src/Message/Message.tsx

@@ -9,17 +9,17 @@ import LeafyGreenProvider, {
 } from '@leafygreen-ui/leafygreen-provider';
 import { consoleOnce } from '@leafygreen-ui/lib';
 
-import { MessageSubcomponentProperty } from '../constants';
 import { MessageActions } from '../MessageActions';
 import { MessageVerifiedBanner } from '../MessageBanner';
 import { MessageContext } from '../MessageContext';
 import { MessageLinks } from '../MessageLinks';
 
 import { CompactMessage } from './CompactMessage';
 import {
-  ActionsType,
-  LinksType,
+  type ActionsType,
+  type LinksType,
   type MessageProps,
+  MessageSubcomponentProperty,
   type VerifiedBannerType,
 } from './Message.types';
 import { SpaciousMessage } from './SpaciousMessage';

chat/message/src/Message/Message.types.ts

@@ -20,6 +20,9 @@ export const Align = {
 
 export type Align = (typeof Align)[keyof typeof Align];
 
+/**
+ * @deprecated
+ */
 export interface ComponentOverrides {
   MessageContainer?: (props: MessageContainerProps) => JSX.Element;
   MessageContent?: (props: MessageContentProps) => JSX.Element;
@@ -35,28 +38,31 @@ export interface MessageProps
   children?: React.ReactNode;
   /**
    * Determines whether the message is aligned to the left or right
-   *
    * By default, if `isSender === true`, the message is aligned to the right, and otherwise to the left. This prop overrides that behavior.
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   align?: Align;
 
   /**
    * Avatar element
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   avatar?: ReactElement;
 
   /**
    * Base font size
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   baseFontSize?: BaseFontSize;
 
   /**
    * Component overrides for any subcomponents
    * @deprecated
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   componentOverrides?: ComponentOverrides;
 
@@ -69,12 +75,14 @@ export interface MessageProps
   /**
    * A list of links to render as rich links for the message.
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   links?: Array<RichLinkProps>;
 
   /**
    * The heading text to display for the links section.
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   linksHeading?: string;
 
@@ -86,26 +94,44 @@ export interface MessageProps
   /**
    * A callback function that is called when any link is clicked.
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   onLinkClick?: RichLinkProps['onLinkClick'];
 
   /**
    * Configure a *verified message* which includes additional styles and
    * displays information about the message.
    * @remarks This prop is only considered when the parent `LeafyGreenChatProvider` has `variant="spacious"`.
+   * @deprecated The spacious variant will be removed by EOY 2025. Instead, use the compact variant.
    */
   verified?: BaseMessageVerifiedBannerProps;
 }
 
+/**
+ * Static property names used to identify Message compound components.
+ * These are implementation details for the compound component pattern and should not be exported.
+ */
+export const MessageSubcomponentProperty = {
+  Actions: 'isLGMessageActions',
+  VerifiedBanner: 'isLGMessageVerifiedBanner',
+  Links: 'isLGMessageLinks',
+} as const;
+
+/**
+ * Type representing the possible static property names for Message subcomponents.
+ */
+export type MessageSubcomponentProperty =
+  (typeof MessageSubcomponentProperty)[keyof typeof MessageSubcomponentProperty];
+
 export type ActionsType = ForwardRefExoticComponent<MessageActionsProps> & {
-  isLGMessageActions?: boolean;
+  [MessageSubcomponentProperty.Actions]?: boolean;
 };
 
 export type LinksType = ForwardRefExoticComponent<MessageLinksProps> & {
-  isLGMessageLinks?: boolean;
+  [MessageSubcomponentProperty.Links]?: boolean;
 };
 
 export type VerifiedBannerType =
   ForwardRefExoticComponent<MessageVerifiedBannerProps> & {
-    isLGMessageVerifiedBanner?: boolean;
+    [MessageSubcomponentProperty.VerifiedBanner]?: boolean;
   };