Dropdown

[karolin-kivisikk]

Design

• Component is designed using best practices:
  • Relies on TEDI variables (spacing, padding, colors, sizes etc) and styles (shadows, typography)
    • Create semantic variables if needed
  • Different variants are created according to the needs
  • Has dark theme
  • Has passed WCAG AA test in Figma
  • Is tested by another designer - design review: short texts, long texts, property naming etc - usability of the component for designers
  • Is responsive or adaptive, is tested on small and large device - if needed mobile version is created
  • Is technically up to date according to new Figma features
• Component has following statuses:
  • Status badges if its design, React component or/and Angular component is ready - on top of the frame: ✓ Figma, ✓ React, ✓ Angular
  • Informative badges (frame header):
    • If it's detachable (optional) - meaning you can detach the component and adjust it using variables
    • If it's tested against WCAG AA level
    • If it's documented
  • Ready for dev (built in Figma status) - if it's not yet developed in both React and Angular
  • Variant level status properties ("//Angular dev: done/not done" and "//React dev: done/not done") - statuses are removed after the component variant is developed in both
• Component has a Documentation section - includes links to Storybook (React and/or Angular) and Zeroheight
• Component has a Tips and Tricks section - instruction section which includes extra notes if there's something design specific other designers should know
• Component is published:
  • In Figma file - library publish for the TEDI-Ready Figma file, add correct notes what was changed
  • Figma version nr is updated - Figma version update according to the rules
  • Figma version is saved manually to file history - Add version and notes what changed
  • Figma version is published to the Figma community - Change version number manually, it does not change automatically
  • Close design task in Github
  • Create dev tasks about the component to Github kanban board (both React and Angular)
  • Add changes to release notes draft in Zeroheight - release notes is published once a month
  • Clean component from comments (optional)
  • Add component specific release notes time and notes to the footer of the frame in Figma
  • Update statuses page in Zeroheight