refactor: enhance button components with interactive states and styling #1386
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the button components to add interactive hover and focus states while standardizing the codebase to use double quotes throughout. The changes introduce state-based hover effects with visual transitions and update the styling to align with the primary theme color.
- Added hover and focus interaction states with color, background, and box-shadow transitions to the Button component
- Converted all single quotes to double quotes for string literals, imports, and style objects
- Reformatted icon styles across all button components for better readability
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </a> | ||
| ); | ||
| function Button({ href, children, margin = "0" }: ButtonProps): ReactNode { | ||
| const [hover, setHover] = useState(false); |
There was a problem hiding this comment.
Using useState for hover effects causes unnecessary re-renders on every mouse enter/leave event. Consider using CSS pseudo-classes (:hover, :focus) instead, which would be more performant and avoid component re-renders. CSS transitions can handle all the visual effects without state management.
| style={{ | ||
| margin, | ||
| fontSize: "0.85rem", | ||
| cursor: "pointer", | ||
| borderColor: "var(--ifm-color-primary)", | ||
| color: hover ? "#fff" : "var(--ifm-color-primary)", | ||
| backgroundColor: hover ? "var(--ifm-color-primary)" : "transparent", | ||
| boxShadow: hover | ||
| ? "var(--coco-glow, 0 0 0 6px rgba(91,91,214,0.08))" | ||
| : "var(--coco-shadow, 0 6px 18px rgba(91,91,214,0.06))", | ||
| transition: | ||
| "background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 80ms ease", | ||
| }} |
There was a problem hiding this comment.
The inline style object contains complex conditional logic for hover states, making it difficult to maintain and test. Consider extracting the style logic into a separate function or using CSS-in-JS libraries that support pseudo-selectors, or moving these styles to a CSS module where hover states can be defined declaratively.
| href={href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="button button--outline button--secondary" |
There was a problem hiding this comment.
Combining Docusaurus button classes with inline styles that override those classes can lead to styling conflicts and inconsistent behavior across themes. The className uses Docusaurus's built-in button classes which already have hover states defined, but the inline styles are overriding them. Consider either using the Docusaurus classes fully or removing them in favor of custom styling.
| className="button button--outline button--secondary" |
| style={{ | ||
| margin, | ||
| fontSize: "0.85rem", | ||
| cursor: "pointer", |
There was a problem hiding this comment.
The button's cursor style is set to "pointer" in inline styles, but anchor tags with href already have pointer cursor by default. This is redundant and can be removed.
| cursor: "pointer", |
|
@copilot open a new pull request to apply changes based on the comments in this thread |
|
please undo formatting changes. |
2 participants
This pull request updates the
GitHubButtoncomponent and its related buttons to improve styling consistency and user experience. The main changes include adding interactive hover and focus effects, updating color schemes to match the primary theme, and switching all style and string literals to use double quotes for consistency.UI/UX Improvements:
Buttoncomponent, including color changes, background transitions, and box-shadow for better interactivity.Code Consistency:
GitHubButton,YouTubeButton,DocumentationButton,ExampleButton) to use double quotes and consistent formatting. [1] [2] [3] [4]