7.5 KiB
TASK-000F: Component Visual Updates - Buttons & Inputs - CHANGELOG
Overview
Applied modern visual refinements to button and input components using the design tokens established in TASK-000E. This creates a polished, professional feel with smooth micro-interactions and clear visual feedback.
Status: ✅ COMPLETE
Date: December 31, 2025
Effort: ~45 minutes
Risk: Low
Changes Made
1. PrimaryButton Polish
File: packages/noodl-core-ui/src/components/inputs/PrimaryButton/PrimaryButton.module.scss
Visual Improvements:
- ✅ Added rounded corners:
border-radius: var(--radius-md)(6px) - ✅ Applied spacing tokens for padding:
var(--spacing-button-padding-y/x) - ✅ Added gap token for icon spacing:
var(--spacing-button-gap) - ✅ Enhanced transitions (background, color, border, shadow, transform)
- ✅ CTA variant now has subtle shadow:
box-shadow: var(--shadow-sm) - ✅ Hover state lifts button:
transform: translateY(-1px)+ increased shadow - ✅ Active state depresses button:
transform: translateY(0)+ no shadow - ✅ Added accessibility focus ring:
outline: 2px solid var(--theme-color-focus-ring) - ✅ Improved disabled state: 50% opacity, no transform/shadow
Typography Updates:
- Font size:
var(--font-size-base)(12px) - Font weight:
var(--font-weight-medium)(500) - Line height:
var(--line-height-tight)(1.2)
Transition Timing:
- Background/color/border/shadow: 150ms with ease curve
- Transform: 100ms for snappier feel
2. TextInput Polish
File: packages/noodl-core-ui/src/components/inputs/TextInput/TextInput.module.scss
Visual Improvements:
- ✅ Added visible border:
border: 1px solid var(--theme-color-border-default) - ✅ Added rounded corners:
border-radius: var(--radius-default)(4px) - ✅ Applied spacing tokens:
var(--spacing-input-padding-y/x) - ✅ Added hover state: Stronger border color on hover
- ✅ Added focus state: Red ring with
box-shadow: 0 0 0 2px rgba(210, 31, 60, 0.15) - ✅ Enhanced transitions for background, border, and shadow
- ✅ Focus changes border to
var(--theme-color-focus-ring)
Behavior:
- Hover effect only applies when not focused or readonly
- Focus state includes both border color change AND shadow glow
- Smooth 150ms transitions throughout
Visual Comparison
PrimaryButton (CTA Variant)
| State | Before | After |
|---|---|---|
| Default | Flat, sharp corners | Rounded (6px), subtle shadow |
| Hover | Color change only | Brightens, lifts 1px, larger shadow |
| Active | Color change only | Darkens, returns to base position |
| Focus | No indicator | Red outline ring (2px) |
| Disabled | Unclear state | 50% opacity, obviously disabled |
TextInput
| State | Before | After |
|---|---|---|
| Default | Background only, no border | Border + background, rounded (4px) |
| Hover | Slight bg change | Stronger border color |
| Focus | Background change | Red border + red glow shadow |
| Disabled | Muted colors | (Already handled well) |
Token Usage
All changes leverage the design token system:
From TASK-000E (Spacing):
--spacing-button-padding-y: 8px
--spacing-button-padding-x: 12px
--spacing-button-gap: 8px
--spacing-input-padding-y: 6px
--spacing-input-padding-x: 8px
--radius-default: 4px
--radius-md: 6px
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
--shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), ...
--transition-fast: 100ms
--transition-default: 150ms
--transition-ease: cubic-bezier(0.4, 0, 0.2, 1)
From TASK-000E (Typography):
--font-size-base: 12px
--font-weight-medium: 500
--line-height-tight: 1.2
From TASK-000A (Colors):
--theme-color-primary
--theme-color-primary-highlight
--theme-color-primary-dim
--theme-color-focus-ring
--theme-color-border-default
--theme-color-border-strong
--theme-color-on-primary
Testing Performed
Manual Verification
✅ Buttons have rounded corners
✅ Buttons lift on hover (CTA variant)
✅ Buttons depress on click
✅ Focus ring appears on keyboard navigation
✅ Disabled buttons are clearly disabled (50% opacity)
✅ Inputs have visible borders
✅ Inputs show red glow on focus
✅ Input borders strengthen on hover
✅ All transitions are smooth (not jarring)
✅ No visual regressions
Variants Tested
- PrimaryButton: CTA, muted, muted-on-low-bg, ghost, danger
- TextInput: default, in-modal, opaque-on-hover, transparent variants
Accessibility Improvements
- Focus Rings: All buttons now have clear 2px red outline rings on focus-visible
- Clear Disabled State: 50% opacity makes disabled state unambiguous
- Focus State Clarity: Inputs have both border color AND shadow changes
- Keyboard Navigation: Focus indicators work with tab navigation
Performance Notes
- Transitions use GPU-accelerated properties (transform, opacity)
- Transform uses translate rather than margin for better performance
- All transitions use the optimized
cubic-bezier(0.4, 0, 0.2, 1)curve - No layout thrashing (border/padding changes are within existing bounds)
Future Work (Not in Scope)
Phase 3 Components (Deferred):
- Select/Dropdown: Would benefit from similar treatment
- Checkbox: Checked state could use red background + rounded corners
- TextArea: Same improvements as TextInput
- Slider: Modern track styling with tokens
These can be tackled in TASK-000G or as follow-up work.
Files Modified
Updated (2)
packages/noodl-core-ui/src/components/inputs/PrimaryButton/PrimaryButton.module.scsspackages/noodl-core-ui/src/components/inputs/TextInput/TextInput.module.scss
Created (1)
dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-000-styles-overhaul/TASK-000F-component-buttons-inputs/CHANGELOG.md
Success Criteria
✅ Buttons feel modern and responsive
✅ Inputs have clear, accessible focus states
✅ All interactive states are smooth
✅ Disabled states are obvious
✅ Consistent use of tokens throughout
✅ No visual regressions from previous functionality
✅ All variants preserved and enhanced
Developer Notes
Why these specific changes?
- Rounded corners: Industry standard for modern UIs, feels less harsh
- Hover lift effect: Provides tactile feedback, feels responsive
- Active depression: Completes the button "press" metaphor
- Focus rings: Critical for accessibility and keyboard navigation
- Input borders: Makes fields clearly identifiable as interactive
- Focus glow: Draws attention without being jarring
Design philosophy:
- Subtle, not flashy
- Consistent with design tokens
- Accessibility first
- Performance conscious
- Backwards compatible
Storybook Verification
To verify these changes in Storybook:
npm run storybook
Navigate to:
- Inputs / PrimaryButton - Test all variants (CTA, muted, ghost, danger)
- Inputs / TextInput - Test all variants (default, in-modal, etc.)
Check:
- Hover states feel snappy and smooth
- Focus rings appear on tab navigation
- Disabled states are clearly disabled
- No jarring or stuttering animations
Task Status: ✅ COMPLETE - Modern, Polished UI Components Delivered