Adaptive rendering for selects

[jivanova]

Describe the solution you would like to see implemented

Aha link: https://progresssoftware.aha.io/features/BLZR-282 Design link: https://github.com/telerik/web-components-ux/issues/473

The scope of the task are the select components and their inner parts.

• [x] Adaptive List
• [x] Adaptive DropDownList
• [x] Adaptive ComboBox
• [x] Adaptive AutoComplete
• [x] Adaptive MultiSelect
• [x] Adaptive MultiColumnComboBox
• [x] Adaptive DropdownTree
• [x] Adaptive MultiSelectTree

Additional context

Needs front-end in PI 1 of R3 2022. Blazor starts in PI2.

Pioneer team will be Blazor, but the task is part of a cross team planning: https://github.com/telerik/web-components-planning/issues/62

[joneff]

We just need to add tests for dropdowntree and dropdowngrid, but the structure is the same as dropdown list.

[radkostanev]

Reopening this as the following items are pending. Please note bullets contain clarifying notes, which are related to internal discussions.

• [x] Action Sheet Input rendering missing

• [ ] Current medium breakpoint rendering does not feature the left/right margin from the design

• [x] Animation Support - position and z-index styles needed notes:

  • no need to supply z index
  • child animation container needs bottom and width
  • k-action-sheet-bottom is conditional vs fullscreen

• [x] Misplaced scroller - k-actionsheet-content has a scroll, instead of k-list-scroller Dojo: https://dojo.telerik.com/AXuSIhIp

• [ ] MultiColumnComboBox Small breakpoint rendering/styles missing? notes: Small breakpoint rendering(full-screen action sheet) design features columns ordered vertically, rather than horizontally. Dojo: https://dojo.telerik.com/OcuTAtuS/2

• [x] ActionSheet height in Medium can change notes: current rendering sets only max-height to 50vh. This can cause the action sheet to change its height drastically when filtering. Perhaps we could set some min-height? See gif.

• [x] AllowCustomItem - Add New Item button notes: design still contains the 'Add New Item' button. In our last meeting, we discussed scratching it and instead applying the value from the filter. if this is the case, it would be best if we can update the design. If not, we should update the rendering.

• [ ] MultiColumnComboBox horizontal scroll issue notes: This issue will be far more prominent(if not always present) in adaptive rendering, given how the component is configured, thus it might be something we want to prioritize: #3684

• [x] Since .k-animation-container element takes the entire view port, plus has higher z-index than the .k-overlay element, it is impossible to capture a click on the overlay, which should be used to toggle the action sheet.

• [ ] According to the design, when a keyboard appears/there is not enough space for suggestion list to be rendered, both the header and the suggestion list needs to become scrollable(as opposed to only the suggestion list).