Skip to content

feat: add RTL support to PackageVersions #350

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
danielroe merged 3 commits into from
Jan 29, 2026
+17 −17
Merged

feat: add RTL support to PackageVersions #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2eb660d
feat: add RTL support to `PackageVersions`
userquin Jan 29, 2026
2bc4c9a
chore: fix spec
userquin Jan 29, 2026
61bd016
chore: escape `:` in spec
userquin Jan 29, 2026
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
32 changes: 16 additions & 16 deletions app/components/PackageVersions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
>
{{ $t('package.versions.title') }}
<span
class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
aria-hidden="true"
/>
</a>
Expand All @@ -343,15 +343,15 @@ function getTagVersions(tag: string): VersionDisplay[] {
>
<span
v-if="loadingTags.has(row.tag)"
class="i-carbon-rotate-180 w-3 h-3 motion-safe:animate-spin"
class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
data-testid="loading-spinner"
aria-hidden="true"
/>
<span
v-else
class="w-3 h-3 transition-transform duration-200"
class="w-3 h-3 transition-transform duration-200 rtl-flip"
:class="
expandedTags.has(row.tag) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'
expandedTags.has(row.tag) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'
"
aria-hidden="true"
/>
Expand Down Expand Up @@ -412,7 +412,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
<!-- Expanded versions -->
<div
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
class="ml-4 pl-2 border-l border-border space-y-0.5"
class="ms-4 ps-2 border-is border-border space-y-0.5"
>
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
<div class="flex items-center justify-between gap-2">
Expand Down Expand Up @@ -470,7 +470,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
<div class="pt-1">
<button
type="button"
class="flex items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
class="flex items-center gap-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
:aria-expanded="otherVersionsExpanded"
:aria-label="
otherVersionsExpanded
Expand All @@ -484,14 +484,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
>
<span
v-if="otherVersionsLoading"
class="i-carbon-rotate-180 w-3 h-3 motion-safe:animate-spin"
class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
data-testid="loading-spinner"
aria-hidden="true"
/>
<span
v-else
class="w-3 h-3 transition-transform duration-200"
:class="otherVersionsExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
class="w-3 h-3 transition-transform duration-200 rtl-flip"
:class="otherVersionsExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
aria-hidden="true"
/>
</span>
Expand All @@ -504,7 +504,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
</button>

<!-- Expanded other versions -->
<div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border space-y-0.5">
<div v-if="otherVersionsExpanded" class="ms-4 ps-2 border-is border-border space-y-0.5">
<!-- Hidden tag rows (overflow from visible tags) -->
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
<div class="flex items-center justify-between gap-2">
Expand Down Expand Up @@ -568,11 +568,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
@click="toggleMajorGroup(group.groupKey)"
>
<span
class="w-3 h-3 transition-transform duration-200"
class="w-3 h-3 transition-transform duration-200 rtl-flip"
:class="
expandedMajorGroups.has(group.groupKey)
? 'i-carbon-chevron-down'
: 'i-carbon-chevron-right'
? 'i-carbon:chevron-down'
: 'i-carbon:chevron-right'
"
aria-hidden="true"
/>
Expand Down Expand Up @@ -616,7 +616,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
</div>
<div
v-if="group.versions[0]?.tags?.length"
class="flex items-center gap-1 ml-5 flex-wrap"
class="flex items-center gap-1 ms-5 flex-wrap"
>
<span
v-for="tag in group.versions[0].tags"
Expand Down Expand Up @@ -670,7 +670,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
/>
</div>
</div>
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ms-5">
<span
v-for="tag in group.versions[0].tags"
:key="tag"
Expand All @@ -684,7 +684,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
<!-- Version group versions -->
<div
v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
class="ml-6 space-y-0.5"
class="ms-6 space-y-0.5"
>
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
<div class="flex items-center justify-between gap-2">
Expand Down
2 changes: 1 addition & 1 deletion test/nuxt/components/PackageVersions.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -943,7 +943,7 @@ describe('PackageVersions', () => {
})

// Find chevron icons inside buttons
const chevronIcons = component.findAll('button span.i-carbon-chevron-right')
const chevronIcons = component.findAll('button span.i-carbon\\:chevron-right')
expect(chevronIcons.length).toBeGreaterThan(0)
for (const icon of chevronIcons) {
expect(icon.attributes('aria-hidden')).toBe('true')
Expand Down
Loading