diff --git a/articles/components/avatar/index.adoc b/articles/components/avatar/index.adoc index 3beb8f53c4..f31797c5e1 100644 --- a/articles/components/avatar/index.adoc +++ b/articles/components/avatar/index.adoc @@ -318,83 +318,33 @@ include::{root}/frontend/demo/component/avatar/react/avatar-group-internationali endif::[] -- -== Size Variants -Avatar has four available size variants: +== Use Cases + +Avatar can be paired with Popover to create a user account menu. [.example] -- -ifdef::lit[] [source,html] ---- -include::{root}/frontend/demo/component/avatar/avatar-sizes.ts[render,tags=snippet,indent=0,group=Lit] +include::{root}/frontend/demo/component/popover/popover-user-menu.ts[render,tags=snippet,indent=0,group=Lit] ---- -endif::[] -ifdef::flow[] [source,java] ---- -include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarSizes.java[render,tags=snippet,indent=0,group=Flow] +include::{root}/src/main/java/com/vaadin/demo/component/popover/PopoverUserMenu.java[render,tags=snippet,indent=0,group=Flow] ---- -endif::[] -ifdef::react[] [source,tsx] ---- -include::{root}/frontend/demo/component/avatar/react/avatar-sizes.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - -|=== -| Variant | Theme name - -|Extra large -|`xlarge` - -|Large -|`large` - -|Small -|`small` - -|Extra small -|`xsmall` - -|=== - -Size variants should be used only in special cases. -See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to -change the default Avatar size. - -== Use Cases - -Avatar can be paired with Menu Bar to create a user account menu. - -[.example] --- - -ifdef::lit[] -[source,javascript] ----- -include::{root}/frontend/demo/component/avatar/avatar-menu-bar.ts[render,tags=snippet,indent=0,group=Lit] +include::{root}/frontend/demo/component/popover/react/popover-user-menu.tsx[render,tags=snippet,indent=0,group=React] ---- -endif::[] -ifdef::flow[] -[source,java] +[source,css] ---- -include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarMenuBar.java[render,tags=snippet,indent=0,group=Flow] +include::{root}/frontend/themes/docs/popover-user-menu.css[] ---- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/avatar/react/avatar-menu-bar.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] -- diff --git a/articles/components/avatar/styling.adoc b/articles/components/avatar/styling.adoc index d9ae138a32..ee78e2b23e 100644 --- a/articles/components/avatar/styling.adoc +++ b/articles/components/avatar/styling.adoc @@ -7,25 +7,102 @@ order: 50 --- = Avatar Styling + +== Style Variants + +Avatar and Avatar Group support the following style variants: + +[cols="1,3,1"] +|=== +| Variant | Description | Supported by + +|`reverse` +|Reverses the stacking order of avatars in Avatar Group +|Aura, Lumo + +|`large` +|Large avatar size +|Lumo + +|`small` +|Small avatar size +|Lumo + +|`xlarge` +|Extra large avatar size +|Lumo + +|`xsmall` +|Extra small avatar size +|Lumo + +|=== + + +=== Size Variants + +Avatar has four available size variants: + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/avatar/avatar-sizes.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarSizes.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/avatar/react/avatar-sizes.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + +Size variants should be used only in special cases. +See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to +change the default Avatar size. + include::../_styling-section-theming-props.adoc[tag=style-properties] === Common Properties [cols="1,2,2"] |=== -| Feature | Property | Default Value +| Feature | Property | Supported by |Avatar size |`--vaadin-avatar-size` -|`var(--lumo-size-m)` +|Aura, Lumo + +|Avatar background +|`--vaadin-avatar-background` +|Aura, Lumo + +|Avatar border width +|`--vaadin-avatar-border-width` +|Aura + +|Avatar border color +|`--vaadin-avatar-border-color` +|Aura |Avatar Group overlap |`--vaadin-avatar-group-overlap` -|`8px` +|Aura, Lumo -|Avatar Group overlap border -|`--vaadin-avatar-group-overlap-border` -|`2px` +|Avatar Group gap +|`--vaadin-avatar-group-gap` +|Aura, Lumo |=== @@ -33,35 +110,47 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] [cols="1,2,2"] |=== -| Feature | Property | Default Value +| Feature | Property | Supported by |User color 0 |`--vaadin-user-color-0` -|`#df0b92` +|Aura, Lumo |User color 1 |`--vaadin-user-color-1` -|`#650acc` +|Aura, Lumo |User color 2 |`--vaadin-user-color-2` -|`#097faa` +|Aura, Lumo |User color 3 |`--vaadin-user-color-3` -|`#ad6200` +|Aura, Lumo |User color 4 |`--vaadin-user-color-4` -|`#bf16f3` +|Aura, Lumo |User color 5 |`--vaadin-user-color-5` -|`#084391` +|Aura, Lumo |User color 6 |`--vaadin-user-color-6` -|`#078836` +|Aura, Lumo + +|User color 7 +|`--vaadin-user-color-7` +|Aura + +|User color 8 +|`--vaadin-user-color-8` +|Aura + +|User color 9 +|`--vaadin-user-color-9` +|Aura |=== diff --git a/frontend/demo/component/avatar/avatar-menu-bar.ts b/frontend/demo/component/avatar/avatar-menu-bar.ts deleted file mode 100644 index 96d776f613..0000000000 --- a/frontend/demo/component/avatar/avatar-menu-bar.ts +++ /dev/null @@ -1,61 +0,0 @@ -import 'Frontend/demo/init'; // hidden-source-line -import '@vaadin/avatar'; -import '@vaadin/menu-bar'; -import { html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import type { MenuBarItem } from '@vaadin/menu-bar'; -import { getPeople } from 'Frontend/demo/domain/DataService'; -import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; -import { applyTheme } from 'Frontend/demo/theme'; - -@customElement('avatar-menu-bar') -export class Example extends LitElement { - protected override createRenderRoot() { - const root = super.createRenderRoot(); - applyTheme(root); - return root; - } - - @state() - private menuBarItems: MenuBarItem[] = []; - - @state() - private person: Person | undefined; - - // tag::snippet[] - protected override async firstUpdated() { - const { people } = await getPeople({ count: 1 }); - this.person = people[0]; - - const avatarElement = document.createElement('vaadin-avatar'); - avatarElement.name = `${this.person?.firstName} ${this.person?.lastName}`; - avatarElement.img = this.person?.pictureUrl; - - this.menuBarItems = [ - { - component: avatarElement, - children: [ - { - text: 'Profile', - }, - { - text: 'Settings', - }, - { - text: 'Help', - }, - { - text: 'Sign out', - }, - ], - }, - ]; - } - - protected override render() { - return html` - - `; - } - // end::snippet[] -} diff --git a/frontend/demo/component/avatar/react/avatar-menu-bar.tsx b/frontend/demo/component/avatar/react/avatar-menu-bar.tsx deleted file mode 100644 index 435721813e..0000000000 --- a/frontend/demo/component/avatar/react/avatar-menu-bar.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line -import React, { useEffect } from 'react'; -import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line -import { useSignal } from '@vaadin/hilla-react-signals'; -import { Avatar, MenuBar } from '@vaadin/react-components'; -import { getPeople } from 'Frontend/demo/domain/DataService'; -import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; - -function Example() { - useSignals(); // hidden-source-line - const person = useSignal(undefined); - - useEffect(() => { - getPeople({ count: 1 }).then(({ people }) => { - person.value = people[0]; - }); - }, []); - - // tag::snippet[] - const menuBarItems = [ - { - component: ( - - ), - children: [ - { - text: 'Profile', - }, - { - text: 'Settings', - }, - { - text: 'Help', - }, - { - text: 'Sign out', - }, - ], - }, - ]; - - return ; - // end::snippet[] -} - -export default reactExample(Example); // hidden-source-line diff --git a/src/main/java/com/vaadin/demo/component/avatar/AvatarMenuBar.java b/src/main/java/com/vaadin/demo/component/avatar/AvatarMenuBar.java deleted file mode 100644 index 0843df8022..0000000000 --- a/src/main/java/com/vaadin/demo/component/avatar/AvatarMenuBar.java +++ /dev/null @@ -1,43 +0,0 @@ -package com.vaadin.demo.component.avatar; - -import com.vaadin.demo.DemoExporter; // hidden-source-line -import com.vaadin.demo.domain.DataService; -import com.vaadin.demo.domain.Person; -import com.vaadin.flow.component.avatar.Avatar; -import com.vaadin.flow.component.contextmenu.MenuItem; -import com.vaadin.flow.component.contextmenu.SubMenu; -import com.vaadin.flow.component.html.Div; -import com.vaadin.flow.component.menubar.MenuBar; -import com.vaadin.flow.component.menubar.MenuBarVariant; -import com.vaadin.flow.router.Route; - -@Route("avatar-menu-bar") -public class AvatarMenuBar extends Div { - - private Person person = DataService.getPeople(1).get(0); - - public AvatarMenuBar() { - String name = person.getFirstName() + " " + person.getLastName(); - String pictureUrl = person.getPictureUrl(); - - // tag::snippet[] - Avatar avatar = new Avatar(name); - avatar.setImage(pictureUrl); - - MenuBar menuBar = new MenuBar(); - menuBar.addThemeVariants(MenuBarVariant.LUMO_TERTIARY_INLINE); - - MenuItem menuItem = menuBar.addItem(avatar); - SubMenu subMenu = menuItem.getSubMenu(); - subMenu.addItem("Profile"); - subMenu.addItem("Settings"); - subMenu.addItem("Help"); - subMenu.addItem("Sign out"); - // end::snippet[] - - add(menuBar); - } - - public static class Exporter extends DemoExporter { // hidden-source-line - } // hidden-source-line -}