fix(flat-table): flat table contents visible behind sticky header/footer

when the FlatTable is inside a Drawer with sticky header/footer overflow: auto should be applied closes: FE-6674
Sage · Jul 19, 2024 · 4f84514 · 4f84514
1 parent 3c7eae8
commit 4f84514
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 3 deletions.
diff --git a/src/components/flat-table/flat-table-test.stories.tsx b/src/components/flat-table/flat-table-test.stories.tsx
@@ -19,6 +19,9 @@ import Link from "../../../src/components/link";
 import guid from "../../__internal__/utils/helpers/guid";
 import { FLAT_TABLE_THEMES } from "./flat-table.config";
 import { WithSortingHeaders } from "./flat-table.stories";
+import Heading from "../../../src/components/heading";
+import Pager from "../../../src/components/pager";
+import Drawer from "../../../src/components/drawer";
 
 export default {
   title: "Flat Table/Test",
@@ -28,6 +31,8 @@ export default {
     "SortableStory",
     "SubRowsAsAComponentStory",
     "FlatTableSizeFocus",
+    "FlatTableInsideDrawer",
+    "TableInBox",
   ],
   parameters: {
     info: { disable: true },
@@ -496,3 +501,110 @@ export const FlatTableSizeFocus = () => {
     </Box>
   );
 };
+
+export const FlatTableInsideDrawer = () => {
+  return (
+    <Drawer
+      height="calc(100vh - 122px)"
+      expandedWidth="640px"
+      animationDuration="0s"
+      expanded
+      sidebar={
+        <Box
+          height="100%"
+          display="flex"
+          flexDirection="column"
+          overflow="hidden"
+        >
+          <Box mx={5} mb={3} mt={3}>
+            <Heading divider={false} title="Title title" mb={2} />
+          </Box>
+          <Box flex={1} overflowY="auto" padding={4}>
+            <FlatTable
+              hasStickyHead
+              hasStickyFooter
+              colorTheme="transparent-base"
+              height="100%"
+              footer={
+                <Pager
+                  currentPage="1"
+                  onFirst={() => {}}
+                  onLast={() => {}}
+                  onNext={() => {}}
+                  onPagination={() => {}}
+                  onPrevious={() => {}}
+                  pageSizeSelectionOptions={[
+                    {
+                      id: "1",
+                      name: 1,
+                    },
+                    {
+                      id: "10",
+                      name: 10,
+                    },
+                    {
+                      id: "25",
+                      name: 25,
+                    },
+                    {
+                      id: "50",
+                      name: 50,
+                    },
+                    {
+                      id: "100",
+                      name: 100,
+                    },
+                  ]}
+                  totalRecords="100"
+                />
+              }
+            >
+              <FlatTableHead>
+                <FlatTableRow>
+                  <FlatTableHeader pl={5}>Name</FlatTableHeader>
+                  <FlatTableHeader>Location</FlatTableHeader>
+                  <FlatTableHeader>Relationship Status</FlatTableHeader>
+                  <FlatTableHeader>Dependents</FlatTableHeader>
+                </FlatTableRow>
+              </FlatTableHead>
+              <FlatTableBody>
+                {new Array(25)
+                  .fill("")
+                  .map((_, index) => index)
+                  .map((key) => {
+                    return (
+                      <FlatTableRow
+                        key={key}
+                        expandable
+                        subRows={[
+                          <FlatTableRow key="sub-row-1">
+                            <FlatTableCell>Child one</FlatTableCell>
+                            <FlatTableCell>York</FlatTableCell>
+                            <FlatTableCell>Single</FlatTableCell>
+                            <FlatTableCell>2</FlatTableCell>
+                          </FlatTableRow>,
+                          <FlatTableRow key="sub-row-2">
+                            <FlatTableCell>Child two</FlatTableCell>
+                            <FlatTableCell>Edinburgh</FlatTableCell>
+                            <FlatTableCell>Single</FlatTableCell>
+                            <FlatTableCell>1</FlatTableCell>
+                          </FlatTableRow>,
+                        ]}
+                      >
+                        <FlatTableCell>John Doe</FlatTableCell>
+                        <FlatTableCell>London</FlatTableCell>
+                        <FlatTableCell>Single</FlatTableCell>
+                        <FlatTableCell>0</FlatTableCell>
+                      </FlatTableRow>
+                    );
+                  })}
+              </FlatTableBody>
+            </FlatTable>
+          </Box>
+        </Box>
+      }
+    >
+      <div />
+    </Drawer>
+  );
+};
diff --git a/src/components/flat-table/flat-table.component.tsx b/src/components/flat-table/flat-table.component.tsx
@@ -221,9 +221,7 @@ export const FlatTable = ({
       hasStickyHead={hasStickyHead}
       colorTheme={colorTheme}
       minHeight={minHeight}
-      overflowY={
-        !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined
-      }
+      overflowY={hasStickyHead || hasStickyFooter ? "auto" : undefined}
       height={addDefaultHeight && !hasMaxHeight ? "99%" : height}
       maxHeight={hasMaxHeight ? "100%" : undefined}
       display="flex"