CSS Modules: migrate ActivityFeedback components

Author: OEvgeny

packages/component/src/ActivityFeedback/private/ThumbButton.module.css

@@ -0,0 +1,91 @@
+:global(.webchat) .thumb-button {
+  align-items: center;
+  border-radius: 2px;
+  box-sizing: content-box;
+  display: grid;
+  grid-template-areas: 'main';
+  height: 16px;
+  width: 16px;
+
+  .thumb-button__input {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    grid-area: main;
+    height: 16px;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    width: 16px;
+
+    &:active {
+      background: #edebe9;
+    }
+  }
+
+  &:has(.thumb-button__input:focus-visible) {
+    outline: solid 1px #605e5c; /* <input> has opacity of 0, we need to set the outline in the container. */
+  }
+
+  .thumb-button__image {
+    color: var(--webchat__color--accent);
+    grid-area: main;
+    justify-self: center; /* Unsure why "justifyContent" doesn't work. */
+    pointer-events: none;
+    visibility: hidden;
+    width: 14px;
+
+    &.thumb-button__image--is-stroked {
+      visibility: unset;
+    }
+  }
+
+  &:has(.thumb-button__input:is(:not([aria-disabled='true']):hover, :checked, [aria-pressed='true'])) {
+    .thumb-button__image {
+      &.thumb-button__image--is-stroked {
+        visibility: hidden;
+      }
+
+      &.thumb-button__image--is-filled {
+        visibility: unset;
+      }
+    }
+  }
+
+  &.thumb-button--large {
+    border: 1px solid transparent;
+    border-radius: 4px;
+    height: 30px;
+    width: 30px;
+
+    .thumb-button__input {
+      background: currentColor;
+      height: 30px;
+      width: 30px;
+    }
+
+    .thumb-button__image {
+      color: currentColor;
+      font-size: 20px;
+      height: 1em;
+      width: 1em;
+    }
+
+    &:has(.thumb-button__input:is(:hover, :active, :checked, [aria-pressed='true'])) .thumb-button__image {
+      color: var(--webchat__color--accent);
+    }
+
+    &:has(.thumb-button__input[aria-disabled='true']) .thumb-button__image {
+      color: var(--webchat__color--subtle);
+    }
+
+    &.thumb-button--has-submitted:has(.thumb-button__input:not(:checked):not([aria-pressed='true']))
+      .thumb-button__tooltip {
+      display: none;
+    }
+
+    &.thumb-button--has-submitted .thumb-button__tooltip {
+      --webchat__tooltip-anchor-inline-start: 20%;
+    }
+  }
+}

packages/component/src/ActivityFeedback/private/ThumbButton.tsx

@@ -1,15 +1,17 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
+import cx from 'classnames';
 import React, { forwardRef, memo, useCallback, useMemo, type ForwardedRef, type KeyboardEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { boolean, function_, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
 
-import useStyleSet from '../../hooks/useStyleSet';
 import testIds from '../../testIds';
 import { Tooltip } from '../../Tooltip';
 import ThumbButtonImage from './ThumbButton.Image';
 
+import styles from './ThumbButton.module.css';
+
 const { useLocalizer } = hooks;
 
 const thumbButtonPropsSchema = pipe(
@@ -36,9 +38,9 @@ function ThumbButton(props: ThumbButtonProps, ref: ForwardedRef<HTMLInputElement
     props
   );
 
-  const [{ thumbButton }] = useStyleSet();
   const localize = useLocalizer();
   const onClickRef = useRefFrom(onClick);
+  const classNames = useStyles(styles);
 
   const buttonTitle = useMemo(
     () => title ?? localize(direction === 'down' ? 'VOTE_DISLIKE_ALT' : 'VOTE_LIKE_ALT'),
@@ -54,25 +56,19 @@ function ThumbButton(props: ThumbButtonProps, ref: ForwardedRef<HTMLInputElement
 
   return (
     <div
-      className={classNames(
-        'webchat__thumb-button',
+      className={cx(
+        classNames['thumb-button'],
         {
-          'webchat__thumb-button--large': size === 'large',
-          'webchat__thumb-button--has-submitted': submitted
+          [classNames['thumb-button--large']]: size === 'large',
+          [classNames['thumb-button--has-submitted']]: submitted
         },
-        className,
-        thumbButton + ''
+        className
       )}
     >
       <input
         aria-disabled={disabled ? 'true' : undefined}
         aria-label={buttonTitle}
-        className={classNames(
-          'webchat__thumb-button__input',
-          { 'webchat__thumb-button__input--is-pressed': pressed },
-          className,
-          thumbButton + ''
-        )}
+        className={cx(classNames['thumb-button__input'], className)}
         data-testid={testIds.feedbackButton}
         name={name}
         onKeyDown={handleKeyDown}
@@ -90,19 +86,15 @@ function ThumbButton(props: ThumbButtonProps, ref: ForwardedRef<HTMLInputElement
             })}
       />
       <ThumbButtonImage
-        className={classNames('webchat__thumb-button__image', 'webchat__thumb-button__image--is-stroked', {
-          'webchat__thumb-button__image--is-down': direction === 'down'
-        })}
+        className={cx(classNames['thumb-button__image'], classNames['thumb-button__image--is-stroked'])}
         direction={direction}
       />
       <ThumbButtonImage
-        className={classNames('webchat__thumb-button__image', 'webchat__thumb-button__image--is-filled', {
-          'webchat__thumb-button__image--is-down': direction === 'down'
-        })}
+        className={cx(classNames['thumb-button__image'], classNames['thumb-button__image--is-filled'])}
         direction={direction}
         filled={true}
       />
-      <Tooltip className="webchat__thumb-button__tooltip">{buttonTitle}</Tooltip>
+      <Tooltip className={classNames['thumb-button__tooltip']}>{buttonTitle}</Tooltip>
     </div>
   );
 }

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

@@ -658,16 +658,17 @@
 }
 
 /* Feedback button */
-:global(.webchat-fluent).theme :global(.webchat__thumb-button) {
-  :global(.webchat__thumb-button__image) {
+:global(.webchat-fluent).theme :global(.thumb-button),
+:global(.webchat-fluent).theme :global(.thumb-button.thumb-button--large) {
+  :global(.thumb-button__image) {
     color: var(--webchat-colorNeutralForeground1);
   }
 
-  &:has(:global(.webchat__thumb-button__input):focus-visible) {
+  &:has(:global(.thumb-button__input):focus-visible) {
     outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
   }
 
-  &:has(:global(.webchat__thumb-button__input)[aria-disabled='true']) :global(.webchat__thumb-button__image) {
+  &:has(:global(.thumb-button__input)[aria-disabled='true']) :global(.thumb-button__image) {
     color: var(--webchat-colorNeutralForegroundDisabled);
   }
 }