Skip to content

refactor button: add type prop and auto-disable on click#62

Closed
gus211 wants to merge 4 commits into
devfrom
refactor/button-auto-disable-on-click
Closed

refactor button: add type prop and auto-disable on click#62
gus211 wants to merge 4 commits into
devfrom
refactor/button-auto-disable-on-click

Conversation

@gus211
Copy link
Copy Markdown
Contributor

@gus211 gus211 commented May 16, 2025

🔧 Refactor: Button Component

✅ Summary

This Pull Request refactors the Button component to add more flexibility and reliability without introducing any breaking changes.

✨ What's New

➕ Added type prop

  • Supports "button", "submit", and "reset".

  • This prop is optional.

  • When omitted, the native HTML behavior applies (submit inside a <form>).

  • To prevent unwanted form submissions, explicitly use:

    • type="button" for non-submitting buttons
    • type="submit" for form submissions

🔄 Internal internalDisabled handling

  • Automatically disables the button when clicked.
  • If the onClick function returns a Promise, the button stays disabled until it resolves or rejects.
  • If the function is synchronous, the button is re-enabled immediately.
  • Prevents double clicks and accidental multiple submissions.

🛡 Compatibility

  • This refactor does not break any existing usage of the Button component.
  • All previous props and behaviors are preserved.

ℹ️ The Button already supported onClick and disabled before this change. This refactor simply enhances its behavior for better UX and developer control.

@gus211 gus211 self-assigned this May 16, 2025
@gus211 gus211 added the refactor Improve code without changing behavior label May 16, 2025
@netlify
Copy link
Copy Markdown

netlify Bot commented May 16, 2025

Deploy Preview for pharmatech ready!

Name Link
🔨 Latest commit c0ad7c6
🔍 Latest deploy log https://app.netlify.com/projects/pharmatech/deploys/68301c9d907c060008369478
😎 Deploy Preview https://deploy-preview-62--pharmatech.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andres15alvarez este archivo creo que hay que eliminarlo, my bad

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

si opino igual, los comentarios también.

Comment thread src/components/Button.tsx
className?: string;
variant?: 'submit' | 'white' | 'light' | 'icon' | 'gray';
textColor?: string;
type?: 'submit' | 'reset' | 'button' | undefined;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aca si es opcional el :? toma como que puede recibirse o no, creo que no hay que pasarle en si que tomara un tipo undefined, ya que es opcional de tomar alguno ya recibe una de las variantes.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aca si es opcional el :? toma como que puede recibirse o no, creo que no hay que pasarle en si que tomara un tipo undefined, ya que es opcional de tomar alguno ya recibe una de las variantes.

¿Te refieres a que debería estar así type?: 'submit' | 'reset' | 'button';?

@andres15alvarez
Copy link
Copy Markdown
Member

No tendremos tiempo para implementar esta nueva funcionalidad en todos los botones, por tanto se cierra el PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Improve code without changing behavior

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants