Skip to content

Feature/SSD-813-ta-tag #345

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

Open
FidDeveloper wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feature/SSD-813-ta-tag #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5e63bf
feat: add tag component HTML with CSS
FidDeveloper Feb 10, 2026
12d29e9
feat: ta-tag preview
FidDeveloper Feb 10, 2026
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
22 changes: 21 additions & 1 deletion apps/docs/content/docs/develop/(transistory-assistance)/ta-tag.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
---
import { Tab, Tabs } from "fumadocs-ui/components/tabs";
import IframeThemePreview from "@/components/iframe-theme-preview";

Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
## Work In Progress
<Tabs items={["Preview","Code","TagCSS"]} defaultValue="Preview">
<Tab value="Preview">
<IframeThemePreview
src="/assets/ta-preview/tag/ta-tag-preview.html"
/>
</Tab>
<Tab value="Code">
```tsx
/* Tag Component Implementation */
```
</Tab>
<Tab value="TagCSS">
```css
/* Tag Component Styles */
```
</Tab>
</Tabs>

## Overview
121 changes: 121 additions & 0 deletions apps/docs/public/assets/ta-preview/tag/ta-tag-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en" class="dark">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag Component Examples</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="../css-reset.css" />
<link rel="stylesheet" href="tag.css" />
<style>
body {
font-family: Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
/* font-family: "Inter", sans-serif; */
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}

.section {
margin-bottom: 3rem;
}

.section h2 {
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
}
.dark .section h2 {
color: var(--Text-txt-black-500, #A1A1AA);
}

.tag-group {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
</style>
<script>
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);
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the console.log (or gate it behind a debug flag) to avoid noisy console output in production docs/previews.

Suggested change
console.log("Theme applied inside iframe:", event.data.theme);

Copilot uses AI. Check for mistakes.
}
}, false);
Comment on lines +41 to +47
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
</script>
</head>

<body>
<!-- Variants Section -->
<div class="section">
<h2>Variants</h2>
<div class="tag-group">
<span class="tag tag-medium tag-default">
<span class="tag-dot"></span>
<span class="tag-text">Default</span>
</span>

<span class="tag tag-medium tag-primary">
<span class="tag-dot"></span>
<span class="tag-text">Primary</span>
</span>

<span class="tag tag-medium tag-success">
<span class="tag-dot"></span>
<span class="tag-text">Success</span>
</span>

<span class="tag tag-medium tag-danger">
<span class="tag-dot"></span>
<span class="tag-text">Danger</span>
</span>

<span class="tag tag-medium tag-warning">
<span class="tag-dot"></span>
<span class="tag-text">Warning</span>
</span>
</div>
</div>

<!-- Sizes Section -->
<div class="section">
<h2>Sizes</h2>
<div class="tag-group">
<span class="tag tag-small tag-primary">
<span class="tag-dot"></span>
<span class="tag-text">Small</span>
</span>

<span class="tag tag-medium tag-primary">
<span class="tag-dot"></span>
<span class="tag-text">Medium</span>
</span>

<span class="tag tag-large tag-primary">
<span class="tag-dot"></span>
<span class="tag-text">Large</span>
</span>
</div>
</div>

<!-- Style Section -->
<div class="section">
<h2>Styles</h2>
<div class="tag-group">
<span class="tag tag-medium tag-primary">
<span class="tag-dot"></span>
<span class="tag-text">Normal</span>
</span>

<span class="tag tag-medium tag-primary tag-rounded">
<span class="tag-dot"></span>
<span class="tag-text">Rounded</span>
</span>
</div>
</div>
</body>

</html>
233 changes: 233 additions & 0 deletions apps/docs/public/assets/ta-preview/tag/tag.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
/* Select Component Styles */
.dark body {
height: 100%;
background-color: #161619;
}

/* Tag Component Styles */

/* Base Tag */
.tag {
display: inline-flex;
align-items: center;
gap: 5px;
/* border-radius: 9999px; */
/* border-radius: 8px; */
border-width: 1px;
box-sizing: border-box;
border-style: solid;
/* border-color: rgba(var(--_gray-200) / 1); */
font-weight: 500;
white-space: nowrap;
transition: all 0.15s ease;
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Suggested change
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;

Copilot uses AI. Check for mistakes.
white-space: nowrap;
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate white-space: nowrap; declaration—remove one to reduce noise and make future diffs clearer.

Suggested change
white-space: nowrap;

Copilot uses AI. Check for mistakes.
border-radius: var(--Radius-Small, 8px);
}

.tag-rounded {
/* border-radius: 9999px; */
border-radius: var(--Radius-Small, 9999px);
}

/* Tag Text */
.tag-text {
line-height: 1;
}

/* Tag Dot */
.tag-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
flex-shrink: 0;
}

