Tar theme (#1259)

* theme and button styling * toggle button * OverflowContainer styling and fixed in vertical mode * tabstrip styling * tabstrip theme variants * fix type issues * fix paths to test fixtures * fix bugs in tests
finos · Mar 9, 2024 · 77cf327 · 77cf327
1 parent e6ffbc1
commit 77cf327
Show file tree

Hide file tree

Showing 100 changed files with 2,357 additions and 341 deletions.
diff --git a/plugin/ignite-plugin/ignite/README.txt b/plugin/ignite-plugin/ignite/README.txt
@@ -0,0 +1,7 @@
+This is Apache Ignite working directory that contains information that 
+    Ignite nodes need in order to function normally.
+Don't delete it unless you're sure you know what you're doing.
+
+You can change the location of working directory with 
+    igniteConfiguration.setWorkDirectory(location) or 
+    <property name="workDirectory" value="location"/> in IgniteConfiguration <bean>.
diff --git a/plugin/ignite-plugin/ignite/work/db/marshaller/2144474804.classname0 b/plugin/ignite-plugin/ignite/work/db/marshaller/2144474804.classname0
@@ -0,0 +1 @@
+org.finos.vuu.feature.ignite.TestOrderEntity
diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -12,7 +12,8 @@
     "packages/**",
     "sample-apps/**",
     "showcase",
-    "tools/vuu-showcase"
+    "tools/vuu-showcase",
+    "themes/**"
   ],
   "scripts": {
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -25,7 +26,7 @@
     "build:table": "cd sample-apps/standalone-table && node scripts/build.mjs",
     "build:packages": "npm run build -- --cjs --license && npm run type-defs",
     "build:packages:debug": "npm run build -- --cjs --debug && npm run type-defs -- --debug",
-    "build:salt": "node ./scripts/build-salt.mjs",
+    "build:themes": "node ./scripts/build-themes.mjs",
     "launch:demo": "node ./scripts/launch-app.mjs",
     "launch:table": "node ./scripts/launch-table.mjs",
     "launch:demo:electron": "cd tools/electron && node ./node_modules/.bin/electron .",

diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx
@@ -154,7 +154,6 @@ export const FilterBar = ({
       <FilterBarMenu />
       <Toolbar
         activeItemIndex={activeFilterIndex}
-        height={28}
         onActiveChange={onChangeActiveFilterIndex}
         onNavigateOutOfBounds={onNavigateOutOfBounds}
         selectionStrategy="multiple-special-key"

diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.css b/vuu-ui/packages/vuu-layout/src/stack/Stack.css
@@ -29,14 +29,6 @@
   flex: 1 1 auto;
 }
 
-.vuuTabHeader {
-  --saltTabs-activationIndicator-background: transparent;
-  --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);
-  border-color: var(--salt-container-primary-borderColor);
-  border-style: var(--vuu-tabs-border-style, none none solid none);
-  border-width: 1px;
-}
-
 .vuuTabHeader + .vuuView > .vuuHeader {
   height: 0;
   overflow: hidden;

diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
@@ -59,6 +59,7 @@ export const Stack = forwardRef(function Stack(
   }: StackProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
+  console.log({ TabstripProps });
   const id = useId(idProp);
   const tabLabels = useRef<string[]>([]);
   const {
@@ -146,7 +147,6 @@ export const Stack = forwardRef(function Stack(
           onExitEditMode={handleExitEditMode}
           onMoveTab={onMoveTab}
           orientation={tabstripOrientation}
-          // onMouseDown={handleMouseDown}
         >
           {renderTabs()}
         </Tabstrip>

diff --git a/vuu-ui/packages/vuu-shell/src/app-header/AppHeader.tsx b/vuu-ui/packages/vuu-shell/src/app-header/AppHeader.tsx
@@ -44,7 +44,6 @@ export const AppHeader = ({
     <Toolbar
       alignItems="end"
       className={className}
-      height={36}
       showSeparators
       {...htmlAttributes}
     >

diff --git a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css
@@ -1,11 +1,11 @@
 .vuuLeftNav {
+    --vuuOverflowContainer-height: auto;
     --salt-navigable-fontWeight-active: 700;
     --vuuTab-background-selected: rgba(255, 255, 255, 0.10);
     --vuuTab-hover-background: rgba(255, 255, 255, 0.10);
     --vuuTab-before-content: none;
     --vuuTab-borderRadius: 6px;
     --vuuTab-height: 40px;
-    --vuuTab-padding: 0 0 0 48px;
     --vuuTabstrip-fontWeight: 700;
     --vuuTabstrip-width: 100%;
     --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z"/><path d="M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z"/><path d="M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z"/><path d="M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z"/><path d="M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z"/><path d="M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z"/><path d="M2 2H14V3.33333H2V2Z"/><path d="M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z"/><path d="M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z"/><path d="M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z"/><path d="M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z"/><path d="M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z"/><path d="M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z"/><path d="M2 12.6667H14V14H2V12.6667Z"/></svg>');
@@ -87,6 +87,8 @@
     --vuu-icon-left: 12px;
     --vuu-icon-size: 16px;
     border-left: solid 4px transparent;
+    padding: 0 0 0 48px;
+
 }
 
 .vuuLeftNav .vuuTab-selected {

diff --git a/vuu-ui/packages/vuu-shell/src/persistence-management/defaultApplicationJson.ts b/vuu-ui/packages/vuu-shell/src/persistence-management/defaultApplicationJson.ts
@@ -35,7 +35,7 @@ export const defaultApplicationJson: ApplicationJSON = {
         allowRenameTab: true,
         animateSelectionThumb: false,
         location: "main-tab",
-        tabClassName: "MainTab",
+        variant: "primary",
       },
       preserve: true,
       active: 0,

diff --git a/vuu-ui/packages/vuu-shell/src/shell.css b/vuu-ui/packages/vuu-shell/src/shell.css
@@ -39,78 +39,11 @@
 }
 
 .vuuShell-mainTabs > .vuuTabstrip {
-  --vuuTabstrip-height: 28px;
-  --saltTabs-tabstrip-height: 29px;
-  --tabstrip-height: 29px;
   left:-1px;
   padding-bottom: 7px;
   position: absolute !important;
   right: 1px;
   top: 0;
   width: calc(100% + 2px) !important;
-} 
+}  
 
-.vuuShell-mainTabs > .vuuTabHeader {
-  border-bottom: none;
-} 
-
-.vuuShell-mainTabs > .vuuTabstrip:before {
-  background-color: transparent;
-  border-radius: 0 6px 0 0;
-  border-left: solid 1px #D6D7DA;
-  border-right: solid 1px #D6D7DA;
-  border-top: solid 1px #D6D7DA;
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left:0;
-  right:0;
-  height: 8px;
-  z-index: 1;
-}
-
-.vuuTab.MainTab {
-  --vuuTabMenu-top: -1px;
-  background-color: #F1F2F4;
-  border-color: #D6D7DA;
-  border-radius: 6px 6px 0 0;
-  border-width: 1px;
-  border-style: solid; 
-  position: relative;
-}
-
-.MainTab.vuuTab-selected {
-  background-color: white;
-  border-bottom-color: white;
-  z-index: 1;
-
-}
-
-.MainTab.vuuTab-selected:before{
-  background-color: #6d188b;;
-  content: '';
-  position: absolute;
-  height: 100%;
-  left:0;
-  top:0;
-  border-radius: 6px 0 0 0;
-  width: 6px;
-}
-
-.MainTab.vuuTab:hover:before{
-  background-color: #F37880;
-  content: '';
-  position: absolute;
-  height: 100%;
-  left:0;
-  top:0;
-  border-radius: 6px 0 0 0;
-  width: 6px;
-}
-
-.vuuTab.MainTab .vuuTab-main {
-  background-color: transparent;
-  font-weight: 700;
-  height: 29px;
-  padding: 0 24px;
-}
diff --git a/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCellNext.tsx b/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCellNext.tsx
@@ -95,7 +95,6 @@ export const GroupHeaderCellNext = ({
       <OverflowContainer
         allowDragDrop
         className={`${classBase}-inner`}
-        height={24}
         onMoveItem={handleMoveItem}
         overflowPosition="start"
       >

diff --git a/vuu-ui/packages/vuu-theme/css/components/button.css b/vuu-ui/packages/vuu-theme/css/components/button.css
@@ -1,7 +1,11 @@
 .vuu-theme {
     /** TODO these will need density variants */
     --saltButton-borderRadius: 6px;
-    --saltButton-padding: 16px;
+    --saltButton-padding: var(--salt-spacing-400);
+
+    .saltButton {
+        gap: var(--salt-spacing-200);
+    }
 
     .saltButton-primary {
         --saltButton-borderColor: var(--vuuButton-borderColor,var(--salt-actionable-primary-foreground));

diff --git a/vuu-ui/packages/vuu-theme/css/components/components.css b/vuu-ui/packages/vuu-theme/css/components/components.css
@@ -4,4 +4,5 @@
 @import url(input.css);
 @import url(splitter.css);
 @import url(switch.css);
+@import url(tabstrip.css);
 @import url(toggle-button.css);
diff --git a/vuu-ui/packages/vuu-theme/css/components/tabstrip.css b/vuu-ui/packages/vuu-theme/css/components/tabstrip.css
@@ -0,0 +1,67 @@
+.vuu-theme {
+
+    .vuuTab {
+        --vuuTab-padding: 0 var(--salt-spacing-400);
+    }
+
+    .vuuTabstrip-primary {
+
+        --vuuOverflowContainer-borderColor: var(--vuu-color-gray-30);
+        --vuuTab-background: var(--vuu-color-gray-28);
+        --vuuTab-borderRadius: 6px 6px 0 0;
+        --vuuTab-borderColor: var(--vuu-color-gray-30);
+        --vuuTab-borderStyle: solid;
+        --vuuTab-borderWidth: 1px;
+
+
+        &.vuuOrientation-horizontal {
+            --vuuOverflowContainer-borderStyle: none;
+            --vuuOverflowContainer-contentHeight: calc(var(--salt-size-base) + var(--salt-spacing-100));
+            --vuuOverflowContainer-height: calc(var(--vuuOverflowContainer-contentHeight) + 7px);
+            padding-bottom: 7px;
+        }
+
+        .vuuTab {
+            height: calc(var(--tab-height) + 1px);
+        }
+
+        .vuuTab-selected {
+        --vuuTab-background: var(--vuu-color-white);
+            border-bottom-color: white;
+            z-index: 1;
+        }
+
+        .vuuTab-selected:before{
+            height: 100%;
+            left:0;
+            top:0;
+            border-radius: 6px 0 0 0;
+            width: 6px;
+          }
+
+          .vuuTab:hover:before{
+            background-color: #F37880;
+            height: 100%;
+            left:0;
+            top:0;
+            border-radius: 6px 0 0 0;
+            width: 6px;
+          }
+
+          &.vuuTabstrip:before {
+            background-color: transparent;
+            border-radius: 0 6px 0 0;
+            border-left: solid 1px var(--vuu-color-gray-30);
+            border-right: solid 1px var(--vuu-color-gray-30);
+            border-top: solid 1px var(--vuu-color-gray-30);
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left:0;
+            right:0;
+            height: 8px;
+            z-index: 1;
+          }
+    }
+
+}
diff --git a/...s/vuu-ui-controls/src/__tests__/__component__/overflow-container/OverflowContainer.cy.tsx b/...s/vuu-ui-controls/src/__tests__/__component__/overflow-container/OverflowContainer.cy.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 // TODO try and get TS path alias working to avoid relative paths like this
-import { TestFixtureSimpleOverflowContainer } from "../../../../../../showcase/src/examples/Layout/OverflowContainer.examples";
+import { TestFixtureSimpleOverflowContainer } from "../../../../../../showcase/src/examples/UiControls/OverflowContainer.examples";
 
 describe("WHEN it initially renders, with enough space for all items", () => {
   it("THEN all child items will be visible, and none will be marked as wrapped", () => {