-
Notifications
You must be signed in to change notification settings - Fork 22
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
feat(kmultiselect): reskin component [KHCP-8992] #1874
feat(kmultiselect): reskin component [KHCP-8992] #1874
Conversation
✅ Deploy Preview for kongponents-sandbox ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kongponents ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
f8bd88b
to
4eb0e67
Compare
f0f0f8b
to
d6c14c1
Compare
d6c14c1
to
e1a2341
Compare
d30c932
to
75e976b
Compare
e1a2341
to
ae4876d
Compare
ccdd49f
to
a501500
Compare
d69c959
to
f762ac7
Compare
docs/components/multiselect.md
Outdated
### enableItemCreation | ||
|
||
`KMultiselect` can offer users the ability to add custom items to the list by typing the item they want to and then clicking the `... (Add new value)` item at the bottom of the list, which will also automatically select it. | ||
KMultiselect can offer users the ability to add custom items to the list by typing the item they want to and then clicking the `... (Add new value)` item at the bottom of the list, which will also automatically select it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made a note to merge this PR after the KSelect so that the util function I made is available - will update this then
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
-
Hitting Enter after trying to create an item unexpectedly opens another dropdown
-
Have we lost the ability to specify a placeholder? Just want to confirm the placeholder text would be displayed instead of the count if nothing is selected?
-
Clear button should not clear readonly items (but you control this, recommend removing the readonly prop on the item for this example)
-
nit: truncated item is not long enough to actually be truncated
-
I'm not exactly sure what happened when I hit Enter (to try and create a new item) but I definitely shouldn't be seeing two dropdowns. EDIT: I just realized I'm supposed to click the add new instead of hit enter, it's not obvious that the item is actually a button.
@portikM when I hover over the multiselect, should my cursor change to a pointer? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Functionally verified KMultiselect functionality looks good for both sandbox and docs
Co-authored-by: Adam DeHaven <[email protected]>
506d035
to
eac9720
Compare
* feat(kbadge): component reskin [KHCP-8968] (#1800) * feat(kbadge): reskin component - wip [KHCP-8968] * feat(kbadge): reskin component - wip [KHCP-8968] * fix(kbadge): styling fix [KHCP-8968] * chore(sandbox): comment out tooltips [KHCP-8968] * fix(kbadge): method styling [KHCP-8968] * fix(kbadge): icon slot [KHCP-8968] * fix(kbadge): tooltip props [KHCP-8968] * fix(kmethodbadge): remove type [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * test(kbadge): test icon slot [KHCP-8968] * test(kmultiselect): fix component tests [KHCP-8968] * fix(kmultiselect): minor fix [KHCP-8968] * fix(*): misc kbadge fixes [KHCP-8968] * docs(badge): update component docs [KHCP-8968] * fix(kmultiselect): undo changes [KHCP-8968] * fix(kmultiselect): fix component [KHCP-8968] * fix(kbadge): fix neutral appearance [KHCP-8968] * fix(kbadge): misc fixes [KHCP-8968] * fix(kbadge): method badge min width [KHCP-8968] * fix(kbadge): minor fix [KHCP-8968] * fix(kmultiselect): component tests [KHCP-8968] * fix(kmultiselect): fix kbadge props [KHCP-8968] * fix(*): rebase [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): add decorative appearance [KHCP-8968] * docs(badge): minor tweak [KHCP-8968] * fix(kbadge): remove custom colors props [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): remove legacy prop support [KHCP-8968] * fix(kbadge): component mixins [KHCP-8968] * docs(*): small tweaks [KHCP-8968] * fix(kbadge): small tweak [KHCP-8968] --------- Co-authored-by: Adam DeHaven <[email protected]> * feat(kbadge): reskin component - wip [KHCP-8968] * feat(kbadge): reskin component - wip [KHCP-8968] * fix(kbadge): styling fix [KHCP-8968] * fix(kbadge): icon slot [KHCP-8968] * fix(kbadge): tooltip props [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * fix(kmultiselect): minor fix [KHCP-8968] * fix(*): misc kbadge fixes [KHCP-8968] * fix(kmultiselect): undo changes [KHCP-8968] * fix(*): rebase [KHCP-8968] * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): add decorative appearance [KHCP-8968] * chore(sandbox): setup component sandbox [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * test(kmultiselect): fix component tests [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * docs(kmultiselect): update component docs [KHCP-8992] * docs(multiselect): add help and error props sections [KHCP-8992] * fix(kmultiselect): bug fix [KHCP-8992] * fix(kmultiselect): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix: bad rebase * fix(kbadge): remove hidden prop [KHCP-8992] * fix(kmultiselect): refactor input field [KHCP-8992] * fix(kmultiselect): misc tweaks and fixes [KHCP-8992] * test(kmultiselect): update component tests [KHCP-8992] * fix(kmultiselect): minor tweaks [KHCP-8992] * fix(kmultiselect): add key to badge instead of container * test(kmultiselect): fix component tests [KHCP-8992] * fix(kmultiselect): minor styling tweaks [KHCP-8992] * fix(kmultiselect): prevent scroll jump [KHCP-8992] * docs(multiselect): minor tweak [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * test(kmultiselect): fix component test [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): sanitize use input [KHCP-8992] * fix(kmultiselect): update component min width [KHCP-8992] --------- Co-authored-by: Adam DeHaven <[email protected]> Co-authored-by: Adam DeHaven <[email protected]>
* feat(ktabs): reskin component [KHCP-9003] (#1914) * feat(ktabs): reskin component [KHCP-9003] * docs(ktabs): update component docs [KHCP-9003] * fix(ktabs): text colors [KHCP-9003] * fix(ktabs): use anchor tag for tab link [KHCP-9003] * fix(ktabs): minor styling tweak [KHCP-9003] * fix(ktabs): add transition property [KHCP-9003] * fix(ktabs): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(ktabs): address PR feedback [KHCP-9003] * fix: minor fix [KHCP-9003] * fix(ktabs): address PR feedback [KHCP-9003] * fix(sandbox): fix router example [KHCP-9003] * docs: minor update [KHCP-9003] * fix(ktabs): address PR feedback [KHCP-9003] * fix(ktabs): address PR feedback [KHCP-9003] * fix(ktabs): add overflow x [KHCP-9003] --------- Co-authored-by: Adam DeHaven <[email protected]> * fix(kselect): kselect reskin [KHCP-8998] (#1832) * fix(kpagination): replace kselect with kdropdown [KHCP-8998] * feat(kselect): reskin component - wip [KHCP-8998] * fix(kselect): minor fix [KHCP-8998] * fix(kselect): reskin component - wip [KHCP-8998] * fix(kselect): reskin component [KHCP-8998] * fix(kselect): minor fix [KHCP-8998] * test(kselect): fix component tests [KHCP-8998] * fix(kselect): add back filter function prop [KHCP-8998] * fix(kselect): misc fixes [KHCP-8998] * docs(select): update component docs [KHCP-8998] * test(kselect): fix component test [KHCP-8998] * docs(kselect): small tweak [KHCP-8998] * fix(kselect): move clear icon to after slot [KHCP-8998] * fix(kselect): misc fixes [KHCP-8998] * docs(select): minor tweaks [KHCP-8998] * docs(select): add disabled example [KHCP-8998] * fix(kselect): minor fix [KHCP-8998] * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): allow disable default filter function [KHCP-8998] * fix(kselect): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): senitize user input [KHCP-8998] * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): remove console log * fix(kselect): address PR feedback [KHCP-8998] * fix(kselect): minor tweak [KHCP-8998] * docs(kselect): minor tweak [KHCP-8998] --------- Co-authored-by: Adam DeHaven <[email protected]> * feat(kmultiselect): reskin component [KHCP-8992] (#1874) * feat(kbadge): component reskin [KHCP-8968] (#1800) * feat(kbadge): reskin component - wip [KHCP-8968] * feat(kbadge): reskin component - wip [KHCP-8968] * fix(kbadge): styling fix [KHCP-8968] * chore(sandbox): comment out tooltips [KHCP-8968] * fix(kbadge): method styling [KHCP-8968] * fix(kbadge): icon slot [KHCP-8968] * fix(kbadge): tooltip props [KHCP-8968] * fix(kmethodbadge): remove type [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * test(kbadge): test icon slot [KHCP-8968] * test(kmultiselect): fix component tests [KHCP-8968] * fix(kmultiselect): minor fix [KHCP-8968] * fix(*): misc kbadge fixes [KHCP-8968] * docs(badge): update component docs [KHCP-8968] * fix(kmultiselect): undo changes [KHCP-8968] * fix(kmultiselect): fix component [KHCP-8968] * fix(kbadge): fix neutral appearance [KHCP-8968] * fix(kbadge): misc fixes [KHCP-8968] * fix(kbadge): method badge min width [KHCP-8968] * fix(kbadge): minor fix [KHCP-8968] * fix(kmultiselect): component tests [KHCP-8968] * fix(kmultiselect): fix kbadge props [KHCP-8968] * fix(*): rebase [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): add decorative appearance [KHCP-8968] * docs(badge): minor tweak [KHCP-8968] * fix(kbadge): remove custom colors props [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * fix: address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): remove legacy prop support [KHCP-8968] * fix(kbadge): component mixins [KHCP-8968] * docs(*): small tweaks [KHCP-8968] * fix(kbadge): small tweak [KHCP-8968] --------- Co-authored-by: Adam DeHaven <[email protected]> * feat(kbadge): reskin component - wip [KHCP-8968] * feat(kbadge): reskin component - wip [KHCP-8968] * fix(kbadge): styling fix [KHCP-8968] * fix(kbadge): icon slot [KHCP-8968] * fix(kbadge): tooltip props [KHCP-8968] * test(kbadge): fix component tests [KHCP-8968] * fix(kmultiselect): minor fix [KHCP-8968] * fix(*): misc kbadge fixes [KHCP-8968] * fix(kmultiselect): undo changes [KHCP-8968] * fix(*): rebase [KHCP-8968] * fix(kbadge): address PR feedback [KHCP-8968] * fix(kbadge): add decorative appearance [KHCP-8968] * chore(sandbox): setup component sandbox [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component - wip [KHCP-8992] * feat(kmultiselect): reskin component [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * test(kmultiselect): fix component tests [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * fix(kmultiselect): misc fixes [KHCP-8992] * docs(kmultiselect): update component docs [KHCP-8992] * docs(multiselect): add help and error props sections [KHCP-8992] * fix(kmultiselect): bug fix [KHCP-8992] * fix(kmultiselect): address PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix: bad rebase * fix(kbadge): remove hidden prop [KHCP-8992] * fix(kmultiselect): refactor input field [KHCP-8992] * fix(kmultiselect): misc tweaks and fixes [KHCP-8992] * test(kmultiselect): update component tests [KHCP-8992] * fix(kmultiselect): minor tweaks [KHCP-8992] * fix(kmultiselect): add key to badge instead of container * test(kmultiselect): fix component tests [KHCP-8992] * fix(kmultiselect): minor styling tweaks [KHCP-8992] * fix(kmultiselect): prevent scroll jump [KHCP-8992] * docs(multiselect): minor tweak [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * test(kmultiselect): fix component test [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): address PR feedback [KHCP-8992] * fix(kmultiselect): sanitize use input [KHCP-8992] * fix(kmultiselect): update component min width [KHCP-8992] --------- Co-authored-by: Adam DeHaven <[email protected]> Co-authored-by: Adam DeHaven <[email protected]> * test(kmultiselect): fix component tests (#1936) * feat(kcopy): reskin component [KHCP-9663] (#1925) * chore(sandbox): setup component sandbox [KHCP-9663] * feat(kcopy): reskin component [KHCP-9663] * fix(kcard): add comment [KHCP-9663] * chore(kcopy): sandbox tweaks [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): address Pr feedback [KHCP-9663] * fix(kcopy): address PR feedback [KHCP-9663] * fix(kcopy): minor tweak [KHCP-9663] * chore(sandbox): minor fix [KHCP-9663] * fix(kselect): bind provided attributes over default (#1937) * fix(kselect): fix klabel and help text elements (#1938) * fix(kselect, kmultiselect): kpop unique target (#1942) * fix(kselect, kmultiselect): kpop unique target * fix: apply PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix: rever suggestion * fix(kselect): minor fix --------- Co-authored-by: Adam DeHaven <[email protected]> * fix(kmultiselect): fix staging dismiss icon (#1943) * fix(kselect): do not clear selected item when items empty (#1951) * fix(kselect): do not clear selected item when items empty * fix(kselect): hide placeholder when custom selected item is visible * fix(kselect): minor fix * fix(*): phase 4 misc fixes (#1954) * fix(kbadge): update hover selector * fix(kmultiselect): type name fix * docs: fix typo --------- Co-authored-by: Adam DeHaven <[email protected]> Co-authored-by: Adam DeHaven <[email protected]>
Summary
Jira
Figma
KMultiselect
component reskin.Links:
PR Checklist