search

pegasystems / constellation-ui-gallery

This open-source repository provides a collection of ready-to-use and customizable Constellation DX components. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
https://pegasystems.github.io/constellation-ui-gallery/
Apache License 2.0
32 stars 28 forks source link

Enhancement Request - Dropdown values with description - Areteans #91

Open s-thutupalli opened 4 days ago

s-thutupalli commented 4 days ago

Enhancement of existing dropdown component

Title: Dropdown values with description.

Description

A search field has been introduced to facilitate easy access to the options. As users type in the search field, the options are filtered in real-time based on the entered characters. Upon selecting an option, the input field will display the chosen value.

Current behaviour

The existing dropdown lacks descriptions for each option.

There is no search functionality to filter the options in the dropdown list.

Expected behaviour

When a user selects the dropdown, they will be able to see options along with their descriptions. Additionally, users can search for options to quickly find the desired selection.

Uses of this Enhancement

The search functionality allows users to filter values easily, eliminating the need to scroll through the entire list. Additionally, descriptions have been added for every option to enhance clarity and usability.

Dependency packages

Material UI - @mui/material @emotion/react @emotion/styled

Configurations

DataPage

Attached the component code and detailed description with images below.

Dropdown_Values_With_Description_Component.docx DropdownValueWithDescription.zip

ricmars commented 8 hours ago

Such component makes sense but it should not be using material UI - I will review the code and see if this requirement can be integrated as a new component in the ui gallery using the OOB Constellation presentational component.

Note that when more meta data is required, you can use the show details that will let you configure a read only view to show more meta about the selected object - this is the recommended pattern since it scale better and is more flexible that adding a description field.