refactor(splitter): rename to nonResizable; port skip fn for key bindings (wip)

Author: ddaribo

src/components/splitter/splitter-bar.ts

@@ -19,7 +19,7 @@ import { partMap } from '../common/part-map.js';
 import { addResizeController } from '../resize-container/resize-controller.js';
 import type { SplitterOrientation } from '../types.js';
 import type IgcSplitterComponent from './splitter.js';
-import IgcSplitterPaneComponent from './splitter-pane.js';
+import type IgcSplitterPaneComponent from './splitter-pane.js';
 import { styles } from './themes/splitter-bar.base.css.js';
 
 export interface IgcSplitterBarComponentEventMap {
@@ -84,7 +84,7 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
 
   private get _resizeDisallowed() {
     return !!this._siblingPanes.find(
-      (x) => x && (x.resizable === false || x.collapsed === true)
+      (x) => x && (x.nonResizable || x.collapsed)
     );
   }
 
@@ -138,7 +138,7 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
       cancel: () => {},
     });
 
-    addKeybindings(this)
+    addKeybindings(this, { skip: this._shouldSkipResize })
       .set(arrowUp, this._handleResizePanes)
       .set(arrowDown, this._handleResizePanes)
       .set(arrowLeft, this._handleResizePanes)
@@ -157,28 +157,30 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
     });
   }
 
-  private _handleResizePanes(event: KeyboardEvent) {
-    if (this._resizeDisallowed) {
-      return false;
+  private _shouldSkipResize(_node: Element, event: KeyboardEvent): boolean {
+    if (this._resizeDisallowed && !event.ctrlKey) {
+      return true;
     }
     if (
       (event.key === arrowUp || event.key === arrowDown) &&
-      this._orientation === 'horizontal'
+      this._orientation === 'horizontal' &&
+      !event.ctrlKey
     ) {
-      return false;
+      return true;
     }
     if (
       (event.key === arrowLeft || event.key === arrowRight) &&
-      this._orientation === 'vertical'
+      this._orientation === 'vertical' &&
+      !event.ctrlKey
     ) {
-      return false;
-    }
-    let delta = 0;
-    if (event.key === arrowUp || event.key === arrowLeft) {
-      delta = -10;
-    } else {
-      delta = 10;
+      return true;
     }
+    return false;
+  }
+
+  private _handleResizePanes(event: KeyboardEvent) {
+    const delta = event.key === arrowUp || event.key === arrowLeft ? -10 : 10;
+
     this.emitEvent('igcMovingStart', { detail: this._siblingPanes[0]! });
     this.emitEvent('igcMoving', { detail: delta });
     this.emitEvent('igcMovingEnd', { detail: delta });
@@ -214,10 +216,8 @@ export default class IgcSplitterBarComponent extends EventEmitterMixin<
         Object.assign(this._internalStyles, { '--cursor': this._cursor });
         this.requestUpdate();
       },
-      filter: [IgcSplitterPaneComponent.tagName],
       config: {
-        attributeFilter: ['collapsed', 'resizable'],
-        subtree: true,
+        attributeFilter: ['collapsed', 'non-resizable'],
       },
     });
   }

src/components/splitter/splitter-pane.ts

@@ -124,8 +124,8 @@ export default class IgcSplitterPaneComponent extends EventEmitterMixin<
    * Defines if the pane is resizable or not.
    * @attr
    */
