feat(Alert): cascade color to inner Avatar

docs/content/docs/2.components/alert.md

@@ -85,7 +85,7 @@ props:
 
 ### Color
 
-Use the `color` prop to change the color of the Alert.
+Use the `color` prop to change the color of the Alert. The same `color` also tints the inner [Avatar](/docs/components/avatar/) when one is rendered — set `avatar.color` to override that cascade per-instance.
 
 ::component-code
 ---
@@ -106,6 +106,25 @@ props:
 ---
 ::
 
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - description
+  - avatar.src
+  - avatar.size
+  - avatar.loading
+props:
+  color: 'air-primary-copilot'
+  avatar.src: '/b24ui/avatar/employee.png'
+  avatar.size: 'xs'
+  avatar.loading: 'lazy'
+  title: Heads up!
+  description: We will immediately notify the manager that the deal is not progressing.
+---
+::
+
 ### Inverted
 
 Use the `inverted` prop to invert the color of the Alert.

src/runtime/components/Alert.vue

@@ -119,7 +119,14 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...(appConfig.b24ui?.alert
         data-slot="icon"
         :class="b24ui.icon({ class: props.b24ui?.icon })"
       />
-      <B24Avatar v-else-if="props.avatar" :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])" v-bind="props.avatar" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
+      <B24Avatar
+        v-else-if="props.avatar"
+        :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])"
+        :color="(props.color as AvatarProps['color'])"
+        v-bind="props.avatar"
+        data-slot="avatar"
+        :class="b24ui.avatar({ class: props.b24ui?.avatar })"
+      />
     </slot>
 
     <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">

test/components/Alert.spec.ts

@@ -22,6 +22,7 @@ describe('Alert', () => {
     ['with close', { props: { ...props, close: true } }],
     ['with closeIcon', { props: { ...props, close: true, closeIcon: Cross30Icon } }],
     [`with success`, { props: { ...props, color: 'air-primary-success' as const } }],
+    ['with color and avatar', { props: { ...props, color: 'air-primary-success' as const, avatar: { src: 'https://github.com/bitrix24.png' } } }],
     ['with as', { props: { ...props, as: 'article' } }],
     ['with class', { props: { ...props, class: 'w-48' } }],
     ['with b24ui', { props: { ...props, b24ui: { title: 'font-bold' } } }],

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

@@ -121,6 +121,17 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
 </div>"
 `;
 
+exports[`Alert > renders with color and avatar correctly 1`] = `
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-filled-success py-md ps-md pe-xs gap-2.5 items-start"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring-(--b24ui-border-color) style-filled-success ring-2 size-12 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col font-[family-name:var(--ui-font-family-primary)]">
+    <div data-slot="title" class="font-(--ui-font-weight-bold) text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Alert</div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Alert > renders with description correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-outline py-md ps-md pe-xs gap-2.5 items-start">
   <!--v-if-->

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

@@ -121,6 +121,17 @@ exports[`Alert > renders with closeIcon correctly 1`] = `
 </div>"
 `;
 
+exports[`Alert > renders with color and avatar correctly 1`] = `
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-filled-success py-md ps-md pe-xs gap-2.5 items-start"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring-(--b24ui-border-color) style-filled-success ring-2 size-12 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+  <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col font-[family-name:var(--ui-font-family-primary)]">
+    <div data-slot="title" class="font-(--ui-font-weight-bold) text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Alert</div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Alert > renders with description correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-outline py-md ps-md pe-xs gap-2.5 items-start">
   <!--v-if-->