plane icon indicating copy to clipboard operation
plane copied to clipboard

dev: implemented new global dropdowns

Open aaryan610 opened this issue 2 years ago • 0 comments

This PR focuses on implementing the global dropdowns throughout the platform

Problem:

  1. The codebase contains multiple files for similar dropdowns, for example- Module members select and Issue assignees select both require the list of project members, but both of these made use of two different components to render the dropdown.
  2. Dropdown button UI varies from place to place, for example- button UI for the issue view layouts varies from that of the create issue modal, this led to inconsistencies in the button UI.

Solution:

Created global dropdown files for the following-

  • Project member.
  • Workspace member.
  • Cycle.
  • Date.
  • Estimate.
  • Module.
  • Priority.
  • Project.
  • State.

All of these components accept basic props for functionality along with some additional props specific to the dropdown type, including-

  1. value- The value to render.

  2. onChange- Function to execute on value change.

  3. buttonVariant- Each dropdown supports 6 default button variants, including-

    • border-with-text- Renders a button with border, transparent background, icon and text.
    • border-without-text- Renders a button with border, transparent background and only the icon.
    • background-with-text- Renders a button without border, a background color, icon and text.
    • background-without-text- Renders a button without border, a background color and only the icon.
    • transparent-with-text- Renders a button without border, transparent background, icon and text.
    • transparent-without-text- Renders a button without border, transparent background and only the icon.
  4. button- Custom button, if any of the default variants do not meet the requirements.

    All of the default button variants can be utilized to create various combinations of buttons without using the custom button prop.

  5. buttonClassName- Additional button classNames which will overwrite the existing classNames.

  6. className- Additional container classNames which will overwrite the existing classNames.

  7. placement- Default placement of the dropdown options, controlled by popper-js.

  8. dropdownArrow- Whether to show the dropdown arrow in the dropdown button or not.

Media:

State Priority Member
image image image
Cycle Module Estimate
image image image
Project Date
image image

Other fixes:

  1. Refactored the priority icon component in the plane/ui package.
  2. Deleted all the old dropdown files and replaced their occurrences with the new global dropdowns.
  3. Disable cycle and module select options from the create issue modal, issue details page sidebar, and issue peek overview sidebar if cycle and module are disabled from the project settings.

aaryan610 avatar Dec 28 '23 18:12 aaryan610