Skip to content

fix(ChangelogVersion/ChangelogVersions): handle RTL mode #4777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 25, 2025
Merged

fix(ChangelogVersion/ChangelogVersions): handle RTL mode #4777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c01d569
fix(ChangelogVersion/ChangelogVersions): handle RTL mode
MalikJouda Aug 18, 2025
f802d5a
up
MalikJouda Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/app/components/content/examples/changelog/ChangelogVersionsStickyExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const versions = [{
:badge="undefined"
class="flex items-start"
:ui="{
container: 'max-w-lg mr-0',
container: 'max-w-lg me-0',
indicator: 'sticky top-(--ui-header-height) pt-4 -mt-4 flex flex-col items-end'
}"
>
Expand Down
2 changes: 1 addition & 1 deletion src/theme/changelog-version.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default {
image: 'object-cover object-top w-full h-full',
authors: 'flex flex-wrap gap-x-4 gap-y-1.5',
footer: 'border-t border-default pt-5 flex items-center justify-between',
indicator: 'absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0',
indicator: 'absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0',
dot: 'size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1',
dotInner: 'size-2 rounded-full bg-primary'
},
Expand Down
4 changes: 2 additions & 2 deletions src/theme/changelog-versions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export default {
slots: {
root: 'relative',
container: 'flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16',
indicator: 'absolute hidden lg:block overflow-hidden inset-y-3 left-32 h-full w-px bg-border -ml-[8.5px]',
beam: 'absolute left-0 top-0 w-full bg-primary will-change-[height]'
indicator: 'absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]',
beam: 'absolute start-0 top-0 w-full bg-primary will-change-[height]'
}
}
50 changes: 25 additions & 25 deletions test/components/__snapshots__/ChangelogVersion-vue.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`ChangelogVersion > renders with actions slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -19,7 +19,7 @@ exports[`ChangelogVersion > renders with actions slot correctly 1`] = `

exports[`ChangelogVersion > renders with as correctly 1`] = `
"<section class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -34,7 +34,7 @@ exports[`ChangelogVersion > renders with as correctly 1`] = `

exports[`ChangelogVersion > renders with authors correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -59,7 +59,7 @@ exports[`ChangelogVersion > renders with authors correctly 1`] = `

exports[`ChangelogVersion > renders with authors slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -76,7 +76,7 @@ exports[`ChangelogVersion > renders with authors slot correctly 1`] = `

exports[`ChangelogVersion > renders with badge correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -99,7 +99,7 @@ exports[`ChangelogVersion > renders with badge correctly 1`] = `

exports[`ChangelogVersion > renders with badge object correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -122,7 +122,7 @@ exports[`ChangelogVersion > renders with badge object correctly 1`] = `

exports[`ChangelogVersion > renders with badge slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -144,7 +144,7 @@ exports[`ChangelogVersion > renders with badge slot correctly 1`] = `

exports[`ChangelogVersion > renders with body slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -159,7 +159,7 @@ exports[`ChangelogVersion > renders with body slot correctly 1`] = `

exports[`ChangelogVersion > renders with class correctly 1`] = `
"<article class="absolute">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -174,7 +174,7 @@ exports[`ChangelogVersion > renders with class correctly 1`] = `

exports[`ChangelogVersion > renders with date correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2025-01-01T00:00:00.000Z" class="text-sm/6 text-toned truncate">Jan 1, 2025</time>
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2025-01-01T00:00:00.000Z" class="text-sm/6 text-toned truncate">Jan 1, 2025</time>
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
</div>
Expand All @@ -195,7 +195,7 @@ exports[`ChangelogVersion > renders with date correctly 1`] = `

exports[`ChangelogVersion > renders with date slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -218,7 +218,7 @@ exports[`ChangelogVersion > renders with date slot correctly 1`] = `

exports[`ChangelogVersion > renders with description correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -238,7 +238,7 @@ exports[`ChangelogVersion > renders with description correctly 1`] = `

exports[`ChangelogVersion > renders with description slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -258,7 +258,7 @@ exports[`ChangelogVersion > renders with description slot correctly 1`] = `

exports[`ChangelogVersion > renders with description slot correctly 2`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -278,7 +278,7 @@ exports[`ChangelogVersion > renders with description slot correctly 2`] = `

exports[`ChangelogVersion > renders with footer slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -293,7 +293,7 @@ exports[`ChangelogVersion > renders with footer slot correctly 1`] = `

exports[`ChangelogVersion > renders with header slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -308,7 +308,7 @@ exports[`ChangelogVersion > renders with header slot correctly 1`] = `

exports[`ChangelogVersion > renders with image correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -330,7 +330,7 @@ exports[`ChangelogVersion > renders with image correctly 1`] = `

exports[`ChangelogVersion > renders with image slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -352,7 +352,7 @@ exports[`ChangelogVersion > renders with image slot correctly 1`] = `

exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">Indicator slot</div>
<div class="flex flex-col mx-auto max-w-2xl">
<!--v-if-->
<!--v-if-->
Expand All @@ -362,7 +362,7 @@ exports[`ChangelogVersion > renders with indicator slot correctly 1`] = `

exports[`ChangelogVersion > renders with title correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -384,7 +384,7 @@ exports[`ChangelogVersion > renders with title correctly 1`] = `

exports[`ChangelogVersion > renders with title slot correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -406,7 +406,7 @@ exports[`ChangelogVersion > renders with title slot correctly 1`] = `

exports[`ChangelogVersion > renders with title slot correctly 2`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -428,7 +428,7 @@ exports[`ChangelogVersion > renders with title slot correctly 2`] = `

exports[`ChangelogVersion > renders with to & image correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -448,7 +448,7 @@ exports[`ChangelogVersion > renders with to & image correctly 1`] = `

exports[`ChangelogVersion > renders with to correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand All @@ -463,7 +463,7 @@ exports[`ChangelogVersion > renders with to correctly 1`] = `

exports[`ChangelogVersion > renders with ui correctly 1`] = `
"<article class="relative">
<div class="absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
<!--v-if-->
<div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
<div class="size-2 rounded-full bg-primary"></div>
Expand Down
Loading