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.

Sign up for GitHub

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

Jump to bottom

fix: improve the MultiSelect component #1645

Closed
12 tasks done
TahimiLeonBravo opened this issue Jun 23, 2020 · 0 comments · Fixed by #1659
Closed
12 tasks done

fix: improve the MultiSelect component #1645

TahimiLeonBravo opened this issue Jun 23, 2020 · 0 comments · Fixed by #1659
Assignees
@HellWolf93
Labels
5 coins enhancements
Projects
React Rainbow Components

Comments

@TahimiLeonBravo
Copy link
Collaborator

TahimiLeonBravo commented Jun 23, 2020 •
edited by HellWolf93
Loading

Requirements

  • Fix UI when readOnly
  • Some improvements
  • Add Tests

Design

https://zpl.io/awROBBK

Specs

  • it should not show the cancel icons on the Chips when the component is readOnly
  • it should not show the plus button when the component is readOnly
  • it should not be focusable when the component is readOnly
  • The variant prop should receive the values default | chip with the defaultValue to default (the default variant should look like the example 4)
  • Add a isBare prop boolean that should look like the example 6
  • When the variant is default it should render the text only on one line and show ... when it is larger than the container
  • When the variant is default it should render a counter with the amount selected
  • When hover or active one options selected it should render an X instead of the ✔️
  • When clicking or press the enter key on a selected option it should unselect the option and close the dropdown

Tests

(We need to add tests for the new implementation)
@TahimiLeonBravo TahimiLeonBravo created this issue from a note in React Rainbow Components (In progress) Jun 23, 2020
HellWolf93 added a commit to HellWolf93/react-rainbow that referenced this issue Jun 25, 2020
@HellWolf93
fix: improve the MultiSelect component
e3894f1 
fix: nexxtway#1645
@HellWolf93 HellWolf93 mentioned this issue Jun 25, 2020
Merged
1 task
@Saul9201 Saul9201 linked a pull request Jun 28, 2020 that will close this issue
fix: fixed action type column #1326
Merged
1 task
@Saul9201 Saul9201 removed a link to a pull request Jun 28, 2020
fix: fixed action type column #1326
Merged
1 task
@Saul9201 Saul9201 linked a pull request Jun 28, 2020 that will close this issue
docs: add interactive Examples to DatePickerModal #1644
Merged
1 task
@Saul9201 Saul9201 removed a link to a pull request Jun 28, 2020
docs: add interactive Examples to DatePickerModal #1644
Merged
1 task
@Saul9201 Saul9201 linked a pull request Jun 28, 2020 that will close this issue
fix: fixed action type column #1326
Merged
1 task
@Saul9201 Saul9201 removed a link to a pull request Jun 28, 2020
fix: fixed action type column #1326
Merged
1 task
@Saul9201 Saul9201 linked a pull request Jun 28, 2020 that will close this issue
fix: close AM / PM element by selecting #1663
Merged
@Saul9201 Saul9201 removed a link to a pull request Jun 28, 2020
fix: close AM / PM element by selecting #1663
Merged
@LeandroTorresSicilia LeandroTorresSicilia linked a pull request Jun 28, 2020 that will close this issue
docs: added example whit columns rendered dynamically on the Table co… #1665
Merged
1 task
@LeandroTorresSicilia LeandroTorresSicilia removed a link to a pull request Jun 28, 2020
docs: added example whit columns rendered dynamically on the Table co… #1665
Merged
1 task
React Rainbow Components automation moved this from In progress to QA Jun 29, 2020
LeandroTorresSicilia added a commit that referenced this issue Jun 29, 2020
@HellWolf93 @LeandroTorresSicilia
fix: improve the MultiSelect component (#1659)
7abe1f6 
* fix: improve the MultiSelect component

fix: #1645

* fix: add counter and use truncated text

* fix: uncheck item when selected and clicked

* fix: render uncheck icon when active or hover while selected

* fix: rename hasChips to hasContent

* fix: minor refactor on MultiSelect component

* fix: add right margin to StyledCountText when readOnly

* fix: improve getContent function readability

* fix: hide remove button from chip when readOnly and only one chip

* docs: add readOnly example to MultiSelect component

* fix: refactor chips delete callback handling

* fix: move value declaration outside of example component

* fix: show uncheck icon in Option only when multiple

* fix: integration tests

* fix: pageObject methods comments

Co-authored-by: Jose Leandro Torres <jtorressicilia@gmail.com>
@TahimiLeonBravo TahimiLeonBravo moved this from QA to Done in React Rainbow Components Jul 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@HellWolf93 HellWolf93

Labels
5 coins enhancements
Projects
React Rainbow Components
  
Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: improve the MultiSelect component HellWolf93/react-rainbow
2 participants
@HellWolf93 @TahimiLeonBravo