Feedback Widget

Owned by Gabriel Weinberg, created

Last updated: Mar 22, 2024

1 min read

DRAFT Design IN PROGRESS IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS

PROPOSAL STATUS	DESIGN STATUS	IMPLEMENTATION STATUS
DRAFT	DESIGN PENDING	IMPLEMENTATION PENDING
READY FOR REVIEW	DESIGN PLANNED	IMPLEMENTATION PLANNED
APPROVED TO ADD	DESIGN IN PROGRESS	IMPLEMENTATION IN PROGRESS
DEFERRED	DESIGN COMPLETE	IMPLEMENTATION COMPLETE
NEEDS CHANGES

For more information see the Contribution Process | Step 1 – Start a component proposal.

Contributors	@Gabriel Weinberg
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