From 2df821512f7e7174ad71dc4fba21829e815b4719 Mon Sep 17 00:00:00 2001
From: Gregor Wassmann <gregor.wassmann@gmail.com>
Date: Fri, 31 Mar 2023 22:54:26 +0200
Subject: [PATCH] chore: v11 TreeView

Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.
---
 COMPONENT_INDEX.md                                         | 2 +-
 docs/src/COMPONENT_API.json                                | 5 ++---
 docs/src/pages/components/TreeView.svx                     | 6 +++---
 .../TreeView/{TreeViewCompact.svelte => TreeViewXs.svelte} | 2 +-
 src/TreeView/TreeView.svelte                               | 7 +++----
 tests/TreeView.test.svelte                                 | 2 +-
 types/TreeView/TreeView.svelte.d.ts                        | 4 ++--
 7 files changed, 13 insertions(+), 15 deletions(-)
 rename docs/src/pages/framed/TreeView/{TreeViewCompact.svelte => TreeViewXs.svelte} (98%)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 48220220..a0d5f97b 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4661,7 +4661,7 @@ export interface TreeNode {
 | selectedIds   | No       | <code>let</code>      | Yes      | <code>ReadonlyArray<TreeNodeId></code>                        | <code>[]</code>                                                                                                                                                                            | Set the node ids to be selected                                                                  |
 | activeId      | No       | <code>let</code>      | Yes      | <code>TreeNodeId</code>                                       | <code>""</code>                                                                                                                                                                            | Set the current active node id<br />Only one node can be active                                  |
 | children      | No       | <code>let</code>      | No       | <code>Array<TreeNode></code>                                  | <code>[]</code>                                                                                                                                                                            | Provide an array of children nodes to render                                                     |
-| size          | No       | <code>let</code>      | No       | <code>"default" &#124; "compact"</code>                       | <code>"default"</code>                                                                                                                                                                     | Specify the TreeView size                                                                        |
+| size          | Yes      | <code>let</code>      | No       | <code>"xs"</code>                                             | <code>undefined</code>                                                                                                                                                                     | Specify the TreeView size                                                                        |
 | labelText     | No       | <code>let</code>      | No       | <code>string</code>                                           | <code>""</code>                                                                                                                                                                            | Specify the label text                                                                           |
 | hideLabel     | No       | <code>let</code>      | No       | <code>boolean</code>                                          | <code>false</code>                                                                                                                                                                         | Set to `true` to visually hide the label text                                                    |
 | expandAll     | No       | <code>function</code> | No       | <code>() => void</code>                                       | <code>() => { expandedIds = [...nodeIds]; }</code>                                                                                                                                         | Programmatically expand all nodes                                                                |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d137a48f..02a7810d 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -14439,11 +14439,10 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the TreeView size",
-          "type": "\"default\" | \"compact\"",
-          "value": "\"default\"",
+          "type": "\"xs\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
-          "isRequired": false,
+          "isRequired": true,
           "constant": false,
           "reactive": false
         },
diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index fe2a4aa0..3b83b9f5 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -23,11 +23,11 @@ The active node can be set through `activeId`.
 
 <FileSource src="/framed/TreeView/TreeViewActive" />
 
-## Compact size
+## Extra-small size
 
-Set `size` to `"compact"` to use the compact variant.
+Set `size` to `"xs"` to use the extra-small variant.
 
-<FileSource src="/framed/TreeView/TreeViewCompact" />
+<FileSource src="/framed/TreeView/TreeViewXs" />
 
 ## With icons
 
diff --git a/docs/src/pages/framed/TreeView/TreeViewCompact.svelte b/docs/src/pages/framed/TreeView/TreeViewXs.svelte
similarity index 98%
rename from docs/src/pages/framed/TreeView/TreeViewCompact.svelte
rename to docs/src/pages/framed/TreeView/TreeViewXs.svelte
index 126c1871..16579b35 100644
--- a/docs/src/pages/framed/TreeView/TreeViewCompact.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewXs.svelte
@@ -46,7 +46,7 @@
 </script>
 
 <TreeView
-  size="compact"
+  size="xs"
   labelText="Cloud Products"
   children="{children}"
   bind:activeId
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index fa25b8a0..73f587f9 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -34,9 +34,9 @@
 
   /**
    * Specify the TreeView size
-   * @type {"default" | "compact"}
+   * @type {"xs"}
    */
-  export let size = "default";
+  export let size;
 
   /** Specify the label text */
   export let labelText = "";
@@ -194,8 +194,7 @@
   role="tree"
   bind:this="{ref}"
   class:bx--tree="{true}"
-  class:bx--tree--default="{size === 'default'}"
-  class:bx--tree--compact="{size === 'compact'}"
+  class:bx--tree--xs="{size === 'xs' || size === 'compact'}"
   aria-label="{hideLabel ? labelText : undefined}"
   aria-labelledby="{!hideLabel ? labelId : undefined}"
   aria-multiselectable="{selectedIds.length > 1 || undefined}"
diff --git a/tests/TreeView.test.svelte b/tests/TreeView.test.svelte
index 2aacf2d2..e472416d 100644
--- a/tests/TreeView.test.svelte
+++ b/tests/TreeView.test.svelte
@@ -63,7 +63,7 @@
 
 <TreeView
   bind:this="{treeview}"
-  size="compact"
+  size="xs"
   labelText="Cloud Products"
   children="{children}"
   bind:activeId
diff --git a/types/TreeView/TreeView.svelte.d.ts b/types/TreeView/TreeView.svelte.d.ts
index dc7f5757..f9c70d16 100644
--- a/types/TreeView/TreeView.svelte.d.ts
+++ b/types/TreeView/TreeView.svelte.d.ts
@@ -41,9 +41,9 @@ export interface TreeViewProps extends RestProps {
 
   /**
    * Specify the TreeView size
-   * @default "default"
+   * @default undefined
    */
-  size?: "default" | "compact";
+  size: "xs";
 
   /**
    * Specify the label text