Polish and fix tests

Author: OEvgeny

__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-2-snap.png

@@ -1,11 +1,12 @@
 import { onErrorResumeNext, parseVoteAction, type OrgSchemaAction } from 'botframework-webchat-core';
+import cx from 'classnames';
 import React, { memo, useCallback, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 import ThumbsButton from './ThumbButton';
 
 type Props = Readonly<{
-  className?: string;
+  className?: string | undefined;
   action: OrgSchemaAction;
   onClick?: (action: OrgSchemaAction) => void;
   pressed: boolean;
@@ -29,7 +30,16 @@ const FeedbackVoteButton = memo(({ action, className, onClick, pressed }: Props)
 
   const handleClick = useCallback(() => onClickRef.current?.(voteActionRef.current), [onClickRef, voteActionRef]);
 
-  return <ThumbsButton className={className} direction={direction} onClick={handleClick} pressed={pressed} />;
+  return (
+    <ThumbsButton
+      className={cx(className, {
+        'webchat__thumb-button--is-complete': action.actionStatus === 'CompletedActionStatus'
+      })}
+      direction={direction}
+      onClick={handleClick}
+      pressed={pressed}
+    />
+  );
 });
 
 FeedbackVoteButton.displayName = 'FeedbackVoteButton';

__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-3-snap.png

@@ -16,13 +16,13 @@ import Timestamp from './Timestamp';
 import ActivityFeedback from '../Activity/ActivityFeedback';
 import StatusSlot from './StatusSlot';
 
-type Props = Readonly<{ activity: WebChatActivity }>;
+type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined }>;
 
 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 }: Props) => {
+const OthersActivityStatus = memo(({ activity, className }: Props) => {
   const [{ sendStatus }] = useStyleSet();
   const { timestamp } = activity;
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
@@ -56,13 +56,13 @@ const OthersActivityStatus = memo(({ activity }: Props) => {
   }, [graph, messageThing]);
 
   return (
-    <div className={classNames('webchat__activity-status', 'webchat__activity-status--slotted', sendStatus + '')}>
+    <span className={classNames('webchat__activity-status', className, sendStatus + '')}>
       <StatusSlot>{timestamp && <Timestamp key="timestamp" timestamp={timestamp} />}</StatusSlot>
       <StatusSlot>{claimInterpreter && <Originator key="originator" project={claimInterpreter} />}</StatusSlot>
       <StatusSlot>
         <ActivityFeedback activity={activity} key="feedback" placement="activity-status" />
       </StatusSlot>
-    </div>
+    </span>
   );
 });
 

__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-4-snap.png

@@ -5,16 +5,18 @@ import React, { memo } from 'react';
 import Timestamp from './Timestamp';
 import useStyleSet from '../hooks/useStyleSet';
 
-type Props = Readonly<{ activity: WebChatActivity }>;
+type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined }>;
 
-const SelftActivityStatus = memo(({ activity }: Props) => {
+const SelftActivityStatus = memo(({ activity, className }: Props) => {
   const [{ sendStatus }] = useStyleSet();
   const { timestamp } = activity;
 
   return timestamp ? (
-    <div className={classNames('webchat__activity-status', 'webchat__activity-status--self', sendStatus + '')}>
+    <span
+      className={classNames('webchat__activity-status', 'webchat__activity-status--self', className, sendStatus + '')}
+    >
       <Timestamp timestamp={timestamp} />
-    </div>
+    </span>
   ) : null;
 });
 

packages/component/src/Activity/private/VoteButton.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 type Props = Readonly<{ className?: string; children?: ReactNode | undefined }>;
 
 const StatusSlot = ({ children, className }: Props) => (
-  <div className={classNames('webchat__activity-status-slot', className)}>{children}</div>
+  <span className={classNames('webchat__activity-status-slot', className)}>{children}</span>
 );
 
 StatusSlot.displayName = 'StatusSlot';

packages/component/src/ActivityStatus/OthersActivityStatus.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} />;
+        return <OthersActivityStatus activity={activity} className={'webchat__activity-status--slotted'} />;
       }
 
-      return <SelfActivityStatus activity={activity} />;
+      return <SelfActivityStatus activity={activity} className={'webchat__activity-status--slotted'} />;
     };
 }

packages/component/src/ActivityStatus/SelfActivityStatus.tsx

@@ -15,11 +15,12 @@ export default function createSendStatusStyle() {
     },
 
     '& .webchat__activity-status-slot': {
+      display: 'contents',
+
       '&:not(:first-child)::before': {
-        content: `"|"`,
-        marginRight: '4px',
-        display: 'inline-block'
+        content: `"|"`
       },
+
       '&:empty': {
         display: 'none'
       }

packages/component/src/ActivityStatus/StatusSlot.tsx

@@ -4,12 +4,11 @@ export default function () {
   return {
     '&.webchat__thumb-button': {
       appearance: 'none',
-      background: 'Transparent',
+      background: 'transparent',
       border: 0,
       borderRadius: 2,
       boxSizing: 'content-box',
       height: 16,
-      fontSize: '14px',
       /* The Fluent icon is larger than the button. We need to clip it.
       Without clipping, hover effect will appear on the edge of the button but not possible to click. */
       overflow: ['hidden', 'clip'],
@@ -21,14 +20,16 @@ export default function () {
         border: '1px solid transparent',
         borderRadius: '4px',
         display: 'flex',
-        fontSize: '20px',
         height: '20px',
         justifyContent: 'center',
         padding: '5px',
         width: '20px',
 
         '& .webchat__thumb-button__image': {
-          color: 'currentColor'
+          color: 'currentColor',
+          fontSize: '20px',
+          height: '1em',
+          width: '1em'
         },
 
         '&:hover, &:active, &.webchat__thumb-button--is-pressed': {
@@ -47,8 +48,7 @@ export default function () {
 
       '& .webchat__thumb-button__image': {
         color: CSSTokens.ColorAccent,
-        width: '1em',
-        height: '1em'
+        width: 14
       },
 
       '&:hover .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled)': {

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

@@ -33,7 +33,6 @@ import createSendBoxButtonStyle from './StyleSet/SendBoxButton';
 import createSendBoxStyle from './StyleSet/SendBox';
 import createSendBoxTextBoxStyle from './StyleSet/SendBoxTextBox';
 import createSendStatusStyle from './StyleSet/SendStatus';
-import createSlottedActivityStatusStyle from './StyleSet/SlottedActivityStatus';
 import createSpinnerAnimationStyle from './StyleSet/SpinnerAnimation';
 import createStackedLayoutStyle from './StyleSet/StackedLayout';
 import createSuggestedActionsStyle from './StyleSet/SuggestedActions';
@@ -111,7 +110,6 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     modalDialog: createModalDialogStyle(),
     renderMarkdown: createRenderMarkdownStyle(),
     sendStatus: createSendStatusStyle(),
-    slottedActivityStatus: createSlottedActivityStatusStyle(),
     textContent: createTextContentStyle(),
     thumbButton: createThumbButtonStyle(),
     viewCodeDialog: createViewCodeDialogStyle()

packages/component/src/Styles/StyleSet/SendStatus.ts

@@ -598,4 +598,8 @@
   &:focus-visible {
     outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
   }
+
+  &:global(.webchat__thumb-button--is-complete) {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+  }
 }