fix bug in OverflowContainer when orientation vertical

finos · Oct 22, 2023 · bcd0b4b · bcd0b4b
1 parent ffa98b1
commit bcd0b4b
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 5 deletions.
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -35,6 +35,7 @@
     "showcase:build": " cd showcase && node scripts/build.mjs",
     "test:cypress": "cypress run --component --browser chrome --headless",
     "test:cypress:local": "cypress open --component --browser chrome",
+    "test:cypress:e2e": "cypress run --browser chrome",
     "test:vite": "vitest run",
     "bump": "node ./scripts/version.mjs",
     "pub": "node ./scripts/publish.mjs",

diff --git a/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.css b/vuu-ui/packages/vuu-layout/src/overflow-container/OverflowContainer.css
@@ -1,6 +1,8 @@
 .vuuOverflowContainer {
     --item-gap : 2px;
     --overflow-direction: row; 
+    --overflow-height: var(--item-height);
+    --overflow-top:top:0;
     --overflow-width: 0px;
     background-color: var(--vuuOverflowContainer-background);
     height: var(--overflow-container-height);
@@ -12,17 +14,23 @@
 }
 .vuuOverflowContainer-vertical {
     --item-align: stretch;
+    --item-height: auto;
     --item-margin: var(--item-gap) 0 var(--item-gap) 0;
     --overflow-direction: column; 
+    --overflow-height: 0;
+    --overflow-left: 0;
+    --overflow-top: 100%;
+    --overflow-width: auto;
 
 }
 
 .vuuOverflowContainer-wrapContainer {
+    --item-height: var(--overflow-container-height);
     align-items: var(--item-align);
     display: flex;
     flex-direction: var(--overflow-direction);
     flex-wrap: wrap;
-    height: var(--overflow-container-height);
+    height: var(--item-height);
     min-width: var(--vuuOverflowContainer-minWidth, 44px);
     overflow: hidden;
     position: relative;
@@ -37,12 +45,16 @@
     --overflow-width: auto;
 }
 
+.vuuOverflowContainer-vertical.vuuOverflowContainer-wrapContainer-overflowed {
+    --overflow-height: auto;
+}
+
 .vuuOverflowContainer-item {
     align-items: inherit;
     display: flex;
     order: 1;
     position: relative;
-    height: var(--overflow-container-height);
+    height: var(--item-height);
     margin: var(--item-margin);
 }
 
@@ -69,11 +81,11 @@
     align-items: center;
     background-color: transparent;
     display: flex;
-    height: var(--overflow-container-height);
-    height: var(--overflow-container-height);
+    height: var(--overflow-height);
     order: var(--overflow-order, 99);
     overflow: hidden;
     left: var(--overflow-left, 100%);
+    top: var(--overflow-top, 100%);
     position: var(--overflow-position, absolute);
     width: var(--overflow-width);
 

diff --git a/vuu-ui/packages/vuu-shell/package.json b/vuu-ui/packages/vuu-shell/package.json
@@ -14,6 +14,7 @@
     "@salt-ds/icons": "1.5.1",
     "@salt-ds/lab": "1.0.0-alpha.15",
     "@finos/vuu-data": "0.0.26",
+    "@finos/vuu-icons": "0.0.26",
     "@finos/vuu-filters": "0.0.26",
     "@finos/vuu-layout": "0.0.26",
     "@finos/vuu-table": "0.0.26",

diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx
@@ -15,7 +15,7 @@ import {
   ColumnSettingsPanel,
   TableSettingsPanel,
 } from "@finos/vuu-table-extras";
-import { CSSProperties } from "react";
+import { CSSProperties, useMemo } from "react";
 import { FilterTableFeatureProps } from "feature-vuu-filter-table";
 import { schemas } from "../utils";
 
@@ -99,6 +99,12 @@ const ShellWithNewTheme = () => {
     handleMenuAction,
   } = useLayoutContextMenuItems();
 
+  useMemo(() => {
+    window.addEventListener("error", (err) => {
+      console.log(`%cERROR ${err.message}`, "color:red");
+    });
+  }, []);
+
   return (
     <ContextMenuProvider
       menuActionHandler={handleMenuAction}

diff --git a/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.css b/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.css
@@ -4,6 +4,10 @@
     height: 32px;
 }
 
+.vuuOverflowContainer-vertical .Item {
+    width: 100%;
+}
+
 [data-overflow-priority="1"].Item {
     background-color: pink;
 }

diff --git a/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.tsx b/vuu-ui/showcase/src/examples/Layout/OverflowContainer.examples.tsx
@@ -254,3 +254,55 @@ export const SortableOverflowContainer = () => {
 };
 
 SortableOverflowContainer.displaySequence = displaySequence++;
+
+export const VerticalOverflowContainerFlexLayout = () => {
+  return (
+    <div
+      style={
+        {
+          "--vuuOverflowContainer-background": "white",
+          height: "100vh",
+          padding: 100,
+          width: "100vw",
+          background: "ivory",
+        } as CSSProperties
+      }
+    >
+      <Flexbox
+        style={{
+          background: "white",
+          border: "solid var(--salt-container-primary-borderColor) 1px",
+          flexDirection: "column",
+          width: 400,
+          height: 800,
+        }}
+      >
+        <div
+          data-resizeable
+          style={{ background: "lightcyan", flex: 1, overflow: "hidden" }}
+        >
+          {/* prettier-ignore */}
+          <OverflowContainer orientation="vertical" >
+              <div className="Item" style={{ height: 60 }}>1</div>
+              <div className="Item" style={{ height: 60 }}>2</div>
+              <div className="Item" style={{ height: 60 }}>3</div>
+              <div className="Item" style={{ height: 60 }}>4</div>
+              <div className="Item" style={{ height: 60 }}>5</div>
+              <div className="Item" style={{ height: 60 }}>6</div>
+            </OverflowContainer>
+        </div>
+        <div
+          data-resizeable
+          style={{
+            background: "palegreen",
+            flexBasis: 200,
+            flexGrow: 0,
+            flexShrink: 0,
+          }}
+        />
+      </Flexbox>
+    </div>
+  );
+};
+
+VerticalOverflowContainerFlexLayout.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/LeftNav.examples.tsx b/vuu-ui/showcase/src/examples/Shell/LeftNav.examples.tsx
@@ -0,0 +1,8 @@
+import { LeftNav } from "@finos/vuu-shell";
+
+let displaySequence = 0;
+
+export const VerticalTabstrip = () => {
+  return <LeftNav features={[]} tableFeatures={[]} />;
+};
+VerticalTabstrip.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Shell/index.ts b/vuu-ui/showcase/src/examples/Shell/index.ts
@@ -2,6 +2,7 @@ export * as AppSidePanel from "./AppSidePanel.examples";
 export * as ConnectionStatus from "./ConnectionStatus.examples";
 export * as ConnectionMetrics from "./ConnectionMetrics.examples";
 export * as Feature from "./Feature.examples";
+export * as LeftNav from "./LeftNav.examples";
 export * as SessionTableEditing from "./SessionTableEditing.examples";
 export * as Shell from "./Shell.examples";
 export * as ThemeProvider from "./ThemeProvider.examples";