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

[TASK](ui): Migrate NativeSelect(All related) component to TypeScript #240

Closed
6 tasks done
Tracked by #168
barsukov opened this issue Aug 16, 2024 · 1 comment · Fixed by #599
Closed
6 tasks done
Tracked by #168

[TASK](ui): Migrate NativeSelect(All related) component to TypeScript #240

barsukov opened this issue Aug 16, 2024 · 1 comment · Fixed by #599
Assignees
Labels
enhancement New feature or request

Comments

@barsukov
Copy link
Contributor

barsukov commented Aug 16, 2024

Task Description

We need to convert NativeSelect(All related) and all related components from @cloudoperators/juno-ui-components to TypeScript

List of potential dependencies

  • Check files that used with NativeSelect, NativeSelectOption, NativeSelectOptionGroup.

Sub-tasks

  • change the name to .tsx of all related components
  • Change the stories to .tsx and all related componetns
  • fix all errors related to npm run typecheck
  • Transfer all related tests to vitests from jest
  • Check if npm run build is working and prove the working parts in storybook or example app
  • Check that npm run lint is working correctly and fix all tslint errors

Related Issues

Additional Context
Please check this online codemode editor to change the PropTypes to a proper Ts interfaces

https://github.com/mskelton/ratchet
Online editor: https://ratchet.mskelton.dev/

We need to be pretty concious about migration to ts cause it could create a potential breaking changes. Also if there will be too much changes at once maybe consider to split up the task again. Also some dependencies could be hidden and only discovered while executing the migration, could also lead to potential reconsidering the order of task execution.

@barsukov barsukov changed the title NativeSelect(All related) [TASK](ui): Migrate NativeSelect(All related) component to TypeScript Aug 16, 2024
@barsukov barsukov added the enhancement New feature or request label Aug 16, 2024
@guoda-puidokaite guoda-puidokaite self-assigned this Oct 28, 2024
@guoda-puidokaite
Copy link
Contributor

guoda-puidokaite commented Nov 11, 2024

Future Improvements 🚀

Note: Added to #570

Issues 🐞

  • Remove default name = "Unnamed Select" value to make sure that the option is only included in form submissions if explicitly set chore(ui): migrate NativeSelect, NativeSelectOption and NativeSelectOptionGroup components to TypeScript #599 (comment)
  • Bug regarding redundant invalid/valid props, as in the Switch component. See screenshot: Option can be invalid and valid at the same time with two icons and a green boarder. Suggestion described here. Screenshot 2024-11-09 at 23 31 54
  • If error and loading are true, loading takes precedence. I think error should precedence? However, a better solution here would be to introduce a variant prop (as suggested for the Switch component here) so only one such state could be true at any one time and therefore, we wouldn't need to do extensive checks. Screenshot 2024-11-09 at 23 32 40
  • When NativeSelectionGroup is disabled, the dropdown doesn't have any default value. It only appears on click. Screenshot 2024-11-12 at 13 35 48

UX Improvements

  • Disable dropdown if all dropdown groups/options disabled? See example: all options disabled once you click, but dropdown is still enabled with "Option 1". Screenshot 2024-11-09 at 23 30 50
  • I'd like to further understand the usefulness of the states for the dropdown. At the very least, it would be helpful to have messages explaining why some options have these states, especially in the case of error. Screenshot 2024-11-09 at 23 29 42

CC: @edda @barsukov @andypf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
2 participants