Versions Compared

Version Old Version 1 New Version 2
Changes made by

Rakefet Zur (Unlicensed)

Rakefet Zur (Unlicensed)

Saved on

Key

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

Lead:  Rakefet Zur (Unlicensed) ONGOING




Description

Use for toolbars and displays where words won’t comfortably fit alongside icons.


<< Most communicative 1 screen shot of the component >>

<<Types>> 

<<use this section only if the component has several types that each requires its own page e.g. table, collapsable table>>

<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>


Type
Usage





Usage & Behaviour

<<use a visual for each sub-section>>

General guidelines


  • Only use when the Icon’s meaning is unambiguous.
  • For toolbars of multiple Icons use a Button Group.
  • Consider pairing with a Tooltip to describe the Icon’s underlying action.
  • Icon size: 16, 32 (state when.....)





Use this type when you want to draw more attention to the button, or when an icon helps to clarify or convey more meaning.



  • Clicking or tapping a toggle button changes its state to “pressed”. The button returns to its initial state when the user clicks or taps it again. The toggle button is comparable to a checkbox control.


States

Regular, hover, disabled, in focus, (selected and active - do we have toggle icons??????)

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Best practices

<<e.g. Slider should display a .label its on>>

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in Keyboard & Focus Management Guidelines>>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design


Zeplin link
Screen thumbnail
https://app.zeplin.io/project/5970b366bee38cf87b2de932/screen/5b83c43e558bb3055d8064f9Image Added



Code

<<a box containing the code - discuss with Femi>>