-  @property({ type: Boolean, reflect: true })
-  public resizable = true;
+  @property({ type: Boolean, reflect: true, attribute: 'non-resizable' })
+  public nonResizable = false;
 
   /**
    * Collapsed state of the pane.

src/components/splitter/splitter.spec.ts

@@ -129,13 +129,13 @@ describe('Splitter', () => {
       const style = getComputedStyle(firstBar);
       expect(style.cursor).to.equal('col-resize');
 
-      firstPane.resizable = false;
+      firstPane.nonResizable = true;
       await elementUpdated(splitter);
       await nextFrame();
 
       expect(style.cursor).to.equal('default');
 
-      firstPane.resizable = true;
+      firstPane.nonResizable = false;
       secondPane.collapsed = true;
       await elementUpdated(splitter);
       await nextFrame();
@@ -249,8 +249,8 @@ describe('Splitter', () => {
 
       expect(splitter.panes[0].size).to.equal('30%');
       expect(splitter.panes[1].size).to.equal('70%');
-      expect(style1.flex).to.equal('1 1 30%');
-      expect(style2.flex).to.equal('1 1 70%');
+      expect(style1.flex).to.equal('0 1 30%');
+      expect(style2.flex).to.equal('0 1 70%');
 
       expect(pane1.minSize).to.equal('20%');
       expect(pane1.maxSize).to.equal('80%');
@@ -323,7 +323,7 @@ describe('Splitter', () => {
       expect(pane.collapsed).to.be.false;
     });
 
-    it('should toggle the previous pane when the bar expander-end is clicked', async () => {
+    it('should toggle the next pane when the bar expander-end is clicked', async () => {
       const bars = getSplitterBars(splitter);
       const firstBar = bars[0];
       const firstPane = splitter.panes[0];
@@ -340,10 +340,10 @@ describe('Splitter', () => {
       await elementUpdated(splitter);
       await nextFrame();
 
-      expect(firstPane.collapsed).to.be.true;
-      expect(secondPane.collapsed).to.be.false;
-      expect(expanderStart.hidden).to.be.true;
-      expect(expanderEnd.hidden).to.be.false;
+      expect(firstPane.collapsed).to.be.false;
+      expect(secondPane.collapsed).to.be.true;
+      expect(expanderStart.hidden).to.be.false;
+      expect(expanderEnd.hidden).to.be.true;
 
       expanderEnd.dispatchEvent(
         new PointerEvent('pointerdown', { bubbles: true })
@@ -357,7 +357,7 @@ describe('Splitter', () => {
       expect(expanderEnd.hidden).to.be.false;
     });
 
-    it('should toggle the next pane when the bar expander-start is clicked', async () => {
+    it('should toggle the previous pane when the bar expander-start is clicked', async () => {
       const bars = getSplitterBars(splitter);
       const firstBar = bars[0];
       const firstPane = splitter.panes[0];
@@ -374,10 +374,10 @@ describe('Splitter', () => {
       await elementUpdated(splitter);
       await nextFrame();
 
-      expect(secondPane.collapsed).to.be.true;
-      expect(firstPane.collapsed).to.be.false;
-      expect(expanderStart.hidden).to.be.false;
-      expect(expanderEnd.hidden).to.be.true;
+      expect(firstPane.collapsed).to.be.true;
+      expect(secondPane.collapsed).to.be.false;
+      expect(expanderStart.hidden).to.be.true;
+      expect(expanderEnd.hidden).to.be.false;
 
       expanderStart.dispatchEvent(
         new PointerEvent('pointerdown', { bubbles: true })

src/components/splitter/themes/splitter-bar.base.scss

@@ -2,6 +2,7 @@
 
 :host {
     --bar-size: 5px;
+
     display: flex;
     background-color: var(--ig-gray-200);
 

src/components/splitter/themes/splitter-pane.scss

@@ -12,7 +12,6 @@
     height: 100%;
 }
 
-
 :host([collapsed]) [part='base'] {
     display: none;
 }

src/components/splitter/themes/splitter.base.scss

@@ -32,5 +32,4 @@
     [part='base'] {
         flex-direction: column;
     }
-
 }

stories/splitter.stories.ts

@@ -14,21 +14,21 @@ type SplitterStoryArgs = IgcSplitterComponent & {
   pane1MinSize?: string;
   pane1MaxSize?: string;
   pane1Collapsed?: boolean;
-  pane1Resizable?: boolean;
+  pane1NonResizable?: boolean;
 
   /* Pane 2 properties */
   pane2Size?: string;
   pane2MinSize?: string;
   pane2MaxSize?: string;
   pane2Collapsed?: boolean;
