@hyphen/hyphen-components 3.0.0 → 4.0.0

package/src/components/Button/Button.tsx

@@ -1,21 +1,11 @@
 import { BoxShadowSize, IconName, ResponsiveProp } from '../../types';
-import React, {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  FocusEvent,
-  MouseEvent,
-  ReactNode,
-  createElement,
-  forwardRef,
-} from 'react';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import React, { ButtonHTMLAttributes, forwardRef } from 'react';
 
-import { Box } from '../Box/Box';
 import { Icon } from '../Icon/Icon';
 import { Spinner } from '../Spinner/Spinner';
 import classNames from 'classnames';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
-import { getElementType } from '../../lib/getElementType';
-import { handleReactRouterClick } from '../../lib/reactRouterClickHandler';
 import styles from './Button.module.scss';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
@@ -24,9 +14,9 @@ export type ButtonSize = 'sm' | 'md' | 'lg';
 
 export interface BaseButtonProps {
   /**
-   * Contents of the button.
+   * The button element to render as. Useful for when you want to render a Link that looks like a button.
    */
-  children?: ReactNode;
+  asChild?: boolean;
   /**
    * Additional ClassNames to add to button.
    */
@@ -36,116 +26,54 @@ export interface BaseButtonProps {
    */
   fullWidth?: boolean;
   /**
-   * Name of the icon to include before the button text
+   * Icon displayed before the button label
    */
   iconPrefix?: IconName;
   /**
-   * Name of the icon to include after the button text
+   * Icon displayed after the button label
    */
   iconSuffix?: IconName;
   /**
-   * A unique identifier for the button.
-   */
-  id?: string;
-  /**
-   * URL to navigate to when clicked. Passing this attribute automatically
-   * renders an anchor <a> tag, NOT a <button> element.
-   */
-  href?: string;
-  /**
-   * Disables the button, making it inoperable.
+   * Disables the button
    */
   isDisabled?: boolean;
   /**
-   * Replaces the button text with a loading indicator and disables the button.
+   * Displays a loading spinner and disables the button
    */
   isLoading?: boolean;
   /**
-   * Prop reserved for when component is wrapped by `<Link>` from react-router.
-   */
-  navigate?: () => void;
-  /**
-   * Callback when Button is pressed.
-   */
-  onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-  /**
-   * Callback when focus leaves Button.
-   */
-  onBlur?: (event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-  /**
-   * Callback when Button receives focus.
-   */
-  onFocus?: (event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-  /**
-   * The size of the drop shadow applied to the Box
+   * Size of the drop shadow applied to the Box
    */
   shadow?: BoxShadowSize | ResponsiveProp<BoxShadowSize>;
   /**
-   * Specify the tabIndex of the button.
-   */
-  tabIndex?: number;
-  /**
-   * Useful when using button as an anchor tag.
-   */
-  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-  /**
-   * The size of the button.
+   * Size of the button.
    */
   size?: ButtonSize | ResponsiveProp<ButtonSize>;
   /**
-   * The color variant of the button
+   * Visual variant of the button
    */
   variant?: ButtonVariant;
-  /**
-   * ref - currently cannot be typed due to limitations of using the `as` prop
-   */
 }
 
-export type AnchorButtonProps = { as: 'a' } & BaseButtonProps &
-  Omit<
-    React.DetailedHTMLProps<
-      AnchorHTMLAttributes<HTMLAnchorElement>,
-      HTMLAnchorElement
-    >,
-    'ref'
-  >;
-
-export type NormalButtonProps = { as?: 'button' } & BaseButtonProps &
-  Omit<
-    React.DetailedHTMLProps<
-      ButtonHTMLAttributes<HTMLButtonElement>,
-      HTMLButtonElement
-    >,
-    'ref'
-  >;
+export type ButtonMergedProps = BaseButtonProps &
+  ButtonHTMLAttributes<HTMLButtonElement>;
 
-export type ButtonProps = NormalButtonProps | AnchorButtonProps;
-
-export const Button = forwardRef<
-  HTMLAnchorElement | HTMLButtonElement,
-  ButtonProps
->(
+export const Button = forwardRef<HTMLButtonElement, ButtonMergedProps>(
   (
     {
-      children = undefined,
-      as = 'button',
-      className = '',
-      fullWidth = false,
-      id = undefined,
-      href = undefined,
-      iconPrefix = undefined,
-      iconSuffix = undefined,
-      isDisabled = false,
-      isLoading = false,
-      navigate = undefined,
-      onClick = undefined,
-      onFocus = undefined,
-      onBlur = undefined,
-      shadow = undefined,
+      asChild,
+      children,
+      className,
+      fullWidth,
+      iconPrefix,
+      iconSuffix,
+      isDisabled,
+      isLoading,
+      onClick,
+      onBlur,
+      onFocus,
+      shadow,
       size = 'md',
-      tabIndex = undefined,
-      target = undefined,
-      type = undefined,
       variant = 'primary',
       ...restProps
     },
@@ -153,9 +81,9 @@ export const Button = forwardRef<
   ) => {
     const disabled = isLoading || isDisabled;
 
-    const responsiveClasses = generateResponsiveClasses('size', size).map(
-      (c) => styles[c]
-    );
+    const responsiveClasses = generateResponsiveClasses('size', size)
+      .map((c) => styles[c])
+      .filter(Boolean);
 
     const buttonClasses = classNames(
       'hyphen-components__variables__form-control',
@@ -170,83 +98,57 @@ export const Button = forwardRef<
       }
     );
 
-    const handleClick = handleReactRouterClick;
-
-    const handleFocus = (
-      event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>
-    ) => {
-      if (onFocus) onFocus(event);
-    };
-
-    const handleBlur = (
-      event: FocusEvent<HTMLButtonElement | HTMLAnchorElement>
-    ) => {
-      if (onBlur) onBlur(event);
-    };
-
-    const buttonContent =
-      iconPrefix || iconSuffix ? (
-        <Box display="inline-flex" direction="row" alignItems="center" gap="md">
-          {isLoading && <Spinner className={styles['spinner-wrapper']} />}
-          {iconPrefix && (
-            <Icon
-              className={styles.label}
-              name={iconPrefix}
-              aria-hidden="true"
-              focusable="false"
-              data-testid="prefixIcon"
-              size={size === 'md' ? 'sm' : size}
-            />
-          )}
-          {children && <span className={styles.label}>{children}</span>}
-          {iconSuffix && (
-            <Icon
-              className={styles.label}
-              name={iconSuffix}
-              aria-hidden="true"
-              focusable="false"
-              data-testid="suffixIcon"
-              size={size === 'md' ? 'sm' : size}
-            />
-          )}
-        </Box>
-      ) : (
-        <>
-          {isLoading && <Spinner className={styles['spinner-wrapper']} />}
-          {(() => {
-            if (children) {
-              return <span className={styles.label}>{children}</span>;
-            }
-            return null;
-          })()}
-        </>
-      );
-
-    const buttonElement = getElementType(Button, { as });
-
-    return createElement(
-      buttonElement,
-      {
-        ['aria-disabled']: disabled,
-        id,
-        href,
-        className: buttonClasses,
-        disabled,
-        target: as === 'a' && href ? target : null,
-        rel:
-          as === 'a' && href && target === '_blank'
-            ? 'noopener noreferrer'
-            : null,
-        onBlur: handleBlur,
-        onClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>
-          handleClick(event, onClick, target, navigate),
-        onFocus: handleFocus,
-        ref,
-        type: type || (as !== 'a' && !href ? 'button' : undefined),
-        tabIndex,
-        ...restProps,
-      },
-      buttonContent
+    const handleClick = !disabled ? onClick : undefined;
+    const handleBlur = !disabled ? onBlur : undefined;
+    const handleFocus = !disabled ? onFocus : undefined;
+
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+      <Comp
+        {...(disabled && { 'aria-disabled': true })}
+        disabled={disabled}
+        className={buttonClasses}
+        onClick={handleClick}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        ref={ref}
+        {...restProps}
+      >
+        {isLoading && <Spinner className={styles['spinner-wrapper']} />}
+        {iconPrefix && (
+          <Icon
+            className={styles.label}
+            name={iconPrefix}
+            aria-hidden="true"
+            focusable="false"
+            data-testid="prefixIcon"
+            size={size === 'md' ? 'sm' : size}
+          />
+        )}
+        {children && (
+          <Slottable>
+            {asChild ? (
+              children
+            ) : (
+              <span className={styles.label}>{children}</span>
+            )}
+          </Slottable>
+        )}
+
+        {iconSuffix && (
+          <Icon
+            className={styles.label}
+            name={iconSuffix}
+            aria-hidden="true"
+            focusable="false"
+            data-testid="suffixIcon"
+            size={size === 'md' ? 'sm' : size}
+          />
+        )}
+      </Comp>
     );
   }
 );
+
+Button.displayName = 'Button';

package/src/components/Drawer/Drawer.tsx

@@ -16,7 +16,7 @@ import classNames from 'classnames';
 import { DimensionSize, CssDimensionValue } from '../../types';
 import { Box, BoxProps } from '../Box/Box';
 import styles from './Drawer.module.scss';
-import { Button } from '../Button/Button';
+import { Button, ButtonMergedProps } from '../Button/Button';
 
 interface DrawerContextProps {
   open: boolean;
@@ -354,18 +354,14 @@ const DrawerTitle = React.forwardRef<HTMLDivElement, BoxProps>(
   }
 );
 
-const DrawerCloseButton = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button> & {
-    onClose?: () => void; // Fallback to onClose if provided
-  }
->(({ className, onClick, onClose, ...props }, ref) => {
+const DrawerCloseButton = forwardRef<
+  HTMLButtonElement,
+  ButtonMergedProps & { onClose?: () => void }
+>(({ className, onClick, onClose, ...rest }, ref) => {
   const context = useContext(DrawerContext);
   const isStandalone = !context;
 
-  const handleClick = (
-    event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
-  ) => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     onClick?.(event);
 
     if (isStandalone) {
@@ -379,7 +375,6 @@ const DrawerCloseButton = React.forwardRef<
 
   return (
     <Button
-      ref={ref}
       variant="tertiary"
       aria-label="close"
       type="button"
@@ -388,7 +383,8 @@ const DrawerCloseButton = React.forwardRef<
       className={classNames('m-left-auto', className)}
       size="sm"
       onClick={handleClick}
-      {...props}
+      ref={ref}
+      {...rest}
     />
   );
 });

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -220,7 +220,7 @@ export const SidebarExample = () => {
                     <DropdownMenuSeparator />
                     <DropdownMenuItem>
                       <a
-                        href="#"
+                        href="https://ux.hyphen.ai"
                         className="display-flex flex-direction-row g-sm align-items-center"
                       >
                         <Icon name="add" color="tertiary" />
@@ -313,14 +313,14 @@ export const SidebarExample = () => {
                       </DropdownMenuTrigger>
                       <DropdownMenuContent side="bottom" align="end">
                         <DropdownMenuItem>
-                          <a href="#">View</a>
+                          <a href="https://ux.hyphen.ai">View</a>
                         </DropdownMenuItem>
                         <DropdownMenuItem>
-                          <a href="#">Share</a>
+                          <a href="https://ux.hyphen.ai">Share</a>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem>
-                          <a href="#">Remove</a>
+                          <a href="https://ux.hyphen.ai">Remove</a>
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>

package/src/lib/tokens.ts

@@ -44,14 +44,17 @@ export const BREAKPOINT_OPTIONS = Object.keys(
 export const BREAKPOINTS = [
   ...Object.entries(designTokens.size.breakpoint),
   ['base', { value: '0' }],
-].map(([name, data]) => {
-  if (typeof data === 'object' && data !== null && 'value' in data) {
-    return {
-      name,
-      minWidth: parseInt(data['value'] as string, 10),
-    };
-  }
-}) as Breakpoint[];
+]
+  .map(([name, data]) => {
+    if (typeof data === 'object' && data !== null && 'value' in data) {
+      return {
+        name,
+        minWidth: parseInt(data['value'] as string, 10),
+      };
+    }
+    return undefined;
+  })
+  .filter((breakpoint): breakpoint is Breakpoint => breakpoint !== undefined);
 
 export const BASE_COLOR_OPTIONS = (
   Object.keys(designTokens.color.base) as ColorName[]