react: adds forwardRef and changes cursor

daniellmiranda · Sep 5, 2023 · affa0ce · affa0ce
1 parent 07f4b2d
commit affa0ce
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,10 +1,13 @@
 # @wolves-league-ui/react
 
-## 1.1.0
-
-### Minor Changes
+## 1.1.1
+### `Button`
+  - Adds `forwardRef`
+  - Changes from `cursor-pointer` to `cursor-default`
 
-- - Removes `button` variant `tertiary`
+## 1.1.0
+### `Button`
+  - Removes `button` variant `tertiary`
   - Adds `button` variants `highlight` and `link`
   - Adds `button` sizes `sm`, `md`, `lg` and `icon`
   - Adds `asChild` prop with RadixUI `Slot`

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wolves-league-ui/react",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "./dist/index.js",
   "module": "dist/index.mjs",
   "types": "./dist/index.d.ts",

diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx
@@ -1,16 +1,16 @@
 import { Slot } from '@radix-ui/react-slot';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { VariantProps, tv } from 'tailwind-variants';
 
 const button = tv({
-  base: 'inline-flex gap-2 px-4 py-2 rounded-lg transition-all ease-in-out border border-transparent font-medium transform active:scale-95 disabled:text-gray400 disabled:border-dashed disabled:border-gray400 disabled:bg-transparent disabled:cursor-not-allowed',
+  base: 'inline-flex gap-2 px-4 py-2 rounded-lg transition-all ease-in-out border border-transparent font-medium transform cursor-default active:scale-95 disabled:text-gray400 disabled:border-dashed disabled:border-gray400 disabled:bg-transparent disabled:cursor-not-allowed',
   variants: {
     variant: {
       primary: 'bg-gray900 text-gray100 hover:bg-gray600',
       secondary:
         'dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-wl700 border-gray900 text-gray900 hover:bg-gray900 hover:text-gray100',
       highlight: 'bg-wl700 text-white hover:bg-wl900',
-      link: 'underline-offset-4 hover:underline',
+      link: 'underline-offset-4 cursor-pointer hover:underline',
     },
     size: {
       sm: 'text-sm',
@@ -29,11 +29,15 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'>, VariantProps<t
   asChild?: boolean;
 }
 
-export function Button({ children, variant, size, asChild = false, ...props }: ButtonProps) {
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp className={button({ variant, size })} {...props}>
-      {children}
-    </Comp>
-  );
-}
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={button({ variant, size })} ref={ref} {...props}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+Button.displayName = 'Button';