Implement Alert and Tooltip Foundation Components (CR-43, CR-44)
Overview
This PR implements two foundation components from the component implementation plan: Alert (CR-43) and Tooltip (CR-44). These components serve as building blocks for future components like Modal, which will depend on Alert. Both components follow the project's container/presentation pattern and are fully integrated with the design system.
Linear Tickets:
CR-43: Alert component (4 points, Molecule)
CR-44: Tooltip component (2 points, Atom)
Changes
Alert Component (app/components/Alert/)
Container/Presentation Pattern: Implemented with Alert.container.tsx (logic) and Alert.view.tsx (presentation)
Variants: Supports 4 status types (default, positive, warning, danger) and 2 types (toast, banner)
Features:
Always includes leading icon (Icon_Alert.svg) and close button (Icon_Close.svg)
Dynamic icon and text colors based on status
Toast alerts include bottom border (8px) with status-specific colors
Banner alerts use 16px font size (Sizing/400) vs 18px for toasts
Design Tokens: Uses semantic color tokens (--color-content-invert-primary, --color-content-invert-secondary, etc.)
Accessibility: Proper ARIA roles and labels
Tooltip Component (app/components/Tooltip/)
Container/Presentation Pattern: Implemented with Tooltip.container.tsx (logic) and Tooltip.view.tsx (presentation)
Features:
Supports top and bottom positioning
Pointer graphic (Icon_Pointer.svg) with proper rotation and positioning
10px tall pointer with 7px extending beyond tooltip edge
Hover and keyboard (focus/blur) activation
Disabled state support
Styling: Uses semantic spacing tokens (Space/200, Space/300) and design tokens for colors
Accessibility: Proper ARIA roles, live regions, and keyboard navigation support
Additional Changes
Added Icon_Pointer.svg and Icon_Close.svg to public/assets/
Updated lib/assetUtils.ts with new asset constants
Created comprehensive test suites for both components
Added Storybook stories demonstrating all variants
Created temporary preview page at app/components-preview/page.tsx for visual testing
Files Created
app/components/Alert/Alert.container.tsx
app/components/Alert/Alert.view.tsx
app/components/Alert/Alert.types.ts
app/components/Alert/index.tsx
app/components/Tooltip/Tooltip.container.tsx
app/components/Tooltip/Tooltip.view.tsx
app/components/Tooltip/Tooltip.types.ts
app/components/Tooltip/index.tsx
tests/components/Alert.test.tsx
tests/components/Tooltip.test.tsx
stories/Alert.stories.js
stories/Tooltip.stories.js
public/assets/Icon_Pointer.svg
app/components-preview/page.tsx
Screenshots
How to Test
Storybook: Run npm run storybook and navigate to:
Components/Alert - View all status variants (default, positive, warning, danger) and types (toast, banner)
Components/Tooltip - Test top/bottom positioning and disabled state
Preview Page: Visit /components-preview to see both components in context
Unit Tests: Run npm test - all 316 tests should pass including:
Alert component tests (4 tests)
Tooltip component tests (7 tests)
Visual Verification:
Alert: Verify colors match Figma design (invert colors for positive/warning, negative colors for danger)
Alert: Check toast borders are visible (8px bottom border)
Alert: Verify banner font size is 16px vs 18px for toasts
Tooltip: Hover over trigger elements to see tooltip appear
Tooltip: Verify pointer is correctly positioned and pointing in right direction
Tooltip: Test keyboard navigation (Tab to focus, tooltip should appear)
Accessibility: Run npm test - axe accessibility tests should pass
Full Test Suite: Run ./scripts/test-local.sh to verify:
Linting passes
Prettier formatting passes
All component tests pass
E2E tests pass
Visual regression tests pass
Performance tests pass
Notes
Icon Assets: All icons (Icon_Alert.svg, Icon_Close.svg, Icon_Pointer.svg) are properly sized and colored according to design
# Implement Alert and Tooltip Foundation Components (CR-43, CR-44)
## Overview
This PR implements two foundation components from the component implementation plan: **Alert** (CR-43) and **Tooltip** (CR-44). These components serve as building blocks for future components like Modal, which will depend on Alert. Both components follow the project's container/presentation pattern and are fully integrated with the design system.
**Linear Tickets:**
- CR-43: Alert component (4 points, Molecule)
- CR-44: Tooltip component (2 points, Atom)
## Changes
### Alert Component (`app/components/Alert/`)
- **Container/Presentation Pattern**: Implemented with `Alert.container.tsx` (logic) and `Alert.view.tsx` (presentation)
- **Variants**: Supports 4 status types (default, positive, warning, danger) and 2 types (toast, banner)
- **Features**:
- Always includes leading icon (Icon_Alert.svg) and close button (Icon_Close.svg)
- Dynamic icon and text colors based on status
- Toast alerts include bottom border (8px) with status-specific colors
- Banner alerts use 16px font size (Sizing/400) vs 18px for toasts
- Proper semantic spacing tokens (Space/200, Space/300, Space/400, Space/500, Space/1200)
- **Design Tokens**: Uses semantic color tokens (`--color-content-invert-primary`, `--color-content-invert-secondary`, etc.)
- **Accessibility**: Proper ARIA roles and labels
### Tooltip Component (`app/components/Tooltip/`)
- **Container/Presentation Pattern**: Implemented with `Tooltip.container.tsx` (logic) and `Tooltip.view.tsx` (presentation)
- **Features**:
- Supports top and bottom positioning
- Pointer graphic (Icon_Pointer.svg) with proper rotation and positioning
- 10px tall pointer with 7px extending beyond tooltip edge
- Hover and keyboard (focus/blur) activation
- Disabled state support
- **Styling**: Uses semantic spacing tokens (Space/200, Space/300) and design tokens for colors
- **Accessibility**: Proper ARIA roles, live regions, and keyboard navigation support
### Additional Changes
- Added `Icon_Pointer.svg` and `Icon_Close.svg` to `public/assets/`
- Updated `lib/assetUtils.ts` with new asset constants
- Created comprehensive test suites for both components
- Added Storybook stories demonstrating all variants
- Created temporary preview page at `app/components-preview/page.tsx` for visual testing
### Files Created
- `app/components/Alert/Alert.container.tsx`
- `app/components/Alert/Alert.view.tsx`
- `app/components/Alert/Alert.types.ts`
- `app/components/Alert/index.tsx`
- `app/components/Tooltip/Tooltip.container.tsx`
- `app/components/Tooltip/Tooltip.view.tsx`
- `app/components/Tooltip/Tooltip.types.ts`
- `app/components/Tooltip/index.tsx`
- `tests/components/Alert.test.tsx`
- `tests/components/Tooltip.test.tsx`
- `stories/Alert.stories.js`
- `stories/Tooltip.stories.js`
- `public/assets/Icon_Pointer.svg`
- `app/components-preview/page.tsx`
## Screenshots
<img width="568" alt="Screenshot 2026-02-02 at 9.44.52 AM.png" src="attachments/4f50ebcb-0bed-4ce2-a17b-190d4a5b7f6e">
<img width="237" alt="Screenshot 2026-02-02 at 9.54.16 AM.png" src="attachments/39ec008c-beb0-4744-97a6-91b0e5bff3f0">
<img width="556" alt="Screenshot 2026-02-02 at 9.55.03 AM.png" src="attachments/29d03a08-3e91-471e-b64b-974143a459b2">
## How to Test
1. **Storybook**: Run `npm run storybook` and navigate to:
- Components/Alert - View all status variants (default, positive, warning, danger) and types (toast, banner)
- Components/Tooltip - Test top/bottom positioning and disabled state
2. **Preview Page**: Visit `/components-preview` to see both components in context
3. **Unit Tests**: Run `npm test` - all 316 tests should pass including:
- Alert component tests (4 tests)
- Tooltip component tests (7 tests)
4. **Visual Verification**:
- **Alert**: Verify colors match Figma design (invert colors for positive/warning, negative colors for danger)
- **Alert**: Check toast borders are visible (8px bottom border)
- **Alert**: Verify banner font size is 16px vs 18px for toasts
- **Tooltip**: Hover over trigger elements to see tooltip appear
- **Tooltip**: Verify pointer is correctly positioned and pointing in right direction
- **Tooltip**: Test keyboard navigation (Tab to focus, tooltip should appear)
5. **Accessibility**: Run `npm test` - axe accessibility tests should pass
6. **Full Test Suite**: Run `./scripts/test-local.sh` to verify:
- Linting passes
- Prettier formatting passes
- All component tests pass
- E2E tests pass
- Visual regression tests pass
- Performance tests pass
## Notes
- **Icon Assets**: All icons (Icon_Alert.svg, Icon_Close.svg, Icon_Pointer.svg) are properly sized and colored according to design
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Implement Alert and Tooltip Foundation Components (CR-43, CR-44)
Overview
This PR implements two foundation components from the component implementation plan: Alert (CR-43) and Tooltip (CR-44). These components serve as building blocks for future components like Modal, which will depend on Alert. Both components follow the project's container/presentation pattern and are fully integrated with the design system.
Linear Tickets:
Changes
Alert Component (
app/components/Alert/)Alert.container.tsx(logic) andAlert.view.tsx(presentation)--color-content-invert-primary,--color-content-invert-secondary, etc.)Tooltip Component (
app/components/Tooltip/)Tooltip.container.tsx(logic) andTooltip.view.tsx(presentation)Additional Changes
Icon_Pointer.svgandIcon_Close.svgtopublic/assets/lib/assetUtils.tswith new asset constantsapp/components-preview/page.tsxfor visual testingFiles Created
app/components/Alert/Alert.container.tsxapp/components/Alert/Alert.view.tsxapp/components/Alert/Alert.types.tsapp/components/Alert/index.tsxapp/components/Tooltip/Tooltip.container.tsxapp/components/Tooltip/Tooltip.view.tsxapp/components/Tooltip/Tooltip.types.tsapp/components/Tooltip/index.tsxtests/components/Alert.test.tsxtests/components/Tooltip.test.tsxstories/Alert.stories.jsstories/Tooltip.stories.jspublic/assets/Icon_Pointer.svgapp/components-preview/page.tsxScreenshots
How to Test
Storybook: Run
npm run storybookand navigate to:Preview Page: Visit
/components-previewto see both components in contextUnit Tests: Run
npm test- all 316 tests should pass including:Visual Verification:
Accessibility: Run
npm test- axe accessibility tests should passFull Test Suite: Run
./scripts/test-local.shto verify:Notes
Tooltip and Alert Componentsto Tooltip and Alert