8768c27f30
- Introduced `ReachabilityState`, `RuntimeHit`, `ExploitabilitySignal`, `ReachabilitySignal`, `SignalEnvelope`, `SignalType`, `TrustSignal`, and `UnknownSymbolSignal` records to define various signal types and their properties. - Implemented JSON serialization attributes for proper data interchange. - Created project files for the new signal contracts library and corresponding test projects. - Added deterministic test fixtures for micro-interaction testing. - Included cryptographic keys for secure operations with cosign.
61 lines
3.5 KiB
Markdown
61 lines
3.5 KiB
Markdown
# UI Micro-Interactions Component Map (MI6)
|
|
|
|
This document maps StellaOps UI components to their interaction types and motion token usage. Components must use tokens from the catalog (`tokens/motion.scss`, `motion-tokens.ts`) rather than bespoke values.
|
|
|
|
## Token Catalog Reference
|
|
|
|
| Token | CSS Variable | Duration | Use Case |
|
|
| --- | --- | --- | --- |
|
|
| durationXs | --motion-duration-xs | 80ms | Focus rings, instant feedback |
|
|
| durationSm | --motion-duration-sm | 140ms | Hover states, button presses |
|
|
| durationMd | --motion-duration-md | 200ms | Modal open/close, panel slide |
|
|
| durationLg | --motion-duration-lg | 260ms | Page transitions, accordions |
|
|
| durationXl | --motion-duration-xl | 320ms | Complex sequences, onboarding |
|
|
| easeStandard | --motion-ease-standard | cubic-bezier(0.2,0,0,1) | Default for all transitions |
|
|
| easeEntrance | --motion-ease-entrance | cubic-bezier(0.18,0.89,0.32,1) | Elements appearing |
|
|
| easeExit | --motion-ease-exit | cubic-bezier(0.36,0,-0.56,-0.56) | Elements leaving |
|
|
| easeBounce | --motion-ease-bounce | cubic-bezier(0.34,1.56,0.64,1) | Playful feedback only |
|
|
|
|
## Component Mapping
|
|
|
|
| Component | Interaction Type | Tokens Used | Reduced-Motion Behavior |
|
|
| --- | --- | --- | --- |
|
|
| Button (primary) | Hover lift, press scale | durationSm, easeStandard, scaleSm | No transform, instant state change |
|
|
| Button (secondary) | Hover border, press | durationXs, easeStandard | Instant state change |
|
|
| Modal/Dialog | Fade + slide up | durationMd, easeEntrance/Exit, translateMd | Instant show/hide |
|
|
| Dropdown/Menu | Fade + scale | durationSm, easeStandard, scaleSm | Instant show/hide |
|
|
| Toast/Snackbar | Slide in, auto-dismiss | durationMd, easeEntrance, translateLg | Instant show/hide |
|
|
| Accordion | Height expand | durationMd, easeStandard | Instant toggle |
|
|
| Tabs | Indicator slide | durationSm, easeStandard | Instant indicator |
|
|
| Progress bar | Width fill | durationMd, easeStandard | No animation, instant fill |
|
|
| Spinner/Loader | Rotate animation | N/A (CSS keyframe) | Static icon or hidden |
|
|
| Skeleton | Shimmer pulse | durationXl, easeStandard | Static skeleton, no shimmer |
|
|
| Badge (status) | Scale pop on change | durationXs, easeBounce, scaleSm | No scale, instant |
|
|
| Focus ring | Fade in | durationXs, easeStandard | Always visible, no fade |
|
|
| Tooltip | Fade + offset | durationSm, easeEntrance, translateSm | Instant show/hide |
|
|
| Banner (info) | Slide down | durationMd, easeEntrance, translateMd | Instant show/hide |
|
|
| Error state | Shake animation | durationSm, easeStandard | No shake, border only |
|
|
|
|
## Perf Budget Compliance (MI5)
|
|
|
|
| Metric | Budget | Measurement |
|
|
| --- | --- | --- |
|
|
| Interaction response | <= 100ms | Time to visual feedback |
|
|
| Animation frame (avg) | <= 16ms | Chrome DevTools Performance |
|
|
| Animation frame (p95) | <= 50ms | Chrome DevTools Performance |
|
|
| Layout shift | <= 0.05 CLS | Lighthouse CI |
|
|
| LCP placeholder | Show within 400ms | Lighthouse CI |
|
|
|
|
## Validation Rules
|
|
|
|
1. **Lint rule**: ESLint/Stylelint blocks non-catalog easing values in `.scss` and `.ts` files
|
|
2. **Storybook check**: All component stories must demonstrate reduced-motion variant
|
|
3. **Playwright check**: Snapshot tests run with `--disable-animations` and reduced-motion emulation
|
|
4. **CI gate**: Perf budget failures block merge
|
|
|
|
## Evidence
|
|
|
|
- Token catalog: `src/Web/StellaOps.Web/src/styles/tokens/_motion.scss`
|
|
- TypeScript tokens: `src/Web/StellaOps.Web/src/app/styles/motion-tokens.ts`
|
|
- Storybook stories: `src/Web/StellaOps.Web/src/stories/motion-tokens.stories.ts`
|