Skip to content

feat: update readme toc button to use new component #1112

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 7 commits into from
Feb 7, 2026
Merged

feat: update readme toc button to use new component #1112

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9af2ab4
feat: add copy readme to markdown button
IdrisGit Feb 6, 2026
d5c6923
test: add a simple test
IdrisGit Feb 6, 2026
787f4e6
fix(style): remove redundant focus style
IdrisGit Feb 6, 2026
124c13e
Revert "test: add a simple test"
ghostdevv Feb 6, 2026
7152c10
feat: update toc button style
ghostdevv Feb 7, 2026
e4fcefc
chore: revert unneeded change
danielroe Feb 7, 2026
85cb236
fix: decrease what we expose
danielroe Feb 7, 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
1 change: 1 addition & 0 deletions app/components/Button/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const el = useTemplateRef('el')

defineExpose({
focus: () => el.value?.focus(),
buttonRef: el,
Copy link
Copy Markdown
Member

@danielroe danielroe Feb 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

previously only the focus was exposed to avoid too much dependency externally on the inner workings of the button, so I wonder if it would be better simply to expose getBoundingClientRect and/or consider whether we can refactor in future.

})
</script>

Expand Down
16 changes: 8 additions & 8 deletions app/components/ReadmeTocDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ function toggle() {
if (isOpen.value) {
close()
} else {
if (triggerRef.value) {
const rect = triggerRef.value.getBoundingClientRect()
if (triggerRef.value?.buttonRef) {
const rect = triggerRef.value.buttonRef.getBoundingClientRect()
dropdownPosition.value = {
top: rect.bottom + 4,
right: rect.right,
Expand All @@ -101,7 +101,7 @@ function close() {
function select(id: string) {
scrollToAnchor(id, { scrollFn: props.scrollToHeading })
close()
triggerRef.value?.focus()
triggerRef.value?.buttonRef?.focus()
}

function getIndex(id: string): number {
Expand Down Expand Up @@ -138,25 +138,25 @@ function handleKeydown(event: KeyboardEvent) {
}
case 'Escape':
close()
triggerRef.value?.focus()
triggerRef.value?.buttonRef?.focus()
break
}
}
</script>

<template>
<button
<ButtonBase
ref="triggerRef"
type="button"
class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
:aria-expanded="isOpen"
aria-haspopup="listbox"
:aria-label="$t('package.readme.toc_title')"
:aria-controls="listboxId"
@click="toggle"
@keydown="handleKeydown"
classicon="i-carbon:list"
class="px-2.5 flex items-center"
>
<span class="i-carbon:list w-3.5 h-3.5" aria-hidden="true" />
<span
class="i-carbon:chevron-down w-3 h-3"
:class="[
Expand All @@ -165,7 +165,7 @@ function handleKeydown(event: KeyboardEvent) {
]"
aria-hidden="true"
/>
</button>
</ButtonBase>

<Teleport to="body">
<Transition
Expand Down
Loading