@hyphen/hyphen-components 2.25.2 → 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.mdx

@@ -9,12 +9,14 @@ import * as Stories from './Drawer.stories';
 
 A Drawer is a panel that slides in from one edge of the viewport and overlays content on top of the page. It contains information or actions without leaving the context of the original page.
 
-<Canvas withSource="open" of={Stories.BasicUsage} />
+<Canvas withSource="open" of={Stories.UncontrolledWithProvider} />
 
 ## Usage Guidelines
 
 - Use the drawer as way to achieve progressive disclosure, to reveal relevant information at the appropriate time.
-- The Drawer visibility is controlled via the `isOpen` prop, and is hidden by default. To handle closing the Drawer, provide an `onDismiss` callback that will be called when the user clicks the Overlay or Esc keyboard key.
+- The Drawer can be both uncontrolled and controlled. The uncontrolled Drawer is managed by the component itself, while the controlled Drawer is managed by the consuming component.
+  - For an uncontrolled Drawer, use the `DrawerProvider` to manage the Drawer's visibility. You can set a default `defaultIsOpen` value to determine if the Drawer is open by default.
+  - For a controlled Drawer, omit the `DrawerProvider` as visibility is controlled via the `isOpen` prop. To handle closing the Drawer, provide an `onDismiss` callback that will be called when the user clicks the Overlay or Esc keyboard key.
 - When a Drawer is open, the main body is scroll-locked by default.
 - Avoid nesting Drawers to prevent usability issues.
 - The button that triggers the drawer opening should be in close proximity to the Drawer itself.
@@ -36,10 +38,11 @@ Drawers are good for short pieces of content that are related to the main screen
 
 ## Accessibility
 
-- Use the `ariaLabel` or `ariaLabelledBy` props to properly label a drawer to provide context for users with assistive technology such as screen readers. If a drawer is announced to the user without a label, it can be confusing and difficult to navigate.
-- When the Drawer is opened, focus is trapped inside the Drawer.
+- Ensure the `ariaLabel` or `ariaLabelledBy` props are provided for accessibility.
+- The drawer traps focus within its content when open, ensuring keyboard navigation is contained.
 - The 'Esc' key will close the Drawer.
 - After the drawer closes, focus is returned to the element that triggered it.
+- The `DrawerCloseButton` component provides a close button with appropriate aria attributes.
 
 ## Props
 
@@ -51,20 +54,6 @@ The Drawer can appear from the right (default), left, top, or bottom of the scre
 
 <Canvas withSource="open" of={Stories.Placement} />
 
-## Drawer Header
-
-A header will be added to the drawer content if `title` is defined, or `closeButton` is `true`. If the content of the drawer is taller than the drawer height, then the content will scroll while the header remains fixed to the top.
-
-<Canvas withSource="open" of={Stories.DrawerHeader} />
-
-## Title and Close Button
-
-<Canvas withSource="open" of={Stories.TitleAndCloseButton} />
-
-## Close Button Only
-
-<Canvas withSource="open" of={Stories.CloseButtonOnly} />
-
 ## Width
 
 Set the width of a Drawer to specific value for a `left` or `right` placement via `width`. The Drawer height will be 100% of the viewport, or if `containerRef` is used, 100% of the container.
@@ -73,11 +62,6 @@ When `placement` is set to `top` or `bottom`, the `width` prop is ignored and th
 
 <Canvas withSource="open" of={Stories.Width} />
 
-## Height
-
-The height of Drawers with a `top` or `bottom` placement is determined by Drawer's contents. The width will be set to 100%.
-
-<Canvas withSource="open" of={Stories.Height} />
 
 ## Hidden Overlay
 
@@ -92,6 +76,7 @@ In cases where content in the drawer is supplemental to content on the main area
 
 <Canvas withSource="open" of={Stories.HiddenOverlay} />
 
+
 ## Initial Focus Ref
 
 By default the first focusable element will receive focus when the drawer opens, but you can provide a ref to focus instead.
@@ -114,4 +99,4 @@ Render the Drawer within a containing div using `containerRef`.
   variant="info"
 />
 
-<Canvas withSource="open" of={Stories.ContainedDrawer} />
+<Canvas withSource="open" of={Stories.ContainedDrawer} />

package/src/components/Drawer/Drawer.module.scss

@@ -45,10 +45,11 @@
     position: absolute;
     box-shadow: var(--drawer-box-shadow, var(--size-box-shadow-xl));
     z-index: var(--size-z-index-drawer);
+    overflow: auto;
 
     &.left {
       left: 0;
-      width: var(--w, 80vw);
+      width: var(--drawer-width, 80vw);
       height: 100%;
 
       :global {
@@ -58,7 +59,7 @@
 
     &.right {
       right: 0;
-      width: var(--w, 80vw);
+      width: var(--drawer-width, 80vw);
       height: 100%;
 
       :global {
@@ -89,7 +90,7 @@
     @media (min-width: $size-breakpoint-tablet) {
       &.right,
       &.left {
-        width: var(--w, var(--size-dimension-8xl));
+        width: var(--drawer-width, var(--size-dimension-8xl));
       }
     }
   }