User Experience
- 1 Components based on UX Style Board
- 1.1 Inputs
- 1.1.1 Input
- 1.1.2 Select
- 1.1.3 SearchInput
- 1.1.4 Input of type “date”
- 1.1.5 Checkbox
- 1.1.6 FileUploader
- 1.1.7 HtmlEditor
- 1.1.8 GeocodeAutocomplete
- 1.2 Buttons
- 1.2.1 IconButton
- 1.2.2 EditButton
- 1.2.3 DeleteButton
- 1.3 Display
- 1.3.1 Pill
- 1.3.2 EditableSection
- 1.3.3 ValidationError
- 1.3.4 ConfirmActionDialog
- 1.3.5 Dialog
- 1.4 Comments Section
- 1.1 Inputs
Components based on UX Style Board
Implementation details (e.g. supported properties) can be added later on to increase the usefulness of this documentation.
Inputs
Custom placeholder can be defined for all inputs but FileUploader
and GeocodeAutocomplete
.
Input
Default:
Focused:
Filled:
With isInvalid
property set to true
:
Select
Default:
Menu open:
Selected:
Selected with menu open and hover:
With isSearch
property set to true
:
With isInvalid
property set to true
:
SearchInput
With search triggering function provided in props:
Without search triggering function provided in props:
Focused:
Filled:
Input of type “date”
Icon, date display format and picker (preview not provided) is browser dependent.
Focused (Google Chrome):
Date selected (Google Chrome):
With isInvalid
property set to true
(Google Chrome):
Checkbox
Default:
Focused:
Checked:
Checked and focused:
FileUploader
Default (Google Chrome):
Focused (Google Chrome):
With file selected (Google Chrome):
With isInvalid
property set to true
:
HtmlEditor
Default:
Focused:
Filled:
With isInvalid
property set to true
:
GeocodeAutocomplete
{
countryName: String,
countryCode: String,
regionName: String,
cityName: String,
longitude: Number,
latitude: Number
}
Default:
Focused:
When typing:
With suggestion selected:
Buttons
IconButton
Default:
Hovered:
Focused:
Example of use:
EditButton
Default:
Focused:
DeleteButton
Default:
Focused:
Display
Pill
Default:
EditableSection
Default (with example of use):
On Edit
button click (with example of use):
If isDirty
property is set to true
(with example of use):
On Submit
button click (with example of use):
ValidationError
With value
property set to This field is required
:
Example of use:
ConfirmActionDialog
Default (with an example of use - Organization deletion action):
On Confirm
button click (with an example of use - Organization deletion action):
Dialog
Default (dialogType = DialogType.DETAILS
):
dialogType = DialogType.FORM
(with an example of use - create new Tag)
Comments Section
Example of use:
Default view, when there is no comments
Default view, with comments
Focused input