mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 TreeView

Browse source 
Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-31 22:54:26 +02:00
commit 2df821512f
7 changed files with 13 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -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 |

5
docs/src/COMPONENT_API.json
View file

@ -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
},

6
docs/src/pages/components/TreeView.svx
View file

@ -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

2
docs/src/pages/framed/TreeView/TreeViewCompact.svelte → docs/src/pages/framed/TreeView/TreeViewXs.svelte
View file

@ -46,7 +46,7 @@
</script>
<TreeView
size="compact"
size="xs"
labelText="Cloud Products"
children="{children}"
bind:activeId

7
src/TreeView/TreeView.svelte
View file

@ -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}"

2
tests/TreeView.test.svelte
View file

@ -63,7 +63,7 @@
<TreeView
bind:this="{treeview}"
size="compact"
size="xs"
labelText="Cloud Products"
children="{children}"
bind:activeId

4
types/TreeView/TreeView.svelte.d.ts vendored
View file

@ -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