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

feat(kmultiselect): reskin component [KHCP-8992] #1874

Merged
merged 45 commits into from
Jan 9, 2024

Conversation

portikM
Copy link
Member

@portikM portikM commented Nov 27, 2023

Summary

Jira
Figma

KMultiselect component reskin.

Links:

PR Checklist

  • Conventional Commits all commits follow the conventional commit standards outlined in the main README.
  • Tests coverage: test coverage was added for new features and bug fixes
  • Docs: includes a technically accurate README

@portikM portikM self-assigned this Nov 27, 2023
Copy link

netlify bot commented Nov 27, 2023

Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit 506d035
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/659c49580d869800080cab1f
😎 Deploy Preview https://deploy-preview-1874--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@portikM portikM changed the title Feat/khcp 8992 kmultiselect reskin feat(kmultiselect): reskin component [KHCP-8992] Nov 27, 2023
Copy link

netlify bot commented Nov 27, 2023

Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit 506d035
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/659c495864ec9a000867fd81
😎 Deploy Preview https://deploy-preview-1874--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@portikM portikM force-pushed the feat/khcp-8992-kmultiselect-reskin branch 2 times, most recently from f8bd88b to 4eb0e67 Compare November 30, 2023 17:13
@portikM portikM marked this pull request as ready for review November 30, 2023 23:45
@portikM portikM requested a review from a team as a code owner November 30, 2023 23:45
docs/components/multiselect.md Outdated Show resolved Hide resolved
docs/components/multiselect.md Outdated Show resolved Hide resolved
docs/components/multiselect.md Outdated Show resolved Hide resolved
docs/components/multiselect.md Outdated Show resolved Hide resolved
docs/components/multiselect.md Outdated Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Outdated Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Outdated Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Outdated Show resolved Hide resolved
sandbox/pages/SandboxMultiselect.vue Outdated Show resolved Hide resolved
@portikM portikM force-pushed the feat/khcp-8992-kmultiselect-reskin branch from f0f0f8b to d6c14c1 Compare December 5, 2023 18:23
@portikM portikM changed the base branch from alpha to adoption-phase-3-rc December 5, 2023 19:23
@portikM portikM force-pushed the feat/khcp-8992-kmultiselect-reskin branch from d6c14c1 to e1a2341 Compare December 5, 2023 19:45
@portikM portikM force-pushed the adoption-phase-3-rc branch 2 times, most recently from d30c932 to 75e976b Compare December 7, 2023 16:17
Base automatically changed from adoption-phase-3-rc to alpha December 8, 2023 14:14
@portikM portikM force-pushed the feat/khcp-8992-kmultiselect-reskin branch from e1a2341 to ae4876d Compare December 8, 2023 20:00
@portikM portikM force-pushed the feat/khcp-8992-kmultiselect-reskin branch 2 times, most recently from ccdd49f to a501500 Compare December 20, 2023 20:33
@portikM portikM force-pushed the feat/khcp-8992-kmultiselect-reskin branch from d69c959 to f762ac7 Compare January 2, 2024 14:39
@portikM portikM changed the base branch from alpha to feat/reskin-phase-4 January 2, 2024 14:51
src/components/KMultiselect/KMultiselect.vue Outdated Show resolved Hide resolved
### 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.
Copy link
Member

Choose a reason for hiding this comment

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

Screenshot 2024-01-03 at 9 13 02 PM

issue: we need to sanitize strings that are added to prevent injecting HTML and script tags into the DOM

Copy link
Member Author

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

docs/components/multiselect.md Show resolved Hide resolved
docs/components/multiselect.md Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Show resolved Hide resolved
src/components/KMultiselect/KMultiselect.vue Outdated Show resolved Hide resolved
src/styles/mixins/_input-text.scss Outdated Show resolved Hide resolved
@portikM portikM changed the base branch from feat/reskin-phase-4 to alpha January 4, 2024 14:51
Copy link
Collaborator

@kaiarrowood kaiarrowood left a comment

Choose a reason for hiding this comment

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

  1. Hitting Enter after trying to create an item unexpectedly opens another dropdown
    image

  2. 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?
    image

  3. v-model value should include disabled items
    image

  4. Clear button should not clear readonly items (but you control this, recommend removing the readonly prop on the item for this example)

image

  1. nit: truncated item is not long enough to actually be truncated
    image

  2. 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.

image

Maybe we can emphasize this line in the docs a little more?
image

  1. Autosuggest example doesn't filter correctly with query of o?
    image

  2. Item display is incorrect for this example (I think we want multi line display instead of inline?)
    image

@portikM
Copy link
Member Author

portikM commented Jan 8, 2024

  1. Hitting Enter after trying to create an item unexpectedly opens another dropdown
    image
  2. 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?
    image
  3. v-model value should include disabled items
    image
  4. Clear button should not clear readonly items (but you control this, recommend removing the readonly prop on the item for this example)

image

  1. nit: truncated item is not long enough to actually be truncated
    image
  2. 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.

image

Maybe we can emphasize this line in the docs a little more? image

  1. Autosuggest example doesn't filter correctly with query of o?
    image
  2. Item display is incorrect for this example (I think we want multi line display instead of inline?)
    image

All points addressed, thanks for great catches Kai!

@kaiarrowood
Copy link
Collaborator

kaiarrowood commented Jan 8, 2024

Functionally approved with non-blocking nits.

Everything looks fixed except this one (fixed in the docs, but not in the sandbox):

  1. Hitting Enter after trying to create an item unexpectedly opens another dropdown
    image
  • nit: this disabledTooltipText doesn't appear to be in use anymore, we should remove it.
    image

@adamdehaven
Copy link
Member

@portikM when I hover over the multiselect, should my cursor change to a pointer?

@adamdehaven
Copy link
Member

issue: I cannot "tab" to a multiselect control - try on the first example in the docs site. I believe the div role="button" needs tabindex="0"
image

Copy link
Collaborator

@kaiarrowood kaiarrowood left a 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

@portikM portikM force-pushed the feat/khcp-8992-kmultiselect-reskin branch from 506d035 to eac9720 Compare January 9, 2024 01:24
@portikM portikM merged commit 79f66a7 into feat/reskin-phase-4 Jan 9, 2024
3 checks passed
@portikM portikM deleted the feat/khcp-8992-kmultiselect-reskin branch January 9, 2024 16:06
portikM added a commit that referenced this pull request Jan 15, 2024
* 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]>
portikM added a commit that referenced this pull request Jan 17, 2024
* 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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants