refactor: hide dashboard resize buttons that have no effect

packages/dashboard/src/vaadin-dashboard-helpers.js

@@ -87,6 +87,10 @@ export function fireResize(element, colspanDelta, rowspanDelta) {
       },
     }),
   );
+
+  if ('requestUpdate' in element) {
+    element.requestUpdate();
+  }
 }
 
 /**

packages/dashboard/src/vaadin-dashboard-item-mixin.js

@@ -198,7 +198,17 @@ export const DashboardItemMixin = (superClass) =>
 
     /** @private */
     __renderResizeControls() {
-      const hasMinRowHeight = getComputedStyle(this).getPropertyValue('--_vaadin-dashboard-row-min-height') !== 'auto';
+      const style = getComputedStyle(this);
+      const hasMinRowHeight = style.getPropertyValue('--_vaadin-dashboard-row-min-height') !== 'auto';
+
+      const effectiveColCount = style.getPropertyValue('--_vaadin-dashboard-col-count');
+      const maxColCount = style.getPropertyValue('--_vaadin-dashboard-col-max-count');
+      const colCount = Math.min(effectiveColCount, maxColCount);
+      const colspan = style.getPropertyValue('--vaadin-dashboard-item-colspan') || 1;
+      const rowspan = style.getPropertyValue('--vaadin-dashboard-item-rowspan') || 1;
+      const canShrinkWidth = colspan > 1;
+      const canShrinkHeight = rowspan > 1;
+      const canGrowWidth = colspan < colCount;
 
       return html`<div
         id="resize-controls"
@@ -221,6 +231,7 @@ export const DashboardItemMixin = (superClass) =>
           aria-label="${this.__i18n.resizeShrinkWidth}"
           title="${this.__i18n.resizeShrinkWidth}"
           @click="${() => fireResize(this, -1, 0)}"
+          .hidden="${!canShrinkWidth}"
           id="resize-shrink-width"
           part="resize-shrink-width-button"
         >
@@ -231,6 +242,7 @@ export const DashboardItemMixin = (superClass) =>
           aria-label="${this.__i18n.resizeGrowWidth}"
           title="${this.__i18n.resizeGrowWidth}"
           @click="${() => fireResize(this, 1, 0)}"
+          .hidden="${!canGrowWidth}"
           id="resize-grow-width"
           part="resize-grow-width-button"
         >
@@ -243,7 +255,7 @@ export const DashboardItemMixin = (superClass) =>
           @click="${() => fireResize(this, 0, -1)}"
           id="resize-shrink-height"
           part="resize-shrink-height-button"
-          .hidden="${!hasMinRowHeight}"
+          .hidden="${!hasMinRowHeight || !canShrinkHeight}"
         >
           <div class="icon"></div>
         </vaadin-dashboard-button>
@@ -316,6 +328,8 @@ export const DashboardItemMixin = (superClass) =>
     __focusApply() {
       if (this.__moveMode) {
         this.$['move-apply'].focus();
+      } else if (this.__resizeMode) {
+        this.$['resize-apply'].focus();
       }
     }
 

packages/dashboard/src/vaadin-dashboard.js

@@ -461,6 +461,23 @@ class Dashboard extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitM
     this.__dispatchCustomEvent('dashboard-item-resize-mode-changed', getElementItem(e.target), e.detail.value);
   }
 
+  /**
+   * @private
+   */
+  __updateColumnCount() {
+    const previousColumnCount = this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count');
+    super.__updateColumnCount();
+
+    // Request update for all the widgets if the column count has changed on resize
+    if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count')) {
+      this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
+        if (wrapper.firstElementChild && 'requestUpdate' in wrapper.firstElementChild) {
+          wrapper.firstElementChild.requestUpdate();
+        }
+      });
+    }
+  }
+
   /**
    * Fired when an item selected state changed
    *

packages/dashboard/test/dashboard-keyboard.test.ts

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, isChrome, nextFrame } from '@vaadin/testing-helpers';
+import { fixtureSync, isChrome, isFirefox, nextFrame } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../vaadin-dashboard.js';
@@ -18,6 +18,7 @@ import {
   getResizeShrinkHeightButton,
   getResizeShrinkWidthButton,
   onceResized,
+  setMaximumColumnCount,
   setMaximumColumnWidth,
   setMinimumColumnWidth,
   setMinimumRowHeight,
@@ -877,7 +878,88 @@ describe('dashboard - keyboard interaction', () => {
       expect(getComputedStyle(getResizeGrowHeightButton(widget)).display).to.equal('none');
       expect(getComputedStyle(getResizeShrinkHeightButton(widget)).display).to.equal('none');
       expect(getComputedStyle(getResizeGrowWidthButton(widget)).display).to.not.equal('none');
+    });
+
+    it('should hide the shrink width button if the widget only covers one column', () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      expect(getComputedStyle(getResizeShrinkWidthButton(widget)).display).to.equal('none');
+    });
+
+    it('should not hide the grow width button if the widget does not cover all visible columns', () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      expect(getComputedStyle(getResizeGrowWidthButton(widget)).display).to.not.equal('none');
+    });
+
+    it('should hide the grow width button if the widget already covers all visible columns', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      // Focus grow width button, click it
+      getResizeGrowWidthButton(widget).focus();
+      await sendKeys({ press: 'Space' });
+
+      expect(getComputedStyle(getResizeGrowWidthButton(widget)).display).to.equal('none');
+    });
+
+    (isChrome ? it : it.skip)('should focus the apply button if focused resize button is hidden', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      // Focus grow width button, click it
+      getResizeGrowWidthButton(widget).focus();
+      await sendKeys({ press: 'Space' });
+
+      expect(getResizeApplyButton(widget).matches(':focus')).to.be.true;
+    });
+
+    it('should not hide the shrink width button if the widget covers more than one column', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      // Focus grow width button, click it
+      getResizeGrowWidthButton(widget).focus();
+      await sendKeys({ press: 'Space' });
+
       expect(getComputedStyle(getResizeShrinkWidthButton(widget)).display).to.not.equal('none');
     });
+
+    (isFirefox ? it.skip : it)('should hide the shrink height button if the widget only covers one row', async () => {
+      // Set minimum row height to enable vertical resizing
+      setMinimumRowHeight(dashboard, 100);
+      await sendKeys({ press: 'Escape' });
+      await sendKeys({ press: 'Space' });
+      await nextFrame();
+
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      expect(getComputedStyle(getResizeShrinkHeightButton(widget)).display).to.equal('none');
+    });
+
+    (isFirefox ? it.skip : it)(
+      'should not hide the shrink height button if the widget covers more than one row',
+      async () => {
+        // Set minimum row height to enable vertical resizing
+        setMinimumRowHeight(dashboard, 100);
+        await sendKeys({ press: 'Escape' });
+        await sendKeys({ press: 'Space' });
+        await nextFrame();
+
+        const widget = getElementFromCell(dashboard, 0, 0)!;
+        // Focus grow height button, click it
+        getResizeGrowHeightButton(widget).focus();
+        await sendKeys({ press: 'Space' });
+        expect(getComputedStyle(getResizeShrinkHeightButton(widget)).display).to.not.equal('none');
+      },
+    );
+
+    it('should hide the grow width button if the dashboard is shrunk to only one column', async () => {
+      dashboard.style.width = `${columnWidth}px`;
+      await nextFrame();
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      expect(getComputedStyle(getResizeGrowWidthButton(widget)).display).to.equal('none');
+    });
+
+    it('should hide the grow width button if dashboard max col count is shrunk to only one column', async () => {
+      setMaximumColumnCount(dashboard, 1);
+      await sendKeys({ press: 'Escape' });
+      await sendKeys({ press: 'Space' });
+      await nextFrame();
+
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      expect(getComputedStyle(getResizeGrowWidthButton(widget)).display).to.equal('none');
+    });
   });
 });