feat(NavigationMenu): add item.color forwarded to leading Avatar

docs/content/docs/2.components/navigation-menu.md

@@ -79,6 +79,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `label?: string`{lang="ts-type"}
 - `icon?: IconComponent`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
+- `color?: AvatarProps['color']`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
 - [`chip?: boolean | ChipProps`{lang="ts-type"}](#with-chip-in-items)
 - `hint?: string`{lang="ts-type"}

src/runtime/components/NavigationMenu.vue

@@ -32,6 +32,10 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    * @AvatarProps
    */
   avatar?: AvatarProps
+  /**
+   * Default `color` for the item's leading `B24Avatar`. Overridden by `avatar.color` when set.
+   */
+  color?: AvatarProps['color']
   /**
    * Display a badge on the item.
    * `{ size: 'xs', color: 'air-primary-alert' }`{lang="ts-type"}
@@ -365,6 +369,7 @@ function onLinkTrailingClick(e: Event, item: NavigationMenuItem) {
             <B24Avatar
               v-else-if="item.avatar"
               :size="((item.b24ui?.linkLeadingAvatarSize || props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()) as AvatarProps['size'])"
+              :color="item.color"
               v-bind="item.avatar"
               data-slot="linkLeadingAvatar"
               :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active, disabled: !!item.disabled })"

test/components/NavigationMenu.spec.ts

@@ -103,6 +103,7 @@ describe('NavigationMenu', () => {
     ...orientations.map((orientation: string) => [`with content orientation ${orientation}`, { props: { ...props, orientation } }]),
     [`with def`, { props: { ...props } }],
     ['with chip', { props: { items: [[{ label: 'Guide', icon: Cross30Icon, chip: true }, { label: 'Components', icon: SignIcon, chip: { color: 'air-primary' } }]] } }],
+    ['with item color', { props: { items: [[{ label: 'Engineer', avatar: { src: 'https://github.com/bitrix24.png' }, color: 'air-primary' as const }, { label: 'Designer', avatar: { src: 'https://github.com/bitrix24.png' }, color: 'air-primary-success' as const }]], orientation: 'vertical' as const } }],
     ['with trailingIcon', { props: { ...props, trailingIcon: SignIcon } }],
     ['with externalIcon', { props: { ...props, externalIcon: Cross30Icon } }],
     ['without externalIcon', { props: { ...props, externalIcon: false } }],

test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap

@@ -621,6 +621,33 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
 </nav>"
 `;
 
+exports[`NavigationMenu > renders with item color correctly 1`] = `
+"<nav data-component="section" data-slot="root" class="relative flex [&amp;>div]:min-w-0 font-[family-name:var(--ui-font-family-secondary)] flex-col w-full ps-0 pe-0 rtl:pe-0 rtl:ps-0" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+  <ul data-slot="list" class="isolate min-w-0 flex flex-col">
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0 mt-(--menu-item-block-stack-space) data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke) data-[state=open]:bg-(--leftmenu-group-bg)"><button type="button" data-reka-collection-item="" data-slot="link" class="min-w-9.5 w-full max-w-full m-0 group relative cursor-pointer flex items-center gap-0.5 font-(--ui-font-weight-normal) text-(length:--ui-font-size-lg) focus:outline-none focus-visible:rounded-(--menu-item-border-radius) focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-(--ui-color-base-4) rounded-(--menu-item-border-radius) text-(--menu-item-color) bg-(--menu-item-background) hover:bg-(--menu-item-background-hover) data-[state=open]:bg-(--menu-item-background-hover) border-0 menu-item-vertical h-9.5 min-h-9.5 p-1.5 flex-row rtl:flex-row-reverse justify-between data-[state=open]:text-(length:--ui-font-size-sm) data-[state=open]:opacity-70 collapsed data-[state=open]:-mt-(--leftmenu-group-stroke-weight) data-[state=open]:-mx-(--leftmenu-group-stroke-weight) transition-colors"><span data-slot="linkLabelWrapper" class="flex items-center rtl:flex-row-reverse relative h-5.5 w-full"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0 size-5 me-1"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <!--v-if-->
+        <!--v-if--><span data-slot="linkLabel" class="truncate ms-[9px]">Engineer</span>
+        <!--v-if--></span>
+        <!--v-if-->
+      </button>
+      <!--v-if-->
+      <!--v-if-->
+    </li>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0 mt-(--menu-item-block-stack-space) data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke) data-[state=open]:bg-(--leftmenu-group-bg)"><button type="button" data-reka-collection-item="" data-slot="link" class="min-w-9.5 w-full max-w-full m-0 group relative cursor-pointer flex items-center gap-0.5 font-(--ui-font-weight-normal) text-(length:--ui-font-size-lg) focus:outline-none focus-visible:rounded-(--menu-item-border-radius) focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-(--ui-color-base-4) rounded-(--menu-item-border-radius) text-(--menu-item-color) bg-(--menu-item-background) hover:bg-(--menu-item-background-hover) data-[state=open]:bg-(--menu-item-background-hover) border-0 menu-item-vertical h-9.5 min-h-9.5 p-1.5 flex-row rtl:flex-row-reverse justify-between data-[state=open]:text-(length:--ui-font-size-sm) data-[state=open]:opacity-70 collapsed data-[state=open]:-mt-(--leftmenu-group-stroke-weight) data-[state=open]:-mx-(--leftmenu-group-stroke-weight) transition-colors"><span data-slot="linkLabelWrapper" class="flex items-center rtl:flex-row-reverse relative h-5.5 w-full"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0 size-5 me-1"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <!--v-if-->
+        <!--v-if--><span data-slot="linkLabel" class="truncate ms-[9px]">Designer</span>
+        <!--v-if--></span>
+        <!--v-if-->
+      </button>
+      <!--v-if-->
+      <!--v-if-->
+    </li>
+  </ul>
+  <!--v-if-->
+  <!--v-if-->
+</nav>"
+`;
+
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
 "<nav data-component="section" data-slot="root" class="flex [&amp;>div]:min-w-0 font-[family-name:var(--ui-font-family-secondary)] relative h-full items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">

test/components/__snapshots__/NavigationMenu.spec.ts.snap

@@ -621,6 +621,33 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
 </nav>"
 `;
 
+exports[`NavigationMenu > renders with item color correctly 1`] = `
+"<nav data-component="section" data-slot="root" class="relative flex [&amp;>div]:min-w-0 font-[family-name:var(--ui-font-family-secondary)] flex-col w-full ps-0 pe-0 rtl:pe-0 rtl:ps-0" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="">
+  <ul data-slot="list" class="isolate min-w-0 flex flex-col">
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0 mt-(--menu-item-block-stack-space) data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke) data-[state=open]:bg-(--leftmenu-group-bg)"><button type="button" data-reka-collection-item="" data-slot="link" class="min-w-9.5 w-full max-w-full m-0 group relative cursor-pointer flex items-center gap-0.5 font-(--ui-font-weight-normal) text-(length:--ui-font-size-lg) focus:outline-none focus-visible:rounded-(--menu-item-border-radius) focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-(--ui-color-base-4) rounded-(--menu-item-border-radius) text-(--menu-item-color) bg-(--menu-item-background) hover:bg-(--menu-item-background-hover) data-[state=open]:bg-(--menu-item-background-hover) border-0 menu-item-vertical h-9.5 min-h-9.5 p-1.5 flex-row rtl:flex-row-reverse justify-between data-[state=open]:text-(length:--ui-font-size-sm) data-[state=open]:opacity-70 collapsed data-[state=open]:-mt-(--leftmenu-group-stroke-weight) data-[state=open]:-mx-(--leftmenu-group-stroke-weight) transition-colors"><span data-slot="linkLabelWrapper" class="flex items-center rtl:flex-row-reverse relative h-5.5 w-full"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0 size-5 me-1"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <!--v-if-->
+        <!--v-if--><span data-slot="linkLabel" class="truncate ms-[9px]">Engineer</span>
+        <!--v-if--></span>
+        <!--v-if-->
+      </button>
+      <!--v-if-->
+      <!--v-if-->
+    </li>
+    <li data-state="closed" data-orientation="vertical" data-slot="item" class="min-w-0 mt-(--menu-item-block-stack-space) data-[state=open]:rounded-(--menu-item-border-radius) data-[state=open]:border-(length:--leftmenu-group-stroke-weight) data-[state=open]:border-(--leftmenu-group-stroke) data-[state=open]:bg-(--leftmenu-group-bg)"><button type="button" data-reka-collection-item="" data-slot="link" class="min-w-9.5 w-full max-w-full m-0 group relative cursor-pointer flex items-center gap-0.5 font-(--ui-font-weight-normal) text-(length:--ui-font-size-lg) focus:outline-none focus-visible:rounded-(--menu-item-border-radius) focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-(--ui-color-base-4) rounded-(--menu-item-border-radius) text-(--menu-item-color) bg-(--menu-item-background) hover:bg-(--menu-item-background-hover) data-[state=open]:bg-(--menu-item-background-hover) border-0 menu-item-vertical h-9.5 min-h-9.5 p-1.5 flex-row rtl:flex-row-reverse justify-between data-[state=open]:text-(length:--ui-font-size-sm) data-[state=open]:opacity-70 collapsed data-[state=open]:-mt-(--leftmenu-group-stroke-weight) data-[state=open]:-mx-(--leftmenu-group-stroke-weight) transition-colors"><span data-slot="linkLabelWrapper" class="flex items-center rtl:flex-row-reverse relative h-5.5 w-full"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0 size-5 me-1"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+        <!--v-if-->
+        <!--v-if--><span data-slot="linkLabel" class="truncate ms-[9px]">Designer</span>
+        <!--v-if--></span>
+        <!--v-if-->
+      </button>
+      <!--v-if-->
+      <!--v-if-->
+    </li>
+  </ul>
+  <!--v-if-->
+  <!--v-if-->
+</nav>"
+`;
+
 exports[`NavigationMenu > renders with item slot correctly 1`] = `
 "<nav data-component="section" data-slot="root" class="flex [&amp;>div]:min-w-0 font-[family-name:var(--ui-font-family-secondary)] relative h-full items-center justify-between" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
   <div style="position: relative;">