feat(Timeline): cascade color to indicator Avatar

docs/content/docs/2.components/timeline.md

@@ -96,7 +96,7 @@ props:
 
 ### Color
 
-Use the `color` prop to change the color of the active items in a Timeline.
+Use the `color` prop to change the color of the active items in a Timeline. The same `color` also tints the indicator [Avatar](/docs/components/avatar/) of every item — set `item.avatar.color` to override that cascade for a specific item.
 
 ::component-code
 ---

src/runtime/components/Timeline.vue

@@ -143,6 +143,7 @@ function onSelect(event: Event, item: T) {
         <B24Avatar
           :size="props.size"
           :icon="item.icon"
+          :color="(props.color as AvatarProps['color'])"
           v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
           data-slot="indicator"
           :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })"

test/components/Timeline.spec.ts

@@ -46,6 +46,7 @@ describe('Timeline', () => {
     ['with defaultValue', { props: { ...props, defaultValue: 'design' } }],
     ['with valueKey', { props: { ...props, valueKey: 'title', defaultValue: 'Design Phase' } }],
     ['with air-primary color', { props: { ...props, color: 'air-primary' } }],
+    ['with color and avatar', { props: { ...props, color: 'air-primary-success' as const, items: items.map(item => ({ ...item, icon: undefined, avatar: { src: 'https://github.com/bitrix24.png' } })) } }],
     ...sizes.map((size: string) => [`with size ${size} horizontal`, { props: { ...props, size } }]),
     ...sizes.map((size: string) => [`with size ${size} vertical`, { props: { ...props, size, orientation: 'vertical' } }]),
     ['with as', { props: { ...props, as: 'section' } }],

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

@@ -3,7 +3,7 @@
 exports[`Timeline > renders with air-primary color correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col style-filled">
   <div data-slot="item" class="group relative flex flex-1 gap-3">
-    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg></span>
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6) w-0.5 group-data-[state=completed]:bg-(--b24ui-background-active)"></div>
     </div>
     <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
@@ -13,7 +13,7 @@ exports[`Timeline > renders with air-primary color correctly 1`] = `
     </div>
   </div>
   <div data-slot="item" class="group relative flex flex-1 gap-3">
-    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path></svg></span>
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path></svg></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6) w-0.5 group-data-[state=completed]:bg-(--b24ui-background-active)"></div>
     </div>
     <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
@@ -23,7 +23,7 @@ exports[`Timeline > renders with air-primary color correctly 1`] = `
     </div>
   </div>
   <div data-slot="item" class="group relative flex flex-1 gap-3">
-    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg></span>
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="M11.985 3a1.706 1.706 0 0 0-1.699 1.825L6.774 7.304h-1.7a1 1 0 0 0-1 1v9.203a1 1 0 0 0 1 1h13.822a1 1 0 0 0 1-1V8.304a1 1 0 0 0-1-1H17.19l-3.51-2.447q.006-.075.007-.15c0-.94-.763-1.707-1.703-1.707M10.8 5.931a1.694 1.694 0 0 0 2.35.019l1.943 1.354H8.855zm-4.231 4.744a.8.8 0 0 1 .8-.8h7.115a.8.8 0 0 1 .8.8v.137a.8.8 0 0 1-.8.8H7.37a.8.8 0 0 1-.8-.8zm.8 2.845a.8.8 0 0 0-.8.8v.137a.8.8 0 0 0 .8.8H13.1a.8.8 0 0 0 .8-.8v-.138a.8.8 0 0 0-.8-.8z" clip-rule="evenodd"></path></svg></span>
       <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6) w-0.5 group-data-[state=completed]:bg-(--b24ui-background-active)"></div>
     </div>
     <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
@@ -33,7 +33,7 @@ exports[`Timeline > renders with air-primary color correctly 1`] = `
     </div>
   </div>
   <div data-slot="item" class="group relative flex flex-1 gap-3">
-    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-outline-no-accent size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path></svg></span>
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="shrink-0 size-7 text-inherit"><path fill="currentColor" fill-rule="evenodd" d="m13.505 12 3.905 3.904-1.505 1.505L12 13.505l-3.905 3.904-1.505-1.505L10.495 12 6.59 8.095 8.095 6.59 12 10.495l3.905-3.905 1.505 1.505z" clip-rule="evenodd"></path></svg></span>
       <!--v-if-->
     </div>
     <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
@@ -180,6 +180,51 @@ exports[`Timeline > renders with class correctly 1`] = `
 </div>"
 `;
 
+exports[`Timeline > renders with color and avatar correctly 1`] = `
+"<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col style-filled-success">
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><img src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6) w-0.5 group-data-[state=completed]:bg-(--b24ui-background-active)"></div>
+    </div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-label text-(length:--ui-font-size-xs)/(--ui-font-line-height-md)">Mar 15, 2025</div>
+      <div data-slot="title" class="font-(--ui-font-weight-medium) text-legend text-(length:--ui-font-size-sm)">Project Kickoff</div>
+      <div data-slot="description" class="text-description text-wrap text-(length:--ui-font-size-sm)">Kicked off the project with team alignment. Set up project milestones and allocated resources.</div>
+    </div>
+  </div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><img src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6) w-0.5 group-data-[state=completed]:bg-(--b24ui-background-active)"></div>
+    </div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-label text-(length:--ui-font-size-xs)/(--ui-font-line-height-md)">Mar 22, 2025</div>
+      <div data-slot="title" class="font-(--ui-font-weight-medium) text-legend text-(length:--ui-font-size-sm)">Design Phase</div>
+      <div data-slot="description" class="text-description text-wrap text-(length:--ui-font-size-sm)">User research and design workshops. Created wireframes and prototypes for user testing</div>
+    </div>
+  </div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><img src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <div data-orientation="vertical" aria-orientation="vertical" role="separator" data-slot="separator" class="flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6) w-0.5 group-data-[state=completed]:bg-(--b24ui-background-active)"></div>
+    </div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-label text-(length:--ui-font-size-xs)/(--ui-font-line-height-md)">Mar 29, 2025</div>
+      <div data-slot="title" class="font-(--ui-font-weight-medium) text-legend text-(length:--ui-font-size-sm)">Development Sprint</div>
+      <div data-slot="description" class="text-description text-wrap text-(length:--ui-font-size-sm)">Frontend and backend development. Implemented core features and integrated with APIs.</div>
+    </div>
+  </div>
+  <div data-slot="item" class="group relative flex flex-1 gap-3">
+    <div data-slot="container" class="relative flex items-center gap-1.5 flex-col"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success size-8 text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-description group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)"><img src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+      <!--v-if-->
+    </div>
+    <div data-slot="wrapper" class="w-full mt-1.5 pb-6.5">
+      <div data-slot="date" class="text-label text-(length:--ui-font-size-xs)/(--ui-font-line-height-md)">Apr 5, 2025</div>
+      <div data-slot="title" class="font-(--ui-font-weight-medium) text-legend text-(length:--ui-font-size-sm)">Testing &amp; Deployment</div>
+      <div data-slot="description" class="text-description text-wrap text-(length:--ui-font-size-sm)">QA testing and performance optimization. Deployed the application to production.</div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Timeline > renders with custom-wrapper slot correctly 1`] = `
 "<div data-orientation="vertical" data-slot="root" class="flex gap-1.5 flex-col style-filled">
   <div data-slot="item" class="group relative flex flex-1 gap-3">