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(KtField*Select): Remove Element-UI Entirely #565

Merged
merged 5 commits into from
May 31, 2022
Merged

fix(KtField*Select): Remove Element-UI Entirely #565

merged 5 commits into from
May 31, 2022

Conversation

FlorianWendelborn
Copy link
Member

@FlorianWendelborn FlorianWendelborn commented Dec 5, 2021 •
edited

  • Forward helpText slot
  • double clicking should keep dropdown open
  • selecting an option needs to refocus the field
  • if field is multi and not empty and not interacting, hide input
  • restore arrow-key navigation for options
  • add slot support for options
  • check that enter from input doesn't trigger the submit (of a form it's used within)
  • close on blur and clickoutside
  • support tabIndex
  • check if data-test is implemented sufficiently
  • margin fix (root component is not a KtField
  • add cache for previously-seen options
  • implement maximumSelectable on MultiSelects
  • make sure tabbing into opens the dropdown
    • minimize the input instead of hiding it completely
    • move the input outside screen to make the thing focusable but the input not visible when (isMultiple+dropDown is closed+empty query)
  • pick the changes to make-props (support of any) to a separate PR where tests can be added feature(makeProps): Add Support for z.any() #630
  • stop allowing the user to type while the dropdown is closed
    • this has a weird effect and the first letter of the query is shown when we open the dropdown again
    • solution: watch on query changes when the dropdown is closed & reopen it
  • test scrollbars on macOS

@FlorianWendelborn FlorianWendelborn added type:enhancement features, etc. type:refactor priority:3-normal Should be fixed soon package:kotti-ui @3yourmind/kotti-ui autorebase:opt-in Apply this label to enable automatic rebasing labels Dec 5, 2021
@render
Copy link

render bot commented Dec 5, 2021

Your Render PR Server URL is https://kotti-pr-565.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c6mkthvs437q1hv6ifu0.

@FlorianWendelborn FlorianWendelborn marked this pull request as draft December 5, 2021 23:44
@FlorianWendelborn FlorianWendelborn added the autorebase:non-rebaseable AutoRebase applies this label when a pull request can't be rebased automatically label Dec 17, 2021
@carsoli
Copy link
Contributor

carsoli commented Jan 17, 2022

This should be next on the list of Kotti Issues to tackle, it's blocking incubators for a while now

@FlorianWendelborn

@FlorianWendelborn FlorianWendelborn added priority:4-high ⚠️ Needs to be fixed ASAP, but without HACKs and removed autorebase:non-rebaseable AutoRebase applies this label when a pull request can't be rebased automatically priority:3-normal Should be fixed soon labels Mar 17, 2022
@carsoli
Copy link
Contributor

carsoli commented Mar 30, 2022 •
edited

https://3yourmind.atlassian.net/browse/B3-11202
for our consideration, apparently the desired behavior is to always sort options based on label

can we extend the api to accept a sortFunction, that defaults to (option) => options.sort((a, b) => a.label - b.label)

@FlorianWendelborn FlorianWendelborn added the autorebase:non-rebaseable AutoRebase applies this label when a pull request can't be rebased automatically label May 12, 2022
@carsoli carsoli force-pushed the remove-element-ui-from-select branch from cd63990 to 05abb5b Compare May 20, 2022 19:37
@FlorianWendelborn FlorianWendelborn removed the autorebase:non-rebaseable AutoRebase applies this label when a pull request can't be rebased automatically label May 20, 2022
@FlorianWendelborn FlorianWendelborn force-pushed the remove-element-ui-from-select branch 2 times, most recently from 2f20a83 to 1303585 Compare May 23, 2022 17:46
@FlorianWendelborn FlorianWendelborn marked this pull request as ready for review May 23, 2022 17:46
@FlorianWendelborn FlorianWendelborn removed the autorebase:non-rebaseable AutoRebase applies this label when a pull request can't be rebased automatically label May 25, 2022
carsoli
carsoli reviewed May 30, 2022
View reviewed changes
Copy link
Contributor

@carsoli carsoli left a comment

Choose a reason for hiding this comment

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

`

packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue Show resolved Hide resolved
packages/documentation/pages/usage/components/form-fields.vue Show resolved Hide resolved
packages/documentation/pages/usage/components/form-fields.vue Outdated Show resolved Hide resolved
packages/documentation/pages/usage/components/form-fields.vue Show resolved Hide resolved
packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue Outdated Show resolved Hide resolved
packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue Outdated Show resolved Hide resolved
packages/kotti-ui/source/kotti-field-select/components/Options.vue Show resolved Hide resolved
packages/kotti-ui/source/kotti-field-select/components/Options.vue Show resolved Hide resolved
packages/kotti-ui/source/kotti-field-select/components/Options.vue Outdated Show resolved Hide resolved
packages/kotti-ui/source/kotti-field-select/components/Options.vue Outdated Show resolved Hide resolved
@carsoli carsoli mentioned this pull request May 30, 2022
Open
@carsoli carsoli force-pushed the remove-element-ui-from-select branch 4 times, most recently from 1763af9 to 270af11 Compare May 30, 2022 23:51
@carsoli carsoli mentioned this pull request May 31, 2022
Closed
This was linked to issues May 31, 2022
Expose remote search option off el-ui selects #344
Closed
Options stay open KtField*Select after performing action #538
Closed
KtField*Select: Weird Padding on Windows/Linux #544
Closed
KtFieldMultiSelect should display the action(s) even when there is no option displayed #625
Closed
@carsoli carsoli force-pushed the remove-element-ui-from-select branch from b29931e to 97e18a3 Compare May 31, 2022 11:29
@carsoli carsoli force-pushed the remove-element-ui-from-select branch from 97e18a3 to 913853e Compare May 31, 2022 11:59
FlorianWendelborn and others added 5 commits May 31, 2022 14:01
@FlorianWendelborn @carsoli
fix(vetur): Use Strict Mode
7ca8071 
Turns out that vetur only reads the top-level tsconfig
@FlorianWendelborn @carsoli
refactor(KtFieldSelect): Remove Element UI
ff2d61d 
Co-Authored-By: Carol Soliman <[email protected]>
@FlorianWendelborn @carsoli
improvement(documentation): Add Yoco Previews to leftIcon & rightIcon
031ace0
@carsoli
feat(KtField*Select*): implement scroll-to behavior on keyboard navig…
271b005 
…ation

..scroll to the option as you use keyboard (arrow down/up)

fix: show separator between options/no-data & actions
..even if options.length ===0 since no-data is still an item

fix: scrollbar for chrome
@carsoli @FlorianWendelborn
fix(KtField*Select): implemented maximumSelectable properly
54f1c82 
- disable the rest of the options on multi-select if maximumSelectable is reached
- feat: show `isUnsorted` prop on documentation
- fix: `isInputVisible` by moving the input out of screen instead
  - this is to properly support tabbing into (focus) when the dropdown is closed
  - we can't tab/focus into a field if there's no input
- fix: open the dropdown if the user starts typing into the field
  - in single selects, when user selects an option, the dropdown closes
  - the input still exists in the focused field yet the dropdown is closed
  - if the user starts typing, we open the dropdown again
  - it's an edge case that had weird UX previously
- fix: horizontal scrollbar UI

Co-Authored-By: Florian Wendelborn <[email protected]>
@carsoli carsoli force-pushed the remove-element-ui-from-select branch from 913853e to 54f1c82 Compare May 31, 2022 12:01
@carsoli carsoli enabled auto-merge (rebase) May 31, 2022 12:02
@carsoli carsoli disabled auto-merge May 31, 2022 12:02
@carsoli carsoli merged commit 4dd010e into master May 31, 2022
@carsoli carsoli deleted the remove-element-ui-from-select branch May 31, 2022 12:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@santiagoballadares santiagoballadares santiagoballadares left review comments

@carsoli carsoli carsoli approved these changes

Assignees
No one assigned
Labels
autorebase:opt-in Apply this label to enable automatic rebasing package:kotti-ui @3yourmind/kotti-ui priority:4-high ⚠️ Needs to be fixed ASAP, but without HACKs type:enhancement features, etc. type:refactor
Projects
None yet
Milestone
No milestone
3 participants
@FlorianWendelborn @carsoli @santiagoballadares