@atlaskit/editor-common/dist/es2019/ui/FloatingToolbar/Button.js

A package that contains common classes and components for editor and renderer

import React from 'react';
import Button from '@atlaskit/button/custom-theme-button';
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
import Tooltip from '@atlaskit/tooltip';
import { getButtonStyles, iconOnlySpacing } from './styles';
export default (({
  title,
  icon,
  iconAfter,
  onClick,
  onKeyDown,
  onMouseEnter,
  onMouseLeave,
  onFocus,
  onBlur,
  selected,
  disabled,
  href,
  target,
  appearance = 'subtle',
  children,
  className,
  tooltipContent,
  testId,
  hideTooltipOnClick = true,
  ariaHasPopup,
  tabIndex,
  areaControls,
  ariaLabel,
  isRadioButton
}) => {
  // Check if there's only an icon and add additional styles
  const iconOnly = (icon || iconAfter) && !children;
  const customSpacing = iconOnly ? iconOnlySpacing : {};
  const isButtonPressed = ariaHasPopup ? undefined : selected;
  const ariaChecked = isRadioButton ? isButtonPressed : undefined;
  const ariaCheckedWithFF = getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaChecked : undefined;
  const ariaPressed = isRadioButton ? undefined : isButtonPressed;
  const ariaPressedWithFF = getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo') ? ariaPressed : isButtonPressed;
  return /*#__PURE__*/React.createElement(Tooltip, {
    content: tooltipContent || title,
    hideTooltipOnClick: hideTooltipOnClick,
    position: "top"
  }, /*#__PURE__*/React.createElement("div", {
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  }, /*#__PURE__*/React.createElement(Button, {
    className: className,
    theme: (adgTheme, themeProps) => {
      const {
        buttonStyles,
        ...rest
      } = adgTheme(themeProps);
      return {
        buttonStyles: {
          ...buttonStyles,
          ...customSpacing,
          ...(appearance === 'danger' && getButtonStyles({
            appearance,
            state: themeProps.state,
            mode: themeProps.mode
          }))
        },
        ...rest
      };
    },
    "aria-label": ariaLabel || title,
    "aria-pressed": ariaPressedWithFF,
    "aria-checked": ariaCheckedWithFF,
    role: isRadioButton ? 'radio' : undefined,
    "aria-expanded": ariaHasPopup ? selected : undefined,
    "aria-controls": ariaHasPopup ? areaControls : undefined,
    spacing: 'compact',
    href: href,
    target: target,
    appearance: appearance,
    "aria-haspopup": ariaHasPopup,
    iconBefore: icon || undefined,
    iconAfter: iconAfter,
    onClick: onClick,
    onKeyDown: onKeyDown,
    isSelected: selected,
    isDisabled: disabled,
    testId: testId,
    onFocus: onFocus,
    onBlur: onBlur
    // @ts-ignore
    // tabIndex set as 0 by default in the design system  ButtonBase component
    // this is not expected for all buttons, we have to use tabIndex={null} for some cases
    // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
    ,
    tabIndex: tabIndex
  }, children)));
});