GovAlta
feat(#2953): update Icon button component for V2
Summary
Updates the Icon Button component to integrate V2 design tokens, achieving V2 styling through token-driven architecture while maintaining full backwards compatibility with V1. This is a Token-Only update with minor code cleanup.
Changes
Token Integration
Updated Token References:
- Integrated new size-specific padding tokens (
small-padding,medium-padding,large-padding) - Added fallback chains for V1 compatibility
- Integrated focus state tokens that reference Input component for system-wide consistency
No New Props:
- Token-Only classification means no version prop needed
- V1 and V2 differentiated entirely through token packages
V2 Styling Updates
Spacing:
- Small buttons: 4px padding (unchanged)
- Medium buttons: 8px padding (increased from 4px for better clickability)
- Large buttons: 12px padding (increased from 8px for better hierarchy)
Colors:
- Light variant hover: Lighter grey background (greyscale.600 vs greyscale.700)
- Disabled states: Consistent greyscale.500 across all variants
Focus State:
- Focus tokens now reference Input component (
{input.borderWidth.focus},{input.color.border.focus}) - Maintains box-shadow focus treatment (border-based focus deferred to future update)
- System-wide consistency: changing Input focus automatically updates Icon Button
Related
- Parent issue: #2998
- Component issue: #2953
- Design tokens PR for Icon Button
- v2 Figma component
@twjeffery I had a thought as I reviewed this: should the focus state also trigger the over state?
I noticed that they do on your icon button changes...
...while they don't on my button changes.
My opinion is that we can treat them differently since the new focus state is very obvious. But I'm open to arguments otherwise. We should align our changes on whatever direction we decide.
@twjeffery I had a thought as I reviewed this: should the focus state also trigger the over state?
I noticed that they do on your icon button changes...
...while they don't on my button changes.
My opinion is that we can treat them differently since the new focus state is very obvious. But I'm open to arguments otherwise. We should align our changes on whatever direction we decide.
@bdfranck Great point. I did some more research that also confirms what you're saying. We should keep the hover state and the focus state distinct. I've updated it to align with the button component. The focus state does not resemble hover.
:tada: This PR is included in version 1.40.0-dev.7 :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:
:tada: This PR is included in version 6.10.0-dev.3 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.10.0-dev.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket: