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

Feature/420 Select Advanced (single and multiple selection with search) #424

Merged
merged 16 commits into from
Aug 1, 2024

Conversation

g-saracca
Copy link
Contributor

@g-saracca g-saracca commented Jul 1, 2024

What this PR does / why we need it:
Adds a new Select component to the design system and integrates it into the EditDatasetMetadata form for multiple controlled vocabularies and for non-multiple controlled vocabularies when they have more than 10 options.

Removes SelectMultiple component, this SelectAdvanced component behaves as single or multiple selection.

Which issue(s) this PR closes:

Closes #420

Special notes for your reviewer:

Suggestions on how to test this:

  1. Execute npm i.
  2. Navigate with cd packages/design-system && npm run build.
  3. Execute npm run storybook
  4. Test the SelectAdvanced component on Storybook on all of its modes:
  • Single
  • Multiple
  • Single With Default Value
  • Multiple With Default Value
  • Single not Searchable
  • Multiple not Seachable
  • Invalid
  • Disabled
  • With Different Select Word (this only for single mode)
  1. Also check the create dataset or edit dataset form and find a vocabulary not multiple field that has more than 10 options, instead of showing a native select it should show this SelectAdvanced component in single selection mode.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:
Yes.

SelectAdvanced on single mode with search.
Screenshot 2024-07-01 at 10 25 16

SelectAdvanced on single mode without search.
Screenshot 2024-07-01 at 10 25 26

Is there a release notes update needed for this change?:
N/A
Additional documentation:
N/A

@coveralls
Copy link

Coverage Status

coverage: 97.751% (+0.2%) from 97.581%
when pulling 5e8b5e1 on feature/420-select-single
into 107aaca on develop.

@g-saracca g-saracca added Size: 3 A percentage of a sprint. 2.1 hours. D: Design System Deliverable: Design System Waiting SPA: Create Dataset Form SPA: Edit Dataset Page GREI Re-arch GREI re-architecture-related labels Jul 1, 2024
@g-saracca g-saracca marked this pull request as ready for review July 1, 2024 15:07
@coveralls
Copy link

Coverage Status

coverage: 97.751% (+0.2%) from 97.581%
when pulling 52c38f3 on feature/420-select-single
into 107aaca on develop.

@coveralls
Copy link

coveralls commented Jul 15, 2024

Coverage Status

coverage: 98.403% (+0.6%) from 97.782%
when pulling 3eaf7bb on feature/420-select-single
into 55cd353 on develop.

@ekraffmiller ekraffmiller self-assigned this Jul 17, 2024
@ekraffmiller
Copy link
Contributor

Hi @GermanSaracca, it looks good! I just wanted to check the behavior of the Single Select - it doesn't close the dropdown when an option is selected. Is that expected behavior?

Screen.Recording.2024-07-17.at.4.51.20.PM.mov

@g-saracca
Copy link
Contributor Author

Hi @ekraffmiller, yes that is the expected behaviour, thanks!

@g-saracca g-saracca assigned g-saracca and unassigned g-saracca and ekraffmiller Jul 17, 2024
@g-saracca
Copy link
Contributor Author

@ekraffmiller I correct myself, you are right, in single selection the options menu should close when choosing an option. Many thanks!

@g-saracca g-saracca removed the Waiting label Jul 18, 2024
@g-saracca
Copy link
Contributor Author

@ekraffmiller change applied 👍🏼

@g-saracca g-saracca assigned ekraffmiller and unassigned g-saracca Jul 18, 2024
ekraffmiller
ekraffmiller previously approved these changes Jul 18, 2024
Copy link
Contributor

@ekraffmiller ekraffmiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, approved!

@ekraffmiller ekraffmiller removed their assignment Jul 18, 2024
@GPortas
Copy link
Contributor

GPortas commented Jul 31, 2024

@GermanSaracca Can you please resolve merge conflicts? Thanks!

@g-saracca
Copy link
Contributor Author

@GPortas conflicts solved

@g-saracca g-saracca removed their assignment Jul 31, 2024
Copy link
Contributor

@GPortas GPortas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great in all modes

@GPortas GPortas merged commit e612dca into develop Aug 1, 2024
15 of 20 checks passed
@GPortas GPortas deleted the feature/420-select-single branch August 1, 2024 09:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
D: Design System Deliverable: Design System GREI Re-arch GREI re-architecture-related Size: 3 A percentage of a sprint. 2.1 hours. SPA: Create Dataset Form SPA: Edit Dataset Page
Projects
Status: Done 🧹
Development

Successfully merging this pull request may close these issues.

Select Single with Search in Design System & integrate in Dataset Metadata Form
4 participants