@shohojdhara/atomix 0.3.13 → 0.3.15

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Button } from './Button';
+import React from 'react';
+
+expect.extend(toHaveNoViolations);
+
+// Mock AtomixGlass component
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+    AtomixGlass: ({ children, ...props }: any) => (
+        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+            {children}
+        </div>
+    ),
+}));
+
+describe('Button Component', () => {
+    it('renders correctly with label', () => {
+        render(<Button label="Click Me" />);
+        expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+    });
+
+    it('renders correctly with children', () => {
+        render(<Button>Click Me</Button>);
+        expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+    });
+
+    it('handles onClick event', () => {
+        const handleClick = vi.fn();
+        render(<Button onClick={handleClick}>Click Me</Button>);
+        fireEvent.click(screen.getByRole('button'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not fire onClick when disabled', () => {
+        const handleClick = vi.fn();
+        render(<Button disabled onClick={handleClick}>Click Me</Button>);
+        const button = screen.getByRole('button');
+        expect(button).toBeDisabled();
+        fireEvent.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('renders loading state correctly', () => {
+        render(<Button loading>Submit</Button>);
+        const button = screen.getByRole('button');
+        // It should be disabled or aria-disabled
+        expect(button).toHaveAttribute('aria-busy', 'true');
+        // Check for spinner (implementation detail: spinner usually has specific class or role)
+        // Based on Button.tsx: <span className="...spinner...">...</span>
+        // Let's look for the spinner component or class if we can't find by role
+        // Or check if text is still there.
+        expect(screen.getByText('Submit')).toBeInTheDocument();
+    });
+
+    it('replaces text with loadingText when loading', () => {
+        render(<Button loading loadingText="Processing...">Submit</Button>);
+        expect(screen.queryByText('Submit')).not.toBeInTheDocument();
+        expect(screen.getByText('Processing...')).toBeInTheDocument();
+    });
+
+    it('renders as a link when href is provided', () => {
+        render(<Button href="/home">Home</Button>);
+        const link = screen.getByRole('link', { name: /home/i });
+        expect(link).toHaveAttribute('href', '/home');
+    });
+
+    it('renders as disabled link when disabled and href provided', () => {
+        // Current implementation might be buggy here, let's see
+        render(<Button href="/home" disabled>Home</Button>);
+        const link = screen.queryByRole('link');
+        const button = screen.queryByRole('button');
+
+        // If it renders as button when disabled (which logic suggested), then:
+        if (button) {
+             expect(button).toBeDisabled();
+        } else if (link) {
+             expect(link).toHaveAttribute('aria-disabled', 'true');
+             // Should not navigate
+        }
+    });
+
+    it('forwards ref', () => {
+        const ref = React.createRef<HTMLButtonElement>();
+        render(<Button ref={ref}>Ref Button</Button>);
+        expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it('handles iconOnly correctly with aria-label', () => {
+        render(<Button iconOnly icon={<span>Icon</span>} aria-label="Icon Button" />);
+        expect(screen.getByLabelText('Icon Button')).toBeInTheDocument();
+    });
+
+    it('does not render [object Object] as aria-label when children is an element', () => {
+        const { container } = render(<Button iconOnly icon={<span>Icon</span>}><span>Text</span></Button>);
+        const button = screen.getByRole('button');
+        // aria-label should probably be undefined or empty, or extracted text, but definitely not "[object Object]"
+        expect(button.getAttribute('aria-label')).not.toBe('[object Object]');
+    });
+
+    it('should have no accessibility violations', async () => {
+        const { container } = render(<Button>Accessible Button</Button>);
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+    });
+});

package/src/components/Button/Button.tsx

@@ -1,5 +1,4 @@
 import React, { ElementType, forwardRef, useCallback } from 'react';
-import { useButton } from '../../lib/composables/useButton';
 import { ButtonProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { Spinner } from '../Spinner/Spinner';
@@ -46,10 +45,10 @@ export const Button = React.memo(
         onHover,
         onFocus,
         onBlur,
-        ariaLabel,
-        ariaDescribedBy,
-        ariaExpanded,
-        ariaControls,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        'aria-expanded': ariaExpanded,
+        'aria-controls': ariaControls,
         tabIndex,
         style,
         LinkComponent,
@@ -60,24 +59,14 @@ export const Button = React.memo(
       const isDisabled = disabled || loading;
 
       // Determine if we should render as a link
+      // If disabled, we still check href, but we might want to render as button or anchor with aria-disabled
+      // The previous logic was Boolean(href && !isDisabled). This meant if disabled, it renders as <button>.
+      // This is a safe fallback for disabled links.
       const shouldRenderAsLink = Boolean(href && !isDisabled);
 
       // Resolve icon element - support both icon (ReactNode) and iconName (string)
       const iconElement = iconName ? <Icon name={iconName as PhosphorIconsType} size={iconSize} /> : icon;
 
-      const { generateButtonClass, handleClick } = useButton({
-        variant,
-        size,
-        disabled: isDisabled,
-        rounded,
-        glass,
-        loading,
-        fullWidth,
-        block,
-        active,
-        selected,
-      });
-
       const buttonClass = [
         BUTTON.BASE_CLASS,
         ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant),
@@ -144,6 +133,9 @@ export const Button = React.memo(
       // Determine spinner size based on button size
       const spinnerSize = size === 'sm' ? 'sm' : size === 'lg' ? 'md' : 'sm';
 
+      // Safe Aria Label
+      const safeAriaLabel = ariaLabel || (iconOnly ? (typeof label === 'string' ? label : (typeof children === 'string' ? children : undefined)) : undefined);
+
       // Button content with icon positioning
       const buttonContent = (
         <>
@@ -172,17 +164,14 @@ export const Button = React.memo(
 
       // Button props
       const buttonProps = {
-        ref,
         className: buttonClass,
-        type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
         onClick: handleClickEvent,
         onMouseEnter: onHover ? handleMouseEnter : undefined,
         onFocus: onFocus ? handleFocusEvent : undefined,
         onBlur: onBlur ? handleBlurEvent : undefined,
-        disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
         'aria-disabled': isDisabled,
         'aria-busy': loading,
-        'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
+        'aria-label': safeAriaLabel,
         'aria-describedby': ariaDescribedBy,
         'aria-expanded': ariaExpanded,
         'aria-controls': ariaControls,
@@ -191,60 +180,67 @@ export const Button = React.memo(
         ...props,
       };
 
-      // Default glass props
-      const defaultGlassProps = {
-        displacementScale: 20,
-        blurAmount: 0,
-        saturation: 200,
-        elasticity: 0,
-      };
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      let content: React.ReactElement;
 
       // Render as anchor if href is provided
       if (shouldRenderAsLink) {
-        const { ref: _, ...buttonPropsWithoutRef } = buttonProps;
-        const anchorButtonProps = {
-          ...buttonPropsWithoutRef,
-          type: undefined,
-          disabled: undefined,
-        };
-
         // Use custom LinkComponent if provided (e.g., Next.js Link)
         if (LinkComponent) {
           const LinkComp = LinkComponent as React.ComponentType<any>;
           const linkProps = {
-            ...anchorButtonProps,
-            ref: ref as React.Ref<HTMLAnchorElement>,
+            ...buttonProps,
+            ref: ref as any, // LinkComponent usually forwards ref to anchor
             href,
             target,
             rel: target === '_blank' ? 'noopener noreferrer' : undefined,
           };
 
-          const linkElement = (
+          content = (
             <LinkComp {...linkProps}>
               {buttonContent}
             </LinkComp>
           );
-
-          return glass ? <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass> : linkElement;
+        } else {
+          // Fallback to regular anchor tag
+          content = (
+            <a
+              {...buttonProps}
+              ref={ref as React.Ref<HTMLAnchorElement>}
+              href={href}
+              target={target}
+              rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            >
+              {buttonContent}
+            </a>
+          );
         }
-
-        // Fallback to regular anchor tag
-        const anchorElement = (
-          <a {...anchorButtonProps} ref={ref as React.Ref<HTMLAnchorElement>} href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
+      } else {
+        // Default button rendering
+        content = (
+          <Component
+            {...buttonProps}
+            ref={ref}
+            type={Component === 'button' ? type : undefined}
+            disabled={isDisabled}
+          >
             {buttonContent}
-          </a>
+          </Component>
         );
-
-        return glass ? <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass> : anchorElement;
       }
 
-      // Default button rendering
-      const buttonElement = (
-        <Component {...buttonProps}>{buttonContent}</Component>
-      );
+      if (glass) {
+        // Default glass props
+        const defaultGlassProps = {
+          displacementScale: 20,
+          blurAmount: 0,
+          saturation: 200,
+          elasticity: 0,
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
+      }
 
-      return glass ? <AtomixGlass {...glassProps}>{buttonElement}</AtomixGlass> : buttonElement;
+      return content;
     }
   )
 );