@shopify/polaris/dist/esm/components/Button/Button.js

Shopify’s product component library

import React$1, { useRef, useState, useCallback } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames, variationName } from '../../utilities/css.js';
import { SelectMinor, CaretUpMinor, CaretDownMinor } from '@shopify/polaris-icons';
import { handleMouseUpByBlurring } from '../../utilities/focus.js';
import { Icon as Icon$1 } from '../Icon/Icon.js';
import { Spinner as Spinner$1 } from '../Spinner/Spinner.js';
import { Popover as Popover$1 } from '../Popover/Popover.js';
import { ActionList as ActionList$1 } from '../ActionList/ActionList.js';
import { UnstyledButton as UnstyledButton$1 } from '../UnstyledButton/UnstyledButton.js';
import styles from './Button.scss.js';

const DEFAULT_SIZE = 'medium';

var _ref = /*#__PURE__*/React$1.createElement(Icon$1, {
  source: CaretDownMinor
});

function Button({
  id,
  children,
  url,
  disabled,
  external,
  download,
  submit,
  loading,
  pressed,
  accessibilityLabel,
  role,
  ariaControls,
  ariaExpanded,
  ariaDescribedBy,
  ariaPressed,
  onClick,
  onFocus,
  onBlur,
  onKeyDown,
  onKeyPress,
  onKeyUp,
  onMouseEnter,
  onTouchStart,
  icon,
  primary,
  outline,
  destructive,
  disclosure,
  plain,
  monochrome,
  size = DEFAULT_SIZE,
  textAlign,
  fullWidth,
  connectedDisclosure,
  stretchContent
}) {
  const {
    newDesignLanguage
  } = useFeatures();
  const i18n = useI18n();
  const hasGivenDeprecationWarning = useRef(false);

  if (stretchContent && !hasGivenDeprecationWarning.current) {
    // eslint-disable-next-line no-console
    console.warn('Deprecation: The `stretchContent` prop has been replaced with `textAlign="left"`');
    hasGivenDeprecationWarning.current = true;
  }

  const isDisabled = disabled || loading;
  const className = classNames(styles.Button, newDesignLanguage && styles.newDesignLanguage, primary && styles.primary, outline && styles.outline, destructive && styles.destructive, isDisabled && styles.disabled, loading && styles.loading, plain && styles.plain, pressed && !disabled && !url && styles.pressed, monochrome && styles.monochrome, size && size !== DEFAULT_SIZE && styles[variationName('size', size)], textAlign && styles[variationName('textAlign', textAlign)], fullWidth && styles.fullWidth, icon && children == null && styles.iconOnly, connectedDisclosure && styles.connectedDisclosure, stretchContent && styles.stretchContent);
  const disclosureMarkup = disclosure ? /*#__PURE__*/React$1.createElement("span", {
    className: styles.Icon
  }, /*#__PURE__*/React$1.createElement("div", {
    className: classNames(styles.DisclosureIcon, loading && styles.hidden)
  }, /*#__PURE__*/React$1.createElement(Icon$1, {
    source: loading ? 'placeholder' : getDisclosureIconSource(disclosure)
  }))) : null;
  const iconSource = isIconSource(icon) ? /*#__PURE__*/React$1.createElement(Icon$1, {
    source: loading ? 'placeholder' : icon
  }) : icon;
  const iconMarkup = iconSource ? /*#__PURE__*/React$1.createElement("span", {
    className: classNames(styles.Icon, loading && styles.hidden)
  }, iconSource) : null;
  const childMarkup = children ? /*#__PURE__*/React$1.createElement("span", {
    className: styles.Text
  }, children) : null;
  const spinnerColor = primary || destructive ? 'white' : 'inkLightest';
  const spinnerSVGMarkup = loading ? /*#__PURE__*/React$1.createElement("span", {
    className: styles.Spinner
  }, /*#__PURE__*/React$1.createElement(Spinner$1, {
    size: "small",
    color: spinnerColor,
    accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel')
  })) : null;
  const ariaPressedStatus = pressed !== undefined ? pressed : ariaPressed;
  const [disclosureActive, setDisclosureActive] = useState(false);
  const toggleDisclosureActive = useCallback(() => {
    setDisclosureActive(disclosureActive => !disclosureActive);
  }, []);
  let connectedDisclosureMarkup;

  if (connectedDisclosure) {
    const connectedDisclosureClassName = classNames(styles.Button, primary && styles.primary, outline && styles.outline, size && size !== DEFAULT_SIZE && styles[variationName('size', size)], textAlign && styles[variationName('textAlign', textAlign)], destructive && styles.destructive, connectedDisclosure.disabled && styles.disabled, styles.iconOnly, styles.ConnectedDisclosure, monochrome && styles.monochrome, newDesignLanguage && styles.newDesignLanguage);
    const defaultLabel = i18n.translate('Polaris.Button.connectedDisclosureAccessibilityLabel');
    const {
      disabled: _disabled,
      accessibilityLabel: disclosureLabel = defaultLabel
    } = connectedDisclosure;
    const connectedDisclosureActivator = /*#__PURE__*/React$1.createElement("button", {
      type: "button",
      className: connectedDisclosureClassName,
      disabled: _disabled,
      "aria-label": disclosureLabel,
      "aria-describedby": ariaDescribedBy,
      onClick: toggleDisclosureActive,
      onMouseUp: handleMouseUpByBlurring
    }, /*#__PURE__*/React$1.createElement("span", {
      className: styles.Icon
    }, _ref));
    connectedDisclosureMarkup = /*#__PURE__*/React$1.createElement(Popover$1, {
      active: disclosureActive,
      onClose: toggleDisclosureActive,
      activator: connectedDisclosureActivator,
      preferredAlignment: "right"
    }, /*#__PURE__*/React$1.createElement(ActionList$1, {
      items: connectedDisclosure.actions,
      onActionAnyItem: toggleDisclosureActive
    }));
  }

  const commonProps = {
    id,
    className,
    accessibilityLabel,
    ariaDescribedBy,
    role,
    onClick,
    onFocus,
    onBlur,
    onMouseUp: handleMouseUpByBlurring,
    onMouseEnter,
    onTouchStart
  };
  const linkProps = {
    url,
    external,
    download
  };
  const actionProps = {
    submit,
    disabled: isDisabled,
    loading,
    ariaControls,
    ariaExpanded,
    ariaPressed: ariaPressedStatus,
    onKeyDown,
    onKeyUp,
    onKeyPress
  };
  const buttonMarkup = /*#__PURE__*/React$1.createElement(UnstyledButton$1, Object.assign({}, commonProps, linkProps, actionProps), /*#__PURE__*/React$1.createElement("span", {
    className: styles.Content
  }, spinnerSVGMarkup, iconMarkup, childMarkup, disclosureMarkup));
  return connectedDisclosureMarkup ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.ConnectedDisclosureWrapper
  }, buttonMarkup, connectedDisclosureMarkup) : buttonMarkup;
}

function isIconSource(x) {
  return typeof x === 'string' || typeof x === 'object' && x.body || typeof x === 'function';
}

function getDisclosureIconSource(disclosure) {
  if (disclosure === 'select') {
    return SelectMinor;
  }

  return disclosure === 'up' ? CaretUpMinor : CaretDownMinor;
}

export { Button };