mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +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 • committed by Enrico Sacchetti
commit 90a0baf676
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
7 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

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

4
docs/src/COMPONENT_API.json
View file

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

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

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

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

8
src/TreeView/TreeView.svelte
View file

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

2
tests/TreeView.test.svelte
View file

@ -64,7 +64,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 "sm"
*/
size?: "default" | "compact";
size?: "xs" | "sm";
/**
* Specify the label text