Sheet

Owned by Bronwyn Hawkins (Deactivated), created
Jun 04, 2021
1 min read

design complete 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.

Side sheets contain supplementary content and are anchored to the top, bottom, left or right edge of the screen.

Contributors

@Bronwyn Hawkins (Deactivated)

Slack channel

https://edx-internal.slack.com/archives/C01JN0ALLEP

Paragon Jira ticket

https://openedx.atlassian.net/browse/PAR-266

Other Jira tickets

Design resources

Paragon Design System

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-2021?node-id=7520%3A16744

Variants

  • Dark and Light palette options

  • Top, Bottom, Left and Right positioning

Β 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16758

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16770

Β 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16782

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16794

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16806

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16898

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16910

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16922

Best Practices

Do

  • Place other content/components within the sheet component

  • Let the content of a sheet scroll

Don't

  • Don’t position sheet content outside of the container

  • Don’t let the Top & Bottom variants cover more than 50% of the height of the screen

  • Don’t let the Left & Right variants exceed 272px in width

Related Components

Β 

Specification

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

  • Use Elevation 3 and the corresponding shadow direction for the position of the sheet

  • Content in the sheet is scrollable

  • The sheet is sticky

  • Top and Bottom positioned sheets should not exceed 50% of the screen height

  • Left and Right positioned sheets should not exceed 272px width

Redlined Design Spec

Β 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16817

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16837

Β 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16857

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7520%3A16877

Behaviors

Accessibility

Β 

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX

Β 

Β