fix(VTimeline): keep dot border when using numeric dot size

J-Sek · J-Sek · commit 9511bc310a49 · 2026-03-03T12:06:12.000+01:00
fixes #22499
diff --git a/packages/vuetify/src/components/VTimeline/VTimeline.sass b/packages/vuetify/src/components/VTimeline/VTimeline.sass
@@ -21,6 +21,8 @@
         background-color: transparent !important
 
   .v-timeline
+    --v-timeline-dot-border-size: #{map.get($timeline-dot-border-sizes, 'default')}
+
     display: grid
     grid-auto-flow: dense
     position: relative
@@ -208,18 +210,17 @@
       $size: $timeline-dot-size + (8 * $multiplier)
 
       &--size-#{$name}
+        --v-timeline-dot-border-size: #{map.get($timeline-dot-border-sizes, $name)}
         height: $size
         width: $size
 
-        .v-timeline-divider__inner-dot
-          height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
-          width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
-
   .v-timeline-divider__inner-dot
     align-items: center
     border-radius: $timeline-dot-border-radius
     display: flex
     justify-content: center
+    height: calc(100% - var(--v-timeline-dot-border-size))
+    width: calc(100% - var(--v-timeline-dot-border-size))
 
   /** Modifiers **/
 
diff --git a/packages/vuetify/src/components/VTimeline/__tests__/VTimeline.spec.browser.tsx b/packages/vuetify/src/components/VTimeline/__tests__/VTimeline.spec.browser.tsx
@@ -171,5 +171,39 @@ describe('VTimeline', () => {
     })
   })
 
+  it('should not fill dot when size is a number and fill-dot is false', async () => {
+    render(() => (
+      <VTimeline>
+        <VTimelineItem size={ 40 } fillDot={ false }>
+          {{ default: () => 'Content' }}
+        </VTimelineItem>
+      </VTimeline>
+    ))
+
+    const outerDot = screen.getByCSS('.v-timeline-divider__dot')
+    const innerDot = screen.getByCSS('.v-timeline-divider__inner-dot')
+
+    expect(outerDot.getBoundingClientRect().width).toBe(40)
+    expect(innerDot.getBoundingClientRect().width).toBe(32)
+    expect(innerDot.getBoundingClientRect().height).toBe(32)
+  })
+
+  it('should fill dot when size is a number and fill-dot is true', async () => {
+    render(() => (
+      <VTimeline>
+        <VTimelineItem size={ 40 } fillDot>
+          {{ default: () => 'Content' }}
+        </VTimelineItem>
+      </VTimeline>
+    ))
+
+    const outerDot = screen.getByCSS('.v-timeline-divider__dot')
+    const innerDot = screen.getByCSS('.v-timeline-divider__inner-dot')
+
+    expect(outerDot.getBoundingClientRect().width).toBe(40)
+    expect(innerDot.getBoundingClientRect().width).toBe(40)
+    expect(innerDot.getBoundingClientRect().height).toBe(40)
+  })
+
   showcase({ stories })
 })
