suggestions

Author: lexi-taylor

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

@@ -5,7 +5,7 @@ import { useRefFrom } from 'use-ref-from';
 
 import useStyleSet from '../../hooks/useStyleSet';
 import testIds from '../../testIds';
-import FeedbackFormDisclaimer from './FeedbackFormDisclaimer';
+import Markdownable from '../../Attachment/Text/private/Markdownable';
 import TextArea from './FeedbackTextArea';
 
 const { useLocalizer, usePostActivity } = hooks;
@@ -70,7 +70,7 @@ function FeedbackForm({ feedbackType, disclaimer, onFeedbackFormButtonClick, rep
 
   return (
     <div>
-      <span className={classNames('webchat__feedback-form__body1', feedbackForm + '')}>
+      <span className={classNames('webchat__feedback-form__body', feedbackForm + '')}>
         {localize('FEEDBACK_FORM_TITLE')}
       </span>
       <form className={classNames('webchat__feedback-form', feedbackForm + '')} onSubmit={handleSubmit}>
@@ -82,7 +82,12 @@ function FeedbackForm({ feedbackType, disclaimer, onFeedbackFormButtonClick, rep
           startRows={3}
           value={userFeedback}
         />
-        {disclaimer && <FeedbackFormDisclaimer disclaimer={disclaimer} />}
+        {disclaimer && (
+          <Markdownable
+            className={classNames('webchat__feedback-form__caption', feedbackForm + '')}
+            text={disclaimer}
+          />
+        )}
         <div className={classNames('webchat__feedback-form__container', feedbackForm + '')}>
           <button className={classNames('webchat__feedback-form__button__submit', feedbackForm + '')} type="submit">
             {localize('FEEDBACK_FORM_SUBMIT_BUTTON_LABEL')}

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

@@ -0,0 +1,26 @@
+import React, { memo, useMemo } from 'react';
+import { useRenderMarkdownAsHTML } from '../../../hooks';
+
+type MarkdownableProps = Readonly<{
+  className?: string | undefined;
+  text: string;
+}>;
+
+function Markdownable({ className, text }: MarkdownableProps) {
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
+
+  const innerHTML = useMemo<Readonly<{ __html: string }> | undefined>(
+    () => Object.freeze({ __html: renderMarkdownAsHTML?.(text) }),
+    [text, renderMarkdownAsHTML]
+  );
+
+  return innerHTML ? (
+    // eslint-disable-next-line react/no-danger
+    <span className={className} dangerouslySetInnerHTML={innerHTML} />
+  ) : (
+    <span className={className}>{text}</span>
+  );
+}
+
+export default memo(Markdownable);
+export { type MarkdownableProps };

packages/component/src/Attachment/Text/private/Markdownable.tsx

@@ -17,15 +17,15 @@ export default function createFeedbackFormStyle() {
       gridTemplateRows: 'auto auto',
       position: 'relative'
     },
-    '&.webchat__feedback-form__body1': {
+    '&.webchat__feedback-form__body': {
       fontFamily: CSSTokens.FontPrimary,
       fontStyle: 'normal',
       fontWeight: 400,
       fontSize: '14px',
       lineHeight: '20px',
       color: '#373435'
     },
-    '&.webchat__feedback-form__caption1': {
+    '&.webchat__feedback-form__caption': {
       fontFamily: CSSTokens.FontPrimary,
       fontStyle: 'normal',
       fontWeight: 400,

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

@@ -630,15 +630,15 @@
 }
 
 /* Feedback Form */
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__body1) {
+:global(.webchat-fluent).theme :global(.webchat__feedback-form__body) {
   font-family: var(--webchat-fontFamilyBase);
   color: var(--webchat-colorNeutralForeground1);
   font-size: var(--webchat-fontSizeBase300);
   font-weight: var(--webchat-fontWeightRegular);
   line-height: var(--webchat-lineHeightBase300);
 }
 
-:global(.webchat-fluent).theme :global(.webchat__feedback-form__caption1) {
+:global(.webchat-fluent).theme :global(.webchat__feedback-form__caption) {
   font-family: var(--webchat-fontFamilyBase);
   color: var(--webchat-colorNeutralForeground1);
   font-size: var(--webchat-fontSizeBase100);