Skip to content

Commit 9037240

Browse files
thatblindgeyethatblindgeye
authored
Merge pull request #771 from thatblindgeye/iss769_feedbackCompact
feat(UserFeedback): updated compact style and added privacy statement
2 parents 1663e56 + 6e1fed0 commit 9037240

File tree

4 files changed

+67
-15
lines changed

4 files changed

+67
-15
lines changed

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
77
const [hasCloseButton, setHasCloseButton] = useState(false);
88
const [hasTextArea, setHasTextArea] = useState(false);
99
const [hasChildren, setHasChildren] = useState(false);
10+
const [hasPrivacyStatement, setHasPrivacyStatement] = useState(false);
1011

11-
const children = <>Do not share any personal or other sensitive information in your feedback.</>;
12+
const children = <>This is additional content.</>;
13+
const privacyStatement = 'Do not share any personal or other sensitive information in your feedback.';
1214

1315
return (
1416
<>
@@ -33,6 +35,15 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
3335
label="Has additional content"
3436
id="has-children"
3537
/>
38+
<Checkbox
39+
isChecked={hasPrivacyStatement}
40+
onChange={() => {
41+
setHasPrivacyStatement(!hasPrivacyStatement);
42+
}}
43+
name="feedback-card-with-privacy"
44+
label="Has privacy statement"
45+
id="has-privacy"
46+
/>
3647
</FormGroup>
3748
</FlexItem>
3849
<FlexItem>
@@ -51,6 +62,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
5162
alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
5263
hasTextArea,
5364
children: hasChildren ? children : undefined,
65+
privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
5466
// eslint-disable-next-line no-console
5567
onClose: () => console.log('closed feedback form'),
5668
focusOnLoad: false
@@ -73,6 +85,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
7385
alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
7486
hasTextArea,
7587
children: hasChildren ? children : undefined,
88+
privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
7689
// eslint-disable-next-line no-console
7790
onClose: () => console.log('closed feedback form'),
7891
focusOnLoad: false

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
.pf-chatbot__message-quick-response {
22
.pf-v6-c-label {
3-
--pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
3+
&:not(.pf-m-compact) {
4+
--pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
5+
}
46

57
@media screen and (min-width: 401px) and (max-width: 600px) {
68
--pf-v6-c-label__text--MaxWidth: 20ch;

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@
3636
}
3737

3838
// feedback card
39+
.pf-chatbot__feedback-card-complete-header {
40+
.pf-v6-c-card__actions {
41+
--pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--xl) * -1);
42+
}
43+
}
3944
.pf-chatbot__feedback-card-title {
4045
font-family: var(--pf-t--global--font--family--heading);
4146
font-size: var(--pf-t--global--font--size--md);
@@ -51,10 +56,32 @@
5156
font-weight: initial;
5257
}
5358

59+
// Privacy statement
60+
.pf-chatbot__feedback-card-privacy {
61+
font-size: var(--pf-t--global--font--size--body--sm);
62+
font-weight: var(--pf-t--global--font--weight--body--default);
63+
line-height: var(--pf-t--global--font--line-height--body);
64+
color: var(--pf-t--global--text--color--subtle);
65+
}
66+
5467
// Compact styles
5568
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
69+
--pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md);
70+
--pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--md);
71+
--pf-v6-c-card--child--PaddingInlineStart: var(--pf-t--global--spacer--md);
72+
--pf-v6-c-card--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
73+
--pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
74+
5675
.pf-chatbot__feedback-card-form.pf-m-compact {
57-
--pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
76+
--pf-v6-c-form--GridGap: var(--pf-t--global--spacer--sm);
77+
78+
.pf-v6-c-form__group.pf-m-action {
79+
margin-block-start: var(--pf-t--global--spacer--sm);
80+
}
81+
82+
.pf-v6-c-form-control {
83+
font-size: var(--pf-t--global--font--size--body--sm);
84+
}
5885
}
5986
}
6087

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

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
7474
textAreaProps?: TextAreaProps;
7575
/** Additional props passed to action group */
7676
actionGroupProps?: ActionGroupProps;
77+
/** Optional privacy statement text displayed under text area */
78+
privacyStatement?: string;
7779
}
7880

7981
const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
@@ -102,6 +104,7 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
102104
textAreaProps,
103105
actionGroupProps,
104106
submitButtonProps,
107+
privacyStatement,
105108
...props
106109
}: UserFeedbackProps) => {
107110
const [selectedResponse, setSelectedResponse] = useState<string>();
@@ -139,21 +142,28 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
139142
/>
140143
)}
141144
{hasTextArea && (
142-
<TextArea
143-
value={value}
144-
onChange={(_event, value) => {
145-
setValue(value);
146-
onTextAreaChange && onTextAreaChange(_event, value);
147-
}}
148-
placeholder={textAreaPlaceholder}
149-
aria-label={textAreaAriaLabel}
150-
resizeOrientation="vertical"
151-
{...textAreaProps}
152-
/>
145+
<>
146+
<TextArea
147+
value={value}
148+
onChange={(_event, value) => {
149+
setValue(value);
150+
onTextAreaChange && onTextAreaChange(_event, value);
151+
}}
152+
placeholder={textAreaPlaceholder}
153+
aria-label={textAreaAriaLabel}
154+
resizeOrientation="vertical"
155+
{...textAreaProps}
156+
/>
157+
</>
153158
)}
159+
{privacyStatement && <div className="pf-chatbot__feedback-card-privacy">{privacyStatement}</div>}
154160
{children}
155161
<ActionGroup {...actionGroupProps}>
156-
<Button onClick={() => onSubmit(selectedResponse, value)} {...submitButtonProps}>
162+
<Button
163+
onClick={() => onSubmit(selectedResponse, value)}
164+
size={isCompact ? 'sm' : undefined}
165+
{...submitButtonProps}
166+
>
157167
{submitWord}
158168
</Button>
159169
</ActionGroup>

0 commit comments

Comments
 (0)