CSS Modules: migrate ActivityStatus

Author: OEvgeny

__tests__/html2/citation/claimInterpreter/dangerousLink.html

@@ -65,7 +65,7 @@
 
         expect(markdownLinks[0].getAttribute('href')).toBe('https://aka.ms/claim');
 
-        const claimInterpreterElement = pageElements.activities()[0].querySelector('.webchat__activity-status__originator');
+        const claimInterpreterElement = pageElements.activities()[0].querySelector('.activity-status__originator');
 
         expect(claimInterpreterElement).toHaveProperty('tagName', 'SPAN');
         expect(claimInterpreterElement).toHaveProperty('textContent', 'Surfaced with Azure OpenAI');

packages/component/src/ActivityStatus/ActivityStatus.module.css

@@ -0,0 +1,31 @@
+:global(.webchat) .activity-status {
+  color: var(--webchat__color--timestamp);
+  font-family: var(--webchat__font--primary);
+  font-size: var(--webchat__font-size--small);
+  margin-block-start: calc(var(--webchat__padding--regular) / 2);
+
+  &.activity-status--slotted {
+    display: inline-flex;
+    gap: 4px;
+  }
+}
+
+:global(.webchat) .activity-status-slot {
+  display: contents;
+
+  &:not(:first-child)::before {
+    content: '|';
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+:global(.webchat) .activity-status__originator {
+  align-items: center;
+
+  &.activity-status__originator--has-link {
+    color: var(--webchat__color--accent);
+  }
+}

packages/component/src/ActivityStatus/OthersActivityStatus.tsx

@@ -1,4 +1,5 @@
 import { warnOnce } from '@msinternal/botframework-webchat-base/utils';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import {
   getOrgSchemaMessage,
@@ -7,27 +8,28 @@ import {
   parseClaim,
   type WebChatActivity
 } from 'botframework-webchat-core';
-import classNames from 'classnames';
+import cx from 'classnames';
 import React, { memo, useMemo } from 'react';
 
 import ActivityFeedback from '../ActivityFeedback/ActivityFeedback';
-import useStyleSet from '../hooks/useStyleSet';
 import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes';
 import Originator from './private/Originator';
 import StatusSlot from './StatusSlot';
 import Timestamp from './Timestamp';
 
+import styles from './ActivityStatus.module.css';
+
 const { useStyleOptions } = hooks;
 
-type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined }>;
+type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined; slotted?: boolean }>;
 
 const warnRootLevelThings = warnOnce(
   'Root-level things are being deprecated, please relate all things to `entities[@id=""]` instead. This feature will be removed in 2025-03-06.'
 );
 
-const OthersActivityStatus = memo(({ activity, className }: Props) => {
+const OthersActivityStatus = memo(({ activity, className, slotted }: Props) => {
   const [{ feedbackActionsPlacement }] = useStyleOptions();
-  const [{ sendStatus }] = useStyleSet();
+  const classNames = useStyles(styles);
   const { timestamp } = activity;
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
 
@@ -60,7 +62,9 @@ const OthersActivityStatus = memo(({ activity, className }: Props) => {
   }, [graph, messageThing]);
 
   return (
-    <span className={classNames('webchat__activity-status', className, sendStatus + '')}>
+    <span
+      className={cx(classNames['activity-status'], { [classNames['activity-status--slotted']]: slotted }, className)}
+    >
       {timestamp && (
         <StatusSlot>
           <Timestamp key="timestamp" timestamp={timestamp} />

packages/component/src/ActivityStatus/SelfActivityStatus.tsx

@@ -1,19 +1,21 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { type WebChatActivity } from 'botframework-webchat-core';
-import classNames from 'classnames';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
 import Timestamp from './Timestamp';
-import useStyleSet from '../hooks/useStyleSet';
 
-type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined }>;
+import styleClassNames from './ActivityStatus.module.css';
 
-const SelftActivityStatus = memo(({ activity, className }: Props) => {
-  const [{ sendStatus }] = useStyleSet();
+type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined; slotted?: boolean }>;
+
+const SelftActivityStatus = memo(({ activity, className, slotted }: Props) => {
+  const classNames = useStyles(styleClassNames);
   const { timestamp } = activity;
 
   return timestamp ? (
     <span
-      className={classNames('webchat__activity-status', 'webchat__activity-status--self', className, sendStatus + '')}
+      className={cx(classNames['activity-status'], { [classNames['activity-status--slotted']]: slotted }, className)}
     >
       <Timestamp timestamp={timestamp} />
     </span>

packages/component/src/ActivityStatus/SendStatus/SendStatus.tsx

@@ -1,14 +1,15 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo, useCallback } from 'react';
 import { any, literal, object, pipe, readonly, union, type InferInput } from 'valibot';
 
 import useFocus from '../../hooks/useFocus';
-import useStyleSet from '../../hooks/useStyleSet';
 import { SENDING, SEND_FAILED, SENT } from '../../types/internal/SendStatus';
 import SendFailedRetry from './private/SendFailedRetry';
 
+import styles from '../ActivityStatus.module.css';
+
 const { useLocalizer, usePostActivity } = hooks;
 
 const sendStatusPropsSchema = pipe(
@@ -24,10 +25,10 @@ type SendStatusProps = InferInput<typeof sendStatusPropsSchema>;
 function SendStatus(props: SendStatusProps) {
   const { activity, sendStatus } = validateProps(sendStatusPropsSchema, props);
 
-  const [{ sendStatus: sendStatusStyleSet }] = useStyleSet();
   const focus = useFocus();
   const localize = useLocalizer();
   const postActivity = usePostActivity();
+  const classNames = useStyles(styles);
 
   const handleRetryClick = useCallback(() => {
     postActivity(activity);
@@ -40,7 +41,7 @@ function SendStatus(props: SendStatusProps) {
 
   return (
     <React.Fragment>
-      <span className={classNames('webchat__activity-status', 'webchat__activity-status--sending', sendStatusStyleSet)}>
+      <span className={classNames['activity-status']}>
         {sendStatus === SENDING ? (
           sendingText
         ) : sendStatus === SEND_FAILED ? (

packages/component/src/ActivityStatus/StatusSlot.tsx

@@ -1,11 +1,16 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo, ReactNode } from 'react';
-import classNames from 'classnames';
+import cx from 'classnames';
+
+import styles from './ActivityStatus.module.css';
 
 type Props = Readonly<{ className?: string; children?: ReactNode | undefined }>;
 
-const StatusSlot = ({ children, className }: Props) => (
-  <span className={classNames('webchat__activity-status-slot', className)}>{children}</span>
-);
+const StatusSlot = ({ children, className }: Props) => {
+  const classNames = useStyles(styles);
+
+  return <span className={cx(classNames['activity-status-slot'], className)}>{children}</span>;
+};
 
 StatusSlot.displayName = 'StatusSlot';
 

packages/component/src/ActivityStatus/private/Originator.tsx

@@ -1,10 +1,14 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { type OrgSchemaProject } from 'botframework-webchat-core';
+import cx from 'classnames';
 import React, { memo } from 'react';
 import { custom, object, optional, pipe, readonly, safeParse, string, type InferInput } from 'valibot';
 
 import useSanitizeHrefCallback from '../../hooks/internal/useSanitizeHrefCallback';
 
+import styles from '../ActivityStatus.module.css';
+
 const originatorPropsSchema = pipe(
   object({
     // TODO: [P1] We should build this schema into `OrgSchemaProject` instead, or build a Schema.org query library.
@@ -33,6 +37,7 @@ const Originator = memo(function Originator(props: OriginatorProps) {
   } = validateProps(originatorPropsSchema, props);
 
   const sanitizeHref = useSanitizeHrefCallback();
+  const classNames = useStyles(styles);
 
   const { sanitizedHref } = sanitizeHref(url);
   const text = slogan || name;
@@ -41,15 +46,15 @@ const Originator = memo(function Originator(props: OriginatorProps) {
     // Link is sanitized.
     // eslint-disable-next-line react/forbid-elements
     <a
-      className="webchat__activity-status__originator webchat__activity-status__originator--has-link"
+      className={cx(classNames['activity-status__originator'], classNames['activity-status__originator--has-link'])}
       href={sanitizedHref}
       rel="noopener noreferrer"
       target="_blank"
     >
       {text}
     </a>
   ) : (
-    <span className="webchat__activity-status__originator">{text}</span>
+    <span className={classNames['activity-status__originator']}>{text}</span>
   );
 });
 

packages/component/src/Middleware/ActivityStatus/createTimestampMiddleware.tsx

@@ -20,9 +20,9 @@ export default function createTimestampMiddleware(): ActivityStatusMiddleware {
         // If "hideTimestamp" is set, we will not render the visual timestamp. But continue to render the screen reader only version.
         return <AbsoluteTime hide={true} value={activity.timestamp} />;
       } else if (activity.from.role === 'bot') {
-        return <OthersActivityStatus activity={activity} className={'webchat__activity-status--slotted'} />;
+        return <OthersActivityStatus activity={activity} slotted={true} />;
       }
 
-      return <SelfActivityStatus activity={activity} className={'webchat__activity-status--slotted'} />;
+      return <SelfActivityStatus activity={activity} slotted={true} />;
     };
 }

packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css

@@ -746,7 +746,7 @@
       max-width: unset;
     }
 
-    :global(.webchat__activity-status) {
+    :global(.activity-status) {
       margin: 0 0 var(--webchat-spacingHorizontalXXS);
     }