/* Size Variants */
.tag-small {
/* padding: 0.125rem 0.5rem; */
/* font-size: 0.75rem; */
padding: 2px 8px;
height: 22px;
font-size: 12px;
}

.tag-small .tag-dot {
/* width: 0.3rem; */
/* height: 0.3rem; */
width: 6px;
height: 6px;
}

.tag-medium {
/* padding: 0.25rem 0.625rem; */
/* font-size: 0.875rem; */
padding: 4px 8px;
height: 28px;
font-size: 14px;
}

.tag-medium .tag-dot {
width: 8px;
height: 8px;
}

.tag-large {
/* padding: 0.375rem 0.75rem;
font-size: 1rem; */
height: 32px;
padding: 4px 10px;
font-size: 16px;
}

.tag-large .tag-dot {
/* width: 0.5rem; */
/* height: 0.5rem; */
width: 10px;
height: 10px;
}

/* Default Variant */
.tag-default {
/* background-color: #f4f4f5;
color: #3f3f46; */
/* border-color: #71717a; */
border: 1px solid var(--Gray-gray-600-20, rgba(82, 82, 91, 0.20));
background: var(--Background-bg-washed, #F4F4F5);
color: var(--Text-txt-black-500, #6B6B74);
}

.tag-default .tag-dot {
background-color: #71717a;
}

.dark .tag-default {
/* background-color: #27272a;
color: #d4d4d8; */
background: var(--Background-bg-washed, #1D1D21);
color: var(--Text-txt-black-500, #A1A1AA);
}

.dark .tag-default .tag-dot {
background-color: #a1a1aa;
}

/* Primary Variant */
.tag-primary {
/* background-color: #eff6ff;
color: #1e40af;
border-color: #1e40af; */
/* background-color: #EFF6FF; */
border: 1px solid var(--Primary-primary-600-20, rgba(37, 99, 235, 0.20));
background: var(--Background-primary-bg-primary-50, #EFF6FF);
color: var(--Text-txt-primary, #2563EB);
}

.tag-primary .tag-dot {
background-color: #2563eb;
}

.dark .tag-primary {
/* background-color: #172554;
color: #93c5fd; */
background: var(--Background-primary-bg-primary-50, #172554);
color: var(--Text-txt-primary, #6394FF);
}

.dark .tag-primary .tag-dot {
/* background-color: #3b82f6; */
background-color: #6394FF;
}

/* Success Variant */
.tag-success {
/* background-color: #f0fdf4;
color: #15803d;
border-color: #15803d; */
border: 1px solid var(--Success-success-700-20, rgba(21, 128, 61, 0.20));
background: var(--Background-success-bg-success-50, #F0FDF4);
color: var(--Text-txt-success, #15803D);
}

.tag-success .tag-dot {
/* background-color: #22c55e; */
background-color: #15803D;
}

.dark .tag-success {
/* background-color: #14532d;
color: #86efac; */
background: var(--Background-success-bg-success-50, #052E16);
color: var(--Text-txt-success, #22C55E);
}

.dark .tag-success .tag-dot {
background-color: #22c55e;
}

/* Danger Variant */
.tag-danger {
/* background-color: #fef2f2;
color: #b91c1c;
border-color: #b91c1c; */
border: 1px solid var(--Danger-danger-600-20, rgba(220, 38, 38, 0.20));
background: var(--Background-danger-bg-danger-50, #FEF2F2);
color: var(--Text-txt-danger, #B91C1C);
}

.tag-danger .tag-dot {
/* background-color: #ef4444; */
background-color: #B91C1C;
}

.dark .tag-danger {
/* background-color: #450a0a;
color: #fca5a5; */
background: var(--Background-danger-bg-danger-50, #450A0A);
color: var(--Text-txt-danger, #F87171);
}

.dark .tag-danger .tag-dot {
/* background-color: #ef4444; */
background-color: #F87171;
}

/* Warning Variant */
.tag-warning {
/* background-color: #fefce8;
color: #a16207;
border-color: #a16207; */
border: 1px solid var(--Warning-warning-700-20, rgba(161, 98, 7, 0.20));
background: var(--Background-warning-bg-warning-50, #FEFCE8);
color: var(--Text-txt-warning, #A16207);
}

.tag-warning .tag-dot {
/* background-color: #eab308; */
background-color: #A16207;
}

.dark .tag-warning {
/* background-color: #422006;
color: #fde047; */
background: var(--Background-warning-bg-warning-50, #422006);
color: var(--Text-txt-warning, #EAB308);
}

.dark .tag-warning .tag-dot {
/* background-color: #facc15; */
background-color: #EAB308;
}

/* Tag without dot */
.tag-no-dot {
gap: 0;
}

.tag-no-dot .tag-dot {
display: none;
}

/* Hover effect (optional) */
.tag:hover {
opacity: 0.9;
}