Skip to content

Refactor button components to use unified Button API#201

Merged
Swopper050 merged 2 commits into
developfrom
claude/refactor-buttons-component-lKfav
Apr 27, 2026
Merged

Refactor button components to use unified Button API#201
Swopper050 merged 2 commits into
developfrom
claude/refactor-buttons-component-lKfav

Conversation

@Swopper050
Copy link
Copy Markdown
Owner

Summary

This PR refactors button usage across the application to use the enhanced Button and IconButton components from a unified component API, replacing raw HTML <button> elements and improving consistency.

Key Changes

  • Enhanced Button Component API:

    • Changed label prop to accept JSXElement instead of just strings, enabling complex content
    • Added support for trailingIcon prop for icons after the label
    • Added shape prop supporting 'square' and 'circle' values
    • Added block prop for full-width buttons
    • Added style prop for inline styles and ref prop for element references
    • Improved loading state handling with better icon/loader precedence
    • Refactored IconButton to share base props with Button for consistency
  • Login Page: Replaced native <button> elements with Button component for login and 2FA submit buttons, and back button, using the new isLoading and label props

  • Register Page: Replaced native <button> with Button component for the register submit button

  • TopBar Component: Converted all navigation buttons (login, register, mobile menu toggle) to use Button and IconButton components with appropriate variants and props

  • Admin Users Page: Replaced delete user button with IconButton and create user button with Button component

  • Profile Menu: Refactored logout button to use Button component with loading state

  • Language Selector: Converted language selection buttons to use Button component

  • Modal Component: Replaced close button with Button component using the new shape="circle" prop

  • FrozenWorkspaceModal: Replaced action buttons with Button components

  • Base Page: Converted sidebar close button to IconButton

  • DeleteWorkspaceModal: Replaced cancel button with Button component

  • CSS Updates: Added min-height and padding adjustments to .register-btn-submit class to ensure proper button sizing with the new component structure

Implementation Details

  • The Button component now intelligently handles loading states by showing a spinner instead of the icon when isLoading is true
  • All data-cy attributes were converted to the camelCase dataCy prop for consistency
  • The refactoring maintains backward compatibility while providing a more flexible and composable API
  • Removed inline Show components for loading states in favor of the component's built-in isLoading prop handling

https://claude.ai/code/session_01WTi6w5JG3VGv8a2EojToMh

claude and others added 2 commits April 27, 2026 08:19
Extends Button/IconButton to support JSX labels, refs, shape (square/circle),
block (full-width), trailing icons, inline style, and uses native disabled
attribute (replacing the click-bypassing btn-disabled class).

Converts <button> tags across the app to Button/IconButton where they follow
the daisyUI btn pattern: TopBar, Base, Modal, ProfileMenu, LanguageSelector,
FrozenWorkspaceModal, DeleteWorkspaceModal, UsersAdmin, and the
Login/Register submit buttons (preserving their custom register-btn-submit /
login-back-btn styling). Custom-styled buttons that intentionally diverge
from the daisyUI btn pattern (sidebar nav, role pickers, dropdown items,
small icon actions, custom modal CTAs) remain as plain <button> tags.
@Swopper050 Swopper050 merged commit 1fb63ae into develop Apr 27, 2026
9 checks passed
@Swopper050 Swopper050 deleted the claude/refactor-buttons-component-lKfav branch April 27, 2026 08:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants