@spark-web/button 1.0.1 → 1.1.0

package/src/Button.tsx

@@ -1,110 +0,0 @@
-import { Box } from '@spark-web/box';
-import { buildDataAttributes } from '@spark-web/utils/internal';
-import * as React from 'react';
-
-import { resolveButtonChildren } from './resolveButtonChildren';
-import type { CommonButtonProps, NativeButtonProps } from './types';
-import { useButtonStyles } from './useButtonStyles';
-
-// TODO:
-// discuss with design:
-// - sizes
-// - variants
-// implementation details:
-// - handle fragments?
-// - validate children?
-
-export type ButtonProps = CommonButtonProps & {
-  'aria-controls'?: NativeButtonProps['aria-controls'];
-  'aria-describedby'?: NativeButtonProps['aria-describedby'];
-  'aria-expanded'?: NativeButtonProps['aria-expanded'];
-  onClick?: NativeButtonProps['onClick'];
-  size?: CommonButtonProps['size'];
-  type?: 'button' | 'submit' | 'reset';
-  disabled?: boolean;
-};
-
-/**
- * Buttons are used to initialize an action, their label should express what
- * action will occur when the user interacts with it.
- */
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      'aria-controls': ariaControls,
-      'aria-describedby': ariaDescribedBy,
-      'aria-expanded': ariaExpanded,
-      data,
-      disabled = false,
-      id,
-      onClick,
-      prominence = 'high',
-      size = 'medium',
-      tone = 'primary',
-      type = 'button',
-      ...props
-    },
-    ref
-  ) => {
-    const iconOnly = Boolean(props.label);
-    const buttonStyleProps = useButtonStyles({
-      iconOnly,
-      size,
-      tone,
-      prominence,
-    });
-
-    // TODO: add loading state for button
-    const isDisabled = disabled; /* || loading */
-    /**
-     * handle "disabled" behaviour w/o disabling buttons
-     * @see https://axesslab.com/disabled-buttons-suck/
-     */
-    const handleClick = getPreventableClickHandler(onClick, isDisabled);
-
-    return (
-      <Box
-        aria-controls={ariaControls}
-        aria-describedby={ariaDescribedBy}
-        aria-disabled={isDisabled}
-        aria-expanded={ariaExpanded}
-        aria-label={props.label}
-        as="button"
-        id={id}
-        onClick={handleClick}
-        ref={ref}
-        type={type}
-        {...buttonStyleProps}
-        {...(data ? buildDataAttributes(data) : undefined)}
-      >
-        {resolveButtonChildren({
-          ...props,
-          prominence,
-          size,
-          tone,
-        })}
-      </Box>
-    );
-  }
-);
-Button.displayName = 'Buttton';
-
-/**
- * Prevent click events when the component is "disabled".
- * Note: we don't want to actually disable a button element for several reasons.
- * One being because that would prohibit the use of tooltips.
- */
-export function getPreventableClickHandler(
-  onClick: NativeButtonProps['onClick'],
-  disabled: boolean
-) {
-  return function handleClick(
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) {
-    if (disabled) {
-      event.preventDefault();
-    } else {
-      onClick?.(event);
-    }
-  };
-}

package/src/ButtonLink.tsx

@@ -1,56 +0,0 @@
-import { Box } from '@spark-web/box';
-import type { LinkComponentProps } from '@spark-web/link';
-import { useLinkComponent } from '@spark-web/link';
-import { buildDataAttributes } from '@spark-web/utils/internal';
-import { forwardRefWithAs } from '@spark-web/utils/ts';
-
-import { resolveButtonChildren } from './resolveButtonChildren';
-import type { CommonButtonProps } from './types';
-import { useButtonStyles } from './useButtonStyles';
-
-export type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
-
-/** The appearance of a `Button`, with the semantics of a link. */
-export const ButtonLink = forwardRefWithAs<'a', ButtonLinkProps>(
-  (
-    {
-      data,
-      href,
-      id,
-      prominence = 'high',
-      size = 'medium',
-      tone = 'primary',
-      ...props
-    },
-    ref
-  ) => {
-    const LinkComponent = useLinkComponent(ref);
-    const iconOnly = Boolean(props.label);
-    const buttonStyleProps = useButtonStyles({
-      iconOnly,
-      size,
-      tone,
-      prominence,
-    });
-
-    return (
-      <Box
-        aria-label={props.label}
-        as={LinkComponent}
-        asElement="a"
-        id={id}
-        href={href}
-        ref={ref}
-        {...buttonStyleProps}
-        {...(data ? buildDataAttributes(data) : undefined)}
-      >
-        {resolveButtonChildren({
-          ...props,
-          prominence,
-          size,
-          tone,
-        })}
-      </Box>
-    );
-  }
-);

package/src/index.ts

@@ -1,7 +0,0 @@
-export { Button } from './Button';
-export { ButtonLink } from './ButtonLink';
-
-// types
-
-export type { ButtonProps } from './Button';
-export type { ButtonLinkProps } from './ButtonLink';

package/src/resolveButtonChildren.tsx

@@ -1,57 +0,0 @@
-import { Text } from '@spark-web/text';
-import { Children, cloneElement, isValidElement } from 'react';
-
-import type {
-  ButtonChildrenProps,
-  ButtonProminence,
-  ButtonSize,
-  ButtonTone,
-} from './types';
-import { mapTokens, variants } from './utils';
-
-type ResolveButtonChildren = ButtonChildrenProps & {
-  prominence: ButtonProminence;
-  size: ButtonSize;
-  tone: ButtonTone;
-};
-
-export const resolveButtonChildren = ({
-  children,
-  prominence,
-  size,
-  tone,
-}: ResolveButtonChildren): JSX.Element[] => {
-  const variant = variants[prominence][tone];
-
-  return Children.map(children, child => {
-    if (typeof child === 'string') {
-      return (
-        <Text
-          as="span"
-          baseline={false}
-          overflowStrategy="nowrap"
-          weight="strong"
-          size={mapTokens.fontSize[size]}
-          tone={variant?.textTone}
-        >
-          {child}
-        </Text>
-      );
-    }
-
-    if (isValidElement(child)) {
-      return cloneElement(child, {
-        // Dismiss buttons need to be `xxsmall`
-        // For everything else, we force them to be `xsmall`
-        size: child.props.size === 'xxsmall' ? child.props.size : 'xsmall',
-
-        // If the button is low prominence with a decorative tone we want to force
-        // the tone to be the same as the button
-        // We also don't want users to override the tone of the icon inside of the button
-        tone: variant?.textTone,
-      });
-    }
-
-    return null;
-  });
-};

package/src/types.ts

@@ -1,42 +0,0 @@
-import type { BackgroundTone } from '@spark-web/a11y';
-import type { IconProps } from '@spark-web/icon';
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import type { ButtonHTMLAttributes, ReactElement } from 'react';
-
-import type { mapTokens } from './utils';
-
-export type ButtonSize = keyof typeof mapTokens[keyof typeof mapTokens];
-export type ButtonProminence = 'high' | 'low' | 'none';
-export type ButtonTone = BackgroundTone;
-
-type ChildrenWithText = {
-  label?: never;
-  children:
-    | string
-    // Strict tuple type to allow only 1 icon and 1 string
-    | [ReactElement<IconProps>, string]
-    | [string, ReactElement<IconProps>];
-};
-type IconOnly = {
-  label: string;
-  children: ReactElement<IconProps>;
-};
-
-export type ButtonChildrenProps = ChildrenWithText | IconOnly;
-
-export type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-
-export type CommonButtonProps = {
-  data?: DataAttributeMap;
-  id?: string;
-} & ButtonChildrenProps &
-  ButtonStyleProps;
-
-export type ButtonStyleProps = {
-  /** Sets the visual prominence of the button. */
-  prominence?: ButtonProminence;
-  /** Sets the size of the button. */
-  size?: ButtonSize;
-  /** Sets the tone of the button. */
-  tone?: ButtonTone;
-};

package/src/useButtonStyles.ts

@@ -1,96 +0,0 @@
-import { css } from '@emotion/css';
-import { useFocusRing } from '@spark-web/a11y';
-import type { BoxProps } from '@spark-web/box';
-import { useTheme } from '@spark-web/theme';
-
-import type { ButtonProminence, ButtonSize, ButtonTone } from './types';
-import { mapTokens, variants } from './utils';
-
-type UseButtonStylesProps = {
-  iconOnly: boolean;
-  prominence: ButtonProminence;
-  size: ButtonSize;
-  tone: ButtonTone;
-};
-
-export function useButtonStyles({
-  iconOnly,
-  prominence,
-  size,
-  tone,
-}: UseButtonStylesProps) {
-  const theme = useTheme();
-  const focusRingStyles = useFocusRing({ tone });
-  const variant = variants[prominence][tone];
-  const isLarge = size === 'large';
-
-  const transitionColours = {
-    transitionProperty:
-      'color, background-color, border-color, text-decoration-color',
-    transitionTimingFunction: 'cubic-bezier(0.02, 1.505, 0.745, 1.235)',
-    transitionDuration: `${theme.animation.standard.duration}ms`,
-  };
-
-  const buttonStyleProps: Partial<BoxProps> = {
-    alignItems: 'center',
-    background: variant?.background,
-    border: variant?.border,
-    borderWidth: variant?.borderWidth,
-    borderRadius: isLarge ? 'medium' : 'small',
-    cursor: 'pointer',
-    display: 'inline-flex',
-    gap: 'small',
-    height: mapTokens.size[size],
-    justifyContent: 'center',
-    paddingX: iconOnly ? undefined : mapTokens.spacing[size],
-    position: 'relative',
-    width: iconOnly ? mapTokens.size[size] : undefined,
-    // interactions styles
-    className: css({
-      ...transitionColours,
-
-      '&:hover': {
-        borderColor: variant?.borderHover
-          ? theme.border.color[variant.borderHover]
-          : undefined,
-        backgroundColor: variant?.backgroundHover
-          ? theme.backgroundInteractions[variant.backgroundHover]
-          : undefined,
-
-        // Style button text when hovering
-        '> *': {
-          ...transitionColours,
-          color: variant?.textToneHover
-            ? theme.color.foreground[variant.textToneHover]
-            : undefined,
-          stroke: variant?.textToneHover
-            ? theme.color.foreground[variant.textToneHover]
-            : undefined,
-        },
-      },
-      '&:active': {
-        borderColor: variant?.borderActive
-          ? theme.border.color[variant.borderActive]
-          : undefined,
-        backgroundColor: variant?.backgroundActive
-          ? theme.backgroundInteractions[variant?.backgroundActive]
-          : undefined,
-        transform: 'scale(0.98)',
-
-        // Style button text when it's active
-        '> *': {
-          ...transitionColours,
-          color: variant?.textToneActive
-            ? theme.color.foreground[variant.textToneActive]
-            : undefined,
-          stroke: variant?.textToneActive
-            ? theme.color.foreground[variant.textToneActive]
-            : undefined,
-        },
-      },
-      ':focus': focusRingStyles,
-    }),
-  };
-
-  return buttonStyleProps;
-}

package/src/utils.ts

