Merge branch 'latest' into docs/dashboard

vaadin · Dec 18, 2024 · 5d84f7f · 5d84f7f
2 parents 4d3d2b1 + d5c4b9a
commit 5d84f7f
Show file tree

Hide file tree

Showing 8 changed files with 1,729 additions and 1,697 deletions.
diff --git a/articles/_vaadin-version.adoc b/articles/_vaadin-version.adoc
@@ -1,4 +1,4 @@
-:vaadin-version: 24.5.8
-:vaadin-flow-version: 24.5.8
+:vaadin-version: 24.6.0
+:vaadin-flow-version: 24.6.0
 :vaadin-seven-version: 7.7.38
 :vaadin-eight-version: 8.20.0
diff --git a/frontend/demo/component/grid/grid-item-details-toggle.ts b/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[]
diff --git a/frontend/demo/component/grid/react/grid-item-details-toggle.tsx b/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[]