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]>
Kong · Jan 15, 2024 · 284b563 · 284b563
1 parent bda5458
commit 284b563
Show file tree

Hide file tree

Showing 13 changed files with 1,365 additions and 1,137 deletions.
diff --git a/docs/components/multiselect.md b/docs/components/multiselect.md
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -42,6 +42,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 * `hoverColor` prop has been removed
 * `truncationTooltip` prop has been changed to `boolean`. When used in conjunction with new `tooltip` prop, KBadge will only show the tooltip when content passed through the `default` slot needs truncation. Otherwise, if `tooltip` prop is used without `truncationTooltip` prop - tooltip will be shown regardless of whether truncation is needed
 * `forceTooltip` prop has been removed
+* `hidden` prop has been removed
 
 #### Structure
 
@@ -195,17 +196,17 @@ Component has been renamed to `KDropdown`
 #### Structure
 
 * `k-dropdown-menu` class has been removed (`k-dropdown` class remains)
-* `k-dropdown-menu-popover` `testid` data attribute has been renamed to `k-dropdown-popover`
+* `k-dropdown-menu-popover` `data-testid` attribute has been renamed to `k-dropdown-popover`
 * `k-dropdown-trigger` class has been removed
-* `k-dropdown-trigger` `testid` data attribute has been renamed to `dropdown-trigger`
+* `k-dropdown-trigger` `data-testid` attribute has been renamed to `dropdown-trigger`
 * `k-dropdown-btn` class has been renamed to `dropdown-trigger-button`
-* `k-dropdown-btn` `testid` data attribute has been renamed to `dropdown-trigger-button`
+* `k-dropdown-btn` `data-testid` attribute has been renamed to `dropdown-trigger-button`
 * `k-dropdown-list` class has been removed
-* `k-dropdown-list` `testid` data attribute has been renamed to `dropdown-list`
+* `k-dropdown-list` `data-testid` attribute has been renamed to `dropdown-list`
 * `k-dropdown-selected-option` class has been renamed to `dropdown-selected-option`
 * `k-dropdown-item-trigger` class has been renamed to `dropdown-item-trigger`
 * `k-dropdown-item-trigger-label` class has been renamed to `dropdown-item-trigger-label`
-* dynamic `k-dropdown-item` `testid` data attribute has been renamed to `dropdown-item`
+* dynamic `k-dropdown-item` `data-testid` attribute has been renamed to `dropdown-item`
 
 #### Constants, Types & Interfaces
 
@@ -313,6 +314,42 @@ This component has been removed. Please refer to KBadge component which has been
 
 ### KMultiselect
 
+#### Props
+
+* `testMode` prop has been removed
+* `filterFunc` prop name has been changed to `filterFunction`
+* `disabledTooltipText` property of object passed through `items` prop is no longer supported
+* default value of `collapsedContext` prop has changed to `true`
+* default value of `selectedRowCount` prop has changed to `1`
+* `expandSelected` prop has been removed
+
+#### Events
+
+* `item:added` event was renamed to `item-added`
+* `item:removed` event was renamed to `item-removed`
+
+#### Structure
+
+* `k-multiselect-item` class has been changed to `multiselect-item`
+* `k-multiselect-item-container` class has been changed to `multiselect-item-container`
+* `k-multiselect-item-label` class has been changed to `multiselect-item-label`
+* `k-multiselect-group-container` class has been changed to `multiselect-group-container`
+* `k-multiselect-group-title` class has been changed to `multiselect-group-title`
+* `k-multiselect-label` `data-testid` attribute has been changed to `multiselect-label`
+* `k-multiselect-container` `data-testid` attribute has been changed to `multiselect-container`
+* `k-multiselect-wrapper` class has been changed to `multiselect-wrapper`
+* `k-multiselect-trigger` class and `data-testid` attribute has been changed to `multiselect-trigger`
+* `k-multiselect-selections` class and `data-testid` attribute has been changed to `selection-badges-container`
+* `k-multiselect-selection-badge` class has been changed to `multiselect-selection-badge`
+* `k-multiselect-icon` class has been changed to `multiselect-icons-container`
+* `k-multiselect-clear-icon` class and `data-testid` attribute has been changed to `multiselect-clear-icon`
+* `k-multiselect-input` class and `data-testid` attribute has been changed to `multiselect-input`
+* `k-multiselect-list` class has been changed to `multiselect-list`
+* `k-multiselect-new-item` class has been changed to `multiselect-add-item`
+* `k-multiselect-empty-item` class and `data-testid` attribute has been changed to `multiselect-empty-item`
+* `k-multiselect-dropdown-footer-text` class has been changed to `dropdown-footer`
+* `k-multiselect-popover` class has been changed to `multiselect-popover`
+* `k-multiselect-chevron-icon` class has been changed to `multiselect-chevron-icon`
 
 ### KPagination
 

diff --git a/sandbox/pages/SandboxInput.vue b/sandbox/pages/SandboxInput.vue
@@ -9,9 +9,17 @@
         is-subtitle
         title="Figma"
       />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=218%3A646&mode=dev">
-        Figma
-      </KExternalLink>
+      <SandboxSectionComponent>
+        <div>
+          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=218%3A646&mode=dev">
+            Figma
+          </KExternalLink>
+        </div>
+
+        <div>
+          <KInput />
+        </div>
+      </SandboxSectionComponent>
 
       <!-- Props -->
       <SandboxTitleComponent