feat: move column toggle into a slot AND feat: replace column toggle icon

pom.xml

@@ -4,7 +4,7 @@
 
 	<groupId>org.vaadin.addons.flowingcode</groupId>
 	<artifactId>grid-helpers</artifactId>
-	<version>2.1.1-SNAPSHOT</version>
+	<version>2.2.0-SNAPSHOT</version>
 	<name>Grid Helpers Add-on</name>
 	<description>Grid Helpers Add-on for Vaadin Flow</description>
 	<url>https://www.flowingcode.com/en/open-source/</url>

src/main/java/com/flowingcode/vaadin/addons/gridhelpers/ColumnToggleHelper.java

@@ -2,7 +2,7 @@
  * #%L
  * Grid Helpers Add-on
  * %%
- * Copyright (C) 2022 - 2024 Flowing Code
+ * Copyright (C) 2022 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -54,7 +54,7 @@ class ColumnToggleHelper<T> implements Serializable {
 
   private final GridHelper<T> helper;
 
-  private Column<?> menuToggleColumn;
+  private MenuBar menuToggle;
 
   public void setColumnToggleVisible(boolean visible) {
     // https://cookbook.vaadin.com/grid-column-toggle
@@ -66,35 +66,38 @@ public void setColumnToggleVisible(boolean visible) {
   }
 
   public boolean isColumnToggleVisible() {
-    return menuToggleColumn != null && menuToggleColumn.isVisible();
+    return menuToggle != null;
   }
 
   private void showColumnToggle() {
     createMenuToggle()
         .ifPresent(
             toggle -> {
               Grid<?> grid = helper.getGrid();
-              if (menuToggleColumn == null) {
-                menuToggleColumn = grid.addColumn(t -> "").setWidth("auto").setFlexGrow(0);
-              } else {
-                menuToggleColumn.setVisible(true);
-              }
-              grid.getHeaderRows().get(0).getCell(menuToggleColumn).setComponent(toggle);
+              removeMenuToggle();
+              menuToggle = toggle;
+              grid.getElement().appendChild(toggle.getElement());
             });
   }
 
   private void hideColumnToggle() {
-    if (menuToggleColumn != null) {
-      menuToggleColumn.setVisible(false);
+    removeMenuToggle();
+  }
+
+  private void removeMenuToggle() {
+    if (menuToggle != null) {
+      menuToggle.getElement().removeFromParent();
+      menuToggle = null;
     }
   }
 
   private Optional<MenuBar> createMenuToggle() {
     Grid<T> grid = helper.getGrid();
 
     MenuBar menuBar = new MenuBar();
+    menuBar.getThemeNames().add(MenuBarVariant.LUMO_TERTIARY.getVariantName());
     menuBar.getThemeNames().add(MenuBarVariant.LUMO_TERTIARY_INLINE.getVariantName());
-    MenuItem menuItem = menuBar.addItem(VaadinIcon.ELLIPSIS_DOTS_V.create());
+    MenuItem menuItem = menuBar.addItem(VaadinIcon.CARET_DOWN.create());
     SubMenu subMenu = menuItem.getSubMenu();
 
     for (Column<T> column : grid.getColumns()) {
@@ -110,6 +113,7 @@ private Optional<MenuBar> createMenuToggle() {
     }
 
     menuBar.getThemeNames().add(GRID_HELPER_TOGGLE_THEME);
+    menuBar.getElement().setAttribute("slot", "fc-column-toggle");
     return Optional.of(menuBar).filter(_menuBar -> !_menuBar.getItems().isEmpty());
   }
 
@@ -170,7 +174,4 @@ public void setHidingToggleCaption(Column<?> column, String caption) {
     }
   }
 
-  Column<?> getMenuToggleColumn() {
-    return menuToggleColumn;
-  }
 }

src/main/java/com/flowingcode/vaadin/addons/gridhelpers/GridHelper.java

@@ -2,7 +2,7 @@
  * #%L
  * Grid Helpers Add-on
  * %%
- * Copyright (C) 2022 - 2025 Flowing Code
+ * Copyright (C) 2022 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -50,7 +50,6 @@
 
 @SuppressWarnings("serial")
 @JsModule("./fcGridHelper/connector.js")
-@CssImport(value = "./fcGridHelper/vaadin-menu-bar.css", themeFor = "vaadin-menu-bar")
 @CssImport(value = GridHelper.GRID_STYLES, themeFor = "vaadin-grid")
 @CssImport(
     value = "./fcGridHelper/vaadin-context-menu-item.css",
@@ -67,6 +66,7 @@
 @CssImport(
     value = "./fcGridHelper/vaadin-checkbox.css",
     themeFor = "vaadin-checkbox")
+@CssImport(value = "./fcGridHelper/styles.css")
 public final class GridHelper<T> implements Serializable {
 
   private static final Logger logger = LoggerFactory.getLogger(GridHelper.class);
@@ -362,8 +362,9 @@
     return getHelper(column.getGrid()).columnToggleHelper.getHidingToggleCaption(column);
   }
 
+  @Deprecated(forRemoval = true, since = "2.2.0")
   public static boolean isMenuToggleColumn(Column<?> column) {
-    return column == getHelper(column).columnToggleHelper.getMenuToggleColumn();
+    return false;
   }
 
   // Empty Label

src/main/resources/META-INF/frontend/fcGridHelper/connector.js

@@ -29,7 +29,12 @@ import { Grid } from '@vaadin/grid/src/vaadin-grid.js';
 (function () { 
   window.Vaadin.Flow.fcGridHelperConnector = {
     initLazy: grid => {
-
+        if (!grid.shadowRoot.querySelector('slot[name="fc-column-toggle"]')) {
+            const slot = document.createElement('slot');
+            slot.setAttribute('name','fc-column-toggle')
+            grid.shadowRoot.appendChild(slot);
+        }
+
     	//https://cookbook.vaadin.com/grid-arrow-selection
     	grid.addEventListener('keyup', function(e) {
     		if (e.keyCode == 32) return;

src/main/resources/META-INF/frontend/fcGridHelper/vaadin-menu-bar.css → src/main/resources/META-INF/frontend/fcGridHelper/styles.css

@@ -2,7 +2,7 @@
  * #%L
  * Grid Helpers Add-on
  * %%
- * Copyright (C) 2022 - 2024 Flowing Code
+ * Copyright (C) 2022 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,15 +17,18 @@
  * limitations under the License.
  * #L%
  */
-
-:host([theme~="gridHelperToggle"]) {
+vaadin-menu-bar[theme~="gridHelperToggle"][slot] {
   position: absolute;
-  top: 0;
-  right: var(--fcgh-toggle-right);
-  height: 100%;
+  top: -4px;
+  right: calc( 6px - var(--vaadin-aura-theme,0)*1px);
+}
+
+vaadin-menu-bar[theme~="gridHelperToggle"][slot] vaadin-menu-bar-button::part(suffix) {
+  display:none;
 }
 
-:host([theme~="gridHelperToggle"]) [part="container"] {
-  vertical-align: middle;
-  height: 100%;
+vaadin-menu-bar[theme~="gridHelperToggle"][slot] > vaadin-menu-bar-button {
+  padding: calc(var(--vaadin-aura-theme, 0) * 2px);
+  --lumo-size-m: 0;
 }
+

src/main/resources/META-INF/frontend/fcGridHelper/vaadin-grid.css

@@ -42,15 +42,6 @@
   min-height: calc(var(--lumo-size-xxs) - var(--_lumo-grid-border-width));
 }
 
-:host {
-  --fcgh-toggle-right: 0;
-}
-
-:host([overflow~="right"]), :host([overflow~="left"]),
-:host([overflow~="start"]), :host([overflow~="end"])  {
-  --fcgh-toggle-right: 24px;
-}
-
 table[aria-multiselectable="true"] [part~="fcGh-noselect"][first-column] ::slotted(*) {
   opacity: var(--fcgh-noselect-opacity, 0.5);
   pointer-events: none;

src/test/java/com/flowingcode/vaadin/addons/gridhelpers/it/ColumnToggleIT.java

@@ -47,16 +47,24 @@ public void setup() throws Exception {
 
   @Test
   public void testColumnToggleVisible() {
-    int nColumns = grid.getVisibleColumns().size();
     assertNull("ColumnToggle should be absent", grid.getColumnToggleButton());
 
     $server.setColumnToggleVisible(true);
     assertNotNull("ColumnToggle should be present", grid.getColumnToggleButton());
-    assertThat(grid.getVisibleColumns(), hasSize(nColumns + 1));
 
     $server.setColumnToggleVisible(false);
     assertNull("ColumnToggle should be absent", grid.getColumnToggleButton());
-    assertThat(grid.getVisibleColumns(), hasSize(nColumns));
+  }
+
+  @Test
+  public void testColumnToggleSlot() {
+    $server.setColumnToggleVisible(true);
+    assertNotNull("ColumnToggle should be present", grid.getColumnToggle());
+    assertEquals("fc-column-toggle", grid.getColumnToggleSlotName());
+
+    $server.setColumnToggleVisible(false);
+    assertNull("ColumnToggle should be absent", grid.getColumnToggle());
+    assertNull(grid.getColumnToggleSlotName());
   }
 
   @Test
@@ -66,9 +74,7 @@ public void testColumnToggleClick() {
     $server.setColumnToggleVisible(true);
     grid.getColumnToggleButton().click();
 
-    // the toggle is rendered in its own column
     assertThat(grid.getColumnToggleElements(), hasSize(nColumns));
-    assertThat(grid.getVisibleColumns(), hasSize(++nColumns));
 
     grid.getColumnToggleElements().get(0).setChecked(false);
     assertThat(grid.getVisibleColumns(), hasSize(nColumns - 1));

src/test/java/com/flowingcode/vaadin/addons/gridhelpers/it/GridHelperElement.java

@@ -76,6 +76,26 @@ public TestBenchElement getColumnToggleButton() {
     }
   }
 
+  /**
+   * Returns the column toggle menu bar, which is slotted into the grid, or {@code null} if the
+   * column toggle is not visible.
+   */
+  public TestBenchElement getColumnToggle() {
+    List<WebElement> elements =
+        findElements(By.cssSelector("vaadin-menu-bar[theme~='gridHelperToggle']"));
+    return (TestBenchElement) elements.stream().findFirst().orElse(null);
+  }
+
+  /**
+   * Returns the name of the slot that the column toggle is assigned to, or {@code null} if the
+   * column toggle is not visible or is not assigned to any slot.
+   */
+  public String getColumnToggleSlotName() {
+    return (String) executeScript(
+        "const toggle = this.querySelector('vaadin-menu-bar[theme~=\"gridHelperToggle\"]');"
+            + "return toggle && toggle.assignedSlot && toggle.assignedSlot.name;");
+  }
+
   public List<CheckboxElement> getColumnToggleElements() {
     try {
       ElementQuery<TestBenchElement> query;

src/test/java/com/flowingcode/vaadin/addons/gridhelpers/test/GridHelperTest.java

@@ -184,11 +184,11 @@ public void testSelectOnClick() {
   }
 
   @Test
-  public void testMenuToggleColumn() {
+  public void testMenuToggleSlot() {
     grid.setColumnToggleVisible(true);
 
-    Column<Bean> toggleColumn=grid.getColumns().get(grid.getColumns().size()-1);
-    assertTrue(GridHelper.isMenuToggleColumn(toggleColumn));
+    assertTrue(grid.getElement().getChildren()
+        .anyMatch(e -> "fc-column-toggle".equals(e.getAttribute("slot"))));
   }
 
   @Test