BREAKING-CHANGE: new ChatMessageContent for style caching

packages/fluentui/CHANGELOG.md

@@ -18,6 +18,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Styles from `ChatMessage` content slot were moved to exact component `ChatMessageContent` @yuanboxue-amber ([#24691](https://github.com/microsoft/fluentui/pull/24691))
+
 ### Features
 
 - Add a new comfy layout variation for `ChatMessage` @davezuko ([#23974](https://github.com/microsoft/fluentui/pull/23974))

packages/fluentui/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.steps.ts

@@ -1,8 +1,8 @@
 import { ALL_THEMES, ScreenerTestsConfig } from '@fluentui/scripts/screener';
-import { reactionClassName, chatMessageSlotClassNames } from '@fluentui/react-northstar';
+import { reactionClassName, chatMessageContentClassName } from '@fluentui/react-northstar';
 
 const selectors = {
- chatMessageContent: `.${chatMessageSlotClassNames.content}`,
+ chatMessageContent: chatMessageContentClassName,
  reaction: `.${reactionClassName}`,
 };
 

packages/fluentui/docs/src/examples/components/Chat/Playground.tsx

@@ -15,6 +15,7 @@ import {
 import {
  Avatar,
  Chat,
+ ChatItem,
  ChatItemProps,
  ChatMessageProps,
  MenuProps,
@@ -126,17 +127,13 @@ const ChatPlayground: React.FunctionComponent = () => {
  };
 
  return (
- <Chat
- density={density}
- items={[
- {
- gutter: <Avatar icon={<PersonIcon />} size={size} />,
- key: '1',
- message: <Chat.Message mine={mine} reactionGroupPosition={reactionGroupPosition} {...chatMessageProps} />,
- ...chatItemProps,
- },
- ]}
- />
+ <Chat density={density}>
+ <ChatItem
+ gutter={<Avatar icon={<PersonIcon />} size={size} />}
+ message={<Chat.Message mine={mine} reactionGroupPosition={reactionGroupPosition} {...chatMessageProps} />}
+ {...chatItemProps}
+ />
+ </Chat>
  );
 };
 

packages/fluentui/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx

@@ -72,7 +72,6 @@ const ChatMessageExampleStyled = () => (
  backgroundColor: '#E0FFFF',
  }),
  }),
- content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' },
  timestamp: {
  ...slotLabelStyles('timestamp', {}, { display: 'inline-block' }),
  backgroundColor: '#FFFFE0',
@@ -90,10 +89,13 @@ const ChatMessageExampleStyled = () => (
  backgroundColor: '#FFFFE0',
  },
  },
+ ChatMessageContent: {
+ root: { ...slotLabelStyles('content'), backgroundColor: '#F08080' },
+ },
  },
  componentVariables: {
- ChatMessage: siteVars => ({
- content: {
+ ChatMessageContent: siteVars => ({
+ root: {
  focusOutlineColor: siteVars.colors.red[400],
  },
  }),

packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/classNames.ts

@@ -4,13 +4,14 @@ import {
  chatItemSlotClassNames,
  chatItemClassName,
  chatMessageClassName,
+ chatMessageContentClassName,
 } from '@fluentui/react-northstar';
 
 const classNames = {
  threadedMessage: {
  thread: `${chatMessageClassName}__thread`,
  threadBody: `${chatMessageClassName}__thread-body`,
- innerContent: `${chatMessageSlotClassNames.content}-inner`,
+ innerContent: `${chatMessageContentClassName}-inner`,
  author: `${chatMessageSlotClassNames.author}-inner`,
  timestamp: `${chatMessageSlotClassNames.timestamp}-inner`,
  },

packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx

@@ -17,6 +17,7 @@ import {
  useUnhandledProps,
  useMergedRefs,
  ForwardRefWithAs,
+ mergeVariablesOverrides,
 } from '@fluentui/react-bindings';
 import { Ref } from '@fluentui/react-component-ref';
 import * as customPropTypes from '@fluentui/react-proptypes';
@@ -67,6 +68,7 @@ import { ChatItemContext } from './chatItemContext';
 import { ChatMessageDetails, ChatMessageDetailsProps } from './ChatMessageDetails';
 import { ChatMessageHeader, ChatMessageHeaderProps } from './ChatMessageHeader';
 import { ChatMessageReadStatus, ChatMessageReadStatusProps } from './ChatMessageReadStatus';
+import { ChatMessageContent } from './ChatMessageContent';
 
 export interface ChatMessageSlotClassNames {
  actionMenu: string;
@@ -77,7 +79,6 @@ export interface ChatMessageSlotClassNames {
  bubbleInset: string;
  body: string;
  compactBody: string;
- content: string;
  reactionGroup: string;
  timestamp: string;
 }
@@ -226,7 +227,6 @@ export const chatMessageSlotClassNames: ChatMessageSlotClassNames = {
  bubble: `${chatMessageClassName}__bubble`,
  bubbleInset: `${chatMessageClassName}__bubble-inset`,
  compactBody: `${chatMessageClassName}__compact-body`,
- content: `${chatMessageClassName}__content`,
  reactionGroup: `${chatMessageClassName}__reactions`,
  timestamp: `${chatMessageClassName}__timestamp`,
 };
@@ -542,10 +542,10 @@ export const ChatMessage = (React.forwardRef<HTMLDivElement, ChatMessageProps>((
  }),
  });
 
- const messageContent = Box.create(content, {
- defaultProps: () => ({
-  className: chatMessageSlotClassNames.content,
- styles: resolvedStyles.content,
+ const messageContent = createShorthand(ChatMessageContent, content, {
+ defaultProps: () => ({ badgePosition, density, failed, hasBadge: !!badge, mine, unstable_layout: layout }),
+ overrideProps: predefinedProps => ({
+ variables: mergeVariablesOverrides(variables, predefinedProps.variables),
  }),
  });
 

packages/fluentui/react-northstar/src/components/Chat/ChatMessageContent.tsx

@@ -0,0 +1,56 @@
+import { compose } from '@fluentui/react-bindings';
+import * as PropTypes from 'prop-types';
+
+import { commonPropTypes } from '../../utils';
+import { Box, BoxProps, BoxStylesProps } from '../Box/Box';
+import { ChatDensity } from './chatDensity';
+import { ChatMessageLayout, ChatMessageProps } from './ChatMessage';
+
+export interface ChatMessageContentOwnProps
+ extends Pick<ChatMessageProps, 'badgePosition' | 'density' | 'failed' | 'mine' | 'unstable_layout'> {
+ /** Indicates whether parent ChatMessage has badge. */
+ hasBadge?: boolean;
+}
+export interface ChatMessageContentProps extends ChatMessageContentOwnProps, BoxProps {}
+
+export type ChatMessageContentStylesProps = Required<
+ Pick<ChatMessageContentOwnProps, 'badgePosition' | 'density' | 'failed' | 'hasBadge' | 'mine'>
+> & {
+ layout: ChatMessageLayout;
+};
+export const chatMessageContentClassName = 'ui-chat__messagecontent';
+
+/**
+ * A ChatMessageContent provides a slot for content in the ChatMessage.
+ */
+export const ChatMessageContent = compose<
+ 'div',
+ ChatMessageContentOwnProps,
+ ChatMessageContentStylesProps,
+ BoxProps,
+ BoxStylesProps
+>(Box, {
+ className: chatMessageContentClassName,
+ displayName: 'ChatMessageContent',
+ handledProps: ['badgePosition', 'density', 'failed', 'hasBadge', 'mine', 'unstable_layout'],
+ mapPropsToStylesProps: ({ badgePosition, density, failed, hasBadge, mine, unstable_layout }) => ({
+ badgePosition,
+ density,
+ failed,
+ hasBadge,
+ layout: unstable_layout,
+ mine,
+ }),
+ overrideStyles: true,
+ shorthandConfig: { mappedProp: 'content' },
+});
+
+ChatMessageContent.propTypes = {
+ ...commonPropTypes.createCommon(),
+ badgePosition: PropTypes.oneOf(['start', 'end']),
+ density: PropTypes.oneOf<ChatDensity>(['comfy', 'compact']),
+ failed: PropTypes.bool,
+ hasBadge: PropTypes.bool,
+ mine: PropTypes.bool,
+ unstable_layout: PropTypes.oneOf(['default', 'refresh']),
+};

packages/fluentui/react-northstar/src/index.ts

@@ -61,6 +61,7 @@ export * from './components/Breadcrumb/BreadcrumbLink';
 export * from './components/Chat/Chat';
 export * from './components/Chat/ChatItem';
 export * from './components/Chat/ChatMessage';
+export * from './components/Chat/ChatMessageContent';
 export * from './components/Chat/ChatMessageDetails';
 export * from './components/Chat/ChatMessageHeader';
 export * from './components/Chat/ChatMessageReadStatus';

packages/fluentui/react-northstar/src/themes/teams/componentStyles.ts

@@ -32,6 +32,7 @@ export { breadcrumbStyles as Breadcrumb } from './components/Breadcrumb/breadcru
 export { chatStyles as Chat } from './components/Chat/chatStyles';
 export { chatItemStyles as ChatItem } from './components/Chat/chatItemStyles';
 export { chatMessageStyles as ChatMessage } from './components/Chat/chatMessageStyles';
+export { chatMessageContentStyles as ChatMessageContent } from './components/Chat/chatMessageContentStyles';
 export { chatMessageDetailsStyles as ChatMessageDetails } from './components/Chat/chatMessageDetailsStyles';
 export { chatMessageReadStatusStyles as ChatMessageReadStatus } from './components/Chat/chatMessageReadStatusStyles';
 

packages/fluentui/react-northstar/src/themes/teams/componentVariables.ts

@@ -31,6 +31,7 @@ export { breadcrumbDividerVariables as BreadcrumbDivider } from './components/Br
 export { chatVariables as Chat } from './components/Chat/chatVariables';
 export { chatItemVariables as ChatItem } from './components/Chat/chatItemVariables';
 export { chatMessageVariables as ChatMessage } from './components/Chat/chatMessageVariables';
+export { chatMessageContentVariables as ChatMessageContent } from './components/Chat/chatMessageContentVariables';
 export { chatMessageDetailsVariables as ChatMessageDetails } from './components/Chat/chatMessageDetailsVariables';
 export { chatMessageReadStatusVariables as ChatMessageReadStatus } from './components/Chat/chatMessageReadStatusVariables';
 

packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageContentStyles.ts

@@ -0,0 +1,45 @@
+import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles';
+
+import { ChatMessageContentStylesProps } from '../../../../components/Chat/ChatMessageContent';
+import { ChatMessageVariables } from './chatMessageVariables';
+import { pxToRem } from '../../../../utils';
+
+export const chatMessageContentStyles: ComponentSlotStylesPrepared<
+ ChatMessageContentStylesProps,
+ ChatMessageVariables
+> = {
+ root: (componentStyleFunctionParam): ICSSInJSStyle => {
+ const { props: p, variables: v, theme } = componentStyleFunctionParam;
+ return {
+ color: v.contentColor,
+ display: 'block',
+ '& a': {
+ outline: 'none',
+ color: p.mine ? v.linkColorMine : v.linkColor,
+ ':focus': {
+ textDecoration: 'underline',
+ },
+ },
+
+ ...(p.layout === 'refresh' &&
+ p.density === 'comfy' && {
+ wordBreak: 'break-word',
+ wordWrap: 'break-word',
+ '& a': {
+ color: 'inherit',
+ textDecoration: 'underline',
+ wordBreak: 'break-all',
+ '&:hover': { textDecorationStyle: 'double' },
+ '&:focus': { textDecorationStyle: 'double' },
+ },
+ ...(p.failed && {
+ color: theme.siteVariables.colorScheme.default.foreground,
+ }),
+ }),
+
+ ...(p.density === 'comfy' && {
+ ...(p.hasBadge && p.badgePosition === 'end' && { marginRight: pxToRem(4) }),
+ }),
+ };
+ },
+};

packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageContentVariables.ts

@@ -0,0 +1 @@
+export { chatMessageVariables as chatMessageContentVariables } from './chatMessageVariables';

packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStyles.ts

@@ -114,22 +114,6 @@ export const chatMessageStyles: ComponentSlotStylesPrepared<ChatMessageStylesPro
  };
  },
 
- content: (componentStyleFunctionParam): ICSSInJSStyle => {
- const { props: p, variables: v } = componentStyleFunctionParam;
- return {
- color: v.contentColor,
- display: 'block',
- '& a': {
- outline: 'none',
- color: p.mine ? v.linkColorMine : v.linkColor,
- ':focus': {
- textDecoration: 'underline',
- },
- },
- ...getChatMessageVariantStyles(p).content?.(componentStyleFunctionParam),
- };
- },
-
  badge: (componentStyleFunctionParam): ICSSInJSStyle => {
  const { props: p, variables: v } = componentStyleFunctionParam;
  return {

packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStylesComfy.ts

@@ -66,10 +66,6 @@ export const chatMessageStylesComfy: ComponentSlotStylesPrepared<ChatMessageStyl
  position: 'absolute',
  }),
 
- content: ({ props: p }): ICSSInJSStyle => ({
- ...(p.hasBadge && p.badgePosition === 'end' && { marginRight: pxToRem(4) }),
- }),
-
  reactionGroup: ({ props: p, variables: v }) => ({
  marginLeft: v.reactionGroupMarginLeft,
  ...(p.hasBadge && p.badgePosition === 'end' && { marginRight: pxToRem(2) }),

packages/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageStylesComfyRefresh.ts

@@ -160,22 +160,6 @@ export const chatMessageStylesComfyRefresh: ComponentSlotStylesPrepared<
  },
  }),
 
- content: ({ props: p, variables: v, theme }): ICSSInJSStyle => ({
- color: v.contentColor,
- wordBreak: 'break-word',
- wordWrap: 'break-word',
- '& a': {
- color: 'inherit',
- textDecoration: 'underline',
- wordBreak: 'break-all',
- '&:hover': { textDecorationStyle: 'double' },
- '&:focus': { textDecorationStyle: 'double' },
- },
- ...(p.failed && {
- color: theme.siteVariables.colorScheme.default.foreground,
- }),
- }),
-
  badge: ({ props: p, variables: v }): ICSSInJSStyle => ({
  position: 'relative',
  top: pxToRem(-5),

packages/fluentui/react-northstar/src/themes/teams/types.ts

@@ -29,6 +29,7 @@ import { ButtonStylesProps } from '../../components/Button/Button';
 import { ButtonContentStylesProps } from '../../components/Button/ButtonContent';
 import { ChatItemStylesProps } from '../../components/Chat/ChatItem';
 import { ChatMessageStylesProps } from '../../components/Chat/ChatMessage';
+import { ChatMessageContentStylesProps } from '../../components/Chat/ChatMessageContent';
 import { ChatMessageDetailsStylesProps } from '../../components/Chat/ChatMessageDetails';
 import { ChatMessageHeaderStylesProps } from '../../components/Chat/ChatMessageHeader';
 import { ChatMessageReadStatusStylesProps } from '../../components/Chat/ChatMessageReadStatus';
@@ -144,6 +145,7 @@ export type TeamsThemeStylesProps = {
  Chat: ChatStylesProps;
  ChatItem: ChatItemStylesProps;
  ChatMessage: ChatMessageStylesProps;
+ ChatMessageContent: ChatMessageContentStylesProps;
  ChatMessageDetails: ChatMessageDetailsStylesProps;
  ChatMessageHeader: ChatMessageHeaderStylesProps;
  ChatMessageReadStatus: ChatMessageReadStatusStylesProps;

packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx

@@ -2,8 +2,8 @@ import { handlesAccessibility, implementsShorthandProp, isConformant } from 'tes
 
 import { ChatMessage } from 'src/components/Chat/ChatMessage';
 import { Text } from 'src/components/Text/Text';
-import { Box } from 'src/components/Box/Box';
 import { ChatMessageDetails } from 'src/components/Chat/ChatMessageDetails';
+import { ChatMessageContent } from 'src/components/Chat/ChatMessageContent';
 
 const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage);
 
@@ -19,7 +19,7 @@ describe('ChatMessage', () => {
  chatMessageImplementsShorthandProp('author', Text);
  chatMessageImplementsShorthandProp('timestamp', Text);
  chatMessageImplementsShorthandProp('details', ChatMessageDetails);
- chatMessageImplementsShorthandProp('content', Box, { mapsValueToProp: 'children' });
+ chatMessageImplementsShorthandProp('content', ChatMessageContent);
 
  describe('accessibility', () => {
  handlesAccessibility(ChatMessage);

packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessageContent-test.tsx

@@ -0,0 +1,9 @@
+import { ChatMessageContent } from 'src/components/Chat/ChatMessageContent';
+import { isConformant } from 'test/specs/commonTests';
+
+describe('ChatMessageContent', () => {
+ isConformant(ChatMessageContent, {
+ testPath: __filename,
+ constructorName: 'ChatMessageContent',
+ });
+});