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.
"description": "If a URL is given the join mailing list link will redirect to another site to join the mailing list.\nIf a function is provided we will display a join mailing list screen with a submit button. The callback function should return a boolean or a Promise if the callback is successful or unsuccessful.\nIf it's undefined then report a bug will be removed from share feedback modal"
55
+
"description": "If a URL is given the join mailing list link will redirect to another site to join the mailing list.\nIf a function is provided we will display a join mailing list screen with a submit button. The callback function should return a boolean or a Promise if the callback is successful or unsuccessful.\nIf it's undefined then report a bug will be removed from share feedback modal"
"description": "If a URL is given the report a bug link will redirect to another site to report the bug.\nIf a function is provided we will display a feedback screen with a submit button. The callback function should return a boolean or a Promise\nif the callback is successful or unsuccessful.\nIf it's undefined then join mailing list will be removed from the share feedback modal"
65
+
"description": "If a URL is given the report a bug link will redirect to another site to report the bug.\nIf a function is provided we will display a feedback screen with a submit button. The callback function should return a boolean or a Promise\nif the callback is successful or unsuccessful.\nIf it's undefined then join mailing list will be removed from the share feedback modal"
"description": "If a URL is given the share feedback link will redirect to another site share feedback.\nIf a function is provided we will display a share feedback screen with a submit button. The callback function should return a boolean or a Promise if the callback is successful or unsuccessful.",
70
+
"description": "If a URL is given the share feedback link will redirect to another site share feedback.\nIf a function is provided we will display a share feedback screen with a submit button. The callback function should return a boolean or a Promise if the callback is successful or unsuccessful.",
70
71
"required": true
71
72
}
72
73
]
@@ -81,6 +82,8 @@ const pageData = {
81
82
]
82
83
};
83
84
pageData.liveContext={
85
+
FunctionComponent,
86
+
useState,
84
87
FeedbackModal,
85
88
feedbackImage
86
89
};
@@ -93,7 +96,7 @@ pageData.examples = {
93
96
</p>
94
97
</Example>,
95
98
'Advanced modal': props=>
96
-
<Example{...pageData}{...props}{...{"code":"/* eslint-disable no-console */\nimport React from 'react';\nimport { FeedbackModal} from '@patternfly/react-user-feedback';\nimport { Button } from '@patternfly/react-core';\nimport feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';\n\nexport const AdvancedExample: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const handleButtonClicked = () => {setIsOpen(true)}; \n return <>\n <Button onClick={handleButtonClicked}>Show Modal</Button>\n <FeedbackModal \n onShareFeedback={(email:string, feedback:string)=>{\n // Example of a successful callback\n console.log (`Email Address: ${email} Feedback: ${feedback}`);\n return true\n }}\n onJoinMailingList={(email:string)=>{\n // Example of am unsuccessful callback\n console.log (`Email Address: ${email}`);\n return false;\n }}\n onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'\n onReportABug={(email:string, bug:string)=>{\n console.log (`Email Address: ${email} Bug: ${bug}`)\n return true;}}\n feedbackImg={feedbackImage}\n isOpen={isOpen}\n onClose={()=>setIsOpen(false)}/>\n </>\n}","title":"Advanced modal","lang":"js","className":""}}>
99
+
<Example{...pageData}{...props}{...{"code":"/* eslint-disable no-console */\nimport { FunctionComponent, useState } from 'react';\nimport { FeedbackModal} from '@patternfly/react-user-feedback';\nimport { Button } from '@patternfly/react-core';\nimport feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';\n\nexport const AdvancedExample: FunctionComponent = () => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const handleButtonClicked = () => {setIsOpen(true)}; \n return <>\n <Button onClick={handleButtonClicked}>Show Modal</Button>\n <FeedbackModal \n onShareFeedback={(email:string, feedback:string)=>{\n // Example of a successful callback\n console.log (`Email Address: ${email} Feedback: ${feedback}`);\n return true\n }}\n onJoinMailingList={(email:string)=>{\n // Example of am unsuccessful callback\n console.log (`Email Address: ${email}`);\n return false;\n }}\n onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'\n onReportABug={(email:string, bug:string)=>{\n console.log (`Email Address: ${email} Bug: ${bug}`)\n return true;}}\n feedbackImg={feedbackImage}\n isOpen={isOpen}\n onClose={()=>setIsOpen(false)}/>\n </>\n}","title":"Advanced modal","lang":"js","className":""}}>
{`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.`}
0 commit comments