Skip to content

feat(docs): replace remaining native title= attributes with Tooltip (#495) #643

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

Closed
sridhar-3009 wants to merge 1 commit into from
Closed

feat(docs): replace remaining native title= attributes with Tooltip (#495) #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 0 additions & 1 deletion apps/docs/src/components/app/AppSearchInline.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
<button
aria-label="Search (Ctrl+K)"
:class="['inline-flex items-center gap-1.5 rounded-full border border-divider pl-1.5 pr-1.5 py-1.5 hover:border-primary/50 focus-visible:border-primary focus-visible:outline-none transition-colors', settings.showBgGlass.value ? 'bg-glass-surface' : 'bg-surface']"
title="Search (Ctrl+K)"
type="button"
@click="search.open"
>
Expand Down
25 changes: 15 additions & 10 deletions apps/docs/src/components/app/AppSettingsSheet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
// Framework
import { Avatar, useFeatures, useRtl, useStack, useStorage } from '@vuetify/v0'
import { Avatar, Tooltip, useFeatures, useRtl, useStack, useStorage } from '@vuetify/v0'

// Components
import { Discovery } from '@/components/discovery'
Expand Down Expand Up @@ -114,15 +114,20 @@
<div class="text-xs text-on-surface-variant capitalize">{{ auth.user?.role }}</div>
</div>

<button
aria-label="Sign out"
class="pa-1 cursor-pointer bg-transparent border-0 inline-flex items-center justify-center rounded hover:bg-surface-variant transition-colors text-on-surface-variant hover:text-error"
title="Sign out"
type="button"
@click="auth.logout()"
>
<AppIcon icon="logout" :size="16" />
</button>
<Tooltip.Root :close-delay="100" :open-delay="500">
<Tooltip.Activator
aria-label="Sign out"
class="pa-1 cursor-pointer bg-transparent border-0 inline-flex items-center justify-center rounded hover:bg-surface-variant transition-colors text-on-surface-variant hover:text-error"
type="button"
@click="auth.logout()"
>
<AppIcon icon="logout" :size="16" />
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Sign out
</Tooltip.Content>
</Tooltip.Root>
</div>

<!-- Theme -->
Expand Down
24 changes: 16 additions & 8 deletions apps/docs/src/components/app/settings/AppSettingsTheme.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<script setup lang="ts">
// Framework
import { Tooltip } from '@vuetify/v0'

// Composables
import { useClipboard } from '@/composables/useClipboard'
import { useCustomThemes } from '@/composables/useCustomThemes'
Expand Down Expand Up @@ -44,14 +47,19 @@
<AppIcon icon="paint" size="16" />
<span>Theme</span>

<button
class="ml-auto p-1 rounded hover:bg-surface-tint transition-colors inline-flex items-center justify-center shrink-0"
title="Copy theme as Vuetify0 config"
type="button"
@click="exportTheme"
>
<AppIcon :icon="clipboard.copied.value ? 'check-circle' : 'copy'" size="14" />
</button>
<Tooltip.Root :close-delay="100" :open-delay="500">
<Tooltip.Activator
class="ml-auto p-1 rounded hover:bg-surface-tint transition-colors inline-flex items-center justify-center shrink-0"
type="button"
@click="exportTheme"
>
<AppIcon :icon="clipboard.copied.value ? 'check-circle' : 'copy'" size="14" />
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Copy theme as Vuetify0 config
</Tooltip.Content>
</Tooltip.Root>
</h3>

<!-- Mode -->
Expand Down
25 changes: 16 additions & 9 deletions apps/docs/src/components/app/theme/AppThemeCustomButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<script setup lang="ts">
// Framework
import { Tooltip } from '@vuetify/v0'

// Composables
import { useCustomThemes } from '@/composables/useCustomThemes'
import { useThemeToggle, type ThemePreference } from '@/composables/useThemeToggle'
Expand Down Expand Up @@ -43,15 +46,19 @@
<AppIcon :icon="theme.icon" size="16" />
<span class="font-medium truncate">{{ theme.label }}</span>

<button
v-if="editable"
class="ml-auto opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-surface-tint transition-all"
title="Edit theme"
type="button"
@click="onEdit"
>
<AppIcon icon="edit" size="12" />
</button>
<Tooltip.Root v-if="editable" :close-delay="100" :open-delay="500">
<Tooltip.Activator
class="ml-auto opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-surface-tint transition-all"
type="button"
@click="onEdit"
>
<AppIcon icon="edit" size="12" />
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Edit theme
</Tooltip.Content>
</Tooltip.Root>
</div>

<AppThemePreview :theme="themeId" />
Expand Down
96 changes: 56 additions & 40 deletions apps/docs/src/components/docs/DocsAskPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
// Framework
import { isNull, useBreakpoints } from '@vuetify/v0'
import { isNull, Tooltip, useBreakpoints } from '@vuetify/v0'

// Components
import AppIcon from '@/components/app/AppIcon.vue'
Expand Down Expand Up @@ -178,45 +178,61 @@
</div>

<div class="flex items-center gap-0.5">
<button
v-if="messages.length > 0"
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
title="Open in Bin"
type="button"
@click="openInBin"
>
<AppIcon icon="vuetify-bin" size="16" />
</button>

<button
v-if="messages.length > 0"
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
:title="clipboard.copied.value ? 'Copied!' : 'Copy conversation'"
type="button"
@click="copyConversation"
>
<AppIcon :icon="clipboard.copied.value ? 'success' : 'copy'" size="16" />
</button>

<button
v-if="messages.length > 0"
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
title="Reset conversation"
type="button"
@click="emit('clear')"
>
<AppIcon icon="restart" size="16" />
</button>

<button
v-if="isDesktop"
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
:title="fullscreen ? 'Exit fullscreen' : 'Fullscreen'"
type="button"
@click="emit('update:fullscreen', !fullscreen)"
>
<AppIcon :icon="fullscreen ? 'fullscreen-exit' : 'fullscreen'" size="16" />
</button>
<Tooltip.Root v-if="messages.length > 0" :close-delay="100" :open-delay="500">
<Tooltip.Activator
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
type="button"
@click="openInBin"
>
<AppIcon icon="vuetify-bin" size="16" />
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Open in Bin
</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root v-if="messages.length > 0" :close-delay="100" :open-delay="500">
<Tooltip.Activator
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
type="button"
@click="copyConversation"
>
<AppIcon :icon="clipboard.copied.value ? 'success' : 'copy'" size="16" />
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
{{ clipboard.copied.value ? 'Copied!' : 'Copy conversation' }}
</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root v-if="messages.length > 0" :close-delay="100" :open-delay="500">
<Tooltip.Activator
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
type="button"
@click="emit('clear')"
>
<AppIcon icon="restart" size="16" />
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Reset conversation
</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root v-if="isDesktop" :close-delay="100" :open-delay="500">
<Tooltip.Activator
class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
type="button"
@click="emit('update:fullscreen', !fullscreen)"
>
<AppIcon :icon="fullscreen ? 'fullscreen-exit' : 'fullscreen'" size="16" />
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
{{ fullscreen ? 'Exit fullscreen' : 'Fullscreen' }}
</Tooltip.Content>
</Tooltip.Root>

<AppCloseButton @click="emit('close')" />
</div>
Expand Down
137 changes: 92 additions & 45 deletions apps/docs/src/components/docs/DocsCodeActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<script setup lang="ts">
// Framework
import { GnActionButton } from '@paper/genesis'

// Framework
import { Tooltip } from '@vuetify/v0'

// Composables
import { getBinUrl } from '@/composables/bin'
import { useClipboard } from '@/composables/useClipboard'
Expand Down Expand Up @@ -51,49 +53,94 @@

<template>
<div class="flex gap-1">
<GnActionButton
v-if="playground"
aria-label="Open in Vuetify Play"
title="Open in Vuetify Play"
@click="openInPlayground"
>
<AppIcon icon="vuetify-play" :size="16" />
</GnActionButton>

<GnActionButton
v-if="bin"
aria-label="Open in Vuetify Bin"
title="Open in Vuetify Bin"
@click="openInBin"
>
<AppIcon icon="vuetify-bin" :size="16" />
</GnActionButton>

<GnActionButton
v-if="showSize"
:aria-label="`Code size: ${size}. Click to cycle`"
:title="`Code size: ${size}`"
@click="onSize"
>
<AppIcon :icon="`size-${size}`" :size="16" />
</GnActionButton>

<GnActionButton
v-if="showWrap"
:aria-label="wrap ? 'Disable line wrap' : 'Enable line wrap'"
:title="wrap ? 'Disable line wrap' : 'Enable line wrap'"
@click="wrap = !wrap"
>
<AppIcon :icon="wrap ? 'nowrap' : 'wrap'" :size="16" />
</GnActionButton>

<GnActionButton
v-if="showCopy"
:aria-label="!clipboard.copied.value ? 'Copy code' : 'Copied'"
:title="!clipboard.copied.value ? 'Copy code' : 'Copied'"
@click="copyCode"
>
<AppIcon :icon="!clipboard.copied.value ? 'copy' : 'success'" :size="16" />
</GnActionButton>
<Tooltip.Root v-if="playground" :close-delay="100" :open-delay="500">
<Tooltip.Activator renderless>
<template #default="{ attrs: tooltipAttrs }">
<GnActionButton
v-bind="tooltipAttrs"
aria-label="Open in Vuetify Play"
@click="openInPlayground"
>
<AppIcon icon="vuetify-play" :size="16" />
</GnActionButton>
</template>
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Open in Vuetify Play
</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root v-if="bin" :close-delay="100" :open-delay="500">
<Tooltip.Activator renderless>
<template #default="{ attrs: tooltipAttrs }">
<GnActionButton
v-bind="tooltipAttrs"
aria-label="Open in Vuetify Bin"
@click="openInBin"
>
<AppIcon icon="vuetify-bin" :size="16" />
</GnActionButton>
</template>
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Open in Vuetify Bin
</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root v-if="showSize" :close-delay="100" :open-delay="500">
<Tooltip.Activator renderless>
<template #default="{ attrs: tooltipAttrs }">
<GnActionButton
v-bind="tooltipAttrs"
:aria-label="`Code size: ${size}. Click to cycle`"
@click="onSize"
>
<AppIcon :icon="`size-${size}`" :size="16" />
</GnActionButton>
</template>
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
Code size: {{ size }}
</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root v-if="showWrap" :close-delay="100" :open-delay="500">
<Tooltip.Activator renderless>
<template #default="{ attrs: tooltipAttrs }">
<GnActionButton
v-bind="tooltipAttrs"
:aria-label="wrap ? 'Disable line wrap' : 'Enable line wrap'"
@click="wrap = !wrap"
>
<AppIcon :icon="wrap ? 'nowrap' : 'wrap'" :size="16" />
</GnActionButton>
</template>
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
{{ wrap ? 'Disable line wrap' : 'Enable line wrap' }}
</Tooltip.Content>
</Tooltip.Root>

<Tooltip.Root v-if="showCopy" :close-delay="100" :open-delay="500">
<Tooltip.Activator renderless>
<template #default="{ attrs: tooltipAttrs }">
<GnActionButton
v-bind="tooltipAttrs"
:aria-label="!clipboard.copied.value ? 'Copy code' : 'Copied'"
@click="copyCode"
>
<AppIcon :icon="!clipboard.copied.value ? 'copy' : 'success'" :size="16" />
</GnActionButton>
</template>
</Tooltip.Activator>

<Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
{{ !clipboard.copied.value ? 'Copy code' : 'Copied!' }}
</Tooltip.Content>
</Tooltip.Root>
</div>
</template>
Loading
Loading