mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
65b962e771
* Refactor Drawer component and add date-fns dependency Refactored the Drawer component for improved slot-based structure, updated styles, and added 'use client' directive. Added 'date-fns' as a dependency in design-system, updated tsconfig paths for icons, and marked ToggleGroup as a client component. * nit: add env for svg path * fix: instructions * accent color docs and basic tidy * copy value feature * improve color contrast * increase contrast on text-warning in light mode * update changelog * replace outdated text-warning utility classes * remove redundant warning-600 * minor design-system docs updates * docs updates * remove unused brand-button class * update docs * fix: restore brand default * update docs brand text color * low hanging branded text fruit * Nit refactor and clean up * re-add Kemal’s README instructions for hot reload --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import { Button, Form, Input, Modal } from 'ui'
|
|
|
|
export type FeedbackFields = {
|
|
page: string
|
|
title: string
|
|
comment: string
|
|
}
|
|
|
|
type FeedbackModalProps = {
|
|
visible: boolean
|
|
page: string
|
|
onCancel: () => void
|
|
onSubmit: (values: FeedbackFields) => void
|
|
}
|
|
|
|
function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps) {
|
|
return (
|
|
<Modal hideFooter header="Leave a comment" visible={visible} onEscapeKeyDown={onCancel}>
|
|
<Form
|
|
initialValues={{ page, comment: '' }}
|
|
validateOnBlur
|
|
validate={(vals) => {
|
|
const errors: Partial<FeedbackFields> = {}
|
|
|
|
if (!vals.title) {
|
|
errors.title = 'Required'
|
|
}
|
|
|
|
if (!vals.comment) {
|
|
errors.comment = 'Required'
|
|
}
|
|
|
|
return errors
|
|
}}
|
|
onReset={onCancel}
|
|
onSubmit={onSubmit}
|
|
>
|
|
{({ isSubmitting }: { isSubmitting: boolean }) => (
|
|
<>
|
|
<Modal.Content className="pt-4 pb-2 flex flex-col gap-2">
|
|
<Input type="hidden" id="page" name="page" value={page} />
|
|
<Input type="text" id="title" name="title" label="Title" className="mb-2" />
|
|
<Input.TextArea
|
|
label="Comment"
|
|
id="comment"
|
|
name="comment"
|
|
size="medium"
|
|
className="mb-2"
|
|
textAreaClassName="resize-none"
|
|
afterLabel=" (not anonymous)"
|
|
/>
|
|
<div className="flex gap-2 text-xs text-foreground-light leading-relaxed">
|
|
<span className="flex-shrink-0 mt-0.5">💡</span>
|
|
<div>
|
|
<strong>Need help or support?</strong> This feedback form is for documentation
|
|
improvements only. For technical support, please submit a{' '}
|
|
<a
|
|
href="https://supabase.com/dashboard/support/new"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-brand-link hover:underline"
|
|
>
|
|
support request
|
|
</a>
|
|
.
|
|
</div>
|
|
</div>
|
|
</Modal.Content>
|
|
<Modal.Separator />
|
|
<Modal.Content className="pt-2 pb-4">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button htmlType="reset" type="default" onClick={onCancel} disabled={isSubmitting}>
|
|
Cancel
|
|
</Button>
|
|
<Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting}>
|
|
Submit feedback
|
|
</Button>
|
|
</div>
|
|
</Modal.Content>
|
|
</>
|
|
)}
|
|
</Form>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export { FeedbackModal }
|