/
User Experience

User Experience

Owned by Rafał Stencel (Deactivated)
Last updated: Sept 02, 2022 by Michał Dulko (Deactivated)
7 min read

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

String displayed when no file is selected (here: “No file chosen”) is browser dependent.

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

Props:

  • onChange - void, function called when suggestion is selected or the input is cleared.

When a suggestion gets selected the onChange function passed to the component is called with the following object as an argument:

{ countryName: String, countryCode: String, regionName: String, cityName: String, longitude: Number, latitude: Number }

When the input is cleared using the x button the onChange function passed to the component is called with null as an argument.

Default:

Focused:

When typing:

With suggestion selected:

Buttons

IconButton

Default:

Hovered:

Focused:

Example of use:

EditButton

Rendered as button by default. Provide click handler in onClick property.

Rendered as a hyperlink when type property is set to link. Provide href property.

Default:

Focused:

DeleteButton

Rendered as button by default. Provide click handler in onClick property.

Rendered as a hyperlink when type property is set to link. Provide href property.

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

Submit and Cancel buttons are disabled and spinner is displayed as long as isMutating property is set to true.

ValidationError

With value property set to This field is required:

Example of use:

ConfirmActionDialog

Props:

  • title - String, title of a dialog

  • message - String, message of a dialog

  • isOpen - Boolean, if true - dialog is shown, if false - dialog is hidden

  • onClose - void, function called to close a dialog

  • onConfirm - void, function called after pressing "Confirm" button

  • isConfirming - Boolean, if true "Confirm" button is disabled and spinner is displayed

Default (with an example of use - Organization deletion action):

On Confirm button click (with an example of use - Organization deletion action):

Confirm button is disabled and spinner is displayed as long as isConfirming property is set to true.

Dialog

Props:

  • children - body of the dialog, passed as component's child - between opening and closing tags

  • isSubmitInProgress - Boolean, if true submit and cancel button is disabled and spinner is displayed

  • formId - String, used for submitting form, formId should be the same as id property passed to form component, e.g. <form id='some-id'>

  • isOpen - Boolean, if true - dialog is shown, if false - dialog is hidden

  • onClose- void, function called to close a dialog

  • submitButton - Boolean, if true - submit button is shown

  • cancelButton - Boolean, if true - cancel button is shown

  • closeButton - Boolean, if true - close button is shown

  • dialogType - String (DialogType enum may be used), used to style dialog differently for each type

     

Default (dialogType = DialogType.DETAILS):

dialogType = DialogType.FORM (with an example of use - create new Tag)

Comments Section

Props:

  • objectId - Number, id of an object, used to fetch a list of comments for an object with the provided id.

  • objectType - String, type of an object, accepts values: PRODUCT, ORGANIZATION, PLAYBOOK, BUILDING_BLOCK, OPEN_DATA, USE_CASE, PROJECTS, used to fetch a list of comments for an object of the provided type

  • commentsSectionRef - Object, ref object, ref used by CommentsCount component to scroll down to CommentsSection component on CommentsCount click

     

Example of use:

  • Default view, when there is no comments

  • Default view, with comments

  • Focused input

     

Related content