Conversation
Implemented hover and active state visual feedback for all buttons in the VSCode extension webviews to create a tactile, responsive feel during user interactions. Changes to vscode/webview/plan/styles.css: - Added transition, hover, and active states to base button selector - Hover: translateY(-1px) with enhanced shadow - Active: translateY(1px) with reduced shadow - 120ms ease-out transitions for smooth performance - Added interaction effects to .toggle button (borderless, uses opacity/scale) - Added interaction effects to .terminal-toggle button (borderless, uses opacity/scale) - Added interaction effects to .widget-button and variants: - .widget-button, .widget-button-primary, .widget-button-danger, .widget-button-ghost - Added @media (prefers-reduced-motion: reduce) media query for accessibility Changes to vscode/webview/settings/styles.css: - Enhanced .settings-link with transform transitions - Added .settings-link:hover with translateX(2px) and color change - Added .settings-link:active with translateX(4px) for horizontal press effect - Added @media (prefers-reduced-motion: reduce) media query for accessibility New file tests/test_button_effects.sh: - Created comprehensive test suite to verify CSS interaction properties - Tests for :hover, :active states across all button types - Tests for transition properties and timing - Tests for prefers-reduced-motion accessibility support All tests pass: - 13/13 new button effects tests pass - 58/58 existing SDK tests pass in bash - 58/58 existing SDK tests pass in zsh Issue 967 resolved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[feat][#967] Add VSCode button tactile interaction effects
Implemented hover and active state visual feedback for all buttons in the
VSCode extension webviews to create a tactile, responsive feel during user
interactions.
Changes
vscode/webview/plan/styles.css
button: Added 120ms transitions and transform effects.toggleand.terminal-toggle: Borderless buttons use opacity/scale effects.widget-buttonand variants (primary/danger/ghost): Consistent tactile effectsprefers-reduced-motionmedia query for accessibilityvscode/webview/settings/styles.css
.settings-linkwith horizontal slide effectprefers-reduced-motionmedia query for accessibilitytests/test_button_effects.sh (new)
Test Results
Issue 967 resolved
closes #967