Create a resuable combo box component to choose and search a particular skill [RFC]

[Abhay5855]

Description Issue link

Why we are making this component ? There is a field in the endorsement form with label skill, we can have the option to choose from the list the particular skill or search from the list and then select the skill, also if we don't have any skill in the list we display a Add Skill - option that will redirect to alert for now.

Which Library provides combo box component? I have considered 3 Different Libraries that have the combo box component, that allows to select and search in the List.

1. MUI

   • MUI is widely used library and provides the combo box component that fullfills our requirement.
   • The Combo box component - combo box
   • Screenshot of the component

2. Headless UI

   • Headless UI is a light weight fully customizable library, with no default styles present.
   • The Combo box component - combo box
   • SS

3. React Aria components

• React Aria is a library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system.
• The Combo box component - combo box
• SS

Comparison of MUI (Material-UI), Headless UI, and React Aria Components

Feature	MUI (Material-UI)	Headless UI	React Aria
Bundle Size	Larger due to comprehensive features and built-in styles.	Smaller since it provides unstyled components.	Smaller, designed to be lightweight with focus on accessible hooks.
Customization	Highly customizable with robust theming system. Default Material Design theme is extensible.	Extremely customizable with unstyled components. Works well with Tailwind CSS and other CSS frameworks.	Provides low-level hooks for building custom components. Full control over appearance.
Accessibility	Built-in accessibility.	Focuses on accessible, essential components	Emphasizes accessibility. Part of React Spectrum ecosystem with related

Functional Requirements

• Ability to search for a skill in the dropdown.
• Select a particular skill from the dropdown.
• If no skill is present in the list display Add Skill Section.
• Add some event or function on the Add Skill (for now).

Non Functional Requirements

• The combo box should be responsive.
• Accessibility - It shoould be accessible easily through keyboard actions, the screen reader should be able to Read it out properly to the user what skill we choose, what skills are being displayed.

Possible solutions:

• I will create two folders in the components - combo box for endorsement, and one combo box.
• The combo box component will reusable and can be used in other pages or sections.
• The other component - combo box for endorsement - Will contain the Add Skill section added if no skill is displayed in the list.
• This way we can make use of the combo box component in other sections or pages.

[yesyash]

• @Abhay5855 the implementation steps look fine to me but I have a couple of questions:
  • do we need to install the complete Mui library just for a combo box?
  • how difficult will it be to style the combo box component on a scale of 1 to 5 to match the design?
  • have you looked at any libraries that allow us to have only the combo box component and are unstyled by default to make styling the component easy?

[Abhay5855]

@yesyash

• Yes, We need to add the MUI Library for the combo box.
• It has some custom classes that can be overridden to match the design according to the Figma, on scale of 1-5 it will take around 3.
• Yes, I looked for other solutions but there was no such component that only provides the functionality with no styling - https://flowbite.com/docs/components/dropdowns/ -> I checked this as well as it uses Tailwind by default but the functionality of search is quite different.

[yesyash]

• please have a look at headless UI or react aria components to see if we can make the component without mui as the mui library is pretty heavy on it's own

[Abhay5855]

@yesyash, These are the components, but we do need to install them as well they are the libraries as well Headless UI - https://headlessui.com/react/combobox React Aria components - https://react-spectrum.adobe.com/react-aria/ComboBox.html

[iamitprakash]

Hello @Abhay5855 as per discussion please use Headless UI and proceed ahead. cc- @yesyash

[yesyash]

• closing this as the changes have been merged