Lead:  Shani Laendler (Unlicensed) -  ONGOING 

Description

<< Short description of the component and when it is used >>

Usage & Behavior

General guidelines

Structure

1. Header:

   1. Widget name and additional information

   2. Actions: action icons and/or action menu

2. Content area

Placement and Positioning

A widget can be placed anywhere in a page.

Its location on the page and the location of other widgets will determine the possible expansion directions

Content

<<Including labels, microcopy, number of items, order of items etc.>>

• Widget header is aligned left.

• Additional information is aligned to the header, separated by a line separator. It should be short and informative.

  • Avoid presenting a long description that will not be presented to its full under various responsive states.

  • When there’s not enough space to show the full information, it will be truncated. The full information will be presented in tooltip.

• Action items:

  • Includes only actions that are widget-related and NOT content-related (e.g. expand/collapse widget, maximize widget, delete widget, configure widget, etc.)

  • Actions are presented in hover only

  • Only up to 3 main actions will be presented, represented with icon buttons. additional, secondary actions will be presented in an actions menu.

  • In some cases all actions can be presented in the action menu, especially when no action is a primary or important or when space is constrained:
    

    

Internal Logic

<<For example, controls dependencies in a form>>

• In hover, the additional information should be truncated when space is constrained:

  

• Expand-collapse: in some cases the widget can be collapsed. This option will be available from the action buttons area.
  The widget will be collapsed and expanded in animation

  

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

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

Transitions

<<Used to describe transitions or animations the occurs in any of the interaction stages>>

Best practices

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

Use:

• <…>

• <…>

Don’t use

• <…>

• <…>

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

• <…>

• <…>

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

<<Does this component/Pattern requires specific handling?>>

See general guidelines described in /wiki/spaces/UX/pages/308969693

Screen reader support 

<<Does this component/Pattern requires specific handling?>>

See general guidelines described in /wiki/spaces/UX/pages/308248620

Contrast & size compliance

<<Does this component/Pattern requires specific handling?>>

Are taken into consideration. For more information see general guidelines described in Contrast + Font Size Guidelines

Design

Code

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