code

packages/splitview-demo/src/layout-grid/application.tsx

@@ -95,6 +95,7 @@ export const Application = () => {
 
     return (
         <GridviewComponent
+            // className={'visual-studio-theme'}
             components={rootcomponents}
             onReady={onReady}
             orientation={Orientation.VERTICAL}

packages/splitview-demo/src/layout-grid/layoutGrid.layout.json

@@ -97,8 +97,5 @@
             "state": {}
         }
     },
-    "options":{
-        "tabHeight": 35
-    },
     "activeGroup": "group_2"
 }

packages/splitview-demo/src/layout-grid/settingsPanel.tsx

@@ -17,6 +17,10 @@ export const Settings = (props: IGroupPanelProps) => {
         props.containerApi.setTabHeight(tabHeight);
     };
 
+    const onRemove = () => {
+        props.containerApi.setTabHeight(undefined);
+    };
+
     return (
         <div style={{ height: '100%', color: 'white' }}>
             <label>
@@ -27,6 +31,7 @@ export const Settings = (props: IGroupPanelProps) => {
                     type="number"
                 />
                 <button onClick={onClick}>Apply</button>
+                <button onClick={onRemove}>Remove</button>
             </label>
         </div>
     );

packages/splitview/src/api/component.api.ts

@@ -290,7 +290,7 @@ export class DockviewApi {
         return this.component.getTabHeight();
     }
 
-    setTabHeight(height: number) {
+    setTabHeight(height: number | undefined) {
         this.component.setTabHeight(height);
     }
 

packages/splitview/src/dockview/componentDockview.ts

@@ -82,7 +82,7 @@ export interface IComponentDockview extends IBaseGrid<IGroupview> {
     fireMouseEvent(event: LayoutMouseEvent): void;
     createWatermarkComponent(): WatermarkPart;
     setAutoResizeToFit(enabled: boolean): void;
-    setTabHeight(height: number): void;
+    setTabHeight(height: number | undefined): void;
     getTabHeight(): number;
     totalPanels: number;
     // lifecycle
@@ -162,9 +162,6 @@ export class ComponentDockview
         if (!this.options.components) {
             this.options.components = {};
         }
-        if (typeof this.options.tabHeight !== 'number') {
-            this.options.tabHeight = DEFAULT_TAB_HEIGHT;
-        }
         if (!this.options.frameworkComponents) {
             this.options.frameworkComponents = {};
         }
@@ -428,7 +425,7 @@ export class ComponentDockview
         }
         const { grid, panels, options, activeGroup } = data;
 
-        if (typeof options.tabHeight === 'number') {
+        if (typeof options?.tabHeight === 'number') {
             this.setTabHeight(options.tabHeight);
         }
 
@@ -464,7 +461,7 @@ export class ComponentDockview
         return true;
     }
 
-    public setTabHeight(height: number) {
+    public setTabHeight(height: number | undefined) {
         this.options.tabHeight = height;
         this.groups.forEach((value) => {
             value.value.tabHeight = height;

packages/splitview/src/dockview/components/tab/defaultTab.scss

@@ -31,7 +31,6 @@
         padding-left: 10px;
         white-space: nowrap;
         text-overflow: elipsis;
-        font-size: 13px;
 
         .tab-content {
             flex-grow: 1;

packages/splitview/src/groupview/titlebar/tabContainer.scss

@@ -4,6 +4,8 @@
     overflow: overlay;
     flex-shrink: 0;
     box-sizing: border-box;
+    height: var(--title-height);
+    font-size: var(--title-font-size);
 
     &.hidden {
         display: none;
@@ -27,7 +29,6 @@
         flex-shrink: 0;
         flex-grow: 1;
         display: flex;
-        font-size: 13px;
         overflow-x: overlay;
         overflow-y: hidden;
 

packages/splitview/src/groupview/titlebar/tabContainer.ts

@@ -5,13 +5,7 @@ import {
 } from '../../lifecycle';
 import { addDisposableListener, Emitter, Event } from '../../events';
 import { ITab, Tab } from '../panel/tab/tab';
-import {
+import { removeClasses, addClasses, toggleClass } from '../../dom';
-    removeClasses,
-    addClasses,
-    toggleClass,
-    isInTree,
-    isAncestor,
-} from '../../dom';
 import { hasProcessed, Position } from '../droptarget/droptarget';
 import { TabDropEvent } from '../events';
 
@@ -71,7 +65,16 @@ export class TabContainer extends CompositeDisposable implements ITabContainer {
 
     set height(value: number) {
         this._height = value;
-        this._element.style.height = `${this.height}px`;
+        if (typeof value !== 'number') {
+            // removeClasses(this.element, 'separator-border');
+            this.element.style.removeProperty('--title-height');
+        } else {
+            // addClasses(this.element, 'separator-border');
+            // if (styles?.separatorBorder) {
+            this.element.style.setProperty('--title-height', `${value}px`);
+            // }
+        }
+        // this._element.style.height = `${this.height}px`;
     }
 
     public get element() {

packages/splitview/src/react/dockview/dockview.tsx

@@ -37,6 +37,7 @@ export interface IDockviewComponentProps {
     enableExternalDragEvents?: boolean;
     onTabContextMenu?: (event: TabContextMenuEvent) => void;
     hideBorders?: boolean;
+    className?: string;
 }
 
 export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps> = (
@@ -132,7 +133,11 @@ export const DockviewComponent: React.FunctionComponent<IDockviewComponentProps>
     }, [props.onTabContextMenu]);
 
     return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
             {portals}
         </div>
     );

packages/splitview/src/react/gridview/gridview.tsx

@@ -24,6 +24,7 @@ export interface IGridviewComponentProps {
     onReady?: (event: GridviewReadyEvent) => void;
     components?: PanelCollection<IGridviewPanelProps>;
     hideBorders?: boolean;
+    className?: string;
 }
 
 export const GridviewComponent: React.FunctionComponent<IGridviewComponentProps> = (
@@ -61,7 +62,11 @@ export const GridviewComponent: React.FunctionComponent<IGridviewComponentProps>
     }, []);
 
     return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
             {portals}
         </div>
     );

packages/splitview/src/react/paneview/paneview.tsx

@@ -23,6 +23,7 @@ export interface IPaneviewComponentProps {
     onReady?: (event: PaneviewReadyEvent) => void;
     components?: PanelCollection<IPaneviewPanelProps>;
     headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    className?: string;
 }
 
 export const PaneviewComponent: React.FunctionComponent<IPaneviewComponentProps> = (
@@ -78,7 +79,11 @@ export const PaneviewComponent: React.FunctionComponent<IPaneviewComponentProps>
     }, []);
 
     return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
             {portals}
         </div>
     );

packages/splitview/src/react/splitview/splitview.tsx

@@ -25,6 +25,7 @@ export interface ISplitviewComponentProps {
     components: PanelCollection<ISplitviewPanelProps>;
     proportionalLayout?: boolean;
     hideBorders?: boolean;
+    className?: string;
 }
 
 export const SplitviewComponent: React.FunctionComponent<ISplitviewComponentProps> = (
@@ -65,7 +66,11 @@ export const SplitviewComponent: React.FunctionComponent<ISplitviewComponentProp
     }, []);
 
     return (
-        <div style={{ height: '100%', width: '100%' }} ref={domRef}>
+        <div
+            className={props.className}
+            style={{ height: '100%', width: '100%' }}
+            ref={domRef}
+        >
             {portals}
         </div>
     );

packages/splitview/src/theme.scss

@@ -21,10 +21,15 @@
     --tab-dirty-icon: url('https://fonts.gstatic.com/s/i/materialicons/lens/v6/24px.svg');
     //
     --separator-border: rgb(68, 68, 68);
+
+    --title-font-size: 13px;
+    --title-height: 35px;
 }
 
 .visual-studio-theme {
     --active-tab-background-visible: dodgerblue;
+    --title-height: 18px;
+    --title-font-size: 11px;
 
     .groupview {
         &.active-group {