You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import { FunctionComponent, useState } from 'react';
17
18
import { FeedbackModal } from "@patternfly/react-user-feedback";
18
19
import feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';
19
20
20
21
## About
21
-
22
+
22
23
The user feedback extension is a PatternFly React based component used to collect user feedback. Examples of how to use this extension are documented below. This extensions allows users to submit feedback, report a bug, request support, as well as join a mailing list to stay updated on the latest news and research opportunities.
23
24
24
25
## Examples
25
26
26
27
### Basic modal
28
+
27
29
To collect data, you can link modal items to external sources instead of a built in form. For example, you can link to a custom form, which will be opened in a new tab.
28
30
29
31
```js file="./URL.tsx"
30
32
31
33
```
32
34
33
35
### Advanced modal
36
+
34
37
User feedback offers additional modal items that support different types of feedback. To allow users to report a bug, use the `onReportABug` property. To allow users to join a mailing list, such as one dedicated to future research participation, use the `onJoinMailingList` property. To allow users to open a support case, use the `onOpenSupportCase` property and link users to your support team.
35
38
36
39
The following example demonstrates each of these modal items. The "Share feedback", "Report a bug", and "Inform the direction of products" items all point to built-in forms.
@@ -40,20 +43,26 @@ The following example demonstrates each of these modal items. The "Share feedbac
40
43
```
41
44
42
45
### Advanced that autofills an email address
46
+
43
47
To automatically pass a user's email address into a feedback modal, use the email property. This allows you to pre-populate the modal's email field.
48
+
44
49
```js file="./AdvancedWithEmail.tsx"
45
50
46
51
```
52
+
47
53
### Modal with asynchronous call support
48
-
User feedback supports the ability to make asynchronous calls to send data collected from the modal to a backend service.
49
-
54
+
55
+
User feedback supports the ability to make asynchronous calls to send data collected from the modal to a backend service.
50
56
The following example demonstrates how to use the `async` function to send data to a backend service.
57
+
51
58
```js file="./Async.tsx"
52
59
53
60
```
54
61
55
62
### Modal with internationalization support
63
+
56
64
To customize the content displayed in the feedback modal, pass in a custom `i18n` object with values for each property of `<FeedbackModal>`. This allows you to prepare a modal for different languages and requirements.
<imgsrc={srcImport0}width={srcImport0.width}height={srcImport0.height}{...{"alt":"Image of advanced feedback modal with annotations","className":"ws-img "}}>
47
+
<imgsrc={srcImport6}width={srcImport6.width}height={srcImport6.height}{...{"alt":"Image of advanced feedback modal with annotations","className":"ws-img "}}>
<imgsrc={srcImport1}width={srcImport1.width}height={srcImport1.height}{...{"alt":"Image of expanded dropdown menu with link to sharing feedback","className":"ws-img "}}>
89
+
<imgsrc={srcImport7}width={srcImport7.width}height={srcImport7.height}{...{"alt":"Image of expanded dropdown menu with link to sharing feedback","className":"ws-img "}}>
<imgsrc={srcImport2}width={srcImport2.width}height={srcImport2.height}{...{"alt":"Image of a form within a modal to share feedback","className":"ws-img "}}>
113
+
<imgsrc={srcImport8}width={srcImport8.width}height={srcImport8.height}{...{"alt":"Image of a form within a modal to share feedback","className":"ws-img "}}>
114
114
</img>
115
115
</p>
116
116
</li>
@@ -122,7 +122,7 @@ const Component = () => (
122
122
{`The bug report form allows users to enter feedback into a text box and submit. Its description directs users to a URL where they can submit a support ticket for critical issues.`}
<imgsrc={srcImport3}width={srcImport3.width}height={srcImport3.height}{...{"alt":"Image of a form within a modal to report bugs","className":"ws-img "}}>
125
+
<imgsrc={srcImport9}width={srcImport9.width}height={srcImport9.height}{...{"alt":"Image of a form within a modal to report bugs","className":"ws-img "}}>
126
126
</img>
127
127
</p>
128
128
</li>
@@ -134,7 +134,7 @@ const Component = () => (
134
134
{`The user research opt-in form allows users to enter their email address to participate in future research efforts.`}
<imgsrc={srcImport4}width={srcImport4.width}height={srcImport4.height}{...{"alt":"Image of a form within a modal to sign up for research opportunities","className":"ws-img "}}>
137
+
<imgsrc={srcImport10}width={srcImport10.width}height={srcImport10.height}{...{"alt":"Image of a form within a modal to sign up for research opportunities","className":"ws-img "}}>
138
138
</img>
139
139
</p>
140
140
</li>
@@ -146,7 +146,7 @@ const Component = () => (
146
146
{`Selecting an item redirects users to an external URL (like a qualtrics form) that opens in a separate tab.`}
<imgsrc={srcImport5}width={srcImport5.width}height={srcImport5.height}{...{"alt":"Image of modal with links to external forms","className":"ws-img "}}>
149
+
<imgsrc={srcImport11}width={srcImport11.width}height={srcImport11.height}{...{"alt":"Image of modal with links to external forms","className":"ws-img "}}>
0 commit comments