/
Feedback Widget

Feedback Widget

DRAFT Design IN PROGRESS IMPLEMENTATION PENDING

Contributors

@Gabriel Weinberg (Deactivated)

Slack channel

Paragon Jira ticket

Other Jira tickets

Design resources

Technical docs

1 Variants | 2 Best Practices | 3 Related Components | 4 Specification | 4.1 Behaviors | 4.2 Accessibility | 5 Notes

Design

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-Design-System?type=design&node-id=57636%3A3830&mode=design&t=R1iASPrwv3VXuBcy-1

 

Image backup:

Variants

Overlay/Inline
Component can be an overlay, similar to modal or toast component, or it can be used inline within the body of the page

Embedded feedback/link-to feedback
Feedback interactions can be directly inside the widget or a button can link to offsite feedback

Dismissible
Component can be optionally dismissed (Inline-only)

 

 

Best Practices

Do

 

Don't

 

Related Components

https://paragon-openedx.netlify.app/components/card/

https://paragon-openedx.netlify.app/foundations/typography/

https://paragon-openedx.netlify.app/components/iconbutton/

https://paragon-openedx.netlify.app/components/form/form-control/

Specification

What does an engineer need to know in order to build this component?

Redlined Design Spec

Behaviors

Stateful interactions
When the user interacts with the component, it shows a secondary, customizable screen

 

 

Accessibility

Overlay version takes focus

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX