Scrolling improvements
Summary: Split container had a convenient property `scrollable`, that automatically applies a Scroll container to the main content. But I noticed it leads to bad design choices because it is so convenient. So sometimes scrolling would be unnecessarily in two directions because of this. Or, since the scroll container wraps around the whole content, toolbars would scroll out of view. By forcing scrolling to be put explicitly in the component tree, we encourage plugin developers to think about where they actually want to have that scroll, and in which direction. Also added options to use the Container padding properties on ScrollContainer, which is great since we can keep the scrollbars outside the padding, and apply it to the content only, to prevent an accidental mistake where people would put a scroll container in a padded container, that would put the scrollbar inside the padding. Reviewed By: cekkaewnumchai Differential Revision: D24502546 fbshipit-source-id: 524004a1c5f33a185f9b959251b72875dd623cb3
This commit is contained in:
committed by
Facebook GitHub Bot
parent
30f5f0b59a
commit
5731e3a155
@@ -256,7 +256,7 @@ export function Component() {
|
||||
</Button>
|
||||
)}
|
||||
</Toolbar>
|
||||
<Layout.Top scrollable={false}>
|
||||
<Layout.Top>
|
||||
<Sidebar position="top" minHeight={80} height={80}>
|
||||
<EventTable
|
||||
generations={filteredGenerations}
|
||||
@@ -270,7 +270,7 @@ export function Component() {
|
||||
}}
|
||||
/>
|
||||
</Sidebar>
|
||||
<Layout.Top scrollable={true}>
|
||||
<Layout.Top>
|
||||
<Sidebar position="top" minHeight={400} height={400}>
|
||||
<TreeContainer>
|
||||
<TreeHierarchy
|
||||
@@ -282,12 +282,14 @@ export function Component() {
|
||||
</TreeContainer>
|
||||
</Sidebar>
|
||||
{focusedTreeGeneration && (
|
||||
<StackTrace
|
||||
data={focusedTreeGeneration.stack_trace}
|
||||
skipStackTraceFormat={
|
||||
focusedTreeGeneration.skip_stack_trace_format
|
||||
}
|
||||
/>
|
||||
<Layout.ScrollContainer>
|
||||
<StackTrace
|
||||
data={focusedTreeGeneration.stack_trace}
|
||||
skipStackTraceFormat={
|
||||
focusedTreeGeneration.skip_stack_trace_format
|
||||
}
|
||||
/>
|
||||
</Layout.ScrollContainer>
|
||||
)}
|
||||
</Layout.Top>
|
||||
</Layout.Top>
|
||||
|
||||
Reference in New Issue
Block a user