feat(UserFeedback): updated compact style and added privacy statement

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx

@@ -7,8 +7,10 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
   const [hasCloseButton, setHasCloseButton] = useState(false);
   const [hasTextArea, setHasTextArea] = useState(false);
   const [hasChildren, setHasChildren] = useState(false);
+  const [hasPrivacyStatement, setHasPrivacyStatement] = useState(false);
 
-  const children = <>Do not share any personal or other sensitive information in your feedback.</>;
+  const children = <>This is additional content.</>;
+  const privacyStatement = 'Do not share any personal or other sensitive information in your feedback.';
 
   return (
     <>
@@ -33,6 +35,15 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
               label="Has additional content"
               id="has-children"
             />
+            <Checkbox
+              isChecked={hasPrivacyStatement}
+              onChange={() => {
+                setHasPrivacyStatement(!hasPrivacyStatement);
+              }}
+              name="feedback-card-with-privacy"
+              label="Has privacy statement"
+              id="has-privacy"
+            />
           </FormGroup>
         </FlexItem>
         <FlexItem>
@@ -51,6 +62,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
                 alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
               hasTextArea,
               children: hasChildren ? children : undefined,
+              privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
               // eslint-disable-next-line no-console
               onClose: () => console.log('closed feedback form'),
               focusOnLoad: false
@@ -73,6 +85,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
                 alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
               hasTextArea,
               children: hasChildren ? children : undefined,
+              privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
               // eslint-disable-next-line no-console
               onClose: () => console.log('closed feedback form'),
               focusOnLoad: false

packages/module/src/Message/QuickResponse/QuickResponse.scss

@@ -1,6 +1,8 @@
 .pf-chatbot__message-quick-response {
   .pf-v6-c-label {
-    --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+    &:not(.pf-m-compact) {
+      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+    }
 
     @media screen and (min-width: 401px) and (max-width: 600px) {
       --pf-v6-c-label__text--MaxWidth: 20ch;

packages/module/src/Message/UserFeedback/UserFeedback.scss

@@ -51,10 +51,32 @@
   font-weight: initial;
 }
 
+// Privacy statement
+.pf-chatbot__feedback-card-privacy {
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+  line-height: var(--pf-t--global--font--line-height--body);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 // Compact styles
 .pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
+  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--child--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+
   .pf-chatbot__feedback-card-form.pf-m-compact {
-    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
+    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--sm);
+
+    .pf-v6-c-form__group.pf-m-action {
+      margin-block-start: var(--pf-t--global--spacer--sm);
+    }
+
+    .pf-v6-c-form-control {
+      font-size: var(--pf-t--global--font--size--body--sm);
+    }
   }
 }
 

packages/module/src/Message/UserFeedback/UserFeedback.tsx

@@ -74,6 +74,8 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   textAreaProps?: TextAreaProps;
   /** Additional props passed to action group */
   actionGroupProps?: ActionGroupProps;
+  /** Optional privacy statement text displayed under text area */
+  privacyStatement?: string;
 }
 
 const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
@@ -102,6 +104,7 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   textAreaProps,
   actionGroupProps,
   submitButtonProps,
+  privacyStatement,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = useState<string>();
@@ -139,21 +142,28 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
               />
             )}
             {hasTextArea && (
-              <TextArea
-                value={value}
-                onChange={(_event, value) => {
-                  setValue(value);
-                  onTextAreaChange && onTextAreaChange(_event, value);
-                }}
-                placeholder={textAreaPlaceholder}
-                aria-label={textAreaAriaLabel}
-                resizeOrientation="vertical"
-                {...textAreaProps}
-              />
+              <>
+                <TextArea
+                  value={value}
+                  onChange={(_event, value) => {
+                    setValue(value);
+                    onTextAreaChange && onTextAreaChange(_event, value);
+                  }}
+                  placeholder={textAreaPlaceholder}
+                  aria-label={textAreaAriaLabel}
+                  resizeOrientation="vertical"
+                  {...textAreaProps}
+                />
+              </>
             )}
+            {privacyStatement && <div className="pf-chatbot__feedback-card-privacy">{privacyStatement}</div>}
             {children}
             <ActionGroup {...actionGroupProps}>
-              <Button onClick={() => onSubmit(selectedResponse, value)} {...submitButtonProps}>
+              <Button
+                onClick={() => onSubmit(selectedResponse, value)}
+                size={isCompact ? 'sm' : undefined}
+                {...submitButtonProps}
+              >
                 {submitWord}
               </Button>
             </ActionGroup>