@@ -1,170 +0,0 @@
-import type { BoxProps } from '@spark-web/box';
-import type { ForegroundTone } from '@spark-web/text';
-import type { BrighteTheme } from '@spark-web/theme';
-
-import type { ButtonProminence, ButtonTone } from './types';
-
-type ButtonStyles = {
-  background: BoxProps['background'];
-  border?: BoxProps['border'];
-  borderWidth?: BoxProps['borderWidth'];
-  textTone?: ForegroundTone;
-  // Hover
-  backgroundHover: keyof BrighteTheme['backgroundInteractions'];
-  borderHover?: keyof BrighteTheme['border']['color'];
-  textToneHover?: keyof BrighteTheme['color']['foreground'];
-  // Active
-  backgroundActive: keyof BrighteTheme['backgroundInteractions'];
-  borderActive?: keyof BrighteTheme['border']['color'];
-  textToneActive?: keyof BrighteTheme['color']['foreground'];
-};
-
-export const variants: Record<
-  ButtonProminence,
-  Record<ButtonTone, ButtonStyles | undefined>
-> = {
-  high: {
-    primary: {
-      background: 'primary',
-      backgroundHover: 'primaryHover',
-      backgroundActive: 'primaryActive',
-    },
-    secondary: {
-      background: 'secondary',
-      backgroundHover: 'secondaryHover',
-      backgroundActive: 'secondaryActive',
-    },
-    neutral: {
-      background: 'neutral',
-      border: 'field',
-      backgroundHover: 'neutralHover',
-      backgroundActive: 'neutralActive',
-    },
-    positive: {
-      background: 'positive',
-      backgroundHover: 'positiveHover',
-      backgroundActive: 'positiveActive',
-    },
-    critical: {
-      background: 'critical',
-      backgroundHover: 'criticalHover',
-      backgroundActive: 'criticalActive',
-    },
-    caution: undefined,
-    info: undefined,
-  },
-  low: {
-    primary: {
-      background: 'surface',
-      border: 'primary',
-      borderWidth: 'large',
-      textTone: 'primary',
-
-      backgroundHover: 'none',
-      borderHover: 'primaryHover',
-      textToneHover: 'primaryHover',
-
-      backgroundActive: 'none',
-      borderActive: 'primaryActive',
-      textToneActive: 'primaryActive',
-    },
-    secondary: {
-      background: 'surface',
-      border: 'secondary',
-      borderWidth: 'large',
-      textTone: 'secondary',
-
-      backgroundHover: 'none',
-      borderHover: 'secondaryHover',
-      textToneHover: 'secondaryHover',
-
-      backgroundActive: 'none',
-      borderActive: 'secondaryActive',
-      textToneActive: 'secondaryActive',
-    },
-    neutral: {
-      background: 'neutralLow',
-      backgroundHover: 'neutralLowHover',
-      backgroundActive: 'neutralLowActive',
-    },
-    positive: {
-      background: 'positiveLow',
-      backgroundHover: 'positiveLowHover',
-      backgroundActive: 'positiveLowActive',
-    },
-    caution: {
-      background: 'cautionLow',
-      backgroundHover: 'cautionLowHover',
-      backgroundActive: 'cautionLowActive',
-    },
-    critical: {
-      background: 'criticalLow',
-      backgroundHover: 'criticalLowHover',
-      backgroundActive: 'criticalLowActive',
-    },
-    info: {
-      background: 'infoLow',
-      backgroundHover: 'infoLowHover',
-      backgroundActive: 'infoLowActive',
-    },
-  },
-  none: {
-    primary: {
-      background: 'surface',
-      textTone: 'primaryActive',
-      backgroundHover: 'primaryLowHover',
-      backgroundActive: 'primaryLowActive',
-    },
-    secondary: {
-      background: 'surface',
-      textTone: 'secondaryActive',
-      backgroundHover: 'secondaryLowHover',
-      backgroundActive: 'secondaryLowActive',
-    },
-    neutral: {
-      background: 'surface',
-      textTone: 'neutral',
-      backgroundHover: 'neutralLowHover',
-      backgroundActive: 'neutralLowActive',
-    },
-    positive: {
-      background: 'surface',
-      textTone: 'positive',
-      backgroundHover: 'positiveLowHover',
-      backgroundActive: 'positiveLowActive',
-    },
-    caution: {
-      background: 'surface',
-      textTone: 'caution',
-      backgroundHover: 'cautionLowHover',
-      backgroundActive: 'cautionLowActive',
-    },
-    critical: {
-      background: 'surface',
-      textTone: 'critical',
-      backgroundHover: 'criticalLowHover',
-      backgroundActive: 'criticalLowActive',
-    },
-    info: {
-      background: 'surface',
-      textTone: 'info',
-      backgroundHover: 'infoLowHover',
-      backgroundActive: 'infoLowActive',
-    },
-  },
-} as const;
-
-export const mapTokens = {
-  fontSize: {
-    medium: 'small',
-    large: 'standard',
-  },
-  size: {
-    medium: 'medium',
-    large: 'large',
-  },
-  spacing: {
-    medium: 'medium',
-    large: 'xlarge',
-  },
-} as const;