Skip to content

Commit 70385fb

Browse files
nicolethoennicolethoen
authored
Merge pull request #520 from rebeccaalpert/feedback
feat(UserFeedback): Add compact versions
2 parents 15f36db + 5abf510 commit 70385fb

File tree

9 files changed

+122
-10
lines changed

9 files changed

+122
-10
lines changed

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,26 @@ export const MessageWithFeedbackExample: React.FunctionComponent = () => {
4040
focusOnLoad: false
4141
}}
4242
/>
43+
<Message
44+
name="Bot"
45+
role="bot"
46+
avatar={patternflyAvatar}
47+
content="This is a compact message with the feedback card:"
48+
userFeedbackForm={{
49+
quickResponses: [
50+
{ id: '1', content: 'Helpful information' },
51+
{ id: '2', content: 'Easy to understand' },
52+
{ id: '3', content: 'Resolved my issue' }
53+
],
54+
onSubmit: (quickResponse, additionalFeedback) =>
55+
alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
56+
hasTextArea,
57+
// eslint-disable-next-line no-console
58+
onClose: () => console.log('closed feedback form'),
59+
focusOnLoad: false
60+
}}
61+
isCompact
62+
/>
4363
</Stack>
4464
<Stack hasGutter>
4565
<FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
@@ -65,6 +85,19 @@ export const MessageWithFeedbackExample: React.FunctionComponent = () => {
6585
focusOnLoad: false
6686
}}
6787
/>
88+
<Message
89+
name="Bot"
90+
role="bot"
91+
avatar={patternflyAvatar}
92+
content="This is a compact thank-you message, which is displayed once the feedback card is submitted:"
93+
// eslint-disable-next-line no-console
94+
userFeedbackComplete={{
95+
// eslint-disable-next-line no-console
96+
onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
97+
focusOnLoad: false
98+
}}
99+
isCompact
100+
/>
68101
</Stack>
69102
</>
70103
);

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,27 @@ describe('Message', () => {
334334
await userEvent.click(quickResponse);
335335
expect(spy).toHaveBeenCalledTimes(1);
336336
});
337+
it('should be able to handle isCompact', async () => {
338+
render(
339+
<Message
340+
avatar="./img"
341+
role="bot"
342+
name="Bot"
343+
content="Hi"
344+
quickResponses={[
345+
{
346+
id: '1',
347+
content: 'Yes',
348+
onClick: jest.fn(),
349+
className: 'test'
350+
}
351+
]}
352+
isCompact
353+
/>
354+
);
355+
const parent = screen.getByRole('button', { name: /Yes/i }).parentNode;
356+
expect(parent).toHaveClass('pf-m-compact');
357+
});
337358
it('should be able to show more than 1 quick response', async () => {
338359
const spy = jest.fn();
339360
render(

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
164164
onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
165165
/** Props for edit form */
166166
editFormProps?: FormProps;
167+
/** Sets message to compact styling. */
168+
isCompact?: boolean;
167169
}
168170

169171
export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -201,6 +203,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
201203
onEditUpdate,
202204
onEditCancel,
203205
editFormProps,
206+
isCompact,
204207
...props
205208
}: MessageProps) => {
206209
const [messageText, setMessageText] = React.useState(content);
@@ -349,12 +352,15 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
349352
/>
350353
)}
351354
{!isLoading && actions && <ResponseActions actions={actions} />}
352-
{userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} />}
353-
{userFeedbackComplete && <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} />}
355+
{userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
356+
{userFeedbackComplete && (
357+
<UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
358+
)}
354359
{!isLoading && quickResponses && (
355360
<QuickResponse
356361
quickResponses={quickResponses}
357362
quickResponseContainerProps={quickResponseContainerProps}
363+
isCompact={isCompact}
358364
/>
359365
)}
360366
</div>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,15 @@ export interface QuickResponseProps {
1515
quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
1616
/** Callback when a response is clicked; used in feedback cards */
1717
onSelect?: (id: string) => void;
18+
/** Sets the quick responses to compact styling */
19+
isCompact?: boolean;
1820
}
1921

2022
export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
2123
quickResponses,
2224
quickResponseContainerProps = { numLabels: 5 },
23-
onSelect
25+
onSelect,
26+
isCompact
2427
}: QuickResponseProps) => {
2528
const [selectedQuickResponse, setSelectedQuickResponse] = React.useState<string>();
2629

@@ -42,6 +45,7 @@ export const QuickResponse: React.FunctionComponent<QuickResponseProps> = ({
4245
key={id}
4346
onClick={() => handleQuickResponseClick(id, onClick)}
4447
className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
48+
isCompact={isCompact}
4549
{...props}
4650
>
4751
{content}

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
flex-direction: column;
1212
gap: var(--pf-t--global--spacer--lg);
1313
align-items: center;
14+
text-align: center;
1415
}
1516
.pf-chatbot__feedback-complete-text {
1617
display: flex;
@@ -26,9 +27,6 @@
2627
align-items: center;
2728
justify-content: center;
2829
}
29-
.pf-chatbot__feedback-complete-body {
30-
text-align: center;
31-
}
3230
.pf-chatbot__feedback-complete-title {
3331
font-family: var(--pf-t--global--font--family--heading);
3432
font-size: var(--pf-t--global--font--size--lg);
@@ -51,3 +49,26 @@
5149
.pf-chatbot__feedback-card-optional {
5250
font-weight: initial;
5351
}
52+
53+
// Compact styles
54+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
55+
.pf-chatbot__feedback-card-form.pf-m-compact {
56+
--pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
57+
}
58+
}
59+
60+
.pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card.pf-chatbot__feedback-card-complete {
61+
div.pf-chatbot__feedback-complete-body {
62+
gap: var(--pf-t--global--spacer--sm);
63+
}
64+
65+
.pf-chatbot__feedback-complete-image {
66+
width: 40px;
67+
}
68+
69+
.pf-chatbot__feedback-card-complete-empty-header {
70+
.pf-v6-c-card__header:first-child {
71+
--pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--sm);
72+
}
73+
}
74+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,4 +233,17 @@ describe('UserFeedback', () => {
233233
);
234234
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
235235
});
236+
it('should handle isCompact', () => {
237+
render(
238+
<UserFeedback
239+
timestamp="12/12/12"
240+
onClose={jest.fn}
241+
onSubmit={jest.fn}
242+
quickResponses={MOCK_RESPONSES}
243+
data-testid="card"
244+
isCompact
245+
/>
246+
);
247+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
248+
});
236249
});

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
7171
id,
7272
headingLevel: HeadingLevel = 'h1',
7373
focusOnLoad = true,
74+
isCompact,
7475
...props
7576
}: UserFeedbackProps) => {
7677
const [selectedResponse, setSelectedResponse] = React.useState<string>();
@@ -86,7 +87,7 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
8687
return (
8788
/* card does not have ref forwarding; hence wrapper div */
8889
<div ref={divRef} id={id} tabIndex={0} aria-label={title}>
89-
<Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
90+
<Card isCompact={isCompact} className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
9091
<CardHeader
9192
actions={{
9293
actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
@@ -95,12 +96,13 @@ const UserFeedback: React.FunctionComponent<UserFeedbackProps> = ({
9596
<HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
9697
</CardHeader>
9798
<CardBody>
98-
<Form className="pf-chatbot__feedback-card-form">
99+
<Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
99100
{quickResponses && (
100101
<QuickResponse
101102
quickResponses={quickResponses}
102103
quickResponseContainerProps={quickResponseContainerProps}
103104
onSelect={(id) => setSelectedResponse(id)}
105+
isCompact={isCompact}
104106
/>
105107
)}
106108
{hasTextArea && (

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,4 +252,8 @@ describe('UserFeedbackComplete', () => {
252252
render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" focusOnLoad={false} />);
253253
expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
254254
});
255+
it('should handle isCompact', () => {
256+
render(<UserFeedbackComplete timestamp="12/12/12" data-testid="card" isCompact />);
257+
expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
258+
});
255259
});

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
6363
isLiveRegion,
6464
id,
6565
focusOnLoad = true,
66+
isCompact,
6667
...props
6768
}: UserFeedbackCompleteProps) => {
6869
const [timedOut, setTimedOut] = React.useState(false);
@@ -143,8 +144,15 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
143144
aria-label={title}
144145
{...ouiaProps}
145146
>
146-
<Card className={`pf-chatbot__feedback-card ${className ? className : ''}`} {...props}>
147+
<Card
148+
isCompact={isCompact}
149+
className={`pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}`}
150+
{...props}
151+
>
147152
<CardHeader
153+
className={
154+
onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header'
155+
}
148156
actions={
149157
/* eslint-disable indent */
150158
onClose
@@ -200,7 +208,7 @@ const UserFeedbackComplete: React.FunctionComponent<UserFeedbackCompleteProps> =
200208
</div>
201209
<div className="pf-chatbot__feedback-complete-text">
202210
<CardTitle className="pf-chatbot__feedback-complete-title">{title}</CardTitle>
203-
<CardBody className={`pf-chatbot__feedback-complete-body`}>{body}</CardBody>
211+
<CardBody className={`pf-chatbot__feedback-complete-card-body`}>{body}</CardBody>
204212
</div>
205213
</div>
206214
</Card>

0 commit comments

Comments
 (0)