refactor: re-use popover example for grid column visibility

articles/components/grid/columns.adoc

@@ -145,37 +145,25 @@ endif::[]
 
 == Column Visibility
 
-When you want, columns and column groups can be hidden. You can provide the user with a menu for toggling column visibilities, for example, using Menu Bar. Allowing the user to hide columns is useful when only a subset of the columns is relevant to their task, and if there are plenty of columns.
-
-In the example here, notice that the email addresses and telephone numbers are not fully visible because the data doesn't wrap and won't fit in the width provided. Now click on the _Show/Hide Columns_ button to see a menu of choices to reduce the number of columns. Notice that all columns are checked. De-select the _First Name_ and then the _Profession_ column. That should allow the email addresses and telephone numbers to be fully visible. Incidentally, if you don't deselect any columns, you can still right-click on an email address to copy it: You'll still get the whole address, even if it's not visible.
+When you want, columns and column groups can be hidden. You can provide the user with a menu for toggling column visibilities, for example, using Popover. Allowing the user to hide columns is useful when only a subset of the columns is relevant to their task, and if there are plenty of columns.
 
 [.example]
 --
 
-ifdef::lit[]
-[source,typescript]
+[source,html]
 ----
-include::{root}/frontend/demo/component/grid/grid-column-visibility.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/popover/popover-anchored-dialog.ts[render,tags=gridsnippet,indent=0,group=Lit]
 ----
-endif::[]
 
-ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/grid/GridColumnVisibility.java[render,tags=snippet1,indent=0,group=Flow]
-
-...
-
-include::{root}/src/main/java/com/vaadin/demo/component/grid/GridColumnVisibility.java[render,tags=snippet2,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/popover/PopoverAnchoredDialog.java[render,tags=gridsnippet,indent=0,group=Flow]
 ----
-endif::[]
 
-ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/grid/react/grid-column-visibility.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/popover/react/popover-anchored-dialog.tsx[render,tags=gridsnippet,indent=0,group=React]
 ----
-endif::[]
 --
 
 

frontend/demo/component/popover/popover-anchored-dialog.ts

@@ -62,6 +62,7 @@ export class Example extends LitElement {
       ></vaadin-popover>
       <!-- end::snippet[] -->
 
+      <!-- tag::gridsnippet[] -->
       <vaadin-grid .items="${this.items}">
         ${this.gridColumns.map(
           (column) => html`
@@ -72,6 +73,7 @@ export class Example extends LitElement {
           `
         )}
       </vaadin-grid>
+      <!-- end::gridsnippet[] -->
     `;
   }
 

frontend/demo/component/popover/react/popover-anchored-dialog.tsx

@@ -92,11 +92,13 @@ function Example() {
       </Popover>
       {/* end::snippet[] */}
 
+      {/* tag::gridsnippet[] */}
       <Grid items={items.value}>
         {columns.value.map((item) => (
           <GridColumn path={item.key} hidden={!item.visible} key={item.key} />
         ))}
       </Grid>
+      {/* end::gridsnippet[] */}
     </>
   );
 }

src/main/java/com/vaadin/demo/component/popover/PopoverAnchoredDialog.java

@@ -18,20 +18,19 @@
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.H3;
-import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.popover.Popover;
 import com.vaadin.flow.component.popover.PopoverPosition;
 import com.vaadin.flow.data.renderer.LocalDateRenderer;
 import com.vaadin.flow.router.Route;
-import com.vaadin.flow.component.orderedlayout.FlexComponent;
 
 @Route("popover-anchored-dialog")
 public class PopoverAnchoredDialog extends Div {
 
     public PopoverAnchoredDialog() {
+        // tag::gridsnippet[]
         Grid<Person> grid = new Grid<>(Person.class, false);
         grid.addColumn(Person::getFirstName).setKey("firstName")
                 .setHeader("First name");
@@ -45,6 +44,7 @@ public PopoverAnchoredDialog() {
                 .setKey("birthday").setHeader("Birthday");
         grid.addColumn(Person::getProfession).setKey("profession")
                 .setHeader("Profession");
+        // end::gridsnippet[]
 
         grid.setItems(DataService.getPeople());
 
@@ -71,7 +71,8 @@ public PopoverAnchoredDialog() {
 
         List<String> columns = List.of("firstName", "lastName", "email",
                 "phone", "birthday", "profession");
-
+        // tag::gridsnippet[]
+
         CheckboxGroup<String> group = new CheckboxGroup<>();
         group.addThemeVariants(CheckboxGroupVariant.LUMO_VERTICAL);
         group.setItems(columns);
@@ -85,6 +86,7 @@ public PopoverAnchoredDialog() {
                 grid.getColumnByKey(key).setVisible(e.getValue().contains(key));
             });
         });
+        // end::gridsnippet[]
 
         Set<String> defaultColumns = Set.of("firstName", "lastName", "email",
                 "profession");