5
New Styleguide page for "Loading"
Introduce CDN links to all images
Add Section with index-tiles to branding page
New Styleguide page for "Branding"
FC
Extend ".wui-bs-alert" with all fruit-color-variantes
Font-Awesome has been updated to version 5.12.0
Ut
"Utils" has been extended with opacity, heights and colors
1

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe
New release

Search

The overview-search is the most basic search in wescale. We use it in table overviews, in modals, in panel sections, etc. The general guidelines of the overview-search also apply to any other search on the platform.
However, there are exceptions such as the TATS or the product-search. These searches are more complex and have their own guidelines. But unless otherwise specified, the general guidelines should always be used in first place.

In Review

This component was thoroughly tested. However, it has not yet been applied in many cases in production. Maybe there will be changes due to case-related issues. If you want to use this component in production please let me know, so that we can talk about possible future changes and be sure that none of the changes will disrupt your work. Feel free to contact me via slack, email (tjaeger@wescale.com) or personally.

General guidelines

  • Search as you type. After entering 2 characters the search starts. In languages where words can also be made up of a single character (e.g. Chinese, Korean, ...) the search is started as soon as the first character is entered.
  • Default setup. If there is just one search on a specific context, it should be focused.
  • Cross-lingual. If you search for "germany", a possible search result would be "Deutschland" as well.
  • AND-linked-infix. The more keywords you enter, the more accurate your search will be. As a result, the user gets fewer - but more precise - search hits.
  • No WYSIWYG. For technical reasons, the fields are searched as they occur in the database. If "Paderborn" and "deutsch" are available in the database, the search for "n (d" would not find a hit, even if "Paderborn (de)" is displayed in the UI.
  • Invisible fields. In addition to the visible fields, other relevant fields can also be searched in the background. Even if only the name "Thomas Jäger" is displayed in the UI, the user could get a hit by searching for "tjaeger@wescale.com".
  • Clear search. Clicking on "" or will clear the search and trigger a new one.
  • Hits-indicator. All items on the page that display the number of hits, change them according to the search results.
  • Scoped search. The search only affects the area in which it is located.
  • Min-width. As a rule of thumb, an input with a length of 27 characters covers 90% of the search queries. That's why we set a fixed width of 300px for search inputs.
  • Placeholder. Since each search can potentially return several hits, the placeholder is always in plural. In addition, the placeholder always contains an hint of what is searched.
  • Empty-state. If there are no search hits, we use .wui-empty-state which is a direct child of .wui-scene-body. You'll find the right image and further information find at empty state images.

... in header (with filters)

... in panel-section

... in modal

For a better view within the styleguide, the width values have been adjusted at this point.