search

GovTechSG / sgds

SGDS is a frontend framework that aims to provide a beautiful common visual language and user experience for visitors of Singapore Government websites.
https://www.designsystem.tech.gov.sg
Other
17 stars 4 forks source link

Enable Y-Axis Scrolling for Combo Box Dropdown Menus #508

Closed elsonlim closed 2 weeks ago

elsonlim commented 3 weeks ago

Prerequisites

Proposal

image

Propose adding support for vertical (Y-axis) scrolling within the dropdown menu of combo boxes. This enhancement would allow users to easily navigate through long lists of items, especially when the dropdown menu exceeds the available screen space.

Scrolling flag: Introduce a new property or configuration setting (e.g., enableScrolling or scrollable) that allows developers to explicitly enable or disable Y-axis scrolling for the combo box dropdown menu. The default behaviour could be disabled to avoid breaking change.

Customisation options: Developers should have the ability to customise the maximum height of the dropdown menu, the appearance of the scrollbar, and other relevant styling options.

Motivation and context

Long dropdown menus in combo boxes can pose usability challenges, particularly when they extend beyond the visible screen area. Users may have to resize the window or scroll the entire page to view all the options, which can be frustrating and inefficient.

image
clukhei commented 3 weeks ago

Hi @elsonlim, this enhancements seats closer with the style repository behind @govtechsg/sgds-react I will transfer this issue to that repository.

clukhei commented 3 weeks ago

@elsonlim do note that the customisation of height can be made possible, but it has to be done through SASS as this repo is written in SASS. We will give a default of 480px max-height when the combobox menu is scrollable

elsonlim commented 3 weeks ago

Thanks, @clukhei. That will be very helpful!

clukhei commented 2 weeks ago

@elsonlim please update @govtechsg/sgds to version v2.3.4 and @govtechsg/sgds-react to v2.7.0 to get these changes.

https://github.com/GovTechSG/sgds/releases/tag/v2.3.4