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..39ec8a6ab 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,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" /> + { + setHasPrivacyStatement(!hasPrivacyStatement); + }} + name="feedback-card-with-privacy" + label="Has privacy statement" + id="has-privacy" + /> @@ -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 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..d36d6d58d 100644 --- a/packages/module/src/Message/UserFeedback/UserFeedback.scss +++ b/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); + } } } 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 && ( -