Versions Compared

Version Old Version 2 New Version 3
Changes made by

Rakefet Zur (Unlicensed)

Asaf Ben-Oved

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Only use when the Icon’s meaning is unambiguous.

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

May also be used as a menu button.

Image Added

Usage & Behaviour

General guidelines

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

    (with a vertical line separator)

    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

    ...

    Text

    For icons with text See Buttons#Labels


    We already set a

    States

    StateButtonButton + textMenu
    Regular


    Hover


    Active


    Disabled


    Focused


    Focused + Hover


    Focused + Active


    Focused + Disabled


    Interaction

    For single action button, clicking on the icon will either carry an action or set the button in active state.

    If the button is in Active state, clicking again will return to regular  (except toggle icon).

    Toggle buttons :

    • can act bit different by switching between 2 connected icons
      Image Added
    • Do not have Disabled or Active state but only Hover


    Best practices

    Only use when the Icon’s meaning is unambiguous.

    Consider pairing with a Tooltip to describe the Icon’s underlying action

    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

    See 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

    Minimum icon size is 16px. Icons with text should comply with the

    minimal

     minimal of Contrast + Font Size Guidelines

     for each component>>

     

    Design


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



    Code

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