Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-02-24 22:46:02 -05:00
Code Issues Activity

feat(dev-overlay): Add a tooltip on plugin hover / focus (#8978)

Browse source 
* feat(dev-overlay): Add a tooltip on plugin hover / focus

* chore: changeset

* test: add test
This commit is contained in:
Erika 2023-11-01 18:11:57 +01:00 • committed by GitHub
parent 40a0616797
commit cc3278bb69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/twenty-shirts-smile.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
In the dev overlay, add a tooltip showing the currently hovered / focused plugin's name

13
packages/astro/e2e/dev-overlay.test.js
View file

@ -15,7 +15,7 @@ test.afterAll(async () => {
await devServer.stop();
});
test.describe('Dev Overlay zzz', () => {
test.describe('Dev Overlay', () => {
test('dev overlay exists in the page', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
@ -23,6 +23,17 @@ test.describe('Dev Overlay zzz', () => {
await expect(devOVerlay).toHaveCount(1);
});
test('shows plugin name on hover', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const overlay = page.locator('astro-dev-overlay');
const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
const pluginButtonTooltip = pluginButton.locator('.item-tooltip');
await pluginButton.hover();
await expect(pluginButtonTooltip).toBeVisible();
});
test('can open Astro plugin', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));

31
packages/astro/src/runtime/client/dev-overlay/overlay.ts
View file

@ -97,7 +97,7 @@ export class AstroDevOverlay extends HTMLElement {
overflow: hidden;
}
#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus {
#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus-visible {
background: rgba(27, 30, 36, 1);
cursor: pointer;
outline-offset: -3px;
@ -116,6 +116,33 @@ export class AstroDevOverlay extends HTMLElement {
background: rgba(71, 78, 94, 1);
}
#dev-bar .item-tooltip {
background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
border: 1px solid rgba(52, 56, 65, 1);
border-radius: 4px;
padding: 4px 8px;
position: absolute;
top: -40px;
opacity: 0;
transition: opacity 0.2s ease-in-out 0s;
pointer-events: none;
}
#dev-bar .item-tooltip::after{
content: '';
position: absolute;
left: calc(50% - 5px);
bottom: -6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #343841;
}
#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
transition: opacity 0.2s ease-in-out 200ms;
opacity: 1;
}
#dev-bar #bar-container .item.active .notification {
border-color: rgba(71, 78, 94, 1);
}
@ -374,7 +401,7 @@ export class AstroDevOverlay extends HTMLElement {
getPluginTemplate(plugin: DevOverlayPlugin) {
return `<button class="item" data-plugin-id="${plugin.id}">
<div class="icon">${this.getPluginIcon(plugin.icon)}<div class="notification"></div></div>
<span class="sr-only">${plugin.name}</span>
<span class="item-tooltip">${plugin.name}</span>
</button>`;
}