diff options
6 files changed, 23 insertions, 16 deletions
diff --git a/.changeset/violet-ants-bow.md b/.changeset/violet-ants-bow.md new file mode 100644 index 000000000..9ba4f9408 --- /dev/null +++ b/.changeset/violet-ants-bow.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Renames dev overlay UI Toolkit component names for consistency. diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 57ca72d63..85bdf73e1 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -192,13 +192,13 @@ document.addEventListener('DOMContentLoaded', async () => { width: 1px; } - astro-overlay-plugin-canvas { + astro-dev-overlay-plugin-canvas { position: absolute; top: 0; left: 0; } - astro-overlay-plugin-canvas:not([data-active]) { + astro-dev-overlay-plugin-canvas:not([data-active]) { display: none; } @@ -403,7 +403,9 @@ document.addEventListener('DOMContentLoaded', async () => { } getPluginCanvasById(id: string) { - return this.shadowRoot.querySelector(`astro-overlay-plugin-canvas[data-plugin-id="${id}"]`); + return this.shadowRoot.querySelector( + `astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]` + ); } togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) { @@ -486,11 +488,11 @@ document.addEventListener('DOMContentLoaded', async () => { } customElements.define('astro-dev-overlay', AstroDevOverlay); - customElements.define('astro-overlay-window', DevOverlayWindow); - customElements.define('astro-overlay-plugin-canvas', DevOverlayCanvas); - customElements.define('astro-overlay-tooltip', DevOverlayTooltip); - customElements.define('astro-overlay-highlight', DevOverlayHighlight); - customElements.define('astro-overlay-card', DevOverlayCard); + customElements.define('astro-dev-overlay-window', DevOverlayWindow); + customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas); + customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip); + customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight); + customElements.define('astro-dev-overlay-card', DevOverlayCard); const overlay = document.createElement('astro-dev-overlay'); overlay.style.zIndex = '999999'; @@ -498,7 +500,7 @@ document.addEventListener('DOMContentLoaded', async () => { // Create plugin canvases plugins.forEach((plugin) => { - const pluginCanvas = document.createElement('astro-overlay-plugin-canvas'); + const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); pluginCanvas.dataset.pluginId = plugin.id; overlay.shadowRoot?.append(pluginCanvas); }); diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index 3629776ea..11e7bb7e0 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -6,7 +6,7 @@ export default { name: 'Astro', icon: 'astro:logo', init(canvas) { - const astroWindow = document.createElement('astro-overlay-window') as DevOverlayWindow; + const astroWindow = document.createElement('astro-dev-overlay-window') as DevOverlayWindow; astroWindow.windowTitle = 'Astro'; astroWindow.windowIcon = 'astro:logo'; @@ -19,7 +19,7 @@ export default { justify-content: center; } - #buttons-container astro-overlay-card { + #buttons-container astro-dev-overlay-card { flex: 1; } @@ -53,8 +53,8 @@ export default { <div> <p>Welcome to Astro!</p> <div id="buttons-container"> - <astro-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-overlay-card> - <astro-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-overlay-card> + <astro-dev-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card> + <astro-dev-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card> </div> </div> <footer> diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts index bb94ead94..f8bda831f 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts @@ -70,7 +70,7 @@ export default { } function buildAuditTooltip(rule: AuditRule) { - const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip; + const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip; tooltip.sections = [ { icon: 'warning', diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts index 34bfd1f5a..79948dcd7 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts @@ -2,7 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js'; import type { Icon } from '../../ui-library/icons.js'; export function createHighlight(rect: DOMRect, icon?: Icon) { - const highlight = document.createElement('astro-overlay-highlight') as DevOverlayHighlight; + const highlight = document.createElement('astro-dev-overlay-highlight') as DevOverlayHighlight; if (icon) highlight.icon = icon; highlight.tabIndex = 0; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts index 123cab8f3..fe92604f4 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts @@ -46,7 +46,7 @@ export default { } function buildIslandTooltip(island: HTMLElement) { - const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip; + const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip; tooltip.sections = []; const islandProps = island.getAttribute('props') |