feat(ktreelist): reskin component [KHCP-9008] (#2064)

* chore(sandbox): setup component sandbox [KHCP-9008] * fix(ktreelist): update props and selectors [KHCP-9008] * feat(ktreelist): reskin component [KHCP-9008] * fix(ktreelist): minor fix [KHCP-9008] * docs(tree-list): update component docs [KHCP-9008] * fix(ktreelist): address PR feedback [KHCP-9008] * fix(ktreelist): misc fixes [KHCP-9008] * fix(ktreelist): minor fixes [KHCP-9008] * fix(ktreelist): focus visible state [KHCP-9008] * docs(tree-list): minor fix [KHCP-9008] * docs(tree-list): misc fixes [KHCP-9008]
Kong · Mar 14, 2024 · 713f5b1 · 713f5b1
1 parent c737327
commit 713f5b1
Show file tree

Hide file tree

Showing 10 changed files with 530 additions and 485 deletions.
diff --git a/docs/components/tree-list.md b/docs/components/tree-list.md
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -712,8 +712,26 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 * `k-tooltip-bottom` class has been changed to `tooltip-bottom`
 * `k-tooltip-left` class has been changed to `tooltip-left`
 
-### KTree List
+### KTreeList
 
+#### Props
+
+* `icon` property has been removed from `items` prop. You can use the `item-icon` slot to provide your custom icon or use new `hideIcons` prop to hide the icon
+
+#### Constants, Types & Interfaces
+
+* `icon` property has been removed from `TreeListItem` interface
+
+#### Structure
+
+* `k-tree-draggable` class has been changed to `tree-draggable`
+* `k-tree-item-container` class has been changed to `tree-item-container`
+* `k-tree-list-grabbing` class has been changed to `tree-list-grabbing`
+* `k-tree-item-grabbing` class has been changed to `tree-item-grabbing`
+* `k-tree-item-dragged` class has been changed to `tree-item-dragged`
+* `k-tree-item` class has been changed to `tree-item`
+* `k-tree-item-icon` class has been changed to `tree-item-icon`
+* `k-tree-item-label` class has been changed to `tree-item-label`
 
 ### KTruncate
 

diff --git a/sandbox/index.ts b/sandbox/index.ts
@@ -40,6 +40,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KTabs', to: { name: 'tabs' } },
   { name: 'KTextarea', to: { name: 'textarea' } },
   { name: 'KToaster', to: { name: 'toaster' } },
+  { name: 'KTreeList', to: { name: 'treelist' } },
 ])
 
 // Provide the app links to the SandboxLayout components

diff --git a/sandbox/pages/SandboxTreeList.vue b/sandbox/pages/SandboxTreeList.vue
@@ -0,0 +1,141 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KTreeList"
+  >
+    <div class="ktreelist-sandbox">
+      <SandboxSectionComponent>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A12779&mode=dev&t=sqzAn4PCrvEoYpdz-1">
+          Figma
+        </KExternalLink>
+      </SandboxSectionComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="item">
+        <KTreeList :items="items1" />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="disableDrag">
+        <KTreeList
+          disable-drag
+          :items="items2"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="maxDepth">
+        <KTreeList
+          :items="items3"
+          :max-depth="4"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="width">
+        <KTreeList
+          :items="items4"
+          width="300"
+        />
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="hideIcons">
+        <KTreeList
+          hide-icons
+          :items="items5"
+        />
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="item-icon">
+        <KTreeList :items="items6">
+          <template #item-icon="{ item }">
+            <InboxIcon
+              v-if="item.id.includes('folder')"
+              :color="item.selected ? KUI_COLOR_TEXT_DECORATIVE_PURPLE : KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG"
+            />
+          </template>
+        </KTreeList>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="item-label">
+        <KTreeList :items="items7">
+          <template #item-label="{ item }">
+            <span v-if="item.id.includes('folder')">
+              <strong>{{ item.name }}</strong>
+            </span>
+            <span v-else>
+              {{ item.name }}
+            </span>
+          </template>
+        </KTreeList>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject, ref } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import type { TreeListItem } from '@/types'
+import { InboxIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DECORATIVE_PURPLE, KUI_COLOR_TEXT_DECORATIVE_PURPLE_STRONG } from '@kong/design-tokens'
+
+const defaultItems = [
+  {
+    name: 'Components',
+    id: 'components-folder',
+    children: [
+      {
+        name: 'ProfileCard.vue',
+        id: 'profile-card',
+      },
+    ],
+  },
+  {
+    name: 'Pages',
+    id: 'pages-folder',
+    children: [
+      {
+        name: 'Home.vue',
+        id: 'home',
+      },
+      {
+        name: 'User',
+        id: 'user-folder',
+        children: [
+          {
+            name: 'UserList.vue',
+            id: 'user-list',
+          },
+          {
+            name: 'UserDetail.vue',
+            id: 'user-detail',
+          },
+          {
+            name: 'Settings',
+            id: 'settings-folder',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Types',
+    id: 'types-folder',
+    children: [{
+      name: 'user.d.ts',
+      id: 'user-types',
+    }],
+  },
+]
+
+const items1 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items2 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items3 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items4 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items5 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items6 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+const items7 = ref<TreeListItem[]>(JSON.parse(JSON.stringify(defaultItems)))
+</script>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
@@ -158,6 +158,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Toaster Sandbox' },
     component: () => import('../pages/SandboxToaster.vue'),
   },
+  {
+    path: '/treelist',
+    name: 'treelist',
+    meta: { title: 'Tree List Sandbox' },
+    component: () => import('../pages/SandboxTreeList.vue'),
+  },
 ]
 
 export default componentRoutes