refactor: grid item details toggle example improvements

frontend/demo/component/grid/grid-item-details-toggle.ts

@@ -1,7 +1,10 @@
 import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/button';
 import '@vaadin/form-layout';
 import '@vaadin/grid';
+import '@vaadin/icon';
 import '@vaadin/text-field';
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { columnBodyRenderer, gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
@@ -80,28 +83,35 @@ export class Example extends LitElement {
           []
         )}
       >
-        <vaadin-grid-column path="displayName" header="Name"></vaadin-grid-column>
-        <vaadin-grid-column path="profession"></vaadin-grid-column>
         <vaadin-grid-column
+          width="80px"
+          flex-grow="0"
+          frozen
           ${columnBodyRenderer<Person>(
-            (person) => html`
+            (person, { detailsOpened }) => html`
               <vaadin-button
-                theme="tertiary"
+                theme="tertiary icon"
+                aria-label="Toggle details"
+                aria-expanded="${detailsOpened ? 'true' : 'false'}"
                 @click="${() => {
-                  const isOpened = this.detailsOpenedItems.includes(person);
-                  this.detailsOpenedItems = isOpened
+                  this.detailsOpenedItems = detailsOpened
                     ? this.detailsOpenedItems.filter((p) => p !== person)
                     : [...this.detailsOpenedItems, person];
                 }}"
               >
-                Toggle details
+                <vaadin-icon
+                  .icon="${detailsOpened ? 'lumo:angle-down' : 'lumo:angle-right'}"
+                ></vaadin-icon>
               </vaadin-button>
             `,
             []
           )}
         ></vaadin-grid-column>
+        <vaadin-grid-column path="displayName" header="Name"></vaadin-grid-column>
+        <vaadin-grid-column path="profession"></vaadin-grid-column>
       </vaadin-grid>
     `;
   }
 }
+
 // end::snippet[]

frontend/demo/component/grid/react/grid-item-details-toggle.tsx

@@ -1,11 +1,13 @@
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
 import { useSignal } from '@vaadin/hilla-react-signals';
 import { Button } from '@vaadin/react-components/Button.js';
 import { FormLayout } from '@vaadin/react-components/FormLayout.js';
 import { Grid } from '@vaadin/react-components/Grid.js';
 import { GridColumn } from '@vaadin/react-components/GridColumn.js';
+import { Icon } from '@vaadin/react-components/Icon.js';
 import { TextField } from '@vaadin/react-components/TextField.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
@@ -25,6 +27,24 @@ function Example() {
     });
   }, []);
 
+  const toggleDetailsRenderer = useCallback(({ item: person }: { item: Person }) => {
+    const isExpanded = detailsOpenedItems.value.includes(person);
+    return (
+      <Button
+        theme="tertiary icon"
+        aria-label="Toggle details"
+        aria-expanded={isExpanded}
+        onClick={() => {
+          detailsOpenedItems.value = isExpanded
+            ? detailsOpenedItems.value.filter((p) => p !== person)
+            : [...detailsOpenedItems.value, person];
+        }}
+      >
+        <Icon icon={isExpanded ? 'lumo:angle-down' : 'lumo:angle-right'} />
+      </Button>
+    );
+  }, []);
+
   return (
     <Grid
       theme="row-stripes"
@@ -46,23 +66,11 @@ function Example() {
         </FormLayout>
       )}
     >
+      <GridColumn width="80px" flexGrow={0} frozen>
+        {toggleDetailsRenderer}
+      </GridColumn>
       <GridColumn path="displayName" header="Name" />
       <GridColumn path="profession" />
-      <GridColumn>
-        {({ item: person }) => (
-          <Button
-            theme="tertiary"
-            onClick={() => {
-              const isOpened = detailsOpenedItems.value.includes(person);
-              detailsOpenedItems.value = isOpened
-                ? detailsOpenedItems.value.filter((p) => p !== person)
-                : [...detailsOpenedItems.value, person];
-            }}
-          >
-            Toggle details
-          </Button>
-        )}
-      </GridColumn>
     </Grid>
   );
   // end::snippet[]

src/main/java/com/vaadin/demo/component/grid/GridItemDetailsToggle.java

@@ -22,9 +22,12 @@ public class GridItemDetailsToggle extends Div {
     public GridItemDetailsToggle() {
         // tag::snippet1[]
         Grid<Person> grid = new Grid<>(Person.class, false);
+        grid.addColumn(createToggleDetailsRenderer(grid))
+                .setWidth("80px")
+                .setFlexGrow(0)
+                .setFrozen(true);
         grid.addColumn(Person::getFullName).setHeader("Name");
         grid.addColumn(Person::getProfession).setHeader("Profession");
-        grid.addColumn(createToggleDetailsRenderer(grid));
 
         grid.setDetailsVisibleOnClick(false);
         grid.setItemDetailsRenderer(createPersonDetailsRenderer());
@@ -42,7 +45,18 @@ public GridItemDetailsToggle() {
     private static Renderer<Person> createToggleDetailsRenderer(
             Grid<Person> grid) {
         return LitRenderer.<Person> of(
-                "<vaadin-button theme=\"tertiary\" @click=\"${handleClick}\">Toggle details</vaadin-button>")
+                """
+                <vaadin-button
+                  theme="tertiary icon"
+                  aria-label="Toggle details"
+                  aria-expanded="${model.detailsOpened ? 'true' : 'false'}"
+                  @click="${handleClick}"
+                >
+                  <vaadin-icon
+                    .icon="${model.detailsOpened ? 'lumo:angle-down' : 'lumo:angle-right'}"
+                  ></vaadin-icon>
+                </vaadin-button>
+                """)
                 .withFunction("handleClick",
                         person -> grid.setDetailsVisible(person,
                                 !grid.isDetailsVisible(person)));