hyperdx/agent_docs
Elizabet Oliveira 72d4642b6e
feat: add link variant for Button and ActionIcon (#1938)
## Summary

- Adds a new `variant="link"` for `Button` and `ActionIcon` that renders as a plain text link — no background, no border, no padding. Text is muted by default and brightens on hover (adapts to light/dark mode).
- Adds a **Brand** theme switcher to the Storybook toolbar so stories can be previewed in both HyperDX and ClickStack themes.
- Documents the new variant in `code_style.md` and adds comprehensive Storybook stories.

## Changes

| File | What |
|------|------|
| `themes/hyperdx/mantineTheme.ts` | `link` variant for Button (`vars` + `classNames`) and ActionIcon (`vars` + `classNames`) |
| `themes/clickstack/mantineTheme.ts` | Same for ClickStack theme |
| `styles/variants.module.scss` | Hover color transition and transparent disabled state for link variants |
| `stories/Button.stories.tsx` | Link variant in CustomVariants, DisabledStates, LoadingStates |
| `stories/ActionIcon.stories.tsx` | Link variant in CustomVariants, DisabledStates, LoadingStates |
| `.storybook/preview.tsx` | Brand theme switcher (HyperDX / ClickStack) in toolbar |
| `agent_docs/code_style.md` | Documented link variant usage and guidelines |

## Test plan

- [ ] Verify `variant="link"` renders without background/border/padding in Storybook
- [ ] Verify hover brightens text in both light and dark modes
- [ ] Verify disabled state shows reduced opacity with no background
- [ ] Switch brand theme in Storybook toolbar and confirm both HyperDX and ClickStack render correctly


Made with [Cursor](https://cursor.com)
2026-03-18 18:25:36 +00:00
..
architecture.md chore: CLAUDE.md refactor (#1437) 2025-12-03 18:35:46 +00:00
code_style.md feat: add link variant for Button and ActionIcon (#1938) 2026-03-18 18:25:36 +00:00
development.md Enable parallel integration testing across multiple worktrees (#1917) 2026-03-16 19:42:08 +00:00
README.md test: Backport Claude E2E Skill (#1836) 2026-03-02 21:01:59 +00:00
tech_stack.md Remove Bootstrap Icons (#1480) 2025-12-15 17:06:40 +00:00

Agent Documentation Directory

This directory contains detailed documentation for AI coding agents working on the HyperDX codebase. These files use progressive disclosure - they're referenced from CLAUDE.md but only read when needed.

Purpose

Instead of stuffing all instructions into CLAUDE.md (which goes into every conversation), we keep detailed, task-specific information here. This ensures:

  1. Better focus: Only relevant context gets loaded per task
  2. Improved performance: Smaller context window = better instruction following
  3. Easier maintenance: Update specific docs without bloating the main file

Files

  • architecture.md - System architecture, data models, service relationships, security patterns
  • tech_stack.md - Technology choices, UI component patterns, library usage
  • development.md - Development workflows, testing strategy, common tasks, debugging
  • code_style.md - Code patterns and best practices (read only when actively coding)

Usage Pattern

When starting a task:

  1. Agent reads CLAUDE.md first (always included)
  2. Agent determines which (if any) docs from this directory are relevant
  3. Agent reads only the needed documentation
  4. Agent proceeds with focused, relevant context

Maintenance

  • Keep files focused on their specific domain
  • Use file/line references instead of code snippets when possible
  • Update when patterns or architecture change
  • Keep documentation current with the codebase