CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tooltip and Alert #32

Merged
an.di merged 2 commits from adilallo/feature/TooltipAlertComponents into main 2026-02-02 16:57:49 +00:00
Conversation 0 Commits 2 Files Changed 17
+888
an.di commented 2026-02-02 16:37:09 +00:00
Owner
Copy Link
Copy Source

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

Screenshot 2026-02-02 at 9.44.52 AM.png Screenshot 2026-02-02 at 9.54.16 AM.png Screenshot 2026-02-02 at 9.55.03 AM.png

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
# 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
Screenshot 2026-02-02 at 9.44.52 AM.png
90 KiB
Screenshot 2026-02-02 at 9.54.16 AM.png
21 KiB
Screenshot 2026-02-02 at 9.55.03 AM.png
48 KiB
an.di self-assigned this 2026-02-02 16:37:09 +00:00
an.di added 2 commits 2026-02-02 16:37:09 +00:00
Implement Alert and Tooltip components abe4bff09e
Fix testing errors 291625e3e7
an.di merged commit 293bbfc474 into main 2026-02-02 16:57:49 +00:00
an.di deleted branch adilallo/feature/TooltipAlertComponents 2026-02-02 16:57:49 +00:00
an.di changed title from Tooltip and Alert Components to Tooltip and Alert 2026-02-02 18:46:49 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#32
Delete Branch "adilallo/feature/TooltipAlertComponents"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?