fixes

Author: lexi-taylor

packages/component/src/Activity/ActivityFeedback.tsx

@@ -60,9 +60,16 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
 
   const feedbackActions = useMemo<ReadonlySet<OrgSchemaAction>>(() => {
     try {
-      const reactActions = (messageThing?.potentialAction || []).filter(
-        ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction'
-      );
+      const reactActions = (messageThing?.potentialAction || [])
+        .filter(({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction')
+        .map(action =>
+          Object.assign({}, action, {
+            actionStatus:
+              action['@type'] === selectedAction?.['@type'] && feedbackSubmitted
+                ? 'CompletedActionStatus'
+                : action.actionStatus
+          })
+        );
 
       if (reactActions.length) {
         return Object.freeze(new Set(reactActions));
@@ -77,7 +84,7 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
       // Intentionally left blank.
     }
     return Object.freeze(new Set([] as OrgSchemaAction[]));
-  }, [graph, messageThing?.potentialAction]);
+  }, [feedbackSubmitted, graph, messageThing?.potentialAction, selectedAction]);
 
   const handleFeedbackActionClick = useCallback(
     (action: OrgSchemaAction) => setSelectedAction(action === selectedAction ? undefined : action),
@@ -90,13 +97,8 @@ function ActivityFeedback({ activity }: ActivityFeedbackProps) {
         setSelectedAction(undefined);
       }
       setFeedbackSubmitted(wasFeedbackSubmitted);
-      setSelectedAction(
-        Object.assign({}, selectedAction, {
-          actionStatus: 'CompletedActionStatus'
-        })
-      );
     },
-    [selectedAction, setFeedbackSubmitted, setSelectedAction]
+    [setFeedbackSubmitted, setSelectedAction]
   );
 
   const FeedbackComponent = useMemo(

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

@@ -1,5 +1,4 @@
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
 import { type OrgSchemaAction } from 'botframework-webchat-core';
 import React, { Fragment, memo, useEffect, useMemo, type PropsWithChildren } from 'react';
 import { useRefFrom } from 'use-ref-from';
@@ -48,23 +47,22 @@ const Feedback = memo(({ actions, className, isFeedbackFormSupported, onActionCl
 
   const actionProps = useMemo(
     () =>
-      [...actions].some(action => action.actionStatus === 'CompletedActionStatus')
+      [...actions].some(action => action.actionStatus === 'CompletedActionStatus') ||
+      selectedAction?.actionStatus === 'CompletedActionStatus'
         ? {
             disabled: true,
             title: localize('VOTE_COMPLETE_ALT')
           }
         : undefined,
-    [actions, localize]
+    [actions, localize, selectedAction]
   );
 
   return (
     <Fragment>
       {[...actions].map((action, index) => (
         <FeedbackVoteButton
           action={action}
-          className={classNames(className, {
-            'webchat__thumb-button--is-submitted': action['@type'] === 'CompletedActionStatus'
-          })}
+          className={className}
           key={action['@id'] || index}
           onClick={onActionClick}
           pressed={

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

@@ -29,14 +29,17 @@ export default function () {
           height: '1em',
           width: '1em'
         },
-        '&:hover, &:active, &.webchat__thumb-button--is-pressed, .webchat__thumb-button--is-submitted': {
+        '&:hover, &:active, &.webchat__thumb-button--is-pressed': {
           background: 'transparent',
-          color: CSSTokens.ColorAccent
+          color: CSSTokens.ColorAccent,
+          '&:is(:hover, :focus-visible, :active) > .webchat__tooltip': {
+            visibility: 'visible'
+          }
         },
-
-        ':not(.webchat__thumb-button--is-submitted)[aria-disabled="true"]': {
-          color: CSSTokens.ColorSubtle
-        }
+        ':not(.webchat__thumb-button--is-pressed)[aria-disabled="true"]:is(:hover, :focus-visible, :active) > .webchat__tooltip':
+          {
+            visibility: 'hidden'
+          }
       },
 
       '&:active': {

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

@@ -45,15 +45,15 @@ export default () => ({
     '&.webchat__tooltip--block-start': {
       insetBlockEnd: 'calc(100% + 7px)',
       insetInlineStart: '50%',
-      transform: 'translate(-50%, 0)',
+      transform: 'translate(-20%, 0)',
 
       '&::after': {
         border: '1px solid var(--webchat__tooltip-background)',
         borderBottomLeftRadius: '2px',
         clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',
         height: 'var(--webchat__tooltip-tip-size)',
         insetBlockStart: 'calc(100% - 6px)',
-        insetInlineStart: 'calc(50% - var(--webchat__tooltip-tip-size) / 2)',
+        insetInlineStart: 'calc(20% - var(--webchat__tooltip-tip-size) / 2)',
         transform: 'rotate(-45deg)',
         width: 'var(--webchat__tooltip-tip-size)'
       }

packages/fluent-theme/src/components/theme/Theme.module.css

@@ -609,7 +609,7 @@
     outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
   }
 
-  :not(.webchat__thumb-button--is-submitted)[aria-disabled='true'] {
+  &[aria-disabled='true'] {
     color: var(--webchat-colorNeutralForegroundDisabled);
   }
 }