GovAlta
feat(#3096): update Temporary Notification component for V2
Summary
Updates the Temporary Notification (Snackbar) component to use a comprehensive token-driven architecture. This component previously had all styling hardcoded - this PR converts all CSS properties to use design tokens with proper fallback values for V1 compatibility.
Classification: Token-Only (no version prop needed)
Changes
Token Integration
Converted all hardcoded CSS values to use design tokens with fallback pattern:
property: var(--goa-temporary-notification-[property], [v1-fallback]);
Example conversions:
- Border radius: var(--goa-border-radius-m) → var(--goa-temporary-notification-borderRadius, var(--goa-border-radius-m))
- Padding: var(--goa-space-m) var(--goa-space-l) → var(--goa-temporary-notification-padding, var(--goa-space-m) var(--goa-space-l))
- Colors: Direct global tokens → Component tokens with fallbacks
Spacing Improvements
Flexbox Gap Structure:
- Changed from single gap to row-gap and column-gap for better control
- Row gap: 12px (when elements wrap to new rows)
- Column gap: 16px (between elements on same row)
Icon Spacing:
- Implemented negative margin pattern for variable spacing
- Icon to message: 12px (via icon-margin)
- Message to action button: 16px (via column-gap)
No Version Prop Required
This component is Token-Only - no structural or behavioral changes between V1 and V2:
- Same DOM structure
- Same animation behavior
- Same notification types (basic, success, failure, indeterminate, progress)
- Visual differences handled entirely through design token values
Technical Implementation
All 22 tokens created with fallback pattern ensures:
- V1 environments: Use fallback values (preserves exact existing behavior)
- V2 environments: Use new token values (applies V2 styling)
- Same component code: Works in both without version prop
Related
- Parent issue: #2998
- Component issue: #3096
- Design tokens PR for Temporary Notification
- Figma component
@bdfranck I committed your suggested changes and squashed it back into one commit for us to merge
Looks good! I just have two more questions about the margins around the icon.
@bdfranck I appreciate the review, it should be fixed now, I've pushed updates to both this PR and the related design tokens PR https://github.com/GovAlta/design-tokens/pull/98.
:tada: This PR is included in version 1.40.0-dev.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 6.10.0-dev.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.10.0-dev.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket: