Reusable person item for samples

articles/components/context-menu/index.adoc

@@ -191,6 +191,11 @@ ifdef::react[]
 include::{root}/frontend/demo/component/contextmenu/react/context-menu-presentation.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
+
+[source,css]
+----
+include::{root}/frontend/themes/docs/person-item.css[]
+----
 --
 
 

articles/components/list-box/index.adoc

@@ -198,6 +198,11 @@ ifdef::react[]
 include::{root}/frontend/demo/component/listbox/react/list-box-custom-item-presentation.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
+
+[source,css]
+----
+include::{root}/frontend/themes/docs/person-item.css[]
+----
 --
 
 == Best Practices

articles/components/popover/index.adoc

@@ -454,6 +454,11 @@ include::{root}/frontend/demo/component/popover/react/popover-user-menu.tsx[rend
 ----
 include::{root}/frontend/themes/docs/popover-user-menu.css[]
 ----
+
+[source,css]
+----
+include::{root}/frontend/themes/docs/person-item.css[]
+----
 --
 
 - Opens on click

articles/components/select/index.adoc

@@ -427,6 +427,11 @@ ifdef::react[]
 include::{root}/frontend/demo/component/select/react/select-presentation.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
+
+[source,css]
+----
+include::{root}/frontend/themes/docs/person-item.css[]
+----
 --
 
 

articles/components/tree-grid/index.adoc

@@ -122,6 +122,11 @@ ifdef::react[]
 include::{root}/frontend/demo/component/tree-grid/react/tree-grid-rich-content.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
+
+[source,css]
+----
+include::{root}/frontend/themes/docs/person-item.css[]
+----
 --
 
 == Programmatic Scrolling

frontend/demo/component/contextmenu/context-menu-presentation.ts

@@ -2,10 +2,8 @@ import 'Frontend/demo/init'; // hidden-source-line
 import '@vaadin/avatar';
 import '@vaadin/context-menu';
 import '@vaadin/grid';
-import '@vaadin/horizontal-layout';
 import '@vaadin/icon';
 import '@vaadin/icons';
-import '@vaadin/vertical-layout';
 import { html, LitElement, render } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import type { ContextMenuItem } from '@vaadin/context-menu';
@@ -86,23 +84,14 @@ export class Example extends LitElement {
       }
       render(
         html`
-          <vaadin-horizontal-layout
-            style="align-items: center; line-height: var(--lumo-line-height-m)"
-            theme="spacing"
-          >
+          <div class="person-item">
             <vaadin-avatar
-              .img=${person.pictureUrl}
-              .name=${`${person.firstName} ${person.lastName}`}
+              .img="${person.pictureUrl}"
+              .name="${`${person.firstName} ${person.lastName}`}"
             ></vaadin-avatar>
-            <vaadin-vertical-layout>
-              <span> ${person.firstName} ${person.lastName} </span>
-              <span
-                style="color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s);"
-              >
-                ${Math.floor(Math.random() * 20) + 1} applications
-              </span>
-            </vaadin-vertical-layout>
-          </vaadin-horizontal-layout>
+            <span>${person.firstName} ${person.lastName}</span>
+            <span>${person.profession}</span>
+          </div>
         `,
         item
       );

frontend/demo/component/contextmenu/react/context-menu-presentation.tsx

@@ -7,31 +7,22 @@ import { Avatar } from '@vaadin/react-components/Avatar.js';
 import { ContextMenu, type ContextMenuItem } from '@vaadin/react-components/ContextMenu.js';
 import { Grid, type GridElement } from '@vaadin/react-components/Grid.js';
 import { GridColumn } from '@vaadin/react-components/GridColumn.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
 import { Icon } from '@vaadin/react-components/Icon.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
 
 function Item({ person }: { person: Person }) {
   useSignals(); // hidden-source-line
   return (
-    <HorizontalLayout
-      style={{ alignItems: 'center', lineHeight: 'var(--lumo-line-height-m)' }}
-      theme="spacing"
-    >
-      <Avatar img={person.pictureUrl} name={`${person.firstName} ${person.lastName}`} />
-      <VerticalLayout>
-        <span>
-          {person.firstName} {person.lastName}
-        </span>
-        <span
-          style={{ color: 'var(--lumo-secondary-text-color)', fontSize: 'var(--lumo-font-size-s)' }}
-        >
-          {Math.floor(Math.random() * 20) + 1} applications
-        </span>
-      </VerticalLayout>
-    </HorizontalLayout>
+    <div className='person-item'>
+      <Avatar
+        img={person.pictureUrl}
+        name={`${person.firstName} ${person.lastName}`}
+      />
+      <span>{person.firstName} {person.lastName}</span>
+      <span>{person.profession}</span>
+    </div>
+
   );
 }
 

frontend/demo/component/listbox/list-box-custom-item-presentation.ts

@@ -1,9 +1,7 @@
 import 'Frontend/demo/init'; // hidden-source-line
 import '@vaadin/avatar';
-import '@vaadin/horizontal-layout';
 import '@vaadin/item';
 import '@vaadin/list-box';
-import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
@@ -32,21 +30,15 @@ export class Example extends LitElement {
       <vaadin-list-box multiple .selectedValues="${[0, 2]}">
         ${this.items.map(
           (person) => html`
-            <vaadin-item style="line-height: var(--lumo-line-height-m);">
-              <vaadin-horizontal-layout style="align-items: center;" theme="spacing">
+            <vaadin-item>
+              <div class="person-item">
                 <vaadin-avatar
                   .img="${person.pictureUrl}"
                   .name="${`${person.firstName} ${person.lastName}`}"
                 ></vaadin-avatar>
-                <vaadin-vertical-layout>
-                  <span> ${person.firstName} ${person.lastName} </span>
-                  <span
-                    style="color: var(--lumo-secondary-text-color); font-size: var(--lumo-font-size-s);"
-                  >
-                    ${person.profession}
-                  </span>
-                </vaadin-vertical-layout>
-              </vaadin-horizontal-layout>
+                <span>${person.firstName} ${person.lastName}</span>
+                <span>${person.profession}</span>
+              </div>
             </vaadin-item>
           `
         )}

frontend/demo/component/listbox/react/list-box-custom-item-presentation.tsx

@@ -3,10 +3,8 @@ import React, { useEffect } from 'react';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
 import { useSignal } from '@vaadin/hilla-react-signals';
 import { Avatar } from '@vaadin/react-components/Avatar.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
 import { Item } from '@vaadin/react-components/Item.js';
 import { ListBox } from '@vaadin/react-components/ListBox.js';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
 
@@ -32,25 +30,16 @@ function Example() {
       {items.value.map((person) => (
         <Item
           value={String(items.value.indexOf(person))}
-          style={{ lineHeight: 'var(--lumo-line-height-m)' }}
           key={items.value.indexOf(person)}
         >
-          <HorizontalLayout style={{ alignItems: 'center' }} theme="spacing">
-            <Avatar img={person.pictureUrl} name={`${person.firstName} ${person.lastName}`} />
-            <VerticalLayout>
-              <span>
-                {person.firstName} {person.lastName}
-              </span>
-              <span
-                style={{
-                  color: 'var(--lumo-secondary-text-color)',
-                  fontSize: 'var(--lumo-font-size-s)',
-                }}
-              >
-                {person.profession}
-              </span>
-            </VerticalLayout>
-          </HorizontalLayout>
+          <div className='person-item'>
+            <Avatar
+              img={person.pictureUrl}
+              name={`${person.firstName} ${person.lastName}`}
+            />
+            <span>{person.firstName} {person.lastName}</span>
+            <span>{person.profession}</span>
+          </div>
         </Item>
       ))}
     </ListBox>

frontend/demo/component/popover/popover-user-menu.ts

@@ -23,6 +23,7 @@ export class Example extends LitElement {
 
   protected override async firstUpdated() {
     const { people } = await getPeople({ count: 1 });
+    // eslint-disable-next-line
     this.person = people[0];
   }
 
@@ -66,19 +67,12 @@ export class Example extends LitElement {
     const nickName = `@${firstName}${lastName}`.toLowerCase();
 
     return html`
-      <vaadin-horizontal-layout class="userMenuHeader">
-        <vaadin-avatar
-          tabindex="-1"
-          .img="${pictureUrl}"
-          .name="${`${firstName} ${lastName}`}"
-          theme="large"
-        ></vaadin-avatar>
-        <vaadin-vertical-layout>
-          <div style="font-weight: bold;">${firstName} ${lastName}</div>
-          <div class="userMenuNickname">${nickName}</div>
-        </vaadin-vertical-layout>
-      </vaadin-horizontal-layout>
-      <vaadin-vertical-layout class="userMenuLinks">
+      <div class="person-item" style="padding: var(--vaadin-padding-s);">
+        <vaadin-avatar .img="${pictureUrl}" .name="${`${firstName} ${lastName}`}"></vaadin-avatar>
+        <span>${firstName} ${lastName}</span>
+        <span>${nickName}</span>
+      </div>
+      <vaadin-vertical-layout class="userMenuLinks" style="align-items:stretch; width:100%;">
         <a href="#" role="menuitem">User profile</a>
         <a href="#" role="menuitem">Preferences</a>
         <a href="#" role="menuitem">Sign out</a>

frontend/demo/component/popover/react/popover-user-menu.tsx

@@ -50,16 +50,16 @@ function Example() {
         aria-label="User menu"
         theme="no-padding"
       >
-        <HorizontalLayout className="userMenuHeader">
-          <Avatar tabIndex={-1} img={pictureUrl} name={`${firstName} ${lastName}`} theme="large" />
-          <VerticalLayout>
-            <div style={{ fontWeight: 'bold' }}>
-              {firstName} {lastName}
-            </div>
-            <div className="userMenuNickname">{nickName}</div>
-          </VerticalLayout>
-        </HorizontalLayout>
-        <VerticalLayout className="userMenuLinks">
+        <div className='person-item' style={{padding: 'var(--vaadin-padding-s)'}}>
+          <Avatar
+            img={pictureUrl}
+            name={`${firstName} ${lastName}`}
+          />
+          <span>{firstName} {lastName}</span>
+          <span>{nickName}</span>
+        </div>
+        <VerticalLayout className="userMenuLinks"
+          style={{alignItems:'stretch', width:'100%'}}>
           <a href="#" role="menuitem">
             User profile
           </a>

frontend/demo/component/select/react/select-presentation.tsx

@@ -5,6 +5,7 @@ import { useSignal } from '@vaadin/hilla-react-signals';
 import { Item } from '@vaadin/react-components/Item.js';
 import { ListBox } from '@vaadin/react-components/ListBox.js';
 import { Select } from '@vaadin/react-components/Select.js';
+import { Avatar } from '@vaadin/react-components/Avatar.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
 
@@ -24,24 +25,13 @@ function Example() {
       <ListBox>
         {people.value.map((person) => (
           <Item value={String(person.id)} key={person.id}>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <img
-                src={person.pictureUrl}
-                alt={`Portrait of ${person.firstName} ${person.lastName}`}
-                style={{ width: '2.25rem', marginRight: 'var(--lumo-space-s)' }}
+            <div className='person-item'>
+              <Avatar
+                img={person.pictureUrl}
+                name={`${person.firstName} ${person.lastName}`}
               />
-
-              <div>
-                {person.firstName} {person.lastName}
-                <div
-                  style={{
-                    fontSize: 'var(--lumo-font-size-s)',
-                    color: 'var(--lumo-secondary-text-color)',
-                  }}
-                >
-                  {person.profession}
-                </div>
-              </div>
+              <span>{person.firstName} {person.lastName}</span>
+              <span>{person.profession}</span>
             </div>
           </Item>
         ))}

frontend/demo/component/select/select-presentation.ts

@@ -42,26 +42,13 @@ export class Example extends LitElement {
       ${this.people.map(
         (person) => html`
           <vaadin-item value="${person.id}">
-            <!--
-            NOTE
-            We are using inline styles here to keep the example simple.
-            We recommend placing CSS in a separate style sheet and
-            encapsulating the styling in a new component.
-          -->
-            <div style="display: flex; align-items: center;">
-              <img
-                src="${person.pictureUrl}"
-                alt="Portrait of ${person.firstName} ${person.lastName}"
-                style="width: 2.25rem; margin-right: var(--lumo-space-s);"
-              />
-              <div>
-                ${person.firstName} ${person.lastName}
-                <div
-                  style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
-                >
-                  ${person.profession}
-                </div>
-              </div>
+            <div class="person-item">
+              <vaadin-avatar
+                .img="${person.pictureUrl}"
+                .name="${`${person.firstName} ${person.lastName}`}"
+              ></vaadin-avatar>
+              <span>${person.firstName} ${person.lastName}</span>
+              <span>${person.profession}</span>
             </div>
           </vaadin-item>
         `

frontend/demo/component/tree-grid/react/tree-grid-rich-content.tsx

@@ -11,7 +11,6 @@ import {
 } from '@vaadin/react-components/Grid.js';
 import { GridColumn } from '@vaadin/react-components/GridColumn.js';
 import { GridTreeToggle } from '@vaadin/react-components/GridTreeToggle.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
 import { Icon } from '@vaadin/react-components/Icon.js';
 import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
@@ -86,22 +85,14 @@ function Example() {
           }
         }}
       >
-        <HorizontalLayout style={{ alignItems: 'center' }} theme="spacing">
-          <Avatar img={person.pictureUrl} name={`${person.firstName} ${person.lastName}`} />
-          <VerticalLayout style={{ lineHeight: 'var(--lumo-line-height-m)' }}>
-            <span>
-              {person.firstName} {person.lastName}
-            </span>
-            <span
-              style={{
-                fontSize: 'var(--lumo-font-size-s)',
-                color: 'var(--lumo-secondary-text-color)',
-              }}
-            >
-              {person.profession}
-            </span>
-          </VerticalLayout>
-        </HorizontalLayout>
+        <div className='person-item'>
+          <Avatar
+            img={person.pictureUrl}
+            name={`${person.firstName} ${person.lastName}`}
+          />
+          <span>{person.firstName} {person.lastName}</span>
+          <span>{person.profession}</span>
+        </div>
       </GridTreeToggle>
     ),
     []