stop tree nodes from expanding to full height, causing overlap (#1861)

This commit is contained in:
Ashley Stanton-Nurse 2024-06-06 09:33:25 -07:00 committed by GitHub
parent b5d4509d49
commit 416743c548
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 1 additions and 99 deletions

View File

@ -150,7 +150,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
data-test={`TreeNodeContainer:${treeNodeId}`}
value={treeNodeId}
itemType={isBranch ? "branch" : "leaf"}
style={{ height: "100%" }}
onOpenChange={onOpenChange}
>
<TreeItemLayout

View File

@ -5,11 +5,6 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
data-test="TreeNodeContainer:root"
itemType="branch"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -118,11 +113,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root"
itemType="branch"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<div
@ -136,11 +126,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1}
>
<ContextSelector.Provider
@ -233,7 +218,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root"
data-test="TreeNodeContainer:root"
role="treeitem"
style="height: 100%;"
tabindex="-1"
>
<div
@ -288,7 +272,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child1Label"
data-test="TreeNodeContainer:root/child1Label"
role="treeitem"
style="height: 100%;"
tabindex="0"
>
<div
@ -340,7 +323,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child2LoadingLabel"
data-test="TreeNodeContainer:root/child2LoadingLabel"
role="treeitem"
style="height: 100%;"
tabindex="-1"
>
<div
@ -391,7 +373,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child3ExpandingLabel"
data-test="TreeNodeContainer:root/child3ExpandingLabel"
role="treeitem"
style="height: 100%;"
tabindex="-1"
>
<div
@ -647,11 +628,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root/child1Label"
itemType="branch"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root/child1Label"
>
<div
@ -665,11 +641,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1}
>
<ContextSelector.Provider
@ -762,7 +733,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child1Label"
data-test="TreeNodeContainer:root/child1Label"
role="treeitem"
style="height: 100%;"
tabindex="0"
>
<div
@ -945,11 +915,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root/child2LoadingLabel"
itemType="branch"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root/child2LoadingLabel"
>
<div
@ -963,11 +928,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1}
>
<ContextSelector.Provider
@ -1060,7 +1020,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child2LoadingLabel"
data-test="TreeNodeContainer:root/child2LoadingLabel"
role="treeitem"
style="height: 100%;"
tabindex="-1"
>
<div
@ -1228,11 +1187,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-test="TreeNodeContainer:root/child3ExpandingLabel"
itemType="leaf"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root/child3ExpandingLabel"
>
<div
@ -1245,11 +1199,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="treeitem"
style={
Object {
"height": "100%",
}
}
tabIndex={-1}
>
<ContextSelector.Provider
@ -1349,7 +1298,6 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
data-fui-tree-item-value="root/child3ExpandingLabel"
data-test="TreeNodeContainer:root/child3ExpandingLabel"
role="treeitem"
style="height: 100%;"
tabindex="-1"
>
<div
@ -1474,11 +1422,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
data-test="TreeNodeContainer:root"
itemType="leaf"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1513,11 +1456,6 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
data-test="TreeNodeContainer:root"
itemType="leaf"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1557,11 +1495,6 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
data-test="TreeNodeContainer:root"
itemType="branch"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1604,11 +1537,6 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
data-test="TreeNodeContainer:root"
itemType="leaf"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1698,11 +1626,6 @@ exports[`TreeNodeComponent renders a single node 1`] = `
data-test="TreeNodeContainer:root"
itemType="leaf"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1737,11 +1660,6 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
data-test="TreeNodeContainer:root"
itemType="leaf"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1776,11 +1694,6 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
data-test="TreeNodeContainer:root"
itemType="branch"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1865,11 +1778,6 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
data-test="TreeNodeContainer:root"
itemType="branch"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout
@ -1955,11 +1863,6 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
data-test="TreeNodeContainer:root"
itemType="leaf"
onOpenChange={[Function]}
style={
Object {
"height": "100%",
}
}
value="root"
>
<TreeItemLayout

View File

@ -166,7 +166,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
return (
<>
<FluentProvider theme={lightTheme} style={{ overflow: "hidden" }}>
<FluentProvider theme={lightTheme} style={{ overflow: "auto" }}>
<Tree
aria-label="CosmosDB resources"
openItems={openItems}