From 90a0baf67668ab3dae892674ba3af4081bb619b1 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                               | 4 ++--
 docs/src/pages/components/TreeView.svx                    | 6 +++---
 .../{TreeViewCompact.svelte => TreeViewXs.svelte}         | 2 +-
 src/TreeView/TreeView.svelte                              | 8 ++++----
 tests/TreeView.test.svelte                                | 2 +-
 types/TreeView/TreeView.svelte.d.ts                       | 4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)
 rename docs/src/pages/framed/TreeView/{TreeViewCompact.svelte => TreeViewXs.svelte} (98%)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 121b73cb..978d7c27 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4665,7 +4665,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          | No       | <code>let</code>      | No       | <code>"xs" &#124; "sm"</code>                                 | <code>"sm"</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 664a8c94..cac8c759 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -14485,8 +14485,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the TreeView size",
-          "type": "\"default\" | \"compact\"",
-          "value": "\"default\"",
+          "type": "\"xs\" | \"sm\"",
+          "value": "\"sm\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index fc35f110..11711d1c 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -40,11 +40,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 0400102a..aa51df1d 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -63,9 +63,9 @@
 
   /**
    * Specify the TreeView size
-   * @type {"default" | "compact"}
+   * @type {"xs" | "sm"}
    */
-  export let size = "default";
+  export let size = "sm";
 
   /** Specify the label text */
   export let labelText = "";
@@ -253,8 +253,8 @@
   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'}"
+  class:bx--tree--sm="{size === 'sm'}"
   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 6b4f3270..1ec3a258 100644
--- a/tests/TreeView.test.svelte
+++ b/tests/TreeView.test.svelte
@@ -64,7 +64,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 6dbdfbf6..c2bd75a1 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 "sm"
    */
-  size?: "default" | "compact";
+  size?: "xs" | "sm";
 
   /**
    * Specify the label text