Merge pull request #484 from acelaya-forks/feature/button-ref

Add refs to Button, LinkButton and CloseButton

Author: acelaya

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 ### Added
 * Add tailwind-based `Tooltip` component.
+* Forward refs to `Button`, `LinkButton` and `CloseButton` tailwind-based components.
 
 ### Changed
 * *Nothing*

dev/tailwind/form/ButtonsPage.tsx

@@ -1,6 +1,26 @@
 import type { FC } from 'react';
+import { useRef } from 'react';
 import { Button, CloseButton, LinkButton } from '../../../src/tailwind';
 
+const ButtonsWithRefs: FC = () => {
+  const linkButtonRef = useRef<HTMLButtonElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const regularButtonRef = useRef<HTMLButtonElement>(null);
+  const buttonWithLinkRef = useRef<HTMLAnchorElement>(null);
+
+  return (
+    <div className="tw:flex tw:flex-col tw:gap-y-2">
+      <h2>Buttons with ref</h2>
+      <div className="tw:flex tw:gap-x-2">
+        <LinkButton ref={linkButtonRef}>Link button</LinkButton>
+        <CloseButton ref={closeButtonRef} />
+        <Button ref={regularButtonRef}>Regular button</Button>
+        <Button to="" ref={buttonWithLinkRef}>Button with link</Button>
+      </div>
+    </div>
+  );
+};
+
 export const ButtonsPage: FC = () => {
   return (
     <div className="tw:flex tw:flex-col tw:gap-y-4">
@@ -12,6 +32,7 @@ export const ButtonsPage: FC = () => {
           <Button variant="danger">Danger</Button>
         </div>
       </div>
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
         <h2>Button sizes</h2>
         <div className="tw:flex tw:gap-x-2">
@@ -25,6 +46,7 @@ export const ButtonsPage: FC = () => {
           <Button variant="danger" size="lg">Danger</Button>
         </div>
       </div>
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
         <h2>Solid buttons</h2>
         <div className="tw:flex tw:gap-x-2">
@@ -33,6 +55,7 @@ export const ButtonsPage: FC = () => {
           <Button variant="danger" solid>Danger</Button>
         </div>
       </div>
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
         <h2>Disabled buttons</h2>
         <div className="tw:flex tw:gap-x-2">
@@ -46,6 +69,7 @@ export const ButtonsPage: FC = () => {
           <Button variant="danger" solid disabled>Danger</Button>
         </div>
       </div>
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
         <h2>Others</h2>
         <div className="tw:flex tw:gap-x-2">
@@ -55,6 +79,8 @@ export const ButtonsPage: FC = () => {
           <Button to="">Button with link</Button>
         </div>
       </div>
+
+      <ButtonsWithRefs />
     </div>
   );
 };

src/tailwind/form/Button.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import type { FC, HTMLProps, PropsWithChildren } from 'react';
+import type { HTMLProps, PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
 import type { LinkProps } from 'react-router';
 import { Link } from 'react-router';
 import type { Size } from '../types';
@@ -17,7 +18,7 @@ export type ButtonProps = PropsWithChildren<{
   solid?: boolean;
 } & (RegularButtonProps | LinkButtonProps)>;
 
-export const Button: FC<ButtonProps> = ({
+export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({
   children,
   className,
   disabled,
@@ -27,13 +28,14 @@ export const Button: FC<ButtonProps> = ({
   solid = false,
   type: providedType = 'button',
   ...rest
-}) => {
+}, ref) => {
   const Tag = 'to' in rest ? Link : 'button';
   const type = Tag === Link ? undefined : providedType;
 
   return (
-    // @ts-expect-error We are explicitly checking for the `to` prop before using Link
     <Tag
+      // @ts-expect-error The dual nature of this component makes properly typing the ref a bit complex
+      ref={ref}
       className={clsx(
         {
           'tw:inline-flex': inline,
@@ -90,4 +92,4 @@ export const Button: FC<ButtonProps> = ({
       {children}
     </Tag>
   );
-};
+});

src/tailwind/form/CloseButton.tsx

@@ -1,16 +1,21 @@
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import clsx from 'clsx';
-import type { FC, HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
+import { forwardRef } from 'react';
 
 export type CloseButtonProps = {
   label?: string;
   onClick?: HTMLProps<HTMLButtonElement>['onClick'];
   className?: string;
 };
 
-export const CloseButton: FC<CloseButtonProps> = ({ onClick, className, label = 'Close' }) => (
+export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>((
+  { onClick, className, label = 'Close' },
+  ref,
+) => (
   <button
+    ref={ref}
     type="button"
     onClick={onClick}
     className={clsx(
@@ -22,4 +27,4 @@ export const CloseButton: FC<CloseButtonProps> = ({ onClick, className, label =
   >
     <FontAwesomeIcon icon={faClose} size="xl" />
   </button>
-);
+));

src/tailwind/navigation/LinkButton.tsx

@@ -1,13 +1,17 @@
 import clsx from 'clsx';
-import type { FC, HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
+import { forwardRef } from 'react';
 import type { Size } from '../types';
 
 export type LinkButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
   size?: Size;
   type?: HTMLButtonElement['type'];
 };
 
-export const LinkButton: FC<LinkButtonProps> = ({ className, disabled, size = 'md', type = 'button', ...rest }) => (
+export const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>((
+  { className, disabled, size = 'md', type = 'button', ...rest },
+  ref,
+) => (
   <button
     className={clsx(
       'tw:inline-flex tw:rounded-md tw:focus-ring',
@@ -24,5 +28,6 @@ export const LinkButton: FC<LinkButtonProps> = ({ className, disabled, size = 'm
     disabled={disabled}
     type={type}
     {...rest}
+    ref={ref}
   />
-);
+));