Description

Range selector allows the user to set a customized range of dates with or without hours in a unified component

<<show example - make sketch wireframe>>

Usage & Behaviour

General guidelines

Structure

The field is composed of a string indicating the range and an icon button which opens the dropdown.

The dropdown is composed of calendar months horizontally displayed. From left (start) to right (end). The direction might change according to RTL languages

Beneath each of the calendar months lays the time picker and a summary of selected dates.

Content

Usually used with a label “Date range”.

Internal Logic

States

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

Interaction

<<for example, how to change 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>>

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