-  pane2Resizable?: boolean;
+  pane2NonResizable?: boolean;
 
   /* Pane 3 properties */
   pane3Size?: string;
   pane3MinSize?: string;
   pane3MaxSize?: string;
   pane3Collapsed?: boolean;
-  pane3Resizable?: boolean;
+  pane3NonResizable?: boolean;
 };
 
 const metadata: Meta<SplitterStoryArgs> = {
@@ -69,7 +69,7 @@ const metadata: Meta<SplitterStoryArgs> = {
       description: 'Collapsed state of the first pane',
       table: { category: 'Pane 1' },
     },
-    pane1Resizable: {
+    pane1NonResizable: {
       control: 'boolean',
       description: 'Whether the first pane is resizable',
       table: { category: 'Pane 1' },
@@ -94,7 +94,7 @@ const metadata: Meta<SplitterStoryArgs> = {
       description: 'Collapsed state of the second pane',
       table: { category: 'Pane 2' },
     },
-    pane2Resizable: {
+    pane2NonResizable: {
       control: 'boolean',
       description: 'Whether the second pane is resizable',
       table: { category: 'Pane 2' },
@@ -119,7 +119,7 @@ const metadata: Meta<SplitterStoryArgs> = {
       description: 'Collapsed state of the third pane',
       table: { category: 'Pane 3' },
     },
-    pane3Resizable: {
+    pane3NonResizable: {
       control: 'boolean',
       description: 'Whether the third pane is resizable',
       table: { category: 'Pane 3' },
@@ -129,13 +129,13 @@ const metadata: Meta<SplitterStoryArgs> = {
     orientation: 'horizontal',
     nonCollapsible: false,
     pane1Size: 'auto',
-    pane1Resizable: true,
+    pane1NonResizable: false,
     pane1Collapsed: false,
     pane2Size: 'auto',
-    pane2Resizable: true,
+    pane2NonResizable: false,
     pane2Collapsed: false,
     pane3Size: 'auto',
-    pane3Resizable: true,
+    pane3NonResizable: false,
     pane3Collapsed: false,
   },
 };
@@ -165,17 +165,17 @@ export const Default: Story = {
     pane1MinSize,
     pane1MaxSize,
     pane1Collapsed,
-    pane1Resizable,
+    pane1NonResizable,
     pane2Size,
     pane2MinSize,
     pane2MaxSize,
     pane2Collapsed,
-    pane2Resizable,
+    pane2NonResizable,
     pane3Size,
     pane3MinSize,
     pane3MaxSize,
     pane3Collapsed,
-    pane3Resizable,
+    pane3NonResizable,
   }) => html`
     <style>
       .pane-content {
@@ -197,7 +197,7 @@ export const Default: Story = {
           .minSize=${pane1MinSize}
           .maxSize=${pane1MaxSize}
           ?collapsed=${pane1Collapsed}
-          ?resizable=${pane1Resizable}
+          ?non-resizable=${pane1NonResizable}
         >
           <div class="pane-content">Pane 1</div>
         </igc-splitter-pane>
@@ -206,7 +206,7 @@ export const Default: Story = {
           .minSize=${pane2MinSize}
           .maxSize=${pane2MaxSize}
           ?collapsed=${pane2Collapsed}
-          ?resizable=${pane2Resizable}
+          ?non-resizable=${pane2NonResizable}
         >
           <div class="pane-content">Pane 2</div>
         </igc-splitter-pane>
@@ -215,7 +215,7 @@ export const Default: Story = {
           .minSize=${pane3MinSize}
           .maxSize=${pane3MaxSize}
           ?collapsed=${pane3Collapsed}
-          ?resizable=${pane3Resizable}
+          ?non-resizable=${pane3NonResizable}
         >
           <div class="pane-content">Pane 3</div>
         </igc-splitter-pane>