Design system components development
Current component flow in company
We don't have Design system team in Fortis. As a result there's a main problem - code kludges.
Existing components bugs we put in design system backlog, they're to be fixed within a feature that needs those components for implementation. Also, each designer involves testers to study the components and the Storybook in order to catch bugs we have not yet found - and to prevent new bugs from being released to the prod.
To effectively solve this problem, I suggest assigning at least one front-end developer to work with the Design System and control the cleanliness of the code.
Multiselect
Specification
Basic description
An input with tags and a dropdown with the ability to select more than one element.
When to use
Use when you need to select multiple items.
It is advisable to follow the general rule for dropdowns and use multiselect when there are more than 5 elements.
Behavior
If there are up to 5 values in the list, it is better to use a group of checkboxes. If there are more than 25 values we add Autocomplete.
The field clearing function is optional.

Tags:
The default maximum tag length is 88 pixels. If the word does not fit entirely we truncate ellipsis.
For hidden values that did not fit into the input — a tag without an icon with the text "more N", N — number of values.
For a multiselect with categories, the number of values must always be counted by subcategories.
The tag denoting all the selected elements has no length limit. Removing this tag from the input clears the field of all selected values.

Removing a tag with a cross icon is customizable. Tags are deletable by default. If the element is expected to be used frequently (working with filters), it is recommended to leave the delete icon, if one-time work (creation) it is recommended to remove the delete icon.

List Options:
1. «Select all» element
2. the number of selected items in the category element

How the Select All and Categories elements work:
— if nothing is selected or not everything is selected - pressing leads to the selection of all elements / elements within the category;
— if all is selected - clicking clears all elements/elements within the category.
Basic elements
Desktop
Mobile
Multisuggest
Specification
Basic description
An addition to Multiselect component, extending it with the autocomplete function.
Advisable to use when there are more than 7 items in dropdown list.
The user is presented with a choice of options to auto-complete text fields as characters are entered, where the final choice for that component is strictly from a list of items.
When to use
Use when need to supplement the dropdown list with a large number of elements with the ability to quickly select the necessary ones by entering them from the keyboard.
The recommended number of list items for a multisuggest is 25 or more.
Behavior
The field clearing function is optional.

When hovering over a tag, a tooltip with the full value is displayed (it is better to use it only for tags that do not fit the entire value).

If more than 50% (but at least 160px) of the input is occupied by tags, then when the field is focused by the cursor, all tags collapse into one with the inscription “Selected: N”, where N is the number of selected elements from the list. This tag is not limited in length, the text in it is displayed in full, without truncation. When hovering over such a tag, a tooltip with a list of values is displayed. The maximum number of lines in the tooltip is 4; values that did not fit into the tooltip are truncated <...>. If less than 50% of the input is occupied by tags, then the tags are not collapsed on focus.

Deleting such a tag option is custom parameter.

If the entered value does not match the values from the list, we notify the user about this with the text "Nothing found".

Value Order is custom parameter.
Values on the first click can be displayed in such variations as:
— In alphabet order (cities, names, etc.)
— By popularity of user choice (previously selected options)
— By the status of the selected item (active/inactive, approved/not approved, etc.)

For categories with nested elements: the category behaves like a normal element, but takes precedence in the search results:
1: letter in category name + letter in item/-items names
2: letter in category name only
3: letter in item/-items names only

Order - Priority from first letter to last letter.

This component inherits the behavior of all already existing components that are part of it.
Basic elements
Desktop
Mobile
Made on
Tilda