Fix dev overlay UI Toolkit component names (withastro#5206)

Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Marijn Kneppers <[email protected]> Co-authored-by: Yan Thomas <[email protected]>
vrabe · Nov 9, 2023 · 8d474e0 · 8d474e0
1 parent c73773a
commit 8d474e0
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/content/docs/en/reference/dev-overlay-plugin-reference.mdx b/src/content/docs/en/reference/dev-overlay-plugin-reference.mdx
@@ -266,7 +266,7 @@ Shows a card with optionally an [`icon`](#icons). Optionally, if a `link` is pas
 The slot of the component will be used as the content of the card.
 
 ```html
-<astro-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</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-highlight`
@@ -282,7 +282,7 @@ Can be used to highlight an element on the page. In most cases, you'll want to p
 const elementToHighlight = document.querySelector('h1');
 const rect = elementToHighlight.getBoundingClientRect();
 
-const highlight = document.createElement('astro-overlay-highlight');
+const highlight = document.createElement('astro-dev-overlay-highlight');
 
 highlight.style.top = `${Math.max(rect.top + window.scrollY - 10, 0)}px`;
 highlight.style.left = `${Math.max(rect.left + window.scrollX - 10, 0)}px`;
@@ -325,7 +325,7 @@ tooltip.sections = [{
 This component is often combined with the `astro-dev-overlay-highlight` component to show a tooltip when hovering a highlighted element:
 
 ```ts
-const highlight = document.createElement('astro-overlay-highlight');
+const highlight = document.createElement('astro-dev-overlay-highlight');
 
 // Position the highlight...
 
@@ -352,5 +352,5 @@ Currently, the following icons are available and can be used in any component th
 In addition to these included icons, you can also pass a string containing the SVG markup of the icon you want to use.
 
 ```html
-<astro-overlay-card icon="<svg>...</svg>" link="https://docs.astro.build">Read more in the Astro Docs!</astro-overlay-card>
+<astro-dev-overlay-card icon="<svg>...</svg>" link="https://docs.astro.build">Read more in the Astro Docs!</astro-dev-overlay-card>
 ```