Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dev: implemented new global dropdowns #3275

Merged
merged 13 commits into from
Dec 29, 2023
Merged

Conversation

aaryan610
Copy link
Collaborator

@aaryan610 aaryan610 commented Dec 28, 2023

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 aaryan610 marked this pull request as ready for review December 29, 2023 07:53
@aaryan610 aaryan610 marked this pull request as draft December 29, 2023 08:42
@aaryan610 aaryan610 marked this pull request as ready for review December 29, 2023 09:03
@gurusainath gurusainath merged commit 2851969 into refactor/mobx-store Dec 29, 2023
3 of 5 checks passed
@gurusainath gurusainath deleted the chore/ordering branch December 29, 2023 09:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants