Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Status
colourYellowGreen
titleDESIGN COMPLETE
Status
titleDRAFTIMPLEMENTATION PENDING

Expand
titleWhat are these tags?

The three statuses above and their possible values:

Status
titlePROPOSAL STATUS

Status
titleDESIGN STATUS

Status
titleIMPLEMENTATION STATUS

Status
colourYellow
titleDRAFT

Status
titleDESIGN PENDING

Status
titleIMPLEMENTATION PENDING

Status
colourBlue
titleREADY FOR REVIEW

Status
colourYellow
titleDESIGN PLANNED

Status
colourYellow
titleIMPLEMENTATION PLANNED

Status
colourGreen
titleAPPROVED TO ADD

Status
colourPurple
titleDESIGN IN PROGRESS

Status
colourPurple
titleIMPLEMENTATION IN PROGRESS

Status
colourRed
titleDEFERRED

Status
colourGreen
titleDESIGN COMPLETE

Status
colourGreen
titleIMPLEMENTATION COMPLETE

Status
colourPurple
titleNEEDS CHANGES

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

...

Use case example: 3 chips appearing under a form field allow a user to choose a nameusername.

https://www.figma.com/file/0uBm1o7nH2ExePrRXGvB7Z/Logistration?node-id=1071%3A15033

🌳 Variants

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7727%3A2910237%3A36310

...

🌞 Best Practices

Tip

Do

  • Do have an interactive element in a chip

  • Do use the Dark variant against dark backgrounds

Warning

Don't

  • Don’t have more than 1 interactive element in a chip

  • Don’t use the Dark variant against light backgrounds

♊ Related Components

Similar to the Badge component, but interactive.

...