From 1e8846aeb4845e91d95fe026488e4bbfe6ee1ab3 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 21 Nov 2025 13:20:57 -0500 Subject: [PATCH 1/5] feat(UserFeedback): updated compact style and added privacy statement --- .../examples/Messages/MessageWithFeedback.tsx | 16 ++++++++- .../Message/QuickResponse/QuickResponse.scss | 4 ++- .../Message/UserFeedback/UserFeedback.scss | 28 ++++++++++++++- .../src/Message/UserFeedback/UserFeedback.tsx | 34 ++++++++++++------- 4 files changed, 67 insertions(+), 15 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx index bb78c2229..38676fe8c 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx @@ -7,8 +7,11 @@ 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 privacyStatement = + 'By submitting this, you agree to share this feedback. Do not include any personal or confidential information.'; return ( <> @@ -33,6 +36,15 @@ export const MessageWithFeedbackExample: FunctionComponent = () => { label="Has additional content" id="has-children" /> + { + setHasPrivacyStatement(!hasPrivacyStatement); + }} + name="feedback-card-with-privacy" + label="Has privacy statement" + id="has-privacy" + /> @@ -40,7 +52,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => { name="Bot" role="bot" avatar={patternflyAvatar} - content="This is a message with the feedback card:" + content="This is a message with the feedback card lol haaa:" userFeedbackForm={{ quickResponses: [ { id: '1', content: 'Helpful information' }, @@ -51,6 +63,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 +86,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 diff --git a/packages/module/src/Message/QuickResponse/QuickResponse.scss b/packages/module/src/Message/QuickResponse/QuickResponse.scss index ac0ab5f2f..15d03867a 100644 --- a/packages/module/src/Message/QuickResponse/QuickResponse.scss +++ b/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; diff --git a/packages/module/src/Message/UserFeedback/UserFeedback.scss b/packages/module/src/Message/UserFeedback/UserFeedback.scss index 4e340cc9f..20bb79e06 100644 --- a/packages/module/src/Message/UserFeedback/UserFeedback.scss +++ b/packages/module/src/Message/UserFeedback/UserFeedback.scss @@ -51,10 +51,36 @@ 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); + } + } + + .pf-chatbot__feedback-card-privacy { + // margin-block-start: calc(var(--pf-t--global--spacer--xs) * -1); TODO } } diff --git a/packages/module/src/Message/UserFeedback/UserFeedback.tsx b/packages/module/src/Message/UserFeedback/UserFeedback.tsx index 3ac4885b3..f71854b99 100644 --- a/packages/module/src/Message/UserFeedback/UserFeedback.tsx +++ b/packages/module/src/Message/UserFeedback/UserFeedback.tsx @@ -74,6 +74,8 @@ export interface UserFeedbackProps extends Omit, OUIAProp textAreaProps?: TextAreaProps; /** Additional props passed to action group */ actionGroupProps?: ActionGroupProps; + /** Optional privacy statement text displayed under text area */ + privacyStatement?: string; } const UserFeedback: FunctionComponent = ({ @@ -102,6 +104,7 @@ const UserFeedback: FunctionComponent = ({ textAreaProps, actionGroupProps, submitButtonProps, + privacyStatement, ...props }: UserFeedbackProps) => { const [selectedResponse, setSelectedResponse] = useState(); @@ -139,21 +142,28 @@ const UserFeedback: FunctionComponent = ({ /> )} {hasTextArea && ( -