Feature/SSD-813-ta-tag#345
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds a TA Tag component preview and documentation page for SSD-813.
Changes:
- Added standalone Tag component CSS with size + variant styling.
- Added an HTML preview page that supports theme toggling via
postMessage. - Updated the Tag docs page to embed the preview via tabs.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| apps/docs/public/assets/ta-preview/tag/tag.css | Introduces Tag component styling (variants, sizes, dot/no-dot, dark mode). |
| apps/docs/public/assets/ta-preview/tag/ta-tag-preview.html | Adds an iframe-friendly preview page for the Tag component. |
| apps/docs/content/docs/develop/(transistory-assistance)/ta-tag.mdx | Adds preview/code tabs and embeds the new Tag preview in docs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| window.addEventListener("message", (event) => { | ||
| if (event.origin !== window.origin) return; | ||
| if (event.data?.theme) { | ||
| document.documentElement.className = event.data.theme; | ||
| console.log("Theme applied inside iframe:", event.data.theme); | ||
| } | ||
| }, false); |
There was a problem hiding this comment.
window.origin is not a reliable/standard property across browsers; this will cause the origin check to fail and prevent theme messages from being applied. Use window.location.origin (or document.location.origin) for the comparison.
| if (event.origin !== window.origin) return; | ||
| if (event.data?.theme) { | ||
| document.documentElement.className = event.data.theme; | ||
| console.log("Theme applied inside iframe:", event.data.theme); |
There was a problem hiding this comment.
Remove the console.log (or gate it behind a debug flag) to avoid noisy console output in production docs/previews.
| console.log("Theme applied inside iframe:", event.data.theme); |
| /* border-color: rgba(var(--_gray-200) / 1); */ | ||
| font-weight: 500; | ||
| white-space: nowrap; | ||
| transition: all 0.15s ease; |
There was a problem hiding this comment.
Avoid transition: all since it can cause unnecessary repaints/layout work when any property changes. Prefer transitioning only the property you actually animate (e.g., opacity 0.15s ease).
| transition: all 0.15s ease; | |
| transition: background-color 0.15s ease, | |
| border-color 0.15s ease, | |
| color 0.15s ease, | |
| box-shadow 0.15s ease, | |
| opacity 0.15s ease, | |
| transform 0.15s ease; |
| font-weight: 500; | ||
| white-space: nowrap; | ||
| transition: all 0.15s ease; | ||
| white-space: nowrap; |
There was a problem hiding this comment.
Duplicate white-space: nowrap; declaration—remove one to reduce noise and make future diffs clearer.
| white-space: nowrap; |
| @@ -2,5 +2,25 @@ | |||
| title: Tag | |||
| description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users. | |||
There was a problem hiding this comment.
This page is now for the Tag component, but the frontmatter description still describes accessibility testing tools. Also, the Code/TagCSS tabs currently contain placeholders; replace them with real usage/CSS (or remove the tabs until content is ready) to avoid publishing misleading docs.
| --- | ||
| import { Tab, Tabs } from "fumadocs-ui/components/tabs"; | ||
| import IframeThemePreview from "@/components/iframe-theme-preview"; | ||
|
|
There was a problem hiding this comment.
This page is now for the Tag component, but the frontmatter description still describes accessibility testing tools. Also, the Code/TagCSS tabs currently contain placeholders; replace them with real usage/CSS (or remove the tabs until content is ready) to avoid publishing misleading docs.
Summarise the feature
Issue ticket # SSD-813
Description:
TA Tag component
Type of change
Affected endpoints
/?
Checklist