@atlaskit/atlassian-navigation/dist/es2019/components/PrimaryButton/index.js

A horizontal navigation component for Atlassian apps.

import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { forwardRef } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import Button from '@atlaskit/button/custom-theme-button';
import Tooltip from '@atlaskit/tooltip';
import { useTheme } from '../../theme';
import { getPrimaryButtonTheme } from './styles';
const VAR_BUTTON_SELECTED_COLOR = '--button-selected-color';
const VAR_BUTTON_SELECTED_BORDER_COLOR = '--button-selected-border-color';
const buttonBaseStyles = css({
  display: 'flex',
  height: '100%',
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column'
});
const buttonNoOpStyle = css({
  '--noop': 1
});
const buttonHighlightedStyles = css({
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&& > *': {
    color: `var(${VAR_BUTTON_SELECTED_COLOR})`
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&:after': {
    height: 3,
    position: 'absolute',
    backgroundColor: `var(${VAR_BUTTON_SELECTED_BORDER_COLOR})`,
    borderStartEndRadius: "var(--ds-radius-xsmall, 1px)",
    borderStartStartRadius: "var(--ds-radius-xsmall, 1px)",
    content: '""',
    insetBlockEnd: 0,
    insetInlineEnd: "var(--ds-space-050, 4px)",
    insetInlineStart: "var(--ds-space-050, 4px)"
  }
});

/**
 * __Primary button__
 *
 * A primary button allows you to add top-level navigation items.
 * Should be passed into `AtlassianNavigation`'s `primaryItems` prop.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#dropdown-menu)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 *
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
export const PrimaryButton = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    children,
    component,
    isHighlighted,
    isLoading,
    isSelected,
    onClick,
    testId,
    theme,
    tooltip,
    shortcut,
    ...rest
  } = props;
  const themeFromContext = useTheme();
  const button = jsx("div", {
    style: {
      [VAR_BUTTON_SELECTED_COLOR]: themeFromContext.mode.primaryButton.selected.color,
      [VAR_BUTTON_SELECTED_BORDER_COLOR]: themeFromContext.mode.primaryButton.selected.borderColor
    },
    css: [buttonBaseStyles, isHighlighted && buttonHighlightedStyles],
    role: "listitem",
    "data-vc": "primary-button"
  }, jsx(Button, _extends({
    appearance: "primary",
    component: component,
    isLoading: isLoading,
    isSelected: isSelected,
    onClick: onClick,
    ref: ref,
    testId: testId
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
    ,
    theme: theme || getPrimaryButtonTheme(themeFromContext),
    css: [buttonNoOpStyle] // Typescript working for css mismatch error
    // These are all explicit, leaving it in just in case
  }, rest), children));
  if (tooltip) {
    return jsx(Tooltip, {
      content: tooltip,
      hideTooltipOnClick: true,
      shortcut: shortcut
    }, button);
  }
  return button;
});