Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Tabs widget - full height when showTabs is false (#6949)

Browse Source 
* Fix - Tabs widget - full height when showTabs is false

* added conditional height for ChildrenWrapper based on tab visibility state
This commit is contained in:
ashit-rath 2021-09-08 10:13:11 +05:30 committed by GitHub
parent b61be1eb66
commit 863d992d77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/client/src/components/designSystems/appsmith/TabsComponent.tsx
View File

@ -22,6 +22,12 @@ interface TabsComponentProps extends ComponentProps {
}>;
}
type ChildrenWrapperProps = Pick<TabsComponentProps, "shouldShowTabs">;
const TAB_CONTAINER_HEIGHT = "40px";
const CHILDREN_WRAPPER_HEIGHT_WITH_TABS = `calc(100% - ${TAB_CONTAINER_HEIGHT})`;
const CHILDREN_WRAPPER_HEIGHT_WITHOUT_TABS = "100%";
const scrollContents = css`
overflow-y: auto;
position: absolute;
@ -41,8 +47,11 @@ const TabsContainerWrapper = styled.div<{
overflow: hidden;
`;
const ChildrenWrapper = styled.div`
height: calc(100% - 40px);
const ChildrenWrapper = styled.div<ChildrenWrapperProps>`
height: ${({ shouldShowTabs }) =>
shouldShowTabs
? CHILDREN_WRAPPER_HEIGHT_WITH_TABS
: CHILDREN_WRAPPER_HEIGHT_WITHOUT_TABS};
width: 100%;
position: relative;
background: ${(props) => props.theme.colors.builderBodyBG};
@ -66,7 +75,7 @@ const TabsContainer = styled.div`
background: ${(props) => props.theme.colors.builderBodyBG};
overflow: hidden;
&& {
height: 40px;
height: ${TAB_CONTAINER_HEIGHT};
width: 100%;
display: flex;
justify-content: flex-start;
@ -123,6 +132,7 @@ function TabsComponent(props: TabsComponentProps) {
tabContainerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
}
}, [props.shouldScrollContents]);
return (
<TabsContainerWrapper ref={tabContainerRef}>
{props.shouldShowTabs ? (
@ -146,7 +156,7 @@ function TabsComponent(props: TabsComponentProps) {
) : (
undefined
)}
<ChildrenWrapper>
<ChildrenWrapper shouldShowTabs={props.shouldShowTabs}>
<ScrollableCanvasWrapper
{...remainingProps}
className={`${